Бесплатные курсы по HTML / CSS. Курсы по верстке для начинающих.

Такого еще не было! Топ лучших бесплатных курсов по верстке, основанный нашими читателями!

Делитесь мнением о курсе в комментариях, присылайте ссылки на почту, давайте вместе сделаем лучшие и честные подборки курсов.

🔥 1. Бесплатный курс от Skillbox: Веб-вёрстка для начинающих

Площадка: Skillbox — FREE.

Автор курса: Сергей Корниенко (Frontend team-lead Московской биржи), Максим Васянович (Разработчик-фрилансер).

Требуемый уровень: Курс для начинающих

Количество уроков: 5 модулей (около 50-ти видеороликов, тесты, практические работы).

Сертификат: Нет.

👉 Посмотреть страницу курса и записаться 👈

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

Краткая программа курса:

• Модуль 1: Введение
• Как работают сайты. Верстка. Backend и Frontend
• Возможности HTML, CSS, JS
• Модуль 2: Базовый HTML
• Элементы разметки
• Теги
• Валидность HTML-кода
• Плагины для работы
• Кодстайл HTML
• Модуль 3: Базовый CSS. Часть 1
• Введение в CSS
• Селекторы
• Свойство display
• Размеры, отступы, границы
• Блочная модель
• Модуль 4: Базовый CSS. Часть 2
• Позиционирование
• Стилизация.
• Кодстайл CSS
• Практическая работа
• Модуль 5: Подготовка к верстке
• Форматы изображений
• Figma. Базовые инструменты
• Подключение шрифтов
• Контейнер сайта
• …
• 👉 Посмотреть полную программу и записаться на курс

🔥 2. Бесплатный курс от Skillbox: Веб-вёрстка. Продвинутый уровень

Площадка: Skillbox — FREE.

Автор курса: Сергей Корниенко (Frontend team-lead Московской биржи), Максим Васянович (Разработчик-фрилансер).

Требуемый уровень: Курс для знающих основы верстки

Количество уроков: 5 модулей (около 40-ка видеороликов, тесты, практические работы).

Сертификат: Нет.

👉 Посмотреть страницу курса и записаться 👈

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

Краткая программа курса:

• Модуль 1: Верстка HTML-писем
• Основные правила вёрстки писем
• Основные почтовики для проверки писем
• …
• Модуль 2: SVG
• Как подключать svg на страницу
• Создание svg с нуля, размеры, изменение через CSS, спрайты
• …
• Модуль 3: Анимация на JS
• Анимации на чистом JS. SetInterval, RequestAnimationFrame
• GreenSock. Базовая анимация, управление
• …
• Модуль 4: Оптимизация и процесс загрузки
• Загрузка сайта и метрики
• Скорость загрузки — css, js, шрифты, изображения
• Минификация
• Ускорение доставки — CDN, кеширование, http 2.0
• Lighthouse
• …
• Модуль 5: Отрисовка сайта
• Конвейер пикселей. Парсинг html и css
• Расчет стилей и геометрии, отрисовка, компоновка
• Досрочное вычисление геометрии
• Приемы для улучшения производительности
• … 👉 Посмотреть полную программу и записаться на курс

🔥 3. Бесплатный курс от Нетологии: «Основы вёрстки сайта»

Площадка: Нетология

Автор курса: Владимир Языков (Основатель Useful Web)

Требуемый уровень: Курс для начинающих

Количество уроков: 2 модуля

Сертификат: Выдается сертификат о прохождении курса.

👉 Посмотреть страницу курса и записаться 👈

Хороший курс от Нетологии по базовым аспектам верстки HTML\CSS. В курсе вам расскажут как работает браузер, зачем нужен верстальщик, как пользоваться devtools, познакомят с самыми популярными тегами в HTML и расскажут как стилизовать страницу с помощью CSS.

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

• Модуль 1: Основы HTML + тесты, практические и домашние задания.
• Что такое браузер
• Как работает браузер
• На каком этапе разработки сайта нужен верстальщик
• Консоль разработчика в разных браузерах
• Теги для разметки текста и атрибуты
• Семантика или структура документа
• HTML
• Теги
• Вложенность тегов
• Атрибуты тегов
• Списки и таблицы
• Списки
• Таблицы
• Figure
• Модуль 2: Основы CSS + тесты, практические и домашние задания.
• Селекторы и свойства
• CSS-правило
• Комбинации Селекторов
• Оформление текстовых блоков с помощью CSS
• Селектор класса
• Таблица элементов, изучаемых на занятии
• Основы клиент-серверного взаимодействия
• Backend и Frontend

👉 Посмотреть страницу курса и записаться 👈

🔥 Яндекс Практикум: Курс «Веб‑разработчик»

Площадка: Яндекс Практикум

Требуемый уровень: Курс для новичков

Количество уроков: 77 уроков в интерактивном тренажере.

Сертификат: Нет

Часть полноценного курса от Яндекса — абсолютно бесплатно. Вы познакомитесь с базовыми аспектами верстки и работе с JavaScript.

Бесплатный курс от Хекслет: Основы современной верстки

Площадка: Хекслет

Требуемый уровень: Курс для новичков

Количество уроков: 12 уроков, тесты, упражнения в интерактивном тренажере

Сертификат: Нет

👉 Посмотреть страницу курса и записаться 👈

Хороший курс от Хекслет с теорией и интерактивной практикой прямо в браузере. Изучайте теорию, проверяйте свои знания с помощью тестов и практикуйтесь.

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

• Введение в HTML
• Блочная модель
• Семантический HTML
• Базовая структура HTML документа
• Основы CSS
• Каскадность в CSS
• Chrome DevTools
• Редакторы кода
• Emmet
• Публикация в интернете
• Графические редакторы

Бесплатный курс от itProger: HTML5 для начинающих

Площадка: ItProger

Автор курса: Гоша Дударь

Требуемый уровень: Курс для новичков

Количество уроков: 18 уроков (102 задания)

Сертификат: Нет

👉 Посмотреть страницу курса и записаться 👈

Хороший курс от itProger. Основная цель курса — познакомить учащихся с базовыми аспектами верстки. Вы изучите основы HTML после чего можно перейти на курс по основам CSS — он тоже присутствует у ItProger.

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

1. Введение в HTML
2. Файл index.html.
3. Как создаются сайты? Просмотр кода чужого сайта
4. Комменты в HTML. Мета данные
5. Основные теги для работы с текстом
6. Работа со списками (list)
7. Атрибуты HTML
8. Ссылки, типы ссылок в HTML
9. Работа с изображениями img
10. Таблицы на чистом html
11. Подключение файлов к странице
12. Основы основ: div, span
13. Html forms
14. Поле для ввода текста. Создание buttons
15. Селекторы
16. HTML5 теги
17. Оптимизация страницы под популярные браузеры

👉 Посмотреть страницу курса и записаться 👈

Бесплатный курс от itProger: Уроки CSS для начинающих

Площадка: ItProger

Автор курса: Гоша Дударь

Требуемый уровень: Знание HTML

Количество уроков: 10 уроков (108 заданий)

Сертификат: Нет

👉 Посмотреть страницу курса и записаться 👈

Отличный курс по CSS от itProger. На курсе вас познакомят с основами языка стилей — CSS. Вы познакомитесь с селекторами и сверстаете небольшой сайт.

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

1. Введение в CSS. Что такое CSS
2. способы и форматы подключения CSS
3. выборка элементов
4. Псевдоклассы и псевдоэлементы
5. Работа с фоном с помощью img
6. Стилизация текста
7. Стилизация блоков
8. Позиционирование блоков и элементов
9. Стилизация списков

👉 Посмотреть страницу курса и записаться 👈

Бесплатный курс от itProger: Создание адаптивного сайта

Площадка: ItProger

Автор курса: Гоша Дударь

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

Количество уроков: 4 урока (108 заданий)

Сертификат: Нет

👉 Посмотреть страницу курса и записаться 👈

Небольшой курс от itProger по созданию адаптивности веб страницы с помощью HTML и CSS. Вы узнаете о правилах создания адаптивного контента, познакомитесь c CSS media queries.

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

1. Все об адаптивности
2. Верстка веб сайта
3. Написание стилей
4. Создаем адаптивность сайта

👉 Посмотреть страницу курса и записаться 👈

Бесплатный курс от itProger: Верстка сайта

Площадка: ItProger

Автор курса: Гоша Дударь

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

Количество уроков:11 уроков (108 заданий)

Сертификат: Нет

👉 Посмотреть страницу курса и записаться 👈

Курс в котором будет продемонстрирован полноценный процесс верстки сайта. Для прохождения курса — требуется пройти предыдущие курсы по верстке от автора.

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

1. Основные инструменты
2. Header и Footer
3. Фикс-меню при прокрутке
4. Основа сайта
5. Подвал и виджеты
6. Новая страница
7. Форма обратной связи (PHP, Ajax, jQuery)
8. Страницы популярных ошибок

Бесплатный курс от Code-Basics: HTML для начинающих

Площадка: Code-Basics

Требуемый уровень: Курс для начинающих

Количество уроков: 41 урок + практика

Сертификат: Нет

👉 Посмотреть страницу курса и записаться 👈

Большой курс по верстке с редактором кода прямо в браузере. Обучение построено на теории + практики в интерактивном формате.

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

• HTML разметка, теги и их вложенность
• Текст в HTML, атрибуты
• Параграфы, заголовки, списки
• Начертание текста
• Таблицы
• Объединение ячеек
• Специальные символы HTML
• Форматирование текст
• Вставка кода в HTML
• Работа с медиа
• Базовая структура, мета теги
• link, viewport
• Блочные и строчные элементы
• Формы в HTML
• Поле для ввода текста
• Чекбокс, радиокнопки, textarea
• Списки, отправка различных форм
• Семантическая часть
• Шапка, меню и прочее
• Уникальный контент страницы
• Боковая панель
• Микроразметка
• Ошибки в HTML-разметке

👉 Посмотреть страницу курса и записаться 👈

Бесплатный курс на Stepik: Основы HTML и CSS

Площадка: Stepik

Автор курса: Тимур Гудиев (веб-разработчик)

Требуемый уровень: Курс для начинающих

Количество уроков:10 уроков (34 теста)

Сертификат: Нет

👉 Посмотреть страницу курса и записаться 👈

С помощью этого бесплатного курса вы можете освоить основы HTML\CSS абсолютно бесплатно. Автор курса — опытный разработчик, который объясняет основы верстки доступным языком.

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

1. Основные понятия сети Интернет
2. Структура HTML документа
3. Разметка
4. Медиа
5. Разметка таблиц и списков
6. Формы в html
7. Каскадные таблицы стилей (CSS)
8. Селекторы

Бесплатный курс на Stepik: Веб-разработка для начинающих: HTML и CSS

Площадка: Stepik

Автор курса: ITC

Требуемый уровень: Курс для начинающих

Количество уроков: 45 уроков, тесты, практика, домашние задания

Сертификат: Выдается сертификат о прохождении курса

👉 Посмотреть страницу курса и записаться 👈

С помощью этого курса вы можете освоить основы HTML\CSS абсолютно бесплатно. Автор курса — опытный разработчик, который объясняет основы верстки доступным языком.

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

1. HTML (теги, атрибуты)
2. Особенности HTML
3. Структура HTML
4. Создание веб-страницы
5. Популярные Редакторы кода
6. Элементы и их виды, списки
7. Адреса, ссылки и якоря
8. Таблицы и формы
9. Практика: способы подключение CSS, основной синтаксис
10. Простые и составные селекторы
11. Chromium DevTools
12. Как изучать CSS
13. Текст и шрифт
14. Отображение элемента (display)
15. Блочная модель в CSS, единицы измерения
16. Обтекание элементов (float), Clearfix
17. Позиционирование
18. Flexbox
19. Псевдоклассы и элементы
20. Анимация
21. Медиа запросы
22. Адаптивная сетка
23. CSS-фреймворки
24. Bootstrap 4
25. компоненты
26. сетка
27. Что такое фронтенд и бэкенд
28. Что такое хостинг
29. Деплой сайта
30. Выпускной проект

👉 Посмотреть страницу курса и записаться 👈

Бесплатный курс на Stepik: Сайт на WordPress, Верстка сайта и перенос на CMS

Площадка: Stepik

Автор курса: Исмаил Усеинов itDoctor (веб-разработчик)

Требуемый уровень: Курс для начинающих

Количество уроков: 34 урока (24 теста) + практика

Сертификат: Выдается сертификат о прохождении курса

👉 Посмотреть страницу курса и записаться 👈

С помощью этого бесплатного курса вы можете освоить основы HTML\CSS абсолютно бесплатно. Автор курса — опытный разработчик, который объясняет основы верстки доступным языком.

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

• Верстка страниц из Marsy
• Делаем адаптивность
• Делаем меню сайта на JavaScript
• Установка и посадка страниц на WP
• Темы на WP
• Подключение стилей, скриптов и шрифтов
• CFS повторитель на WP
• Слайдер Swiper.js
• Contact form 7
• Перенос на Хостинг
• Мультиязычность сайта
• Защита от спама: reCAPTCHA
• … Смотрите полную программу — на странице курса

Бесплатный курс от HTMLacademy: Знакомство с фронтендом (тренажер)

Площадка: html academy

Требуемый уровень: Курс для начинающих

Количество уроков: 12 бесплатных уроков с практикой прямо в браузере

Сертификат: Нет

👉 Посмотреть страницу курса и записаться 👈

Бесплатный интерактивный тренажер по HTML \ CSS. Идеальный способ совмещения теории и практики прямо в браузере. Выполняйте задания под пристальным надзором кота Кекса 🙂

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

• 1. Что такое HTML и CSS
• 2. HTML-теги
• 3. Вложенные теги и атрибуты
• 6. Значения CSS-свойств
• 7. Свойства в CSS
• 8. CSS-правила
• 9. Задаём свои стили
• 10. Используем классы
• 11. Переопределение стилей
• 12. Стилизация
• 13. Конспект «Основы HTML и CSS»

Бесплатный курс на Udemy: Основы веб разработки. HTML и CSS

Площадка: Udemy

Автор курса: YouRa Allakhverdov

Требуемый уровень: Курс для начинающих

Количество уроков: 27 лекций

Сертификат: Выдается сертификат о прохождении курса

👉 Посмотреть страницу курса и записаться 👈

Отличный курс по HTML и CSS — доступен бесплатно на Udemy. Вам предстоит сверстать свою первую веб-страницу, познакомиться с основными тегами и элементами, понять как устроен CSS и научиться правильно его применять.

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

• Установка среды разработки
• Первая веб страница
• Знакомство с HTML
• HTML элементы
• Разметка веб-страницы
• Списки
• Web Code Ninja
• Что такое CSS и применение
• Цвета в CSS
• <div>, background, border
• Использование id и class
• Advanced selectors
• devtools
• Отступы: Margin Padding
• Float
• Работа с текстом font-family и font-size

👉 Посмотреть страницу курса и записаться 👈

Бесплатный курс на Udemy: Основы HTML и CSS с нуля

Площадка: Udemy

Автор курса: Denys Mescheryakov

Требуемый уровень: Курс для начинающих

Количество уроков: 38 лекций

Сертификат: Нет

👉 Посмотреть страницу курса и записаться 👈

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

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

• Кто такой фронтенд-разработчик
• Этапы разработки
• Знакомство с html — Теги и атрибуты.
• Создание первой страницы
• Базовыми теги
• Синтаксис CSS.
• Приоритеты
• Псевдоклассы и псевдоэлементы
• Позиционирование
• Flexbox
• Подключение шрифтов
• Верстка шапки и карточек
• Верстка различных разделов
• Шапка и position fixed
• Grid.
• Dev tools
• Grid auto flow, grid auto columns
• Единицы измерения fr

👉 Посмотреть страницу курса и записаться 👈

Бесплатный курс на Udemy: Уроки веб-программирования HTML и CSS | Занятия для детей

Площадка: Udemy

Автор курса: pixel study

Требуемый уровень: Курс для детей

Количество уроков: 7 видеолекций

Сертификат: Нет

👉 Посмотреть страницу курса и записаться 👈

Очень короткий курс предназначенный для детей, цель курса — в сжатые сроки познакомить ребенка с HTML, рассказать как устроена веб-страница и как использовать каскадные таблицы. Бонусом идет короткий видеоролик по созданию полноценного калькулятора на JavaScript.

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

• Установка Brackets и знакомство с HTML.
• Теги, списки и ссылки
• Таблицы и основы CSS
• Адаптивная верстка
• Создаем калькулятор на JS
• jQuery

Бесплатный курс на Udemy: FlexBox верстка (HTML, CSS) — экспресс курс за 30 минут

Площадка: Udemy

Автор курса: Kiryl Drutsko

Требуемый уровень: Знание html, желание разобраться с flexbox

Количество уроков: 8 видеолекций

Сертификат: Нет

👉 Посмотреть страницу курса и записаться 👈

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

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

• Главная ось
• Поперечная ось
• Flex — элемент
• Практика FlexBox на реальном сайте
• Свойство margin
• FlexBox коэффициенты растягивания и сжатия

Бесплатный курс на Udemy: CSS Flexbox — полный курс и практика его использования

Площадка: Udemy

Автор курса: Антон Ларичев

Требуемый уровень: Знание html, желание разобраться с flexbox

Количество уроков: 21 уроков

Сертификат: Нет

👉 Посмотреть страницу курса и записаться 👈

Мы решили добавить еще один хороший курс по flexbox, так как с ним возникает множество проблем у начинающих верстальщиков.

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

• Что такое Flexbox?
• flex-direction
• Flex-wrap
• Порядок элементов
• Flex-flow
• Justify-content
• Align-items
• Align-content
• Align-self
• Выравнивание и центрирование
• Размеры и flex
• Flex-grow, flex-shrink и flex-basis
• Flex-wrap с flex-basis
• Gap row-gap column-gap
• Auto margin

👉 Посмотреть страницу курса и записаться 👈

Бесплатный курс от php.zone: Курс HTML для начинающих

Площадка: php.zone

Автор курса: Артём Ивашкевич (php-разработчик)

Требуемый уровень: Для начинающих

Количество уроков: 12 уроков

Сертификат: Нет

👉 Посмотреть страницу курса и записаться 👈

Небольшой текстовой курс по html и css. Отлично подойдет для начинающих верстальщиков, которые хотят познакомиться с основами верстки.

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

• Создаём свою первую страницу
• Теги
• Теги поисковых систем
• Как делать ссылки в HTML
• Основы CSS
• Таблицы и формы
• Создание сайта и деплой страницы в интернет
• Табличная вёрстка. Прототипы сайта

Бесплатный курс на YouTube: HTML — Полный Курс HTML Для Начинающих (Bogdan Stashchuk)

Площадка: YouTube

Автор курса: Bogdan Stashchuk

Требуемый уровень: Для начинающих

Количество уроков: Один трехчасовой урок

Сертификат: Нет

Трехчасовой урок по HTML. Вы узнаете основы верстки всего за три часа.

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

•  Что такое HTML
•  HTML теги
•  Добавление изображений, заголовков, параграфов и кнопок
•  Bootstrap
•  Создание стилей
•  Добавление меню
•  Добавление логотипа
•  Адаптивность карточек
•  Изменение стилей Bootstrap
•  Добавление favicon

Бесплатный курс на YouTube: Курс HTML & CSS

Площадка: YouTube

Автор курса: Андрей Андриевский

Требуемый уровень: Для начинающих

Количество уроков: 24 урока

Год курса: 2020 г.

Сертификат: Нет

👉 Посмотреть страницу 👈

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

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

• Знакомство с основным каркасом страницы
• header, article, section и др
• Ссылки и изображения
• Создание web формы, верстка таблиц
• Знакомство с CSS, наследования
• Псевдоклассы и псевдоэлементы
• Селекторы
• Reset CSS
• Стили текста, шрифты
• Поля, границы, отступы
• Высота, ширина элементов верстки, скругление углов
• Обтекание элементов, float
• Линейный и Радиальный градиент
• Построение меню
• Преобразования, переходы и анимация
• Работа с формами
• Верстка блоков/элементов
• Flexbox

Бесплатный курс на YouTube: HTML для Начинающих — Практический Курс

Площадка: YouTube

Автор курса: Владилен Минин

Требуемый уровень: Для начинающих

Количество уроков: 1 длительный урок

Год курса: 2021 г.

Сертификат: Нет

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

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

•  Синтаксис
•  Теги HTML и атрибуты
•  Отступы.
•  Параграфы и комментарии
•  VSCode, плагины.
•  DOCTYPE и meta-информация.
•  Кодировки.
•  Списки и атрибуты
•  Таблицы
•  Типы полей ввода.
•  Атрибуты тега form.
•  Деплой на GitHub.

Бесплатный курс на YouTube: Курс HTML/CSS Advanced

Площадка: YouTube

Автор курса: FructCode

Требуемый уровень: Для начинающих

Количество уроков: 22 видео

Год курса: 2021 г.

Сертификат: Нет

👉 Посмотреть страницу 👈

Множество уроков по верстке от FructCode. Курс удобно упакован в плейлист на ютубе. Содержит множество уроков по HTML и CSS. Вы можете изучить базовую верстку сайтов абсолютно бесплатно.

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

• Базовая структура и теги
• Списки: Unordered List и Ordered List
• input, checkbox, radio, slider, textarea, color
• table, th, td, tr, tbody, thead, tfoot
• DIV и SPAN
• main, header, section, aside, footer, article
• CSS
• CSS-селекторы
• CSS псевдоклассы
• DevTools
• margin, padding, box-sizing
• display: block, inline-block, inline, none
• position: absolute, relative, static, fixed, sticky & z-index
• Позиционирование
• CSS Grid

👉 Посмотреть страницу 👈

Бесплатный курс на YouTube: Курс практической верстки

Площадка: YouTube

Автор курса: Алекс Лущенко

Требуемый уровень: Для начинающих

Количество уроков: 57 видео

Год курса: 2022 г.

Сертификат: Нет

👉 Посмотреть страницу 👈

Один из самых больших бесплатных курсов доступных на YouTube. 57 Видео уроков по современной верстке от 2022 года.

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

• Основные теги
• Оформление текста
• Позиционирование элементов, строчные и блочные элементы
• Адаптивные размеры сайта
• Float
• Сайт для генерации паролей на JS
• Адаптация под мобильники
• Добавление карт
• Эффекты наведения
• Работа с модальными окнами
• Display
• Regex
• Position: absolute
• Работа с Animate
• Классы в CSS
• mix-blend-mode
• JS Массивы
• HTML для JavaScript разработчиков
• Float. Flex. Grid.
• Адаптивность
• Gulp
• Заливаем проект
• Форма на Flex
• Выравнивание
• Верстка калькулятора
• Калькулятор на JavaScript.

👉 Посмотреть страницу 👈

Бесплатный курс на YouTube: Основы HTML5. Полный курс

Площадка: YouTube

Автор курса: webDev

Требуемый уровень: Для начинающих

Количество уроков: 1 видео

Год курса: 2020 г.

Сертификат: Нет

Очень больше видео по практической версте с помощью html5