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

Курс «Построение сеток»

Составитель: Денис Сметнёв

Гриды — одна из тех тем, где верстальщики среднего уровня буксуют дольше всего: теорию знают, а сложную плиточную раскладку или асимметричную карточку собрать не могут. Курс HTML Academy по построению сеток закрывает именно этот разрыв. Три главы — от базовых сеток до микросеток — заканчиваются конкретными результатами: сверстаете блок навигации, список карточек со сложной плиткой, карусель и карточку с асимметричной сеткой. Курс бесплатный, рассчитан на средний уровень.

Подробнее


Компания: HTML Academy (HTML академия)

Язык: ru

Уровень: Средний Старт: в любое время

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

  1. Глава 1: Сетки
  2. Глава 2: Микросетки. Начало
  3. Глава 3: Микросетки. Продолжение

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

Junior
80 000 ₽
Middle
130 000 ₽

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

КурсШколаЦенаСрокРейтингДиплом
Построение сеток (этот) HTML Academy (HTML академия) беспл.
Основы HTML и CSS Netology (Нетология) беспл. 3 недели 4.5 Перейти
Занимательные элементы интерфейса в HTML/CSS GeekBrains (ГикБреинс) беспл. 3.6 Сертификат Перейти
Основы HTML и CSS ФРОО 24 000 ₽ 2 месяца 3.2 Обзор

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

Плюсы

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

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

  • Длительность не указана — невозможно заранее понять, на какой объём рассчитывать и как вписать курс в расписание.
  • Сертификат об окончании в описании курса не упоминается: если документ нужен для резюме или работодателя — этот курс вопрос не закроет.
  • Программа охватывает только сетки; если нужна более широкая база CSS или тема типографики, анимаций — придётся искать отдельно.

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

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

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

Выбирая курс по вёрстке, смотрю прежде всего на соотношение теории и практики: легко найти лонгрид про CSS-гриды, сложнее — программу, где тебя заставляют сверстать реальную раскладку и получить ошибку в браузере. Второй вопрос — насколько точно заявленный уровень соответствует тому, с чем ты придёшь. «Средний уровень» означает: базовый HTML/CSS должен быть за плечами. Третье — есть ли в программе адаптивность: в 2026 году вёрстка без адаптации под мобильные устройства — неполная работа. Цена имеет значение только в сравнении с тем, что внутри: бесплатный курс с практическими заданиями часто даёт больше, чем платный с видео-теорией без обратной связи.

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

Нужны ли знания HTML и CSS перед стартом?

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

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

Длительность в описании курса не указана. Судя по трём главам с практическими заданиями, это не однодневный спринт — ориентируйтесь на несколько занятий, но точный срок уточните у школы.

Дадут ли сертификат по окончании?

В описании курса этот момент не раскрыт. Если сертификат нужен — проверьте напрямую на сайте HTML Academy до начала обучения.

Карусель в программе — это полноценный компонент или учебный пример?

По результатам курса вы верстаете карусель и карточку с асимметричной сеткой. Насколько они готовы к production-использованию — зависит от того, как HTML Academy подаёт задание; смотрите на детали в самой программе.

Адаптивная вёрстка разбирается или только десктопные раскладки?

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

Есть ли возможность задать вопрос преподавателю?

Формат поддержки в описании курса не указан. HTML Academy обычно предоставляет форумы и чаты для учеников, но конкретный формат для этого курса уточните на сайте школы.

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

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

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

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

Интерактивный курс: теория, задания и испытания Обучение в свободном режиме

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

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

Общение на форуме учеников

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

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

5 глав 129 заданий 15 испытаний

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

  • Управлять размерами и расположением элементов, задавать отступы и рамки
  • Управлять размерами и отступами флекс-элементов
  • Понимать, как работают коэффициенты растяжения и сжатия
  • Отработать основные приёмы построения сеток
  • Разными способами создавать грид-раскладки
  • Управлять расположением грид-элементов в грид-контейнере
Перейти на страницу курса Запишись на курс
прямо сейчас!

О курсе

О курсе

Веб-разработчикам

Условия оплаты

доступ ко всем курсам этой школы осуществляется по подписке:
профессиональный - $39/месяц
премиум - $199/месяц

20 заданий

3 испытания

Глава 1:

Блочная модель документа

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

29 заданий

3 испытания

Глава 2:

Сетки

Попробуем поймать поток документа и разобраться что это такое. Взглянем на тонкости свойства float и блочно-строчных элементов. Отработаем основные приёмы построения сеток.

28 заданий

3 испытания

Глава 3:

Флексбокс, часть 1

Рассмотрим основы нового механизма «гибкой» раскладки — флексбокс. Сначала потренируемся «на котиках» направлять оси флекс-контейнера, выравнивать и переносить флекс-элементы, а затем научимся простому применению флексбокса в реальных интерфейсах.

25 заданий

3 испытания

Глава 4:

Флексбокс, часть 2

Узнаем как управлять размерами и отступами флекс-элементов и как работают коэффициенты растяжения и сжатия, а также потренируемся создавать «гибкие» раскладки и элементы интерфейса.

27 заданий

3 испытания

Глава 5:

Знакомство с гридами

В этой главе мы начнём изучать технологию гридов: разберём, как разными способами создавать грид-раскладки, как управлять расположением грид-элементов в грид-контейнере. Затем мы применим полученные знания на практике и сверстаем с помощью гридов пару небольших интерфейсов.

HTML

CSS

Управление размерами и расположением элементов, отступы и рамки.

Вёрстка на Flexbox в CSS

Верстка с помощью гридов небольших интерфейсов.

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

 
ВЕРСТКА FLEXBOX ВЕРСТКА ИНТЕРФЕЙСОВ

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

HTML Academy (HTML академия)

21 курс по 77 темам

Академия HTML запустилась в 2013 году. Является участником Сколково. На платформе насчитывается 67 онлайн-курсов, 6 интенсивов и более 300...

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

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

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

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

HTML Academy (HTML академия)
(3)
HTML Academy (HTML академия)
(1)
HTML Academy (HTML академия)
(0)
HTML Academy (HTML академия)
(0)
HTML Academy (HTML академия)
(0)
HTML Academy (HTML академия)
(2)
HTML Academy (HTML академия)
(0)
HTML Academy (HTML академия)
(0)
1 060 
HTML Academy (HTML академия)
(0)