HTML и CSS. Адаптивная вёрстка и автоматизация
Курс для тех, кто хочет стать высокооплачиваемым профессионалом. Идеально подойдёт, если у вас мало времени.
Старт курса
Длительность
19 июля
2,5 месяца
Вы научитесь верстать сайты на профессиональном уровне и сможете начать карьеру фронтенд-разработчика
В основе курса триада критерии+проект+ наставник
Проект
Выполняете проекты, максимально приближенные к проектам, которые будут у вас на работе
2
Критерии
Разрабатываем критерии качества знаний и навыков с компаниями и профессиональным сообществом
1
Наставник
Ваши проекты проверяют наставники - профессиональные разработчики
3
Как устроен курс
Живые лекции
Лекции проходят по понедельникам и четвергам с 19:00 до 21:00 по московскому времени. Запись лекции доступна на следующий день.
Спикер не просто рассказывает сухую теорию, но постоянно общается с аудиторией и делится любопытными кейсами из личного опыта.

После каждой темы студенты выполняют задание на пару минут, чтобы сразу отработать знания и задать вопросы.
Практика
После лекции вы выполняете домашнее задание, в котором работаете над своим проектом и закрепляете учебный материал.
Студенты выполняют домашние задания на удаленном сервере, практикуются на тренажерах и работают в настоящем кластере. Если возникли вопросы, преподаватели ответят на них в чате в Slack.
Ревью кода
После каждого задания ваш личный наставник проверяет качество работы, делится опытом и рассказывает, как можно сделать лучше.
Чему вы научитесь
1
2
3
4
Создадите разметку по методологии БЭМ
Потренируетесь писать CSS-код на препроцессорах
Сделаете адаптивную сетку
Поработаете с адаптивной и ретиновой графикой
5
Подготовите автоматизацию сборки проекта для публикации
После прохождения курса вы получите электронный сертификат
Программа курса
Раздел 1
Введение
Развернуть
Раздел 1
Введение
Познакомимся с рабочим процессом на интенсиве.
Как проходит курс. Организационные вопросы.
- Обзор личных проектов.
- Как работать с наставником.
- Критерии качества вёрстки.
- Защита личного проекта и получение сертификата.
- Зависимость заданий.
- Настройки личных проектов.
- Создание мастер-репозитория.
- Структура личных проектов.
Рабочий процесс на интенсиве
Свернуть тему
- 8 скринкастов о работе в системе контроля Git.
- Статьи, которые помогут выбрать редактор кода, разобраться с принципами работы консоли и начать работать с системой контроля версий.
- Получаем наставника.
- Настраиваем инструменты разработки, получаем графические макеты и создаём репозитории проектов.
- Отрабатываем процесс выполнения заданий. Вносим изменения в проект в отдельной ветке и предлагаем пулреквест в Гитхабе.
Структура занятия
Раздел 2
Методологии вёрстки
Развернуть
Раздел 2
Методологии вёрстки
Приёмы создания надёжной вёрстки.
- Порядок в коде.
- Работа в команде
- Недостатки технологий.
Зачем нужны методологии
Свернуть тему
- Классический подход.
- Независимые блоки.
- Атомарный подход.
- Компоненты и модули.
Обзор подходов к вёрстке
Методология БЭМ
Контекст функций
Разбор учебного проекта по БЭМу
- Зачем всё так усложнять.
- Как разбить интерфейс на блоки.
- Элементы и модификаторы.
- Ошибки и узкие места.
Раздел 3
Препроцессоры и автоматизация
Развернуть
Раздел 3
Препроцессоры и автоматизация
Взглянем на препроцессоры и разберёмся, чем они помогают в процессе вёрстки.
- Обзор препроцессоров.
- Новые возможности CSS.
- Сравнение возможностей.
Стили на стероидах
Свернуть тему
- Сравнение Less и Sass.
- Переменные и математика.
- Вложенные селекторы.
- Операции с цветами.
Основные возможности
- Подключение файлов.
- Примеси и расширения.
- Организация кода.
- Сборка стилей.
Дополнительные возможности
- Система сборки на Node.js.
- Сборщик Gulp.
- Автоматизация сборки и вотчеры.
Настройка окружения
Раздел 4
Адаптивные сетки
Развернуть
Раздел 4
Адаптивные сетки
Узнаем, как создавать адаптивные сетки с использованием гридов и флексов.
- Введение во флексы.
- Контейнер, элементы, оси.
- Алгоритм расчёта размеров элементов.
- Выравнивание и распределение элементов вдоль осей.
- Однострочный и многострочный контейнер, управление рядами.
- Особенности флексов при создании сеток.
Спецификация Grid Layout и раскладка по сетке макета
Спецификация Flexible Boxes и раскладка по сетке макета
Свернуть тему
- Устройство шаблонов: строки, колонки, линии, отступы.
- Ручная и автоматическая раскладка.
- Спецификация Box Alignment и выравнивание внутри сетки.
- Гриды для адаптивных макетов.
- Принципы перестроения сетки.
- Медиавыражения и брейкпоинты.
- Организация кода разных версий страницы: мобильной, планшетной и десктопной.
- Проблема двух вьюпортов на мобильных.
- Настройка вьюпорта.
Адаптивные сетки
Навыки построения сеток на гридах и флексах.
Учебник
Создаём адаптивные сетки БЭМ-блоков учебного проекта
Раздел 5
Адаптивные декоративные элементы
Развернуть
Раздел 5
Адаптивные декоративные элементы
Разбираемся с адаптивными декоративными элементами. Делаем адаптивную вёрстку с резиновыми сетками.
- Отличие «резины» от «фикса».
- Переход от пикселей к процентам.
- Резиновые колонки с точными размерами на флексах.
- Неточные резиновые колонки с помощью flex-grow.
- Флекс внутри флекса и элементы с резиновой высотой.
- Когда использовать резиновые сетки и насколько они сложнее.
Завершаем адаптивную вёрстку БЭМ-блоков учебного проекта
Переход от фиксированных сеток к резиновым. Тонкости флексов
Делаем резиново-адаптивную вёрстку БЭМ-блоков учебного проекта
Свернуть тему
Раздел 6
Адаптивная графика
Развернуть
Раздел 6
Адаптивная графика
Погружаемся в адаптивную и ретиновую графику. Разбираемся с форматами и их назначением.
- Тег на все случаи жизни — <picture>.
- Ретинизация контентных изображений с помощью атрибута srcset.
- Кадрирование изображений с помощью <source>.
- Использование современных форматов графики с помощью <source>.
- Изображения неопределённых размеров и sizes.
Графика для экранов повышенной чёткости
Адаптивная графика
Свернуть тему
Ретинизируем и добавляем адаптивную графику в учебном проекте.
- В чём разница между физическими и логическими пикселями.
- Что такое «ретиновая» графика.
- Приёмы ретинизации содержимого веб-страницы.
Раздел 7
Векторная графика и оптимизация
Развернуть
Раздел 7
Векторная графика и оптимизация
Научимся использовать векторную графику всеми возможными способами. Разберёмся, как использовать графику оптимально.
- Зачем нужны, в каких случаях полезны.
- Варианты реализации.
Использование SVG
SVG-спрайты
Свернуть тему
- Сжатие с потерями и без.
- Обзор возможностей оптимизатора Squoosh.
- Обзор формата WebP и особенностей его применения.
Оптимизация растровой графики
- Плюсы и минусы векторной графики.
- Подключение SVG внешним ресурсом.
- Встраивание SVG.
- Что можно, а что нельзя.
- Анимация.
- Адаптивность.
Стилизация SVG
- Особенности экспорта из Figma.
- Дожимаем и оптимизируем SVG.
- Доступность.
Оптимизация
и доступность SVG
Раздел 8
Погружение в автоматизацию
Развернуть
Раздел 8
Погружение в автоматизацию
Подготовим сборку проекта для его публикации.
- Минификация CSS-кода.
- Оптимизация изображений.
- Сборка и минификация SVG-спрайта.
Оптимизация
Как держать код для разработчика удобным, а для браузеров — быстрым.
Свернуть тему
Раздел 9
Производительность верстки
Развернуть
Раздел 9
Производительность вёрстки
Разберемся с производительностью вёрстки и попробуем оптимизировать узкие места.
- Количество и объём ресуров.
- Разница между типами ресурсов.
- Метрики загрузки.
- Области ответственности между бэкендом и фронтендом.
- Приоритеты загрузки.
- Инструменты анализа.
- Последствия медленной загрузки.
Обзор трендов скорости интернета
Процесс загрузки страницы
Свернуть тему
- Форматы и браузерная поддержка.
- Негативные эффекты при загрузке.
- Управление отрисовкой с помощью font-display.
- Анализ скорости с помощью Lighthouse
- Чтение отчёта Lighthouse.
- Альтернативные инструменты.
- Подсказки по загрузке ресурсов.
Оптимизация шрифтов
Аудит и подсказки
Раздел 10
Итоговый проект
Развернуть
Модуль 9
Итоговый проект
Защита проекта проходит в четыре этапа (по неделе на каждый этап):
1. Готовитесь к итоговой защите.
2. Проверяющий преподаватель оценивает проект по критериям качества.
3. Улучшаете проект по замечаниям преподавателя и отправляете на повторную оценку.
4. Вносите финальные правки и получаете итоговую оценку.
Свернуть тему
Кому будет полезен курс
Начинающим верстальщикам.
Обучение рассчитано на выпускников курса "HTML и CSS. Профессиональная верстка сайтов" или на верстальщиков, желающих прокачать свои навыки.

Тимлидам
Прокачайте сотрудника или команду в верстке профессиональных веб- и мобильных приложений

1 этап
Как мы отбираем наставников
Мы убеждены, что обратную связь ученику должен давать опытный специалист, который прямо сейчас работает на рынке, решает современные задачи, использует актуальные подходы и инструменты. Мы отбираем наставников в три этапа.
2 этап
3 этап
После каждого курса мы собираем обратную связь, которая помогает наставникам совершенствоваться.
Проверяем, кем и где кандидат в наставники работал, какой у него опыт, смотрим на его код
Проводим собеседование,
на котором проверяем знание предметной области и умение объяснять тему
Проверяем, кем и где кандидат в наставники работал, какой у него опыт, смотрим на его код.
Стоимость обучения
Стандартный курс
5 часов работы с личным наставником
21 510 ₽
ПРЕМИУМ КУРС
9 часов работы с личным наставником
23 900 ₽
Цена с корпоративной скидкой -10%
33 210 ₽
36 900 ₽
Цена с корпоративной скидкой -10%
Бесплатная консультация
Познакомимся, поможем понять, работает ли курс на ваши цели.
Расскажем, как проходит урок и как отвечают наставники.
Ответим на вопросы об оплате.
Оставляя заявку, вы принимаете
условия соглашения
Отзывы выпускников
После первого уровня шла на второй уверенно, но уверенности поубавилось как только прочитала критерии для сдачи проекта. Я не поняла в них ни слова дальше разметки. Но решила в панику сразу не впадать, а решать проблемы постепенно, по мере поступления.
Анна Почкина
Можно ли собрать все лучшие практики и максимально доступно донести их, так, чтобы всё то, что так и не понял из документаций в сети, стало понятно с первых же слов лектора? Оказывается, можно.
Андрей Ефимов
Проработав около двух лет JavaScript-разработчиком, я почувствовал острую нехватку знаний в HTML и CSS. Сначала пытался самостоятельно изучать, но информация была разрозненная, тяжело усваивалась и запоминалась. Вскоре наткнулся на курсы от HTML Academy — прошёл все бесплатные, потом оплатил один месяц и прошёл почти все остальные.
Тимур Гумеров
После первого уровня думал, что понял основы вёрстки, но оказалось, что второй уровень на 80% был полностью новым для меня. То есть это тоже, конечно, основы основ, но это уже отличный фундамент для того, чтобы построить свой путь в веб-сферу. Конкретно на этом курсе мне очень понравилась подача материала. В особенности видеоразбор «Git для чайников», потому что консоль меня пугала, но после этих видео я перестал бояться работать в терминале.
Михаил Леонов
Очень интересный курс. Я узнала много нового, научилась и полюбила работать с консолью, поняла, что такое препроцессоры, как делать сайты адаптивными и как автоматизировать процессы своей работы. Материала очень много. Его изучению в рамках пяти недель надо уделять всё свободное время. Особенно если ты не участник профессии и времени на защиту у тебя поменьше.
Наталья Макарова
Сложно, интенсивно, но очень интересно и увлекательно. Иногда забываешь есть, спать и выходить на улицу. Но когда получаешь заветный статус «принят» — мир начинает играть новыми краскам.
Sviatkana Kaitanava
Довольно сложный курс, по сравнению с первым нагрузка действительно пошла в гору. Вроде бы делаешь всё то же самое, что и раньше: верстаешь, стилизуешь и так далее, но то, как тебя учат это делать, тут уже совершенно другой подход. БЭМ, автоматизация, оптимизация, адаптив, препроцессоры — информации на освоение действительно очень много, особенно в столь сжатые сроки.
Николай Блинов
После первого уровня решила сразу идти на второй. Перед стартом прочла критерии и многие не поняла. Это, конечно, пугало, но зная уровень Академии, очень обрадовалась и не сомневалась, что за такой короткий срок нас научат многому. Препроцессоры, автоматизация, БЭМ, производительность и это неполный список новой и полезной информации, которую я получила за пять недель и это здорово!
Юлия Саенко
Второй уровень оказался ещё интереснее и сложнее первого. Взяла самый сложный (по мнению Академии) проект и весь месяц прокачивала внимательность, верстая для разных версий экрана. Больше же всего понравилось, как легко и ненавязчиво нас обучили основам автоматизации.
Марина Целищева
В отличие от первой ступени, вёрстке, как таковой, здесь не учат. Предполагается, что ты её уже знаешь. Если нужно научиться строить сетку, двигать правильными инструментами картинки, делать кнопки — кнопками, а ссылки — ссылками, то это на первый уровень. Здесь же учат хорошему тону: правильному подходу к коду, оптимизации и автоматизации.
Вита Лаптенок