курс
«погружение в вёрстку»

Научитесь верстать сложные веб-страницы при поддержке опытных верстальщиков

  • Объём практики:

    70 часов
  • Начальные требования:

    первокурсник
  • Итоговый уровень:

    стажёр
  • Подходит ли вам курс

    Этот курс подойдёт тем, кто уже знаком c HTML и CSS. В нём мы глубоко погрузимся в возможности этих языков.

  • Ваш уровень после курса

    Когда вы пройдёте курс и завершите все эксперименты с новыми тегами и свойствами, ваш арсенал умений достигнет такого же объёма, как у верстальщика-стажёра. И вы сможете стажироваться в небольшой веб-студии или брать небольшие заказы на фрилансе.

  • Чему вы научитесь:

    • добавлять видео- и аудиозаписи на страницу,
    • подключать красивые шрифты,
    • работать с формами,
    • собирать данные пользователя и отправлять их на обработку,
    • исполнять интересные трюки с селекторами,
    • рисовать с помощью CSS-градиентов (и даже флаги стран),
    • делать симпатичные тени,
    • делать нестандартные раскладки элементов с помощью флексбоксов и гридов,
    • работать с таблицами.

Научитесь верстать сложные компоненты и эффекты

Начать курс

Как проходит обучение

С самого начала мы учим вас работать с живым кодом, решать реальные задачи и перенимать опыт сильных разработчиков

Самостоятельно занимаетесь на платформе HTML Academy

В комфортном для себя ритме обучаетесь на наших тренажёрах. Вся теория объясняется простым языком и тут же закрепляется на практике. Вы пишете код 80% своего времени.

Пример проекта - под парусом

Выполняете учебные проекты

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

Общаетесь в учебном чате

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

Фотография учебного чата
Пример проекта - Blade Agency

Разрабатываете личный проект

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

Участвуете в регулярных живых консультациях с разработчиками-наставниками

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

Привет. У меня последний блок с товарами почему-то выравнивается неправильно, всё перепробовала. Взглянешь?
Да, конечно.
Вопрос к наставнику

Получаете глубокое кодревью личного проекта опытным разработчиком

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

Начать курс

Программа курса

  1. Раздел 1. Обзор продвинутых возможностей HTML

    Вспомним, какие элементы есть в стандарте HTML и как их правильно использовать. Потренируемся вставлять на страницу аудио, видео и векторные изображения, подключать и использовать нестандартные шрифты, а также познакомимся с крутыми возможностями CSS.

  2. Раздел 2. Погружение в формы

    Разберёмся, как работать с формами от простейших возможностей до продвинутых приёмов.

  3. Раздел 3. Погружение в селекторы

    Рассмотрим продвинутые селекторы, такие как :nth-last-of-type или :only-child. Также научимся использовать псевдоэлементы, такие как ::before и ::after.

  4. Раздел 4. Погружение в декоративные эффекты

    Разбираемся с тенями, линейными градиентами и тонкостями оформления текста. Закрепляем полученные знания в мастерской.

  5. Раздел 5. Погружение в техники раскладок

    Погрузимся в основные механизмы создания раскладок: флексбоксы и гриды. Разберём основы и тонкости. Закрепим знания, сверстав несколько раскладок с помощью каждой технологии.

  6. Раздел 6. Работа с таблицами

    Узнаем, из каких тегов состоит таблица, как управлять количеством строк и столбцов, как оформлять таблицы и объединять ячейки.

Загружаем…