HTML-верстальщик: кто это, обязанности, зарплаты и как им стать в 2023 году. Обзор профессии.

Кто такой HTML-верстальщик?

HTML-верстальщик — это веб-разработчик, использующий язык программирования HTML (HyperText Markup Language — «язык гипертекстовой разметки») и CSS для верстки сайтов; верстка сайтов — это процесс перевода готового дизайна или макета сайта в HTML-код, часто с применением стилей CSS. HTML-верстальщики являются фронтенд-программистами.

Что делают HTML-верстальщики и чем занимаются?

Обязанности на примере одной из вакансий:

• Верстка веб-проектов с использованием HTML5, CSS3,Typescript, SCSS и Javascript;
• Нарезка и верстка макетов дизайна «с нуля» (psd/figma/ … );
• Адаптация верстки под мобильные устройства;
• Написание чистого, хорошо структурированного, кросс-браузерного, тестируемого и масштабируемого кода;
• Работа над новыми и существующими проектами;
• Участие в планировании проектов и задач.

Что должен знать и уметь HTML-верстальщик? 

Требования к HTML-верстальщикам:

• кроссбраузерная, адаптивная, валидная и семантичная вёрстка
• уверенное знание HTML5, CSS3, Js
• написание качественного, чистого кода
• понимание css анимации
• умение использовать сторонние библиотеки и плагины

Востребованность и зарплаты HTML-верстальщиков

На сайте поиска работы в данный момент открыто 156 вакансий, с каждым месяцем спрос на HTML-верстальщиков растет.

Количество вакансий с указанной зарплатой HTML-верстальщика по всей России:

• от 35 000 руб. 105
• от 60 000 руб. 65
• от 80 000 руб. 36
• от 105 000 руб. 15
• от 130 000 руб. 9

Вакансий с указанным уровнем дохода по Москве:

• от 55 000 руб.22
• от 75 000 руб.16
• от 95 000 руб.8
• от 115 000 руб.5
• от 135 000 руб.4  

Вакансий с указанным уровнем дохода по Санкт-Петербургу:

• от 35 000 руб. 16
• от 45 000 руб. 15
• от 55 000 руб. 14
• от 65 000 руб. 11

Как стать HTML-верстальщиком и где учиться?

Варианты обучения для HTML-верстальщика с нуля:

• Самостоятельное обучение – всевозможные видео на YouTube, книги, форумы, самоучители и т.д. Плюсы – дешево или очень недорого. Минусы – нет системности, самостоятельное обучение может оказаться неэффективным, полученные навыки могут оказаться невостребованными у работодателя;
• Классическое оффлайн-образование в ВУЗах, колледжах и университетах. Диплом является преимуществом при устройстве на работу, при этом обучение обычно длится не менее четырех лет, часто дают устаревшие неактуальные знания;
• Онлайн-обучение. Пройти курс можно на одной из образовательных платформ. Такие курсы рассчитаны на людей без особой подготовки, поэтому подойдут большинству людей. Обычно упор в онлайн-обучении делается на практику – это позволяет быстро пополнить портфолио и устроиться на работу сразу после обучения.

Ниже сделали обзор 20+ лучших онлайн-курсов.

20+ лучших курсов для обучения HTML-верстальщика: подробный обзор

1 место. Курс «Веб-вёрстка» — Skillbox

https://skillbox.ru/course/weblayout/

Стоимость: Рассрочка на 6 месяцев — 5 934 ₽ / мес

• Длительность 6 месяцев
• Онлайн в удобное время
• Обучение на практике
• Доступ к курсу навсегда.

Кому подойдёт этот курс:

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

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

1. Блочная, резиновая и адаптивная верстка
2. Верстка интернет-магазина
3. Работа с системой контроля версий Git
4. Проверка сайта на доступность
5. Основы CSS, HTML и JavaScript
6. Тестирование и исправление браузерных несовместимостей
7. Работа с современными инструментами.

Программа

Вас ждёт насыщенная программа, знание которой можно приравнять к году работы.
29 тематических модулей, 160 онлайн-урок

• Веб-вёрстка. Базовый уровень

1. Введение.
2. Базовый HTML.
3. Базовый CSS. Часть 1.
4. Базовый CSS. Часть 2.
5. Подготовка к вёрстке.
6. HTML-разметка.
7. Flexbox.
8. Стилизация.
9. Продвинутый HTML. Формы.
10. Продвинутый CSS. Часть 1.
11. Продвинутый CSS. Часть 2.
12. Адаптивность. Десктоп.
13. Адаптивность. Мобильные устройства.
14. JavaScript для верстальщика.
15. Доступность.
16. Кросс-браузерность.
17. База знаний.
18. Сетки.
19. Работа с хостингом.
20. Анимация.

• Веб-вёрстка. Продвинутый уровень

1. Вёрстка HTML-писем.
2. Базовый HTML
3. Анимация на JavaScript.
4. Оптимизация и процесс загрузки.
5. Отрисовка сайта.
6. Сборщики.
7. Препроцессоры и Постпроцессоры.
8. CSS Grid.
9. Будущее вёрстки.

Дипломные проекты:

• Лендинг
  Вы сверстаете лендинг по брифу и закрепите полученные на курсе знания
• Интернет-магазин
  Вы сверстаете несколько страниц для интернет-магазина по ТЗ.

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

2 место. Курс «Основы вёрстки сайтов» — LoftSchool

https://loftschool.com/course/html-css/

Стоимость: 20 000 ₽ — 26 000 ₽, возможна рассрочка

За 5 недель вы научитесь:

• Как устроен интернет
  Основательно разберётесь в том, что такое: HTTP, IP, DNS, хостинг, хостер, домен, сервер, клиент и пр.
• HTML и CSS
  Самостоятельно верстать сайты любой сложности с применением Flexbox и BEM-naming.
• Кроссбраузерная вёрстка
  Ваша вёрстка будет отлично работать на всех браузерах в разных операционных системах.

Программа обучения

Неделя 1 — Работа с хостингом, HTML

— Знакомимся со своим личным наставником и группой.
— Учимся работать с панелью хостинга и с файлами через FTP.
— Делаем разметку для первой страницы проекта.
— Размещаем результат работы в сети Интернет и сдаём на проверку наставнику.

• Открытие курса
• Обзор редактора
• Устройство интернета
• Работа с GitHub Pages
• HTML
• БЭМ. Разметка элементов страницы

Неделя 2 — CSS, работа с макетом, Perfect Pixel

— Стилизуем элементы главной страницы.
— Изучаем свойства позиционирования и поведение блочной модели.

• Figma для верстальщика
• Работа со стилями
• Работа со шрифтами
• Блочная модель
• Стилизация проекта

Неделя 3 — Flexbox, БЭМ-нейминг

— Изучаем свойства флексбокса и применяем их к главной странице.
— Пишем разметку для оставшихся страниц проекта.
— Приводим верстку в состояние Perfect Pixel.

• Вопрос-ответ
• Flexbox
• Построение лейаута и БЭМ-нейминг
• Реализация проекта

Неделя 4 — CSS-анимации

— Подключаем иконки к проекту с применением спрайтов.
— Реализуем динамические элементы страниц.
— Дорабатываем проект.

• Частые приемы верстки
• Анимации CSS
• Анимации. Реализация проекта

Неделя 5 — Защита выпускного проекта

— Дорабатываем проект.
— Сдаём проект на проверку наставникам.
— Выставление оценок в дипломы.

• Вопрос-ответ.

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

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

3 место.Курс «HTML» — irs.academy

https://irs.academy/kurs_po_html

Стоимость: 17 550 ₽

Для кого будет полезно?

• Новичков
  Никогда не сталкивались с HTML и CSS в работе, но вам это нужно? Онлайн-обучение HTML с нуля снабдит вас знаниями и привьет полезные навыки верстки. Попробуйте себя в IT, изучите различные языки программирования и постройте карьеру в прибыльной области.
• Студентов
  Учитесь и хотите развиваться в приоритетной сфере IT? Пройдите курс по обучению HTML онлайн, научитесь верстать, подрабатывайте и найдите высокооплачиваемую работу в веб-студии!
• Желающих работать в IT
  Считаете, что именно в IT можно хорошо зарабатывать, в сжатые сроки пройдя путь от новичка до профессионала? Начинайте обучаться уже сейчас!
• Владельцев бизнеса
  Сделайте сайт самостоятельно, избежав затрат на специалистов. Также онлайн-курс пригодится, если вы работаете с фрилансерами через интернет.
• Фрилансеров
  Работа в офисе не для вас? Работайте удаленно из любой точки мира, подбирая интересные вам проекты на биржах. Если вам интересно сайтостроение, то освойте HTML и CSS!
• Всех, кого интересует HTML
  Любой работодатель отдаст предпочтение новичку, который уже что-то изучил и попробовал сам, а не тому, кто только мечтал работать в IT, но ничего не делал. Хотите получить престижную работу или создавать сайты для себя? Курсы HTML вам пригодятся!

После окончания курса вы сможете:

• Сверстать адаптивный сайт
• Устроиться в веб-студию
• Создавать качественные веб-интерфейсы
• Обрести дополнительный источник дохода.

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

Урок № 1 – Знакомство
На первом занятии мы узнаем, что такое HTML. Рассмотрим простые и сложные веб-страницы, узнаем, какие существуют виды сайтов, познакомимся с гипертекстом. На бесплатном уроке вы создадите свою HTML-страницу и сделаете вывод, насколько вам комфортна подача материала и работа с преподавателем.

Урок № 2 — Особенности структуры
На втором уроке мы начнем детально изучать структуру HTML-документа. Вы разберетесь, что такое версия, заголовок и кодировка. Мы приведем список ключевых слов и познакомимся с description. Вы поработаете с комментариями.

Урок № 3 — Основы CSS
На третьем занятии по обучению HTML онлайн вы разберетесь в языке оформления стилей документа CSS. Детально разберем синтаксис, несколько видов селекторов, свойства и их характеристики. После занятия вы сможете привязать CSS-стили к HTML.

Урок № 4 — Разметка текста
На четвертом уроке мы научимся оформлять текст, используя возможности HTML. Вы сможете делать абзацы, заголовки, различные списки, изменять шрифт на жирный или курсив. Также вы узнаете, какими тегами оформляются цитаты и формулы. Благодаря приемам, узнанным на этом уроке, вы расставите нужные акценты в тексте, сделаете его структурированным и удобным для восприятия, даже если не учились в HTML-Academy.

Урок № 5 — Работа со ссылками
На пятом занятии мы научимся делать HTML-ссылки нескольких видов: с якорем, абсолютные и относительные. Поговорим о функциях и задачах ссылок.

Урок № 6 – Изображения
В рамках обучения HTML с нуля в онлайн-формате узнаем, как размещать картинки в HTML, какие для этого нужны теги. Разберемся, как делать картинку ссылкой. Вы сможете разместить привлекательные картинки на вашей веб-странице, что сделает её более интересной для гостей сайта.

Урок № 7 – Таблицы
Сейчас весь мир стремится к экономии времени и упрощению подачи информации, так как лишние нагромождения текста только мешают понять суть и заставляют тратить время. Поэтому одна из самых удобных форм подачи информации – табличная. Мы узнаем, как работать с тегом table, делать различные границы, отступы, задавать название, выравнивать текст, менять цвет и т. д. После занятия вы сможете представить информацию в виде таблицы, и посетителям вашего сайта будет удобно найти все необходимое.

Урок № 8 — Работа с формами
На восьмом уроке онлайн-курса по HTML мы перейдем к изучению форм, научимся их создавать, делать подписи к полям ввода и создавать форму авторизации, поля-переключатели, раскрывающиеся списки и т. д. Освоив работу с формами, вы сможете сделать ваш сайт интерактивным и реагирующим на действия пользователя.

Урок № 9 — Сборка и выкладка
На девятом уроке поработаем над версткой сайтов, создадим прототип. Составим поэтапный алгоритм, по которому можно выложить сайт в интернет.

Вы получаете

1. 9 увлекательных видеоуроков по курсу HTML
2. Возможность проконсультироваться с преподавателем-программистом
3. Навыки по созданию адаптивных HTML-страниц
4. Сертификат о прохождении обучения
5. Домашние задания, которые вы сможете добавить в портфолио.

Курс «Веб-разработчик» — Школа анализа данных

https://practicum.yandex.ru/web

Стоимость: 100 000 ₽

Что именно вы будете делать, когда станете веб-разработчиком:

• Писать код на HTML, CSS и JavaScript
• Разрабатывать сайты и веб-приложения
• Создавать продукт вместе с командой
• Помогать бизнесу развиваться, а пользователям — стать счастливее.

Что вы получите:

• Диплом
  о повышении квалификации
• Портфолио
  из 12 учебных и реальных проектов, сделанных во время обучения
• Сообщество
  даже после выпуска у вас будут хакатоны, встречи и поддержка Практикума
• Навыки
  Кроссбраузерная вёрстка, JavaScript, React, объектно-ориентированное программирование, Node.js, умение учиться, самостоятельность, работа в команде, умение задавать вопросы и работать с ошибками.

Содержание:

1. Основы HTML, CSS, JS: бесплатный вводный курс
2. Как устроено платное обучение
3. Расширенные возможности HTML и CSS
4. HTML и CSS. Работа с макетом, построение сложных сеток, адаптивная вёрстка
5. Базовый JavaScript и работа с браузером
6. JavaScript — непростые концепции
7. Создание интерфейсов на React
8. Основы бэкенд-разработки
9. Дипломный проект.

Курс «Обучение HTML» — imt.academy

https://www.imt.academy/html-kource-create-site

Стоимость: 35 510 ₽

Пройдя обучение на курсе верстки, вы узнаете, как создавать и верстать сайты и получите отличную базу для развития в сфере web-разработки. Курс основан на опыте практикующих программистов, разрабатывающих сайты и интерфейсы различной сложности с 2009 года. Курс верстки сайтов, отличное начало изучения веб программирования.

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

1. Набор инструментов, программ верстальщика

• Теги. Парные, непарные теги
• Правила применения, вложение тегов
• Блочные, строчные элементы
• Списки, маркированные, нумерованные
• Ссылки, атрибуты ссылок. Якоря
• Абсолютные и относительные ссылки
• Работа с изображениями. Атрибуты

2. Таблицы и формы

• Теги, атрибуты, стили для таблиц
• Формы. Отправка post и get запросов
• Базы данных и формы
• Атрибуты для форм. Обработчики

3. Введение в CSS

• Подключение, синтаксис стилей
• Значения стилевых свойств
• Селекторы тегов
• Создание макета страницы
• Блоки верстка DIV’ами
• Размеры, позиционирование элементов
• Оформление и изображения, фон

4. Верстка макета

• Обтекание блоков float
• Позиционирование и отступы
• Адаптивная верстка
• Верстка под различные устройства
• Резиновая верстка
• Придание блокам адаптивности
• Медиа-запросы
• Подключение скриптов
• Внешние скрипты
• Порядок исполнения
• Подключение библиотеки jQuery
• Выполнение javascript

5. Визуальные эффекты в css

• Генераторы css кода
• Тени и объем для элементов
• Тени и стили для текста
• Градиенты
• Создание и позиционирование кнопок
• CSS3 анимации элементов
• Кроссбраузерная верстка
• Вендорные префиксы
• Применение сетки

6. Что такое фреймворки

• Bootstrap
• Начало работы
• Подключение состав и настройка
• Система сеток
• Мобильная верстка
• Выравнивание контента
• Растровая и векторная графика
• Шрифтовые иконки
• Glyphicons
• Font Awesome
• Анимированые иконки
• css псевдоклассы
• Псевдокласс :hover
• Псевдокласс :active
• Работа с готовыми элементами
• Меню
• Слайдер
• Акардеон
• Таблицы

7. Группирование

• Наследование
• Каскадирование
• Псевдоклассы. Псевдоэлементы
• Верстка выпадающего меню
• Подключение шрифтов
• Фотошоп для верстальщика
• Слои
• Размер элементов
• Нарезка макета и картинок
• Как посмотреть шрифты и цвет
• Проверка данных на валидность (проверка кода)
• Для чего нужна валидация кода?
• Требования к коду W3C
• Валидация CSS
• Написание корректного кода
• Написание эффективного кода
• Исправление ошибок
• Сервисы и инструменты проверки кода

8. Создание своего сайта

• Работа с хостингом
• Что такое домен и хостинг
• Что такое DNS сервер
• Файловая структура
• Создание базы данных для сайта
• Загрузка архива CMS на хостинг
• Процесс установки CMS, подключение к БД
• Работа с CMS WordPress
• Интерфейс WordPress
• Основной функционал
• Создание страниц
• Создание записей
• Различие между страницами и записями
• Администрирование CMS
• Плагины, компоненты

9. Установка самописной темы на WordPress

• PHP связи
• WordPress кодекс
• Формирование страниц при помощи PHP
• Установка болванки
• Подключение динамических путей
• Настройка
• front-page.php

10. Верстка одностраничника (landing page)

• Подключение эффектов parallax js
• Подключение видео на фон
• Анимации элементов wow js
• Canvas html5
• Системы контроля версий git и github
• Командная разработка проекта
• Работа через удаленный репозиторий git
• Установка клиента smartgit
• Настройка smartgit
• Коммиты
• Команды pull и push
• Решение конфликтов

11. SEO оптимизация для верстальщиков

• Алгоритмы ПС, структура контента для продвижения
• Взаимодействие SEO специалиста и разработки
• Загрузка страниц, скорость, коды ответа сервера, редиректы. Сервисы проверки скорости
• SEO оптимизация страниц, теги, meta, дубли и канибализация страниц
• Ссылки. Внутренние, входящие, исходящие. Пагинация в магазине
• Системные файлы robots.txt, sitemap.xml
• Подключение сервисов аналитики: GA, GSC, GTM, FB pixel etc.

12. Введение в JavaScript

• Переменные, именование переменных, объявление переменных
• Функции ввода и вывода alert, prompt, confirm
• Типы данных
• Преобразование типов
• Операторы сравнения
• Логические операторы
• Работа в консоли

13. События

• Обработчики событий
• Циклы while и for
• Работа с DOM деревом
• Атрибуты, узлы, элементы
• Cookie

14. Введение в JQuery

• Выборка в DOM
• Траверсинг
• Метод css
• Метод attr()
• События в JQuery

15. Изменение DOM в JQuery

• Выборка в DOM
• Методы appendChild() insertBefore() insertAfter()
• Методы before(), after()
• Методы addClass() hasClass() removeClass() toggleClass()

16. Формы в JQuery

• Создание формы
• События форм
• Валидация

17. Анимация в JQuery

• AJAX в JQuery
• Отправка и прием данных
• События AJAX.

После успешной сдачи экзамена или защиты проекта Вы получаете диплом Академии IMT об успешном прохождении курса Frontend.

Курс «Профессия HTML верстальщик» — WebCademy

https://webcademy.ru/htmlstart/

Стоимость: 24 000 ₽ — 32 000 ₽

Курс — это возможность

• Зарабатывать на фрилансе
  Создайте новый источник дохода, начните зарабатывать на фрилансе применяя знания, полученные на курсе.
• Получить новую профессию в IT
  Выпускники устраиваются в IT компании и веб студии. Постройте свою карьеру веб-разработчика.
• Запустить личный проект
  Инвестируйте в знания, сохранив время, деньги и независимость от разработчиков. Вы создадите функциональный и красивый сайт для себя или своего бизнеса.

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

Тариф Стандарт

• Модуль 1. Основы HTML и CSS. Валидация. Хостинг и домен
• Модуль 2. Блочная верстка. Photoshop. PixelPerfect
• Модуль 3. Верстка сайта. Проект Forest Travel
• Модуль 4. Адаптивная верстка для мобильных устройств
• Модуль 5. Лучшие практики верстки. SCSS и BEM naming. Оптимизация графики
• Модуль 6. Основы JS и скрипты для проекта
• Модуль 7. PHP формы обратной связи. Оптимизация верстки. CSS Grid. Bootstap 5
• Модуль 8. Трудоустройство и фриланс. Заработок на веб-разработке

Премиум группа

• Модуль 9. JavaScript и jQuery плагины для верстки сайтов
• Модуль 10. Основы PHP. Отправка форм на почту и сохранение данных в БД
• Модуль 11. Система управления сайтами WordPress
• Модуль 12. Дополнительные инструменты. Контроль версий и сборка проекта.

Курс «Основы вёрстки сайта» — Нетология

https://netology.ru/programs/html-css-base

Стоимость: бесплатно

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

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

• Вносить правки в HTML-код страницы
• Верстать текстовые блоки
• Добавлять стили к отдельным элементам сайта
• Готовить контент для публикации на сайте.

Программа курса — 5 занятий

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

Домашнее задание:
Отработаете порядок использования изученных тегов и их атрибутов: добавите в текст заголовки, изображения, цитаты и др. А также побудете в роли ревьюера: попробуете найти ошибки в разметке и исправить их.

• Что такое браузер
• Семантика и разметка
• HTML
• Теги и гиперссылки
• URL
• Картинки.

2. Списки и таблицы
   Изучите виды и порядок формирования списков и таблиц. Разберёте различия между маркированными, нумерованными списками и списками описания, сформируете разметку для своего первого многоуровневого списка. Рассмотрите варианты оформления таблиц: научитесь делать заголовки и итоговые блоки, объединять ячейки с помощью атрибутов. В конце лектор поделится с вами ещё одним способом оформления изображений.

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

• Списки
• Таблицы
• Теги для добавления картинки с описанием.

3. Селекторы и свойства
   Изучите CSS. Узнаете, что такое селектор. Разберётесь, как правильно описывать CSS-правила: свойство и его значение. Наглядно увидите, как при помощи CSS можно изменять размер шрифта, его начертание, цвет. Рассмотрите тему наследования свойств. Детально изучите вопрос, касающийся комбинирования селекторов.

Домашнее задание:
Попробуете оформить текст согласно техническому заданию при помощи CSS-правил. Отработаете навык составления комбинаций селекторов.

• Что такое CSS
• CSS-правило: синтаксис, комбинации селекторов
• Разбор примеров.

4. Оформление текстовых блоков с помощью CSS
   Углубите свои знания в области CSS. Изучите понятие селекторов класса, разберёте синтаксис и правила их комбинации. Продолжите разбор CSS-правил, которые помогут оформить текст и задать его выравнивание, а также узнаете, как изменить маркеры в списках и установить вместо стандартного символа оригинальную картинку и не только. В заключительной части занятия разберёте форматы указания цвета и узнаете, как сделать фон вашего сайта максимально привлекательным.

Домашнее задание:
Поработаете со списками и фоновыми изображениями. Продолжите отрабатывать навык составления комбинаций селекторов.

• Селектор класса
• Оформление текстовых блоков
• Цвет в CSS
• Свойства фоновых изображений.

5. Основы клиент-серверного взаимодействия
   На финальном занятии узнаете, что такое сервер и почему программистам важно понимать суть клиент-серверного взаимодействия. Разберёте такие понятия DNS, протокол HTTP, познакомитесь с различными технологиями для сервера. Узнаете разницу между backend и frontend. Заключительным этапом обучения станет финальный тест.

• IP-адреса
• Система доменных имен
• Протокол HTTP и задачи, которые он решает
• Сервер и технологии для него.

Курс «HTML & CSS» — ITEA

https://onlineitea.com/course/html-css/

Стоимость: 8 250 ₽

Для кого этот курс:

• Ты — новичок, который ищет подходящие курсы HTML и CSS для успешного старта в профессии.
• Ты уже что-то знаешь о фронтенде, но знания отрывочные и никак не клеятся между собой.
• Ты работаешь в направлении дизайна и хочешь пройти курсы CSS, чтобы эффективнее работать с внешним видом сайтов и разбираться в HTML5.

На курсе ты научишься:

1. Базовым принципам верстки и написания стилей
2. Работать с различными элементами HTML
3. Понимать обязательную структуру веб-страницы и добавлять CSS на страницу
4. Работать с разными видами вёрстки.

План обучения:

1. Введение в веб-технологии

• Предназначение технологий
• Стек разработки для сайта
• Принцип работы «клиент-сервер»
• Консоль разработчика
• Текстовый редактор и IDE
• Что такое HTML, CSS, JS и как они взаимодействуют?

2. HTML

• Базовые принципы верстки
• Знакомство с понятием тега и атрибута
• Обязательная структура любой веб-страницы
• Понятия строчных и блочных элементов веб страницы
• Понятия парных и непарных тегов;
• Семантические теги
• Спецсимволы
• Работа с тегами и атрибутами
• Работа с ссылками и якорями
• Работа с текстом и комментариями
• Работа с различными системами цветов в HTML
• Работа с изображениями
• Нумерованные и маркированные списки
• Работа с блоками (div)
• Таблицы
• Формы
• Элементы форм (инпуты)
• Айфреймы
• Подключение разных модулей к документу HTML
• Форматирование элементов HTML

3. CSS

• Что такое CSS?
• Базовые принципы написания стилей
• 3 способа добавления CSS на HTML-страницу
• Внешние таблицы стилей
• Относительные и статичные единицы измерения
• Работа со шрифтами (семейства, стили, размеры, насыщенность)
• Работа с границами элементов (бордер, радиус, тени)
• Работа с отступами и размерами элементов
• Градиенты
• Работа со свойствами float и clear
• Flex box
• Работа с фоном (изображения и цвет, размеры, прозрачность)
• Селекторы
• Продвинутые селекторы
• Приоритеты стилей
• Перезапись стилей
• Псевдоклассы, псевдоэлементы
• Работа с анимацией элементов
• Валидация
• Медиазапросы

4. Работа с браузером

• Установка полезных расширений для верстки
• Отладчик кода

5. Хостинговые и доменные панели

• Работа с Git и хостинг на Git

6. Разные виды верстки

• Адаптивная верстка
• Резиновая верстка
• Pixel perfect верстка
• Статичная верстка
• Кроссбраузерная верстка
• Смешанная верстка

7. Figma для разработчика

• Понятие растровой и векторной графики
• Преимущества и особенности Figma
• Обзор панелей и инструментов
• Сетки
• Слои и компоненты
• Экспорт параметров и графики
• Редактирование элементов

8. Grid Layout

• Построение сетки
• Работа с горизонтальным и вертикальным выравниванием
• Объединение элементов
• Методы работы с ячейками

9. Правила именования классов по BEM
10. Библиотека Bootstrap
11. SASS

• Подключение
• Правила и дерективы
• Управляющие директивы и выражения
• Использование миксинов
• Применение на практике.

Курс «HTML 5 и CSS 3» — Shultais Education

https://shultais.education/courses/html-and-css

Стоимость: 3 900 ₽

Онлайн-курс по HTML и CSS — это отправная точка в карьере разработчика web-сайтов. Именно с верстки начинали большинство web-программистов и верстальщиков. При этом обучение основам HTML открывает двери не только в web-разработку, но и в другие интернет-профессии.

Пройдя все уроки и выполнив интерактивные задания вы научитесь:

1. Подбирать семантически правильные HTML-теги.
2. Выбирать подходящие под задачи CSS-свойства.
3. Использовать CSS-селекторы для обращения к любым HTML-элементам на странице.
4. Работать с рамками, а также с внутренними и внешними отступами.
5. Работать с текстом, изображениями, формами.
6. Добавлять на страницу векторные и растровые изображения, а также видео.
7. Правильно позиционировать спрайты.
8. Верстать сайты целиком и отдельные элементы страниц.
9. Формировать валидную структуру HTML-документа.
10. Строить многоколончатые сетки и управлять потоком документа.
11. Применять абсолютное, относительное и фиксированное позиционирование.
12. Создавать сложные формы для отправки данных.
13. Отправлять данные GET и POST методами.
14. Подключать внешние нестандартные шрифты.
15. Создавать сложные таблицы.
16. Пользоваться встроенными возможностями браузеров.
17. Извлекать из Photoshop-макетов элементы и их параметры.
18. Узнаете, как работают браузеры, сервера и интернет.

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

Интенсивная программа с короткими видео-уроками и большим количеством практики.
Обучение HTML5 и CSS3 на примере реального Photoshop-макета.

1. Введение в HTML и CSS

• Познакомитесь с основами HTML и CSS.
• Узнаете, что такое HTML-документ и их каких частей он состоит.
• Освоите базовые инструменты верстальщика.

2. Базовые понятия интернета

• Познакомитесь с тем, как работает интернет и как браузеры взаимодействуют с сайтами.
• Научитесь отличать фронтенд от бэкенда.
• Узнаете, что такое хостинг и протокол HTTP.

3. HTML теги

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

4. Основы CSS

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

5. Работа с изображениями

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

6. Структура документа

• Узнаете из каких элементов состоит современный HTML-документ.
• Научитесь правильно выбирать и использовать теги section, header, footer, nav и article.

7. Блоки и сетка документа

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

8. Погружение в формы

• Научитесь добавлять на страницу формы для отправки данных на сервер.
• Познакомитесь с основными типами данных и полей форм.
• Узнаете, как отправлять файлы.
• Узнаете разницу между GET и POST запросами, а также научитесь использовать разные типы кнопок.

9. Таблицы

• Познакомитесь с HTML-таблицами.
• Научитесь объединять ячейки
• Узнаете о расширенных возможностях таблиц.

10. Завершение курса
    Познакомитесь с дополнительными инструментами верстальщика.

Курс «HTML и CSS» — Udemy

https://www.udemy.com/course/crs-editcode/

Стоимость: 1 790 ₽

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

• Изучите полностью язык HTML5 и все основные теги
• Изучите таблицу стилей CSS3 и все необходимые свойства
• Поймете, что такое верстка сайта и научитесь легко верстать настоящие сайты с помощью Flexbox технологии
• Сможете создавать адаптивные сайты под смартфоны, планшеты, десктопы и любые разрешения экранов
• Все сайты создаются с нуля в режиме реального времени.

Материалы курса:

6 разделов, 79 лекций

1. Введение

• Что такое верстка сайта?
• Разбор верстки сайта
• Домашнее задание № 1

2. Изучение HTML

• Создание рабочего пространства
• Создание Web-страницы
• Создание заголовков
• Домашнее задание № 2
• Добавление Favicon
• Работа с текстом
• Домашнее задание № 3
• Добавление изображений
• Создание списков
• Создание ссылок
• Домашнее задание № 4
• Таблицы
• Домашнее задание № 5
• Формы
• Домашнее задание № 6
• Мнемоники в HTML (спецсимволы)
• Домашнее задание № 7
• Добавление аудио
• Добавление видео
• Домашнее задание № 8

3. Изучение CSS

• Введение в CSS
• Подключение CSS стилей
• Домашнее задание № 9
• Подключение шрифтов
• Единицы измерения
• Домашнее задание № 10
• Стилизация текста
• Вид списков
• Домашнее задание № 11
• Селекторы
• Домашнее задание № 12
• Блоки в CSS
• Позиционирование блоков
• Домашнее задание № 13
• Фон и тень блоков
• Домашнее задание № 14
• Спрайты
• Домашнее задание № 15
• Градиент
• Домашнее задание № 16
• Анимация
• Трансформация
• Домашнее задание № 17
• Псевдоэлементы и псевдоклассы
• Домашнее задание № 18

4. Верстка сайта

• Правила верстки
• Домашнее задание № 19
• Прототип сайта
• Домашнее задание № 20
• Знакомство с Flex версткой
• Домашнее задание № 21
• Верхняя часть сайта и главное меню
• Домашнее задание № 22
• Левая часть сайта и блок приветствия
• Домашнее задание № 23
• Правая часть сайта и подвал
• Домашнее задание № 24
• Сложная верстка сайта: часть 1
• Домашнее задание № 25
• Сложная верстка сайта: часть 2
• Домашнее задание № 26
• Сложная верстка сайта: часть 3
• Задание к лекции 39
• Домашнее задание № 27

5. Адаптивная верстка

• Что такое адаптивная верстка
• Медиазапросы
• Домашнее задание № 28
• Адаптация сайта: часть 1
• Домашнее задание № 29
• Адаптация сайта: часть 2
• Домашнее задание № 30

6. Перенос сайта на WordPress

• Установка WordPress
• Создание файлов
• Перенос верстки
• Пишем пути к изображениям
• Редактирование контента
• Добавление контента.

Курс «Обучение созданию сайтов» — htmllessons

https://htmllessons.ru/list-courses Стоимость: 590 ₽ — 1 490 ₽

1. Начальный уровень
   Если тебе нравятся такие моменты как:
   необычные задачи, безлимитная прибыль, место для творчества и самосовершенствование. Тогда тебе поможет такое ремесло, как создание сайтов.
   Ты можешь использовать конструкторы, движки и прочее, не дающее добиться нужного результата, но больше всего удовольствия ты получишь от самостоятельного создания сайтов с нуля.
   Курсы:

• HTML5
• CSS
• JAVASCRIPT

2. Средний уровень
   Знания, которые упростят работу с кодом.
   Курсы:

• BOOTSTRAP
• FONTAWESOME
• LESS
• FLEXBOX CSS

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

Курс «HTML и CSS (верстка)» — Хекслет

https://ru.hexlet.io/categories/html/courses Стоимость: разная стоимость

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

1. Основы современной вёрстки
2. Основы вёрстки контента
3. Bootstrap: Основы верстки
4. CSS: Адаптивность
5. CSS: Grid
6. CSS: Основы Flex
7. CSS: Transform
8. CSS: Позиционирование
9. SASS: Основы
10. Препроцессоры CSS
11. SASS: Программирование
12. Основы HTML, CSS и веб-дизайна
13. Введение в веб-разработку
14. HTML: Препроцессор Pug.

Курс «HTML» — Центр компьютерного обучения «Специалист» при МГТУ им.Н.Э.Баумана

https://www.specialist.ru/dictionary/definition/html Стоимость: разная стоимость

HTML — язык гипертекстовой разметки, с помощью которого создают веб-страницы, сайты и веб-приложения. Знание HTML востребовано на рынке труда и дает необходимую базу для развития в веб-программировании. Также HTML расширит ваши возможности в работе с такими конструкторами сайтов, как Tilda.

Кому нужно обучение:
Веб-верстальщикам, контент-менеджерам, веб-мастерам или веб-дизайнерам. Курсы будут полезны начинающим специалистам в верстке и всем, кому интересен HTML.

Чему Вы научитесь:
Обучение построено на практике: Вы освоите востребованную профессию веб-верстальщика и создадите портфолио, которое можно представить работодателю. Вы сможете использовать стандарты W3C и кроссбраузерную верстку, научитесь создавать сайты и приложения.

Что Вы получите по окончании обучения:
Престижный диплом, подтверждающий знания, и записи занятий для повторения материала. Вы получите консультацию Службы трудоустройства и рекомендации по поиску работы.

Курс «HTML и CSS — верстка сайтов для начинающих» — Школа программирования

https://school-php.com/courses/html-css-begin Стоимость: нет информации

Данный курс рассчитан как обязательный для всех. Уроки подойдут абсолютно всем, так как сложность будет расти по мере изучения основы html, а решать будем типовые задачи верстальщика на html примерах, и если до этого момента вы были чайником, то по окончанию курса вы без труда сможете ответить на вопрос «как сделать сайт html». Так же в этом курсе мы поверхностно изучим Photoshop — программа для работы с изображениями, это будет минимальный пакет джентльмена, необходимый для любого верстальщика. На последнем уроке мы сверстаем готовый HTML шаблон (готовый макет/дизайн сайта), а последним домашнем заданием будет самостоятельно выбрать из доступных шаблонов и сверстать полностью с нуля до конечного продукта.

Содержание:

1. Вступительный урок: веб-разработчик изнутри
   Кто занимается созданием сайта, какие профессии и какова их роль, Какие сайты по типу технического и графического решений можно выделить, Основная терминология при создании сайта
2. Устанавливаем необходимые программы
   Установка браузеров, FileZilla, Skype, TeamViewer, Настройка Skype и панели задач, Установка веб-сервера Open-Server, Установка среды разработки IDE PHPStorm
3. Начинаем изучать HTML, теги, атрибуты тегов и их свойства
   Верстка и её предназначение, Использование .html и .css файлов, Верстка как способ общения с поисковиками
4. Структура HTML: Doctype, head, body
   Структура HTML: Doctype, head, body, Блок-пустышка div и его взаимодействие с тегами p и h1, Использование блока head, кодировки и файла normalize.css
5. Навигация и ссылки
   Ссылки, Формат ссылок, Ссылки в SEO, Дочерний селектор: .class .subclass
6. Графика в вебе, img, background-image, CSS-спрайты
   Пиксели как минимальная единица измерения, Разница между растровой и векторной графикой, img и background-image, CSS-Спрайты для сайтов
7. Блочная верстка сайтов
   Верстка сайтов при помощи блоков, Структура сайта: header, nav, main, aside, footer, Современная верстка колонок через блоки, Псевдоэлементы :after и :before
8. Таблицы, слои и позиционирование
   Верстка табличных данных через таблицу
9. Типы верстки: табличная, блочная и адаптивная
   Изучаем современные типы верстки, рассматриваем причину устаревания табличной верстки, прогнозируем и готовимся к будущему верстки
10. Начинаем изучать Photoshop, нарезаем шаблон
    Стандартные инструменты, Нарезка картинок
11. Продолжаем изучать Photoshop, работаем с подготовленными шаблонами
    Слои, Прозрачный фон.

Курс «HTML / CSS» — FructCode

https://fructcode.com/ru/courses/html-and-css/ Стоимость: нет информации

В уроках вы узнаете:

• Основы верстки сайтов (html и css)
• Как пользоваться html-тэгами div, span, p, ul, li и другими
• Для чего нужен CSS (каскадные таблицы стилей) и узнаете о css-свойствах
• Как использовать css-свойства margin, position, padding, color, background и другие
• Что такое адаптивная верстка
• Как сделать верстку сайта
• Как пользоваться инструментами разработчика в браузере Google Chrome
• Что такое viewport и как его использовать
• Как создать раздел с комментариями на сайте
• Как встроить видео в html-страницу
• Как изменить верстку сайта в браузере
• Как связать html-страницы между собой
• Как сверстать меню на сайте.

Верстка html-страниц (верстка сайтов) относится к Frontend(фронтенд) части разработки профессионального веб-сайта. Для Frontend разработчиков открыто большое количество вакансий и Frontend-разработчики высоко ценятся на рынке труда по всему миру.

План курса:

Программа обучения состоит из видео уроков HTML и CSS, а также включает интерактивные тесты и задания, позволяющие закрепить полученные вами знания по HTML и CSS программированию и созданию сайтов (верстке сайтов).

1. Вводная часть
   Вводная часть. Знакомство
2. Установка и настройка программ для работы с HTML и CSS

• Установка Sublime Text 3, Package Control, Emmet в Windows
• Установка Sublime Text 3, Package Control, Emmet в OSX
• Тест по пройденным урокам

3. Основы HTML: Базовая разметка, html-тэги, css-стили

• Базовая разметка HTML-страницы
• HTML задание создать базовую разметку
• Теги <h1>, <p>, <strong>
• Тест по пройденным урокам
• Упражнение тег <h1>
• Упражнение тег <p>
• Упражнение тег <strong>
• Познакомимся с новыми html тегами
• Упражнение <div>, <style>, css class
• Упражнение <div>, <style>, css background-color
• Тест по пройденным урокам
• Тест по пройденным урокам
• Теги <ul>, <li> и этапы создания веб-сайта
• Подключение css стилей в отдельном файле.
• Теги <ul>, <li>
• CSS свойства: margin, padding, height, font-size и другие.
• Тест по пройденным урокам
• Тест по пройденным урокам
• CSS свойство Margin
• Тест по пройденным урокам
• CSS свойство Padding
• Тег <a>. Создание ссылки.
• Тест по пройденным урокам
• Создание стилей для ссылок (тег <a>)
• Тест по пройденным урокам
• Тест по пройденным урокам
• CSS Свойство text-decoration

4. Главная страница. Создание верхней части сайта и меню

• Создание горизонтальное меню
• Тест по пройденным урокам
• Стилизация горизонтально меню
• Тест по пройденным урокам
• Header и TOP menu

5. Главная страница. Правая часть сайта

• HTML Form. Создание форм.
• HTML Form
• Right Block. Начнем создавать панель справа
• Тест по пройденным урокам
• Right Block. Продолжение.
• Right Block. Часть 3
• Right Menu

6. Главная страница. Нижняя часть сайта

• Часть 1
• Часть 2

7. Главная страница. Фильмы, сериалы, блог

• Content главной страницы
• Главная страница. Записи блога.

8. Страница просмотра фильмов и сериалов

• Страница просмотра фильмов
• Верстка блока информации о фильме
• Верстка блока описания к фильму
• Верстка блока с отзывами к фильму
• Интерактивное задание: Блок с отзывами к фильму
• Верстка формы отправки отзывов к фильму

9. Страница Фильмы
10. Страница Рейтинг фильмов

• Тест по пройденным урокам
• Страница Рейтинг фильмов

11. Адаптивная верстка

• Инструменты разработчика
• Media queries, тэг viewport
• Правила адаптивной верстки
• Тест по пройденным урокам
• Правила адаптивной верстки. Часть 2
• Подведение итогов.

После успешного прохождения уроков и заданий курса HTML/CSS вы получите сертификат на пяти языках.

Курс «HTML / CSS» — beONmax

https://beonmax.com/courses/html-and-css/ Стоимость: нет информации

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

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

В процессе обучения Вы получите знания и навыки:

• Основы HTML и CSS
• Полноценная верстка страниц сайтов, на примере сайта о кино
• Работа в редакторе кода SublimeText
• Практическое применение основных тегов HTML
• CSS-верстка текста: цвет и размер шрифта
• Позиционирование блоков на сайте
• Работа с изображениями
• Правильная HTML-разметка для SEO
• Адаптивная верстка под мобильные устройства
• Специальные классы для адаптивности
• Полезные инструменты для frontend-разработчика.

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

Программа обучения включает видео уроки по изучению HTML и CSS с нуля. Благодаря интерактивным тестам и заданиям, Вы сможете закрепить полученные знания по Html и Css верстке и программированию веб сайтов на практике.

1. ВВЕДЕНИЕ
2. ПОДГОТОВКА К РАБОТЕ. УСТАНОВКА РЕДАКТОРА КОДА
3. ОСНОВЫ HTML И CSS. БАЗОВАЯ РАЗМЕТКА, HTML-ТЕГИ, CSS-СТИЛИ
4. СОЗДАНИЕ САЙТА НА ПРАКТИКЕ. ГЛАВНАЯ СТРАНИЦА — ВЕРХНЯЯ ЧАСТЬ (HEADER) И МЕНЮ
5. СОЗДАНИЕ САЙТА. ГЛАВНАЯ СТРАНИЦА — ПРАВЫЙ БЛОК
6. СОЗДАНИЕ САЙТА. ГЛАВНАЯ СТРАНИЦА — НИЖНЯЯ ЧАСТЬ (FOOTER)
7. СОЗДАНИЕ САЙТА. ГЛАВНАЯ СТРАНИЦА — ФИЛЬМЫ, СЕРИАЛЫ, БЛОГ
8. СОЗДАНИЕ САЙТА. СТРАНИЦА ПРОСМОТРА ФИЛЬМОВ
9. СОЗДАНИЕ САЙТА. СТРАНИЦЫ ФИЛЬМЫ И РЕЙТИНГ ФИЛЬМОВ
10. СОЗДАНИЕ САЙТА. АДАПТИВНАЯ ВЕРСТКА
11. ЗАВЕРШЕНИЕ КУРСА — ПОЛУЧЕНИЕ СЕРТИФИКАТА.

Курс «HTML5 + CSS3 + JS с нуля до готового проекта» — Wezom.Academy

https://wezom.academy/courses/html-css-js/ Стоимость: нет информации

• 21 урок, 21 практическое, 20 тестов и финальная работа
• Для начинающих. Вы с нуля освоите навыки, необходимые верстальщику
• Постоянное комьюнити с преподавателями и студентами
• Сертификат после окончания курса.

На курсе вы научитесь:

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

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

1. Введение и основные понятия
2. Структура страниц
3. URL, Изображения и ссылки
4. Знакомство с графическим редактором Adobe Photoshop
5. HTML Таблицы. Основы табличной верстки
6. CSS Введение
7. Псевдоклассы и псевдоэлементы
8. CSS директивы
9. Работа со шрифтами
10. Стилизация типографики
11. Позиционирование в CSS
12. HTML Формы. Кроссбраузерная стилизация элементов формы (UI)
13. Iframe и HTML5 элементы
14. Мета-теги и фавиконки
15. Знакомство с языком программирования JavaScript
16. Основы и синтаксис языка
17. Структуры данных JavaScript
18. Замыкание, область видимости, контекст вызова
19. Знакомство с JavaScript библиотекой jQuery
20. Взаимодействие со страницей
21. Брифинг по экзаменационному заданию “Реальное дело”.

Курс «HTML CSS » — Raschool

https://raschool.ru/kursy-online/html-css Стоимость: бесплатно

Что вас ждет:

• Понимание разметки HTML
  структура документа — теги — атрибуты — написание первого html
• Понимание стилей CSS
  оформление через style — css — подключение — селекторы — свойства, значения, правила, директивы — специфичность
• взаимодействие client-server
  Клиент, сервер — http(s) протоколы — запрос — ответ — из чего состоит веб, веб-сайт — трудности веба.

Кому подойдёт курс:

• Новичкам, которые хотят освоить новую профессию
  Лучших выпускников берем в свою команду. Будете зарабатывать вместе с нами.
• Хотите покинуть душный офис и сменить сферу деятельности
  Приходите — научим.
• Фрилансерам
  Хотите начать работать удаленно из любой точки земного шара, приходите – научим.

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

1. Интернет. Веб-технологии
   — Клиент, сервер
   — http(s) протоколы
   — запрос – ответ
   — из чего состоит веб, веб-сайт
   — трудности веба
2. HTML
   -структура документа
   -теги
   -атрибуты
   -написание первого html
3. Теги и атрибуты
   — семантика
   — самые популярные теги
   — знакомство с инструментами разработчика (devTools, VSCode)
   — работа со спецификацией
4. CSS
   — оформление через style
   — css – подключение
   — селекторы
   — свойства, значения, правила, директивы
   — специфичность
5. Изучаем селекторы
   — классы, id, атрибуты
   — вложенные
   — дочерние…
6. Блочная модель
   — строчный бокс
   — блочный бокс
   — свойства строчных и блочных элементов
7. Типографика
   — шрифты
   — размеры шрифтов, начертания
   — единицы измерения
   — особенности работы шрифтов
8. Псевдоклассы и состояния
   — hover, focus, active
   — nth-child, selected, visited.

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

Курс «Веб-вёрстка» — ООО «Интерактивные обучающие технологии»

https://htmlacademy.ru/courses Стоимость: бесплатно

Тренажёры:

Старт

1. Знакомство с веб-разработкой
   На практике знакомимся с базовыми технологиями веб-разработки: HTML, CSS, JavaScript и PHP.

Начальный уровень

2. Знакомство с HTML и CSS
   Изучаем основы HTML и CSS. На практике разбираемся с семантической разметкой и базовыми механизмами стилизации на примере небольшого сайта.
3. Знакомство с JavaScript
   Узнаем, как работает JavaScript в браузере. Научимся оживлять интерфейсы.
4. Знакомство с PHP
   Добавляем PHP в разметку, работаем с веб-сценариями, данными и адресом.

Курс «HTML» — 1popov

https://1popov.ru/bonuscourse/htmlform/ Стоимость: бесплатно

Список уроков, которые вошли в курс:

1. Введение в HTML
2. Понятние тэга. Создание каркаса страницы
3. Параграфы и заголовки
4. Списки
5. Атрибуты
6. Изображения
7. Ссылки часть 1
8. Ссылки часть 2
9. Таблицы часть 1
10. Таблицы часть 2
11. Жирный и курсивный текст
12. Введение в формы
13. Текстовые поля форм
14. Радиокнопки
15. Чекбоксы
16. Элемент выбора в форме (селект)
17. Текстовая область
18. Создание кнопок
19. Объединение декоративное (fieldset)
20. Блокировка и только чтение
21. Обработчик
22. Локальный сервер
23. Отправка данных методами GET и POST
24. Функция отправки письма
25. Тэги внешних объектов
26. Предварительное форматирование
27. Карта изображения
28. Мета-теги
29. Комментарии
30. XHTML
31. Валидация документа
32. Тэги DIV и SPAN
33. Заключительный.

Курс «HTML и CSS» — Codebra

https://codebra.ru/ru/courses/html-css-base Стоимость: бесплатно

Содержание:

• Раздел 1. Знакомство с HTML☓
• Раздел 2. Разметка текста
• Раздел 3. Ссылки
• Раздел 4. Изображения
• Раздел 5. Таблицы
• Раздел 6. Формы
• Раздел 7. HTML5
• Раздел 8. Остальное
• Раздел 9. Знакомство с CSS
• Раздел 10. Селекторы в CSS
• Раздел 11. Структура и каскад
• Раздел 12. Единицы измерения
• Раздел 13. Шрифт
• Раздел 14. Свойства текста
• Раздел 15. Форматирование
• Раздел 16. Отступы, рамки, поля
• Раздел 17. Цвета и фон
• Раздел 18. Позиционирование
• Раздел 19. Вёрстка таблиц
• Раздел 20. Списки
• Раздел 21. Анимация
• Раздел 22. Практика с HTMLBOOK.RU
• Раздел 23. Элементы сайта.

Курс «HTML для начинающих» — Hexlet Ltd

https://ru.code-basics.com/languages/html Стоимость: бесплатно

Для стандартизации вывода текста внутри браузера был придуман стандарт HTML, описывающий правила оформления текстовых данных для корректного вывода. Этот курс посвящён азам HTML разметки, работы с типографикой, вывода медиа документов и работы с формами

• Основы разметки HTML

1. HTML разметка
2. Теги
3. Текст в HTML
4. Вложенность тегов
5. Атрибуты HTML

Для стандартизации вывода текста внутри браузера был придуман стандарт HTML, описывающий правила оформления текстовых данных для корректного вывода. Базовые концепции HTML не поменялись даже спустя более 20 лет после создания.

• Текст в HTML

6. Параграфы <p>
7. Начертание текста
8. Заголовки
9. Списки
10. Вложенные списки
11. Таблицы
12. Объединение ячеек внутри строк и столбцов
13. Специальные символы HTML
14. Ссылки
15. Форматированный текст
16. Вставка компьютерного кода в HTML

HTML предоставляет десятки правил для работы с текстом: от создания блока текста, до сложных таблиц и вложенных списков. Корректная разметка текста — один из ключевых навыков при работе с сайтом.

• Медиаэлементы

17. Изображения
18. Аудио
19. Видео

HTML разметка позволяет добавлять на страницы изображения, а в последнем стандарте HTML5 появилась возможность работы с аудио и видео контентом

• Структура HTML документа

20. Базовая структура
21. Мета-теги
22. link
23. Viewport
24. Блочные и строчные элементы

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

• Формы

25. Формы в HTML
26. Поле для ввода текста
27. Чекбокс
28. Радиокнопка
29. Textarea
30. Список
31. Отправка формы

Одним из важнейших элементов в HTML являются формы. Они позволяют взаимодействовать пользователю с сайтом. Поиск, обратные звонки, анкеты — всё это создаётся с помощью форм.

• Разное

32. Семантический WEB
33. Микроразметка
34. Ошибки в HTML-разметке

Говоря об HTML, нельзя пропустить темы, связанные с работой интернета в целом. Микроразметка, семантика, валидация — важные знания при работе с HTML документами.

• Семантические элементы HTML5

35. Семантические элементы
36. Шапка
37. Меню
38. Уникальный контент страницы
39. Секция
40. Самостоятельная секция
41. Боковая панель

В HTML5 появилось множество новых тегов для семантической разметки. Они призваны помочь браузерам корректнее обрабатывать документ, использовать «режим чтения». Поисковые системы также будут благодарны вам за то, что поможете им чётко видеть структуру вашего сайта. В данном модуле разметим типичную веб-страницу, используя новые теги HTML5.

Курс «HTML для начинающих» — PHP.Zone

https://php.zone/kurs-html-dlya-nachinayushih Стоимость: бесплатно

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

Онлайн курс по изучению языка HTML для начинающих – это возможность самостоятельно сделать первый шаг на пути освоения специальности веб-разработчика.

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

Уровень 1. Введение и основы HTML

1. Создаём свою первую HTML-страницу
2. Теги как основа HTML-страницы

Уровень 2. Служебные теги

3. Теги для поисковиков
4. Время поделиться первым результатом

Уровень 3. Оформление контента

5. Основы оформления контента в HTML
6. Учимся делать ссылки в HTML
7. Основы CSS
8. Таблицы в HTML
9. Формы в HTML

Уровень 4. Создание сайта и его выкладка в Интернет

10. Табличная вёрстка HTML-страничек. Прототип сайта
11. Как выложить сайт в Интернет: простая инструкция

Уровень 5. Подведение итога

12. Что делать после прохождения курса HTML.

Курс «HTML» — WebReference

https://webref.ru/course/html-tutorial Стоимость: бесплатно

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

Содержание:

• Введение в HTML
• Инструментарий
• Элементы HTML
• Структура HTML-кода
• Атрибуты элементов
• Значения атрибутов
• Работа с текстом
• Ссылки
• Якоря
• Списки
• Изображения
• Таблицы.