У нас в HTML Academy есть курсы для тех, кто никогда не писал код и не знает ни одного тега. Курсы состоят из теории, написанной понятным языком с множеством примеров, и интересных практических заданий. Совсем недавно вышел обновленный формат курсов для новичков. Но давайте обо всём по порядку.

С чего начинать обучение фронтенд-разработке?

Мы всегда рекомендуем начинать освоение новой профессии с прохождения тренажёров. В них вы узнаете базовую теорию и потренируетесь на наглядных задачах. Если понравится и поймёте, что хотите заниматься этим дальше — выберите курс и постепенно повышайте сложность заданий.

Недавно мы обновили курс «Старт в программировании». В нём появилось больше учебных статей и демонстрационных материалов. Мы сделали отдельные мастер-классы в курсе, проходя которые студент ещё лучше усваивает теорию и тренируется на вёрстке учебного проекта.

Подробнее о мастер-классах

Мастер-класс — это новый формат материалов, который мы внедрили в курс «Старт в программировании».

✅ В этом формате гармонично сочетаются общие обучающие статьи, подробные инструкции по определённой теме, демонстрации пошаговых решений, тренажёры и самостоятельное практическое задание.

В мастер-классе вы сразу можете попробовать себя в роли разработчика, освоить базовые навыки и создать свой первый настоящий сайт. Это самый быстрый способ попробовать профессию фронтенд-разработчика и узнать о ней больше, перед тем, как приступать к длительному обучению.

Чтобы лучше понять, что же такое мастер-класс, рассмотрим один из них на примере «Семантической разметки по макету».

Структура мастер-класса

👉 Ознакомительная теория по теме. Что такое разметка и как её сделать по макету, какие есть критерии правильной разметки и что такое семантичность.

👉 Пошаговая инструкция по созданию разметки. Подробная информация о том, как на практике сделать качественную и правильную разметку.

✅ В разделе подробно описано:

  • где и с помощью каких инструментов писать код;

  • общий алгоритм написания кода;

  • какой базовый шаблон разметки существует;

  • как размечать разные элементы страницы и какие теги для этого использовать;

  • примеры эталонной разметки.

👉 Разбор кейса. В демонстрации показано, как опытный разработчик пошагово делает разметку страниц и отдельных компонентов на основе графического макета.

Каждый шаг наполнен комментариями и разбором написанного кода.

👉 Тренажёр по соответствующей теме. В нём сочетается повторение теории и практические задания, которые учат применять новые знания в решении рабочих задач, например, делить страницу сайта на блоки, размечать блоки правильными семантическими тегами и выделять заголовки.

👉 Сравнение решения с эталонным в подробном разборе кода. Это помогает научиться сравнивать, выявлять недочёты и запоминать правильные решения.

👉 Самостоятельное практическое задание. Студент работает над личным проектом курса — лендингом яхт-клуба «Под парусом».

Задача на этом этапе — сделать разметку главной страницы по макету.

В следующих мастер-классах курса работа над этим проектом продолжится — будет задание стилей, добавление декоративных элементов и так далее. В итоге вы целиком сверстаете свой первый лендинг.

Выполненное задание, загруженное в виде архива, проходит автопроверку, и вы получает результат. После чего вы проверяете своё решение по верному примеру и исправляете недочёты.

Особенности нового формата:

  • исчерпывающая и структурированная теория;
  • множество примеров типовых задач из разработки сайта;
  • подробные пошаговые демонстрации, в которых авторы создают разметку, анализируя макет;
  • учебный проект, на котором вы тренируетесь и затем забирает его себе в портфолио;
  • система автопроверок — помогает понять, как успешно студент справился с самостоятельным заданием. Система сравнивает решение студента с авторским.

В итоге вы пройдёте пять шагов мастер-класса и с помощью приобретаемых навыков научитесь решать конкретные задачи из работы фронтендера.

✅ Чему вы научитесь на мастер-классе «Создание семантической разметки по макету»:

  • Понимать, что такое разметка по макету и знать алгоритм её создания;

  • Выделять крупные структурные блоки страницы и смысловые разделы внутри них;

  • Использовать базовый шаблон разметки;

  • Знать основные теги для разметки всех блоков на странице;

  • Делать семантическую разметку по макету;

  • Использовать инструменты проверки валидности (правильности) кода — спецификация и валидатор.

  • Работать с кодом в редакторе кода.

Мастер-классы можно проходить и в составе курса «Старт в программировании», и в рамках подписки на тренажёры.

Начать обучение