Здесь 12 курсов и практикумов по HTML и CSS за 80–650 ₽. Новичкам подойдут 44 видеоурока «С нуля до создания сайта» или курс Андрея Гаврилова. Для работы с макетами выбраны задания на семантику, БЭМ и адаптивные компоненты; для самостоятельной практики — вёрстка восьми сайтов.
Перед выбором определите, что уже получается без подсказки: создать документ, назначить стили, собрать сетку или перенести макет в код. В подборке есть материалы для каждой из этих задач. Не все позиции ограничены двумя технологиями: в общих курсах встречаются JavaScript, Git и инструменты автоматизации, но основная практическая задача выбранных материалов — вёрстка страниц.
Первый сайт: разметка, стили и адаптивность
Для старта собраны три альтернативы. Курс из 44 видеоуроков вводит HTML и CSS через пошаговую сборку сайта. Андрей Гаврилов связывает основы с одностраничным сайтом и медиазапросами. «Профессиональный HTML и CSS, уровень 1» отдельно включает формы, кроссбраузерность и подготовку проекта к публикации.
Выбирайте одну программу по требуемому объёму. После базового блока полезно сверстать небольшую страницу со списком, изображением и формой, затем проверить её на узком экране. Такой результат покажет, какие темы нужно повторить перед переходом к сложному макету.
44 видеоурока ведут от структуры HTML-документа к сборке сайта. Программа включает селекторы, цвета, шрифты, блочную модель, позиционирование и адаптивность. Подходит для первой последовательной практики вёрстки.
Андрей Гаврилов разбирает HTML5 и CSS3 на примере одностраничного сайта. Медиазапросы выделены в отдельный раздел; затем добавлены основы JavaScript и jQuery. Стоимость начального курса — 80 ₽.
Семь модулей охватывают семантику, блочную модель, макеты, формы и кроссбраузерность. Завершающая тема — оптимизация и подготовка проекта к публикации. Вариант для тех, кто хочет пройти весь процесс вёрстки страницы.
Семантика, БЭМ и карточки интерфейса
Эти практикумы рассчитаны на работу с конкретными проблемами разметки. В семантическом материале есть девять кейсов трёх уровней сложности и разборы решений. Практикум по БЭМ учит делить макет на блоки, элементы и модификаторы, а затем использовать компоненты повторно.
Вёрстка карточек выделена отдельно, потому что длина заголовка, размер изображения и управление с клавиатуры меняют поведение компонента. Сначала выполните свой вариант задания, затем сравните его с разбором: так будет видно, где решение зависит от случайного наполнения.
54 страницы теории сопровождаются девятью кейсами: по три на каждом уровне сложности. В разборах решений есть четыре интерактивные демонстрации. Материал посвящён выбору семантической структуры страницы по графическому макету.
Практикум по БЭМ помогает разделять макет на независимые компоненты. После теории идут демонстрационные разборы и девять тренировочных кейсов с решениями. Подойдёт для отработки блоков, элементов и модификаторов.
Десять кейсов посвящены карточкам интерфейса: переполнению текстом, замене изображений из CMS и доступности с клавиатуры. Есть задачи на интеграцию с JavaScript. Полезно, если готовая карточка работает только с одним набором данных.
Сетки, формы и наборы компонентов
У Михаила Непомнящего перечислены Flexbox, Grid, формы, SCSS и полноценный проект по макету. «Верстка-Мастер» даёт последовательную практику на сайте агентства и лендинге приложения. В этих программах можно выбирать раздел под навык, который ещё не закреплён собственной работой.
Bootstrap 5 у Исмаила Усеинова — отдельный путь для знакомства с готовой сеткой и компонентами. Он полезен после основ CSS: тогда проще понимать, что задаёт библиотека и какие стили вы дописываете сами. В программе есть модальные окна, аккордеон, адаптивные изображения и видео.
Михаил Непомнящий объединяет Flexbox, Grid, формы, БЭМ и SCSS с практикой по макету. В программе также есть Bootstrap и основы JavaScript для верстальщика. Итоговый проект использует макет с набором элементов интерфейса.
После основ HTML и CSS предлагается сверстать сайт креативного агентства и лендинг мобильного приложения. Разобраны шапка, форма контактов, подвал и адаптация. Выбирайте для последовательной работы с частями страницы.
Исмаил Усеинов показывает подключение Bootstrap 5, работу с сеткой, модальными окнами и аккордеоном. Отдельные темы — адаптивные изображения и видео, карточки и валидация форм через документацию библиотеки.
Перенос макетов в код и усложнение практики
В курсе Исмаила Усеинова предусмотрена вёрстка восьми сайтов по макетам, а также работа с Git и GitHub. «Введение в HTML5 и CSS3» использует страницы сайта с квартирами и бронированием. Это варианты для тех, кому нужен конкретный набор страниц для самостоятельного воспроизведения.
Продвинутый интенсив объединяет девять двухчасовых вебинаров, сложную вёрстку и автоматизацию. Его стоит выбирать после первого законченного проекта. Если пока затруднения вызывают селекторы или блочная модель, соответствующий раздел начального курса будет полезнее.
Практическая часть включает восемь сайтов по макетам из Figma. Исмаил Усеинов также разбирает Flexbox, Grid, БЭМ, Git и GitHub. Материал подходит для закрепления вёрстки на нескольких проектах вместо одного учебного экрана.
В основе практики — макет сайта с главной страницей, списком квартир, карточкой бронирования, отзывами и разделом о компании. Работа ведётся с HTML5, CSS3 и макетами Photoshop; среди задач указана адаптивность.
Все изображения (4)
Девять вебинаров по два часа посвящены продвинутой вёрстке веб-интерфейсов. Помимо HTML и CSS, программа включает автоматизацию и практику с GitHub. Подойдёт после знакомства с основами и выполнения первого макета.
Практический маршрут
- Пройдите курс HTML и CSS для начинающих или «Веб-Верстальщик: Начало». Соберите первую страницу и проверьте, как она ведёт себя при изменении ширины окна.
- На следующем макете выполните задания по семантической разметке. Затем разберите компоненты по БЭМ. Сначала обозначьте назначение частей страницы, после этого выбирайте имена классов.
- Возьмите практикум по карточным элементам и проверьте свой компонент на длинном тексте, другом изображении и управлении с клавиатуры. Сохраните исправленный вариант для следующего проекта.
- Для нескольких законченных работ выберите курс с восемью макетами. Если нужна библиотека компонентов, добавьте Bootstrap 5; если уже уверенно работаете с макетом — переходите к продвинутому интенсиву.
