Акции школ
Войти

Курс «Верстаем landing page на HTML5»

Составитель: Денис Сметнёв · Обновлено: 22.08.2026

Три урока, один проект — landing page с нуля на HTML5. Стартовая точка — базовые HTML и CSS за плечами: уровень продвинутый, теорию автор пропускает и сразу берётся за живую задачу: от структуры страницы до позиционирования фоновых изображений, flex-сетки, Less в VS Code и live reload в браузере. Бесплатный — значит, можно попробовать без ставки. По опыту наблюдения за десятками коротких практикумов по вёрстке скажу: такой формат работает ровно тогда, когда вся программа крутится вокруг одной конкретной задачи — здесь так и сделано.

Подробнее


Компания: GeekBrains (ГикБреинс)

Язык: ru

Уровень: Сложный Формат: Онлайн Старт: в любое время Документ: Сертификат
🎓 Сертификат
Почему мы рекомендуем: сертификат — оценка по нашей методике (рейтинг, цена, трудоустройство, диплом)

Актуальная программа курса (3 модулей, по данным школы)

  1. Урок 1. Верстаем landing page на HTML5. Часть 1
  2. Урок 2. Верстаем landing page на HTML5. Часть 2
  3. Урок 3. Верстаем landing page на HTML5. Часть 3

Сколько зарабатывают в профессии (медиана hh.ru, по 117 вакансиям)

Junior
80 000 ₽
Middle
130 000 ₽

Сравнение с похожими курсами других школ

КурсШколаЦенаСрокРейтингДиплом
Верстаем landing page на HTML5 (этот) GeekBrains (ГикБреинс) беспл. Сертификат
Разработчик на Spring Framework OTUS (Отус) 5 месяцев 5.0 Перейти
1-2-3 — Сайт! Восхождение на Tilda Тренинг-центр 1day1step.ru 8 400 ₽ 2 месяца 5.0 Обзор
Modx LoftSchool (Лофт скул) беспл. 5.0 Обзор

Стоит ли идти на этот курс

Плюсы

  • Конкретная сквозная задача: все три урока — один проект, landing page от начала до конца, а не разрозненные темы.
  • Плотный рабочий стек: VS Code, Emmet, Less, Flexbox, normalize.css, Google Fonts, якорные ссылки — инструменты, которые реально используются в работе.
  • Бесплатный доступ — можно проверить подход и материал без финансового риска, прежде чем брать более длинную платную программу по вёрстке.
  • Сертификат по окончании фиксирует факт прохождения — полезен при сборке первого портфолио.

Минусы и кому не стоит

  • Три урока — это спринт, а не полноценный курс: глубокой отработки навыков или разбора сложных кейсов ждать не стоит.
  • Уровень заявлен как продвинутый, но входные требования нигде не прописаны — без понимания HTML/CSS и базового опыта в VS Code материал рискует не усвоиться.
  • Карьерного трека здесь нет: ни поддержки с трудоустройством, ни куратора — курс закрывает одну техническую задачу, и только.

Когда этот курс вам не нужен

Если вы уже верстаете коммерческие проекты и свободно работаете с Less или другими препроцессорами — новых знаний здесь не найдёте. Не подойдёт тем, кто ищет системную программу с наставником, обратной связью по коду и сопровождением до трудоустройства: формат три урока этого не даёт по определению. Тем, кто целится в адаптивную вёрстку или хочет добавить JavaScript-взаимодействие на страницу — нужен другой курс, здесь этой темы нет.

Как выбрать курс по этому направлению

Выбирая курс по вёрстке, смотрите не на количество уроков, а на стек: учат ли работать с реальными инструментами — препроцессорами, сборщиками, системами контроля версий — или ограничиваются чистым HTML. Продвинутый уровень на странице программы означает, что базу автор считает известной: приходить совсем без опыта рискованно. Для коротких курсов ключевой вопрос — конкретный результат на выходе: не «познакомитесь с CSS», а «соберёте страницу». Бесплатный курс стоит оценивать по тому, есть ли там разбор реального проекта, а не демо-слайды.

Частые вопросы

Можно ли проходить курс с нуля, без опыта в вёрстке?

Курс обозначен как продвинутый. Если HTML-теги и базовый CSS — незнакомая территория, стоит начать с вводного курса по HTML/CSS, а уже потом браться за этот.

Сколько времени займёт прохождение?

Программа — три урока. Точную длину видео школа не публикует, но по формату это компактный практикум: реалистично пройти за несколько вечеров.

Какой документ выдают по итогу?

Сертификат об окончании обучения. Диплом государственного образца — это не он: документ фиксирует факт прохождения, что полезно на начальном этапе сборки портфолио.

Курс платный или бесплатный?

Бесплатный. Так можно оценить формат и подачу GeekBrains без вложений, прежде чем рассматривать платные программы школы.

Есть ли практические задания?

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

Поможет ли курс найти работу верстальщиком?

Карьерной поддержки и трудоустройства в программе нет. Три урока — рабочая точка входа в практику вёрстки, но не замена полноценному карьерному треку.

Длительность курса

Длительность курса

Обучение в свободном режиме

Формат обучения

Формат обучения

Видеокурс

Обратная связь

Обратная связь

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

Теория и практика

Теория и практика

3 урока

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

  • Применять Adobe Assets
  • Ускорять написание HTML-разметки с помощью Emmet
  • Нормализовать стили
  • Подключать сторонние шрифты
  • Центрировать элементы и фоновые изображения
  • Использовать ссылки-якори
  • Верстать списки, меню, блоки на Flex
  • Позиционировать текст поверх изображений
  • Создавать PSD-макет проекта и размещать результат работы на хостинг GitHub
Перейти на страницу курса Запишись на курс
прямо сейчас!

О курсе

О курсе

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

Сверстаете landing page и познакомитесь с основами HTML5 и CSS3.

Урок 1. Верстаем landing page на HTML5. Часть 1

Темы урока: * **vs code** – пару слов о редакторе кода; * **adobe assets** – Фотошоп не нужен; * **emmet** – ускоряем написание HTML-разметки; * **HTML5** – где применять section, header, nav и другие новые теги; * **normalize.css** – нормализация стилей; * **Google fonts** – подключение сторонних шрифтов; * **vh** – единицы измерения; * **display flex** – как центрировать элементы.

Урок 2. Верстаем landing page на HTML5. Часть 2

Темы урока * less в редакторе vs code, * меню на flex, два варианта: only css, with js, * списки на flex, * использование ссылок-якорей.

Урок 3. Верстаем landing page на HTML5. Часть 3

На третьем уроке речь пойдет о: * live reload в vscode, * верстаем блоки на flex, * центрирование фоновых изображений, * разница между списками в html: ul(ol) и dl, * позиционирование текста поверх изображений.

HTML5

CSS3

adobe assets

Google fonts

Emmet

Подключение сторонних шрифтов Google fonts

Работа с adobe assets

Ускоренное написание HTML-разметки с помощью emmet

Нормализация CSS при помощи Normalize.css

Верстка блоков на flex

Использование ссылок-якорей

Центрирование фоновых изображений

Позиционирование текста поверх изображений

Навыки, которые вы получите

 
ВЕРСТКА GOOGLE FONTS FLEXBOX ССЫЛКИ-ЯКОРЯ

Компания, проводящая курс

GeekBrains (ГикБреинс)

215 курсов по 810 темам

Онлайн-платформа для обучения GeekBrains (Гик брейнс) работает с 2014 года. Является частью холдинга Mail.Ru Group и резидентом Сколково с 2016...

Отзывов об этом курсе пока нет

Ниже — отзывы о школе GeekBrains (ГикБреинс): они помогут составить впечатление, но в рейтинге курса не учитываются. Проходили этот курс? Поделитесь — это поможет другим студентам.

больше курсов

Похожие курсы компании