ТОП-50 Лучших Курсов по Вёрстке на HTML и CSS для Начинающих

Привет, дружище! ✋

А ты знал, что, по данным сайта TRUD.COM, верстальщики HTML и CSS зарабатывают 50+ тысяч рублей в месяц? Это в полтора раза больше средней зарплаты в России! Даже мой батя, который сутками пашет на заводе и то меньше получает.

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

А ответ прост — с помощью платных и бесплатных курсов по HTML и CSS (вдобавок, думаю, можно припихнуть сюда также JavaScript и PHP).

О них я и расскажу в этой статье.

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

Итак. Без лишних предисловий… Полетели! 🚀

Бесплатные курсы по вёрстке на HTML и CSS —ТОП-30 лучших

№1. «HTML/CSS» от beONmax

Кто проводит: Сергей Никонов, основатель образовательного проекта FructCode, веб-разработчик с 12-летним стажем.

Формат: видеоуроки + интерактивные упражнения + домашние задания.

Сколько длится: 31 видеоурок = 5 часов.

Что ты узнаешь из курса:

1. Какие программы и инструменты надо использовать для вёрстки.
2. Какие теги HTML существуют.
3. Основы синтаксиса CSS.
4. Как создавать меню, хедер, футер, сайдбар и многое другое.

Пройти

🏆 На правах рекламы. Онлайн-курс «Я — Веб-разработчик PRO» от SkillBox [гарантированное трудоустройство]

Стоимость: 304 000 182 400 ₽ по скидке. В рассрочку — от 5 884 ₽/мес. (первый платёж через 6 месяцев).

Получить скидку — жмяк.

Длительность: 2 года.

Документ об окончании: диплом.

Вообще главным возражением при покупке курсов SkillBox является их высокая цена.

Однако, если говорить честно, — она не такая высокая, как кажется. Если ты добросовестно её освоишь, то сможешь претендовать на вакансии с зарплатой от 100-200 тысяч рублей в месяц. То есть при грамотном подходе обучение окупается за 1-2 месяца. И это я не учитываю те заказы на биржах фриланса, которые ты сможешь выполнять уже в первые месяцы курса.

Отзывы о школе

Преподаватели курса:

Даниил Пилипенко

VK, Facebook

• Генеральный директор центра подбора IT-специалистов SymbioWay
• Экс-сотрудник компании «Ютинет.Ру»
• Экс-руководитель отдела разработки ПО в издательстве «Вокруг Света»
• Программист с 15-летним стажем

Егор Яковишен

https://www.facebook.com/yaplusplus

Ведущий Frontend-разработчик в компании Setka.

Василий Грудистов

Портфолио на «Хабр Карьера»

Разработчик с 10-летним стажем. Участвовал в разработке сайтов для ПАО «ВТБ», Samsung, Epson, Teachbase и многих других компаний.

Полный список преподавателей смотри на странице курса.

Другие классные курсы SkillBox по теме:

• «Веб-дизайн с 0 до PRO»
• «Профессия Fullstack-разработчик на Python»
• «PHP-разработчик c 0 до PRO»
• «Профессия Frontend-разработчик c 0 до PRO»
• «Профессия Java-разработчик PRO»
• «Профессия Go-разработчик»
• Свыше 1 000+ бесплатных вебинаров

№2. «Интерактивный курс создания сайтов HTML и CSS с нуля» (с сертификатом об окончании)

Кто проводит: уже упомянутый ранее Сергей Никонов.

Формат: видеоуроки + интерактивные упражнения + домашние задания.

Сколько длится: 6 часов.

Стоимость: часть курса бесплатна, другая часть доступна после оформления недорогой подписки.

Что ты узнаешь из курса:

1. Как пользоваться html-тегами div, span, p, ul, li и другими.
2. Для чего нужен CSS (каскадные таблицы стилей).
3. Как использовать css-свойства margin, position, padding, color, background и другие.
4. Что такое адаптивная вёрстка.
5. Как сделать вёрстку сайта.
6. Как пользоваться инструментами разработчика в браузере Google Chrome.
7. Что такое viewport и как его использовать.
8. Как создать раздел с комментариями на сайте.
9. Как встроить видео в html-страницу.
10. Как изменить вёрстку сайта в браузере.
11. Как связать html-страницы между собой.
12. Как сверстать меню на сайте.

Пройти

№3. «Основы HTML и CSS»

Кто проводит: онлайн-университет интернет-профессий «Нетология».

Формат: онлайн-вебинары 2 раза в неделю.

Сколько длится: 2 недели.

Что ты узнаешь из курса:

1. Как вносить правки в HTML-код страницы и верстать текстовые блоки.
2. Как менять оформление и стиль элементов сайта.
3. Как профессиональные верстальщики работают над проектами.

Пройти

№4. Курсы от HTML Academy

Помню сам проходил эти курсы. Целую неделю по 3-4 часа в день сидел за бесплатными уроками от инструктора Кекса.

Кто проводит: HTML Academy, на мой взгляд, её сайт — лучшее место для обучения основам вёрстки.

Формат: интерактивные уроки с практическими заданиями.

Сколько длится: зависит от твоей скорости и мотивации.

Стоимость: большая часть курсов бесплатна.

Что ты узнаешь из курса:

1. Основы HTML5.
2. Базовое представление о CSS3.
3. Основы JavaScript.
4. Основы PHP.

Пройти

№5. Курсы на Udemy

Кто проводит: разные преподаватели со всего мира.

Формат: видеоуроки + практические задания + тесты.

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

Стоимость: есть бесплатные курсы, есть платные.

Пройти

№6. Курсы на CodeAcademy

Кто проводит: разные преподаватели (в основном на английском языке, поэтому, если у тебя с ним туговато, лучше читай дальше).

Формат: интерактивные уроки, результат виден сразу же прямо в браузере.

Сколько длится: в зависимости от твоих способностей и наличия свободного времени.

Пройти

№7. Бесплатный курс Евгения Попова по HTML для новичков

О нём ходят очень противоречивые слухи. Некоторые говорят, что Евгений обучает людей к чертям устаревшим знаниям. Другие думают, что для ознакомления сойдёт. По мне — курс довольно-таки неплохой, для начинающих в самый раз.

Формат: видеоуроки.

Сколько длится: 33 видеоурока.

Что ты узнаешь из курса:

1. Понятие тега.
2. Как создавать каркас страниц.
3. Как создавать параграфы и заголовки.
4. Как создавать списки.
5. Как создавать атрибуты.
6. Как ставить ссылки.
7. Как делать красивые таблицы.
8. Как красиво оформлять текст.
9. Как создавать поля форм, радиокнопки и чекбоксы.
10. И т. п.

Пройти

№8. Бесплатный курс Евгения Попова по CSS

Формат: 45 видеоуроков.

Сколько длится: всё зависит от твоих сил и скорости.

Что ты узнаешь из курса: 

1. Принципы работы CSS.
2. Как подключать 3 базовых селектора.
3. Что такое групповые селекторы.
4. Что такое селекторы потомков.
5. Что такое псевдоселекторы ссылок.
6. Какие бывают семейства шрифтов.
7. Как выравнивать текст.
8. Как задавать высоту строки.
9. Как делать сокращенную запись.
10. Как делать рамки.
11. Как работать со списками.
12. Что такое наследование.
13. Каскадность и приоритетность.
14. Блочная модель, margin и padding.
15. Ширина и высота блока, выравнивание.
16. Конфликты полей.
17. Блочные и встроенные элементы.
18. Фоновый цвет и изображение.
19. Повтор фонового изображения.
20. Позиционирование фонового изображения.
21. Фиксация фона.
22. Краткая запись фоновых свойств.
23. Как делать таблицы.
24. Как создавать простой каркас на основе float.
25. Что такое чистка обтекания.
26. Колонки одной высоты.
27. Позиционирование.
28. Абсолютное позиционирование.
29. Относительное позиционирование.
30. Фиксированное позиционирование.
31. Z-индексы.
32. Видимость элементов.
33. Максимальная и минимальная ширина сайта.
34. Два способа подключения стилей
35. Что такое наследование ненаследуемых свойств.

Пройти

№9. «HTML для начинающих»

Кто проводит: Артём Ивашкевич, программист компании Lamoda.

Формат: пошаговые статьи-уроки.

Сколько длится: 55 уроков.

Какие уроки есть в курсе:

1. Создаём свою первую HTML-страницу.
2. Теги как основа HTML-страницы.
3. Тег doctype: указываем версию HTML.
4. Из чего должна состоять любая страница в HTML.
5. Заголовок HTML-страницы.
6. Кодировка HTML-страницы.
7. Ключевые слова (кейворды, keywords).
8. Тег description: краткое описание страницы.
9. Комментарии в HTML.
10. Подключение CSS-стилей к HTML.
11. Подключение скриптов JavaScript в HTML.
12. Итог второго уровня курса по HTML.
13. Разметка текста.
14. Делаем абзацы в HTML.
15. Делаем заголовки в HTML.
16. Маркированные списки в HTML.
17. Нумерованный список в HTML: тег ol.
18. Делаем вложенный список в HTML.
19. Выделяем важное жирным шрифтом.
20. Курсив в HTML: теги em и i.
21. Переносы и разделители в HTML: теги br и hr.
22. Используем цитаты в HTML.
23. Верхние и нижние индексы: оформляем формулы.
24. Выводим текст как есть: тег pre.
25. Учимся делать ссылки в HTML.
26. Что такое абсолютные и относительные ссылки.
27. Делаем ссылку на файл.
28. Ссылка с якорем.
29. Всплывающая подсказка для ссылок.
30. Как вставлять картинки в HTML.
31. Делаем картинку ссылкой.
32. Описание картинки в HTML.
33. Создаём таблицу в HTML: тег table.
34. Делаем границы для таблицы в HTML.
35. Горизонтальные и вертикальные границы в таблице HTML.
36. Отступы в таблицах.
37. Название таблицы в HTML.
38. Ячейки-заголовки в таблице HTML.
39. Объединение ячеек в таблицах.
40. Выравниваем текст в таблице HTML.
41. Способы выравнивания таблицы по центру в HTML.
42. Учимся изменять цвет таблицы в HTML.
43. Изменяем размер таблицы в HTML.
44. Учимся создавать формы в HTML.
45. Как задать значение по умолчанию для поля в форме.
46. Как правильно сделать подписи к полям ввода.
47. Создаём форму авторизации на HTML.
48. Многострочное поле ввода: тег textarea.
49. Поле-галочка в HTML.
50. Поле-переключатель в форме HTML.
51. Делаем раскрывающийся список в HTML.
52. Форма для загрузки файлов.
53. Используем скрытое поле в форме.
54. Табличная вёрстка HTML-страничек. Прототип сайта.
55. Как выложить сайт в Интернет: простая инструкция.

Пройти

№10. «HTML и CSS — вёрстка сайтов для начинающих»

Кто проводит: PHP-School.

Формат: статьи-уроки + домашние задания.

Сколько уроков: 11.

Продолжительность: 20 часов.

Пройти

№11. Free HTML and CSS tutorial

Кто проводит: Джереми Томас, американский фронтенд-разработчик и фрилансер, сотрудничающий с такими компаниями, как Microsoft и Sony.

Формат: текстовые уроки (на английском языке).

Сколько уроков: 50 уроков.

Продолжительность: зависит от тебя.

Что ты узнаешь на курсе:

1. Синтаксис HTML.
2. Его семантические элементы.
3. Всё о создании ссылок.
4. Основы форматирования текста.
5. Как позиционировать элементы в CSS.
6. Как менять шрифты.
7. Как делать задний фон на сайте.
8. И многое другое.

Пройти

№12. Курсы по HTML от HTML Dog

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

Формат: текстовые уроки.

Сколько уроков: 3 курса (для начинающих, середнячков и профи) примерно по 10 уроков.

Продолжительность: зависит от тебя.

Пройти

№13. Курсы по CSS от HTML Dog

Кто проводит: HTML Dog.

Формат: статьи-уроки.

Сколько уроков: также 3 курса 8-15 уроков.

Продолжительность: зависит от тебя.

Пройти

№14. «Учим HTML за 1 Час! #От Профессионала»

Пройти

№15. «Как выучить HTML & CSS? Самый аху##### способ!»

Пройти

№16. «Вёрстка сайта с нуля для начинающих | HTML, CSS»

Пройти

№17. «HTML вёрстка сайта»

Пройти

№18. «HTML5 уроки для начинающих» от Гоши Дударя

Пройти

№19. Курс HTML & CSS с домашними заданиями

Пройти

№20. «HTML для начинающих» от Loftblog

Пройти

№21. «Учим HTML за 35 минут для начинающих от 10 лет (Основы) + Мотивация для разработчиков»

Пройти

№22. «Профессия HTML верстальщик — умерла? Нужны ли HTML верстальщики в 2020 году?»

Смотреть

№23. HTML5 для чайников | ВВЕДЕНИЕ — веб-программирование с нуля

Пройти

№24. «Вёрстка HTML + CSS За 2 Часа. Из PSD. С Нуля. Полная Запись»

Пройти

№25. Учебник HTML для начинающих

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

№26. HTML5 Учебник

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

№27. Учебник HTML и CSS от Трепачёва Дмитрия

Пройти

№28. Самоучитель HTML

Пройти

№29. Самоучитель CSS

Пройти

№30. Профессия веб-разработчик от «Яндекс.Практикум»

Пройти

Другие курсы и материалы по HTML и CSS:

• HTMLBook — огромный справочник по HTML.
• HTML5 и CSS3 на примерах — книга от Webref.
• Веб-разработка для начинающих на Stepik — бесплатный курс по html и css.
• Погружение в HTML5 — перевод книги Марка Пилгрима.
• HTML Tutorial — справочник по HTML (на английском).
• HTML | MDN — документация от Mozilla.
• CSS-Tricks — англоязычный ресурс.
• WPSchool — полезный ресурс по WordPress (уроки, обучение, статьи).
• 50 Бесплатных Шаблонов Сайтов на HTML5 и CSS3.
• 20 самых красивых и творческих сайтов на HTML5.
• Шаблон сайта на чистом HTML.

Платные курсы по вёрстке на HTML и CSS — ТОП-9 лучших

№1. «Я — Веб-разработчик PRO» от SkillBox

Стоимость: 304 000 182 400 ₽ по скидке. В рассрочку — от 5 884 ₽/мес. (первый платёж через 6 месяцев).

Получить скидку — жмяк.

Длительность: 2 года.

Документ об окончании: диплом.

Вообще главным возражением при покупке курсов SkillBox является их высокая цена.

Однако, если говорить честно, — она не такая высокая, как кажется. Если ты добросовестно её освоишь, то сможешь претендовать на вакансии с зарплатой от 100-200 тысяч рублей в месяц. То есть при грамотном подходе обучение окупается за 1-2 месяца. И это я не учитываю те заказы на биржах фриланса, которые ты сможешь выполнять уже в первые месяцы курса.

Отзывы о школе

Преподаватели курса:

Даниил Пилипенко

VK, Facebook

• Генеральный директор центра подбора IT-специалистов SymbioWay
• Экс-сотрудник компании «Ютинет.Ру»
• Экс-руководитель отдела разработки ПО в издательстве «Вокруг Света»
• Программист с 15-летним стажем

Егор Яковишен

https://www.facebook.com/yaplusplus

Ведущий Frontend-разработчик в компании Setka.

Василий Грудистов

Портфолио на «Хабр Карьера»

Разработчик с 10-летним стажем. Участвовал в разработке сайтов для ПАО «ВТБ», Samsung, Epson, Teachbase и многих других компаний.

Полный список преподавателей смотри на странице курса.

№2. «Frontend-разработчик с нуля»

Кто проводит: университет интернет-профессий Нетология.

Формат: вебинары + видеоуроки + практические проекты для портфолио + домашние задания + личные разборы с преподавателями.

Сколько длится: 10 месяцев.

Стоимость: 6 600 рублей в месяц.

Что ты получишь в ходе прохождения курса:

1. Исчерпывающие знания об HTML5, CSS3, JavaScript, JSX, React, VirtualDOM, Flexbox и React Router.
2. Диплом от известного онлайн-университета, который точно понравится твоим работодателям.
3. Готовое профессионально оформленное портфолио.
4. Трудоустройство с зарплатой от 85 000 рублей в месяц.

Пройти

№3. «Как создать сайт самостоятельно»

Кто проводит: крупнейшее российское агентство интернет-маркетинга TexTerra.

Формат: 13 лекций по 1,5 часа + домашние задания и обратная связь.

Сколько длится: 2 месяца.

Стоимость: 10 000 рублей.

Что ты узнаешь из курса:

1. Какие типы сайтов существуют.
2. Что такое юзабилити и как его улучшить.
3. Как прототипировать сайты.
4. Как верстать на HTML и CSS.
5. Как разрабатывать сайты на WordPress.

Пройти

№4. «Профессия Frontend-разработчик»

Кто проводит: портал GeekBrains и Mail.ru Group (компания, которая владеет такими популярными соцсетями, как VK, Одноклассники и Мой Мир).

Формат: самостоятельная работа + работа с преподавателем (обладающим минимум 5-летним опытом Frontend-разработки) + работа с наставниками из числа лучших выпускников предыдущих потоков.

Сколько длится: 7 месяцев.

Кем ты станешь после прохождения курса:

Грамотным Frontend-разработчиком, умеющим верстать сайты по современным стандартам и виртуозно владеющим HTML, CSS и JavaScript.

Что ты получишь: 

1. Диплом.
2. Портфолио.
3. Среднюю зарплату в 100 000 рублей.
4. Возможность поработать в стартапах других выпускников.
5. Стажировку у партнёров GeekBrains (ПАО Сбербанк, ПАО Вымпелком и других).
6. Полные знания об HTML и CSS.
7. Подарочный 3-месячный курс по английскому языку.
8. Обучающие мастер-классы и воркшопы.

Стоимость: 7 141 рубль в месяц.

Пройти

№5. «Frontend-разработчик» от SkillFactory

Пройти

№6. Курс «Python для веб-разработки»

Пройти

№7. «Профессия Веб-дизайнер»

Пройти

№8. «Профессия Fullstack-разработчик»

Для тех, кто хочет создавать дизайны сайтов и сразу же их верстать на HTML/CSS.

Пройти

№9. «Fullstack-дизайнер»

Пройти

На сегодня всё.

Это были самые лучшие курсы HTML и CSS в 2020 году.

Надеюсь, ты нашёл для себя что-то полезное.

Желаю удачи и до встречи! 💪

P.S. Ещё больше курсов по HTML и CSS ты можешь найти — здесь.

P.P.S. Вёрстка вёрсткой, а я всё-таки предпочитаю зарабатывать на копирайтинге и SEO.