10 онлайн-курсов по HTML и CSS для новичков

По данным Хабр Карьера, зарплата веб-разработчиков уровня Junior ― от 51 000 ₽ до 104 000 ₽. А Senior в среднем получает 277 000 ₽. Изучение HTML и CSS — один из способов войти в эту профессию. Но не только: языки пригодятся и редактору, и дизайнеру, и email-маркетологу.

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

Нетология

Сайт: https://netology.ru/programs/frontfree#/

Язык: русский

Кому подойдёт: начинающим разработчикам, которые хотят начать разбираться в Frontend- и Backend-разработке: освоить HTML, CSS и JavaScript. Дизайнерам, контент-менеджерам и интернет-маркетологам, которые хотят научиться работать в коде и верстать сайты.

Срок обучения: хватит 3–4 дней интенсивного обучения. 

Цена: бесплатно.

Чему учат:

• работать с HTML и CSS;
• основам языка JavaScript;
• изменять оформление и стиль блоков сайта;
• основным тегам и атрибутам;
• готовить контент к публикации на сайте.

В курсе 8 практических заданий, каждое занятие — новая тема:

Теги для разметки и атрибуты. Расскажут о тегах для абзацев, цитат, ссылок, картинок. Объяснят, как сделать разметку читабельной. 

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

Селекторы и свойства. Объяснят, как описывать CSS-правила, изменять размер шрифта, его начертание и цвет. 

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

Основы клиент-серверного взаимодействия. Введут в понятие DNS и HTTP, объяснят разницу между backend и frontend.

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

Основы JavaScript. Расскажут, для чего используются функции, что такое API и JSON.

Публикация проекта и разработка. Узнаете, для чего нужен хостинг, разницу между libraries и frameworks.

Весь курс — это видеолекции и презентации, которые преподают Владимир Языков, веб-разработчик, Основатель Useful Web. И Дмитрий Бронских, Full Stack-developer в компании «Ярус».

Fructcode

Сайт: https://fructcode.com/ru/courses/html-and-css-advanced/

Язык: русский

Кому подойдёт: тем, кто хочет разобраться в основах веб-разработки.

Срок обучения: видео на 17 часов.

Цена: доступ по подписке: $7,6 на месяц; $11,6 на полгода; $15,6 на год.

Курс представляет собой видеоуроки, в которых рассказывают об основах HTML и CSS. Программа онлайн обучения разделена на 19 частей, в каждой — несколько видео по 2–10 минут. Первые 11 частей посвящены теории. Остальные — практические задания.

Темы теоретической части:

Базовые HTML и HTML5. О базовой разметке и тегах.

Базовый CSS. О CSS селекторах и псевдоподклассах. Объяснят CSS-свойства Margin, Padding, Box-sizing и свойства display — block, inline, inline-block, none.

Позиционирование CSS Grid и Flexbox. О свойствах grid-template и различных видах позиционирования.

Подключение шрифтов к сайту. Покажут простой и продвинутый способы.

Адаптивная вёрстка. Объяснят единицы измерения: px, проценты, vw, vh.

В практической части вы научитесь:

• работать в Figma;
• создавать header, footer, блок фильмов и сериалов, блок hero;
• адаптировать вёрстку под ПК и смартфоны;
• создавать страницу для просмотра фильмов и авторизации.

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

Хекслет

Сайт: https://ru.hexlet.io/programs/professional-layout

Язык: русский

Кому подойдёт: новичкам, которые приходят в профессию с нуля. Самоучкам, которые не справляются с обучением без преподавателя.

Срок обучения: 5 месяцев.

Цена: 3900 ₽ в месяц.

На курсе дают базу по HTML и CSS, учат верстать адаптивные страницы и работать с препроцессорами, рассказывают о Flex, Sass, Bootstrap.

На курсе 12 модулей и посвящены таким темам:

Основы веб-разработки. Введут в базовую терминологию.

HTML5. Расскажут о разметке веб-страниц и работе со стилями.

CSS. Покажут, как визуально оформлять сайт и сделать анимации интерфейсов.

Адаптивность. Научат создавать страницы, чтобы с ними было одинаково удобно работать на ПК и на смартфонах.

Инфраструктура. Объяснят, как работать с командной строкой, Git, NPM и линтерами.

Инструменты автоматизации Sass, Pug и Gulp. Научат автоматизировать процессы на  HTML и CSS.

За время обучения вы выполните 135 упражнений, пройдете 157 теста и сделаете 2 проекта в портфолио. 

У Хекслет есть еще бесплатные и платные курсы по HTML ― для совсем новичков и для продолжающих.

HTML Academy

Сайт: https://htmlacademy.ru/intensive/htmlcss

Язык: русский.

Кому подойдет: новичкам, которые прошли тренажёры от HTML Academy.

Срок обучения: индивидуальный формат ― от 2 до 4 месяцев, лайт-формат ― в своём темпе. 

Цена: индивидуальный формат ― 8000 ₽ в месяц, лайт формат ― 44 700 ₽ за полный доступ на 2 года.

Курс с лайвами, практикой и ревью кода. Перед тем, как его покупать, лучше пройти тренажёры от академии. 

Курс состоит из 9 частей и защиты диплома. За время обучения вы создадите один проект в портфолио. На курсе рассматривают такие темы:

Разметка. Расскажут о синтаксисе HTML, категории тегов и правила их выкладывания. Познакомят с интерфейсом Figma.

Графика. Объяснят интерфейс Figma подробнее. Научат создавать файловую структуру проектов и выбирать правильный формат файлов.

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

Сетки страниц и компонентов на флексах. Научат анализировать сетки на макетах и расскажут о Flexible box layout — CSS раскладке для создания пользовательских интерфейсов.

Сетки компонентов на гридах. В нём познакомят с Grid Layout — ещё одна CSS раскладка.

Декоративные элементы. Объяснят, как использовать декоративную графику. Научат типографике и визуальному оформлению контента.

Попапы, слайдеры, формы. Покажут, как верстать всплывающие формы и встраивать модальные окна на страницы.

Яндекс Практикум

Сайт: https://practicum.yandex.ru/frontend-developer/

Язык: русский

Кому подойдёт: новичкам, которые хотят стать фронтенд-разработчиками.

Срок обучения: 10 месяцев.

Цена: 120 000 ₽. Можно в кредит на 10 месяцев — 14 000 ₽ в месяц. Для тех, кто не уверен в курсе и выборе профессии, есть бесплатная вводная часть.

Здесь рассказывают об основах и возможностях HTML и CSS, учат работать с макетами и адаптивной вёрсткой, а также вводят в JavaScript и React.

Курс разбит на 9 модулей, по несколько недель каждый. О чём рассказывают:

Вводный бесплатный модуль HTML, CSS, JavaScript. Научат размещать блоки на веб-страницах, менять шрифт и цвета. Расскажут о базовом синтаксисе HTML и CSS, наборе тегов и стилистических правилах.

HTML и CSS: лэйаут, доступность и интерактив. Научат писать код, корректный для браузера и поисковиков. Создадите одностраничный сайт и напишете CSS
для работающего приложения.

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

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

Продвинутый JavaScript. Научат писать модульный код, асинхронности и обмену данными с сервера.

TypeScript и OOП. Научат объектно-ориентированному программированию, основам TypeScript, принципам разработки ПО.

Интерфейсы с использованием React. Познакомят с концепцией React и созданием сложных интерфейсов.

Роутинг и авторизация. Реализуете глобальное состояние, роутинг и авторизацию.

Тестирование React-приложений. Научат ускорять работу React-приложений, тестировать и релизить их на удаленном сервере.

В конце курса у вас будет проектный модуль на реальном проекте, который может пригодится в поиске работы. Также параллельно можно изучать дополнительный модуль «Софт-скиллы разработчика» и «Нейросети для разработчика», подготовка к трудоустройству в течение 1 месяца от карьерного центра, поиск работы с поддержкой HR‑экспертов до 6 месяцев.

Codecademy

Сайт: https://www.codecademy.com/catalog/language/html-css

Язык: английский.

Кому подойдёт: новичкам, которые хотят попробовать веб-разработку. Тем, кто уже знает основы HTML и CSS и хочет прокачать навыки.

Срок обучения: без ограничений.

Цена: обучение доступно по подписке: версия Plus стоит €14,99; версия Pro (помогают подготовиться к собеседованию и найти работу) — €17,99. 

Если вы студент и хотите изучать веб-разработку, можете получить скидку 35% на подписку. Для этого нужно предъявить студенческий.

На Codeacademy есть 13 текстовых курсов, которые разбиты по уровням сложности: для начинающих и мидлов. Также они делятся на платные и бесплатные.   

Бесплатный вводный курс состоит из 6 уроков и рассчитан на 9 часов. Темы курса:

Элементы и структуры HTML. Расскажут об основах кода и стандартах HTML.

Таблицы. Научат представлять информацию в виде таблиц.

Формы. Объяснят, как их создавать и настраивать.

Синтаксис. Расскажут, как писать чистый и понятный код, используя семантические HTML-коды.

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

Udacity

Сайт: https://www.udacity.com/course/intro-to-html-and-css--ud001

Язык: английский.

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

Срок обучения: 3 недели, около 5 часов в неделю.

Цена: бесплатно, нужна регистрация.

Здесь обучают основам HTML и CSS, рассказывают, как использовать код для создания веб-сайтов и работать в редакторах кода.

Курс разделён на 4 урока по несколько видео или текстовых файлов. Темы обучения:

HTML-синтаксис и HTML-теги. Расскажут о древовидной структуре HTML и текстовых редакторах.

Работа с визуальным контентом. Научат добавлять изображения и списки на сайты. Добавлять заголовки, кнопки, структурировать страницы и создавать списки элементов. 

Синтаксис CSS. Объяснят блочную структуру CSS, наборы правил и инструменты разработчика.

Декоративные элементы. Научат стилизовать изображения и страницы, обучат типографике.

Университет Джона Хопкинса на Coursera

Сайт: https://www.coursera.org/specializations/html-css-javascript-for-web-developers#courses

Язык: английский.

Кому подойдет: тем, кто хочет создавать сайты с нуля и работать с последними версиями HTML и CSS.

Срок обучения: 4 недели, 40 часов видео.

Цена: бесплатно, но если нужна обратная связь и диплом ― подписка от $49 в месяц.

Курс по основам веб-разработки с использованием HTML, CSS и JavaScript. После обучения вы научитесь писать программы на JavaScript, работать с HTML и CSS, делать страницы интерактивными и адаптивными.

Обучение разбито на 5 модулей по несколько видео в каждом. Длительность одного модуля — одна неделя. В каждом модуле есть материалы для самостоятельного обучения и тесты. Видеоуроки посвящены таким темам:

Основы HTML5. Расскажут, как правильно изучать программирование. Объяснят основы HTML5: структуру документа, основные и семантические теги.

Основы CSS3. Научат визуальному оформлению страниц, блочной структуре. Помогут создать адаптивный дизайн. 

Создание статичного сайта. Объяснят основы взаимодействия с клиентом через веб-сайт, помогут создать сайт с нуля.

Основы JavaScript. Расскажут о конструкциях языка и типах Javascript. Объяснят объекты, функции, массивы, замыкания и другие понятия.

Использование JavaScript при создании веб-приложений. Научат управлять компонентами веб-страницы с помощью API. Расскажут об Ajax — способе передачи информации на сайты. Объяснят, что такое HTTP и как работать с JSON — текстовым форматом данных.

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

Udemy

Сайт: https://www.udemy.com/course/web-professional-html5/

Язык: русский.

Кому подойдет: новичкам, которые хотят узнать базовую информацию о веб-разработке.

Срок обучения: 11,5 часов.

Цена: €11,99 за весь курс.

Концепции веб-дизайна. Научат размещать текст на изображениях, использовать иконки.

Создание веб-сайта. Разберете этапы создания, адаптировать под мобильную версию.

jQuery. Научитесь подключать и работать с плагином.

Загрузка на сервер. Оптимизируете размер файлов и загрузите их на сервер.

Dидеокурс, в котором закадровый голос объясняет происходящее на экране и рассказывает об основах HTML5 и CSS3.

Курс состоит из 8 разделов, 82 лекций по 7–10 минут каждая. Чему научитесь за это время:

HTML. Научат создавать веб-страницы, добавлять изображения, строить списки. Также объяснят про ссылки.

CSS. Стилизовать веб-страницы, изменять цвета и размеры шрифта, добавлять поле содержимого на веб-страницу.

Udemy: Advanced CSS

Сайт: https://www.udemy.com/course/advanced-css-and-sass/

Язык: английский.

Кому подойдет: тем, кто уже знаком с HTML и CSS и умеет с ними работать.

Срок обучения: 28 часов.

Цена: €129,99.

Курс по продвинутому HTML и Sass. Программа обучения состоит из 10 разделов и 126 лекций. 

Чему учат на лекциях:

Продвинутые HTML и CSS. Расскажут об адаптивных изображениях в HTML и CSS, которые ускоряют загрузку страниц. Научат работать с SVG-изображениями и видео — создавать фоновые видеоэффекты.

CSS-анимации. Объяснят, как работать с ключевыми кадрами, анимацией и красивыми переходами. Расскажут об архитектуре CSS: компонентном дизайне, методологии БЭМ, создании повторно используемого кода.

Макеты Flexbox. Помогут создать гибкий макет с использованием этой технологии.

Макеты CSS Grid. Покажут, как создать проект на грид-раскладке.

Использование Sass в реальных проектах. Расскажут о глобальных переменных, архитектуре CSS и управлении медиа-запросами.

Продвинутый адаптивный дизайн. Научат создавать адаптивные страницы под мобильные устройства и ПК. Расскажут об адаптивных изображениях в HTML и CSS для быстрой загрузки страниц

Экосистема NPM. Объяснят рабочие процессы разработки и процессы построения веб-проектов.

После прохождения курса вы получите сертификат об окончании обучения.

Для тех, кто не хочет проходить курсы

Если не нравятся курсы или проходить их неинтересно, можно изучать HTML и CSS самостоятельно. Есть справочники, в которых собран большой объём информации для обучения.

Webref — полное руководство для тех, кто хочет самостоятельно разобраться в HTML и CSS. Книга рассказывает об основных принципах и этапах веб-разработки: блочных моделях, позиционировании, типографики, фонах и т.д. 

Каждая глава разделена на блоки и содержит примеры с демонстрациями на макетах. В них можно смотреть, как код выглядит в результате, как он описан в HTML и CSS.

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

Самоучитель разделён на 13 глав. В них рассказывается о тегах, структуре документов, шрифтах, якорях, таблицах, списках и т.д. Также на сайте есть справочник по различным HTML-тегам с описанием, зачем их используют. Есть статьи по HTML5.

CSSBook — самоучитель на том же сайте, что и HtmlBook. В нём также есть примеры кода, иллюстрации и задания.

Книга состоит из 22 глав, в которых рассказывают о базовых правилах CSS, селекторах тегов, идентификаторах, псевдоклассах и т.д.

Кроме этого, на сайте есть справочник по CSS и рецепты, в которых собраны готовые ответы на задачи по вёрстке, работе с изображениями, списками. Рецепты построены так: даётся задача — и описывается её решение с примерами.

Но и это не всё — есть полезные статьи по CSS3.

Developer.Mozilla — большое руководство по работе с HTML и CSS для начинающих. Здесь рассказывают о мультимедиа, таблицах, макетах и текстах. Есть информация и по JavaScript.

Минус руководства в том, что с английского на русский его переводило сообщество разработчиков, поэтому некоторые моменты объяснены сложным языком.

W3Schools — библиотека информации по разным языкам программирования, в том числе HTML и CSS. Уроки написаны на английском, но все объяснения подкреплены примерами использования. А в конце объяснения можно поработать с кодом самостоятельно.

В учебнике по HTML собрана информация по тегам, формам, API, графике, ссылкам. Также есть 100 упражнений, которые можно выполнять на сайте и прокачивать навыки.

В справочнике по CSS рассказывают о базовых вещах: шрифты, таблицы, изображения и т.д. Есть материалы для продвинутых разработчиков — о переменных, масках, 2D и 3D графике.

CSS Tricks — это не просто самоучитель, а сборник трюков, фишек и гайдов с подробным описанием всех новых технологий в области HTML/CSS. Книга на английском языке.

На CSS Tricks разные разработчики выкладывают свои методы работы с кодом и рассказывают, как можно сделать красивую форму, список, шрифт и другие элементы. И это не просто текстовые описания — это готовые примеры кода, которые можно копировать и использовать в своих проектах.