Мини-курс
HTML и CSS с нуля
8 коротких уроков: от первого HTML-файла до адаптивной страницы, которая хорошо выглядит и на компьютере, и на телефоне.
Коротко об HTML и CSS
HTML описывает, что есть на странице: заголовки, текст, картинки, кнопки. CSS отвечает за то, как это выглядит: цвета, шрифты, отступы, расположение блоков. Вместе они — основа любого сайта, а умение верстать — первый шаг во фронтенд-разработку. Результат виден сразу: сохранили файл, обновили страницу в браузере — и видите изменения.
Зарплаты сильно зависят от города и опыта — смотрите актуальные вакансии: вакансии верстальщика на hh.ru.
Из чего сделан любой сайт
Откройте любую страницу в браузере — новостной сайт, интернет-магазин, соцсеть. Всё, что вы видите, описано на HTML и оформлено с помощью CSS. Даже самые сложные сервисы в итоге превращают свои данные в обычную HTML-разметку, которую показывает браузер.
Поэтому HTML и CSS учат первыми все, кто идёт во фронтенд, — а ещё дизайнеры, тестировщики и маркетологи, которым нужно понимать, как устроены страницы.
В каждом уроке — примеры кода с разбором, задание с готовым решением и мини-тест. Для практики хватит браузера и текстового редактора.
Кому подойдёт, а кому нет
Скорее подойдёт, если
- Хотите делать сайты и сразу видеть результат своей работы
- Замечаете, когда на странице что-то «съехало» или выглядит неаккуратно
- Собираетесь во фронтенд-разработку или веб-дизайн
- Нужен свой сайт-визитка или лендинг без конструктора
- Никогда не программировали: HTML и CSS — мягкий вход
Скорее не подойдёт, если
- Интересна логика и вычисления, а не внешний вид — посмотрите курс по Python
- Раздражает подгонять отступы до пикселя: в вёрстке это обычная работа
- Рассчитываете освоить вёрстку за выходные: до уверенного уровня — месяцы практики
Программа: 8 уроков
-
Урок 1из 8 пройдензнаете
Открыть
Как устроена веб-страница: первый HTML-файл
Кто за что отвечает на странице — HTML, CSS и JavaScript, как устроен HTML-документ, что такое теги и атрибуты и как открыть свою первую страницу в браузере.
15 мин · Дальше: Текст и структура страницы: заголовки, списки, семантика -
Урок 2из 8 пройдензнаете
Открыть
Текст и структура страницы: заголовки, списки, семантика
Заголовки, абзацы, списки и выделение текста, а также семантические теги header, main, footer и другие — и почему от них зависят поиск и доступность.
20 мин · Дальше: Ссылки, изображения и формы -
Урок 3из 8 пройдензнаете
Открыть
Ссылки, изображения и формы
Как ставить ссылки на другие сайты и страницы, вставлять картинки с правильным alt и собирать формы: поля ввода, подписи и кнопки.
20 мин · Дальше: Знакомство с CSS: селекторы, цвета и шрифты -
Урок 4из 8 пройдензнаете
Открыть
Знакомство с CSS: селекторы, цвета и шрифты
Как подключить CSS к странице, как устроено правило, чем различаются селекторы по тегу, классу и id, и что такое каскад и наследование.
20 мин · Дальше: Блочная модель: размеры, отступы и рамки -
Урок 5из 8 пройдензнаете
Открыть
Блочная модель: размеры, отступы и рамки
Из чего состоит каждый элемент на странице: содержимое, внутренний отступ, рамка и внешний отступ. Как работает box-sizing и чем блочные элементы отличаются от строчных.
20 мин · Дальше: Flexbox: раскладываем блоки в ряд -
Урок 6из 8 пройдензнаете
Открыть
Flexbox: раскладываем блоки в ряд
Как с помощью Flexbox выстроить элементы в строку или столбец, распределить место между ними, выровнять по центру и перенести на новую строку.
20 мин · Дальше: Адаптивная вёрстка: сайт на телефоне и компьютере -
Урок 7из 8 пройдензнаете
Открыть
Адаптивная вёрстка: сайт на телефоне и компьютере
Как сделать, чтобы страница хорошо выглядела на любом экране: метатег viewport, относительные единицы, гибкие картинки, медиазапросы и подход mobile first.
20 мин · Дальше: Собираем страницу целиком и что учить дальше -
Урок 8из 8 пройдензнаете
Открыть
Собираем страницу целиком и что учить дальше
Сборка небольшой страницы от разметки до адаптивных стилей, проверка качества вёрстки и следующие шаги после основ HTML и CSS.
25 мин
Итоговый тест
16 вопросов по всем урокам, около 12 минут. В конце — разбор, какие темы повторить, и вывод по вашим ответам: стоит ли развиваться в вёрстке дальше.
Что дальше
Если тема зацепила, продолжить можно так.
Частые вопросы
Что нужно, чтобы начать?
Браузер и любой текстовый редактор. Удобнее всего бесплатный VS Code: он подсвечивает код и подсказывает теги. Как создать первую страницу, рассказываем в первом уроке.
HTML — это язык программирования?
Нет, это язык разметки: он описывает структуру страницы, но не содержит логики и вычислений. Логику добавляет JavaScript — для него на сайте есть отдельный курс.
Нужно ли уметь рисовать или знать дизайн?
Нет. Верстальщик воплощает в коде готовый макет дизайнера. Чувство аккуратности пригодится, а рисовать не придётся.
Сколько времени займёт курс?
Около трёх часов: 8 уроков по 15–25 минут и итоговый тест. Удобный темп — урок в день, плюс время на задания.
Это бесплатно?
Да, и без регистрации. Сайт зарабатывает на партнёрских программах онлайн-школ — как это устроено, рассказываем на странице «О проекте».
Хватит ли этого курса, чтобы найти работу?
Для первой работы его мало: курс даёт основу вёрстки. Дальше нужны CSS Grid, вёрстка по макетам, JavaScript и портфолио — с чего начать, рассказываем в уроке 8.