Сложность
Сложность
Начинающий
Тип обучения
Тип обучения
Курс
Трудоустройство
Трудоустройство
Отсутствует
Сертификат
Сертификат
Да

Стоимость курса

21 900 ₽
есть рассрочка
Что вас ждёт на обучении
Лайвы
Прямые эфиры, на которых преподаватели разбирают сложные моменты из теории и практики. Проходят с 19 до 21 по Москве, запись доступна на следующий день.
Практика
После лекции вы выполняете домашнее задание, в котором работаете над своим проектом и закрепляете учебный материал.
Ревью кода
Наставник будет проверять качество выполнения заданий и делиться опытом, как можно сделать лучше.

Обучение рассчитано на выпускников курса «HTML и CSS. Профессиональная вёрстка сайтов» или для верстальщиков, желающих поднять свои навыки.

Объём заданий подобран так, чтобы даже занятые и работающие люди успевали выполнять их в срок, работая в комфортном режиме.

Вы сами регулируете нагрузку в зависимости от тарифа. На индивидуальном тарифе понадобится уделять 10 часов в неделю, на базовом — 15 часов в неделю.

Сроки итоговой защиты позволяют детально проработать обратную связь от проверяющего наставника и получить отлично выполненный личный проект.
Учим делать правильно

Актуальные стандарты качества: не нужно переучиваться после курса.

Понимание полного цикла работы верстальщика.

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

Опыт работы с дедлайнами и планирования работы.

Что вы получите после обучения

Приобретаемые навыки
Сертификат, ссылками на который можно делиться с другими людьми

Образовательная организация

Наша цель — сделать из любого новичка полноценного и востребованного специалиста, готового работать в веб-индустрии.

В 2013 году Саша и Лёша запустили HTML Academy. Мы с самого начала решили учить работать с живым кодом, решая задачи, приближенные к реальным. Мы даём возможность получить не только знания, но и умения. В процессе обучения мы сталкиваем ученика с испытаниями, принцип которых — «сверстай, как показано в образце». Именно по такому принципу работают большинство верстальщиков.

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

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

Если тренажёров и курсов вам будет мало, то можно посмотреть на книжную полку, где мы постепенно собираем книги по веб-разработке. Или зайти к нам на форум и обсудить волнующий вас вопрос.

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

Раздел 1 Введение
Понедельник с 19:00 до 21:00Лектор: Николай Шабалин
Познакомимся с рабочим процессом на курсе.

Как проходит курс. Организационные вопросы.

Обзор личных проектов.
Как работать с наставником.
Критерии качества вёрстки.
Защита личного проекта и получение сертификата.

Рабочий процесс на курсе.

Зависимость заданий.
Настройки личных проектов.
Создание мастер-репозитория.
Структура личных проектов.

Раздел 2 Методологии вёрстки
Четверг с 19:00 до 21:30 Лектор: Николай Шабалин
Приёмы создания надёжной вёрстки.

Зачем нужны методологии.

Порядок в коде.
Работа в команде.
Недостатки технологий.

Обзор подходов к вёрстке.

Классический подход.
Независимые блоки.
Атомарный подход.
Компоненты и модули.

Методология БЭМ.

Зачем всё так усложнять.
Как разбить интерфейс на блоки.
Элементы и модификаторы.
Ошибки и узкие места.

Разбор учебного проекта по БЭМу.

Раздел 3 Препроцессоры и автоматизация
Понедельник с 19:00 до 21:30Лектор: Андрей Серёдкин
Взглянем на препроцессоры и разберёмся, чем они помогают в процессе вёрстки.

Стили на стероидах.

Обзор препроцессоров.
Новые возможности CSS.
Сравнение возможностей.

Основные возможности.

Сравнение Less и Sass.
Переменные и математика.
Вложенные селекторы.
Операции с цветами.

Дополнительные возможности.

Подключение файлов.
Примеси и расширения.
Организация кода.
Сборка стилей.

Настройка окружения.

Система сборки на Node.js.
Сборщик Gulp.
Автоматизация сборки и вотчеры.

Раздел 4 Адаптивные сетки
Четверг с 19:00 до 21:30Лектор: Николай Шабалин
Узнаем как создавать адаптивные сетки с использованием гридов и флексов.

Спецификация Grid Layout и раскладка по сетке макета.

Устройство шаблонов: строки, колонки, линии, отступы.
Ручная и автоматическая раскладка.
Спецификация Box Alignment и выравнивание внутри сетки.
Гриды для адаптивных макетов.

Спецификация Flexible Boxes и раскладка по сетке макета.

Введение во флексы.
Контейнер, элементы, оси.
Алгоритм расчёта размеров элементов.
Выравнивание и распределение элементов вдоль осей.
Однострочный и многострочный контейнер, управление рядами.
Особенности флексов при создании сеток.

Адаптивные сетки.

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

Учебник

Навыки построения сеток на гридах и флексах.

Создаём адаптивные сетки БЭМ-блоков учебного проекта.

Раздел 5 Адаптивные декоративные элементы
Четверг с 19:00 до 21:30Лектор: Андрей Серёдкин
Разбираемся с адаптивными декоративными элементами. Делаем адаптивную вёрстку с резиновыми сетками.

Завершаем адаптивную вёрстку БЭМ-блоков учебного проекта.

Переход от фиксированных сеток к резиновым. Тонкости флексов.

Отличие «резины» от «фикса».
Переход от пикселей к процентам.
Резиновые колонки с точными размерами на флексах.
Неточные резиновые колонки с помощью flex-grow.
Флекс внутри флекса и элементы с резиновой высотой.
Когда использовать резиновые сетки и насколько они сложнее.

Делаем резиново-адаптивную вёрстку БЭМ-блоков учебного проекта.

Раздел 6 Адаптивная графика
Четверг с 19:00 до 21:30Лектор: Николай Шабалин
Погружаемся в адаптивную и ретиновую графику. Разбираемся с форматами и их назначением.

Графика для экранов повышенной чёткости.

В чём разница между физическими и логическими пикселями.
Что такое «ретиновая» графика.
Приёмы ретинизации содержимого веб-страницы.

Адаптивная графика.

Тег на все случаи жизни — <picture>.
Ретинизация контентных изображений с помощью атрибута srcset.
Кадрирование изображений с помощью <source>.
Использование современных форматов графики с помощью <source>.
Изображения неопределённых размеров и sizes.

Ретинизируем и добавляем адаптивную графику в учебном проекте.

Раздел 7 Векторная графика и оптимизация
Понедельник с 19:00 до 21:30Лектор: Андрей Серёдкин
Научимся использовать векторную графику всеми возможными способами. Разберёмся, как использовать графику оптимально.

Использование SVG.

Плюсы и минусы векторной графики.
Подключение SVG внешним ресурсом.
Встраивание SVG.

SVG-спрайты.

Зачем нужны, в каких случаях полезны.
Варианты реализации.

Стилизация SVG.

Что можно, а что нельзя.
Анимация.
Адаптивность.

Оптимизация и доступность SVG.

Особенности экспорта из Figma.
Дожимаем и оптимизируем SVG.
Доступность.

Оптимизация растровой графики.

Сжатие с потерями и без.
Обзор возможностей оптимизатора Squoosh.
Обзор формата WebP и особенностей его применения.

Раздел 8 Погружение в автоматизацию
Четверг с 19:00 до 21:30Лектор: Николай Шабалин
Подготовим сборку проекта для его публикации.

Оптимизация.

Минификация CSS-кода.
Оптимизация изображений.
Сборка и минификация SVG-спрайта.

Как держать код для разработчика удобным, а для браузеров — быстрым.

Раздел 9 Производительность вёрстки
Понедельник с 19:00 до 21:30Лектор: Андрей Серёдкин
Разберёмся с производительностью вёрстки и попробуем оптимизировать узкие места.

Обзор трендов скорости интернета.

Количество и объём ресуров.
Разница между типами ресурсов.
Метрики загрузки.

Процесс загрузки страницы.

Области ответственности между бэкендом и фронтендом.
Приоритеты загрузки.
Инструменты анализа.
Последствия медленной загрузки.

Оптимизация шрифтов.

Форматы и браузерная поддержка.
Негативные эффекты при загрузке.
Управление отрисовкой с помощью font-display.

Аудит и подсказки.

Анализ скорости с помощью Lighthouse.
Чтение отчёта Lighthouse.
Альтернативные инструменты.
Подсказки по загрузке ресурсов.

Первая неделя защиты
Завершение работы над проектом и подготовка к итоговой защите.

Вторая неделя защиты
Первая оценка проекта проверяющим наставником по критериям качества.

Третья неделя защиты
Улучшение проекта по замечаниям проверяющего наставника и подача на вторую оценку.

Четвёртая неделя защиты
Внесение финальных правок и получение итоговой оценки.

Рейтинг курса

4.3
рейтинг
1
0
0
0
0

Отзывы о курсе

1 отзыв
по рейтингу по дате
V
VarvaraSergeeva

Лично мне курсы помогли улучшить навыки вёрстки и дали много новой и полезной информации.

Достоинства: Много практики, отвечают на все вопросы, структурированная свежая информация, благоприятная атмосфера при обучении. Недостатки: Для начинающего требует действительно много времени. Приобрела в Академии Курс по Адаптивной вёрстке и автоматизации. Понравилась динамика обучения и поддержка со стороны преподавателей и наставников. Курсы приобретала в первую очередь для обратной связ...

Может быть интересно

обновлено 24.03.2024 09:37
Онлайн‑курс HTML и CSS. Адаптивная вёрстка и автоматизация

Онлайн‑курс HTML и CSS. Адаптивная вёрстка и автоматизация

Оставить отзыв
Поделиться курсом с друзьями