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

29 июля — 30 сентября 2024

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

Запишитесь на консультацию

Оставьте свои контакты, мы свяжемся с вами и ответим на все вопросы.

*Обязательное поле
Записаться на консультацию

Почему курс профессиональный

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

Чтобы добиться такого качества обучения, мы используем профессиональную триаду «критерии-проекты-наставники»:

НаставникиПроверкой ваших проектов на соответствие критериям качества занимаются наставники, которые являются профессиональными разработчиками.

Критерии качестваПрофессиональные критерии качества мы разрабатываем совместно с компаниями и профессиональным сообществом.

Настоящие проектыВ течение обучения вы выполняете настоящие проекты.

Настоящие проекты

В течение обучения вы выполняете настоящие проекты.

В чём отличие от тренажёров?

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

Как проходит
обучение на курсе

Что вас ждёт на обучении

Подходит ли вам этот курс

Учим делать правильно

Ваш карьерный путь после этого курса

После курса вы можете выбрать любую из профессий и развиваться в ней:

* Информация о медианных зарплатах получена на основе исследования компании «Хабр Карьера» во втором полугодии 2023 года.

Появились вопросы?

Наставники — это опытные профессионалы, работающие в индустрии

Профессиональный наставник

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

Чтобы отбирать таких специалистов, мы построили уникальную систему привлечения и фильтрации.

Вместе с наставником вы будете разрабатывать проект в экосистеме, привычной профессионалам. Рабочий процесс мало отличается от реальной разработки в больших компаниях.

Процесс отбора наставника

  1. Формальные требования

    Проверяем, кем и где кандидат в наставники работал, какой у него опыт, а также смотрим на его код.

  2. Собеседование

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

  3. Регулярная обратная связь

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

Процесс работы с наставником

Во время курса вас будет сопровождать наставник. Он будет делать ревью кода, проверять практические задания, отвечать на вопросы и делиться секретами мастерства.

Привет. У меня последний блок с товарами почему-то выравнивается неправильно, всё перепробовала. Взглянешь?
Давай сегодня созвонимся и разберёмся вместе?
Голосовая консультация с наставником

Детальная обратная связь

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

Голосовые консультации

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

Что входит в программу курса

Во время курса вы будете работать как профессиональные верстальщики: создадите разметку по методологии БЭМ, будете писать CSS-код на препроцессорах, сделаете адаптивную сетку, поработаете с адаптивной и ретиновой графикой и подготовите автоматизацию сборки проекта для публикации. На каждом этапе вашу работу будет проверять и комментировать наставник.
Разметка по БЭМ
Адаптивные сетки
Адаптивная и ретиновая графика
Автоматизация сборки

Учебные проекты

На курсе вы будете работать над проектом «Кэт энерджи». А на индивидуальном обучении вам будут доступны дополнительные проекты «Седона» и «Мишка».

Планшетная версия проекта «Мишка»Мобильная версия проекта «Мишка»Десктопная версия проекта «Мишка»

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

Десктопная версия проекта «Седона»Мобильная версия проекта «Седона»Планшетная версия проекта «Седона»

Отзывы компаний

Мы давно зарекомендовали себя в профессиональном сообществе. Нас и наших выпускников знают не только разработчики, но и крупные компании. Вот несколько отзывов от компаний о наших курсах и выпускниках.

В Авито нет верстальщиков, только фронтенд-разработчики разных уровней. Чтобы попасть к нам на работу младшим разработчиком, человек должен обладать определёнными навыками. Это уверенное владение базовыми технологиями: HTML, CSS и JavaScript, понимание того, как работает браузер, знание, как делать проекты кроссбраузерными, как работает API, DOM и другие важные основы. Кроме этого мы ценим ответственность, умение играть в команде, желание развиваться и инициативность.

Мне, как наставнику на курсах и бывшей студентке, известны стандарты качества Академии и то, как строится работа. Всё максимально приближено к реальным условиям — используется система контроля версий Git, есть разбивка проекта на этапы (своеобразные итерации), обязательное ревью кода наставниками и неумолимый дедлайн. Большое внимание уделяется доступности интерфейсов, а это полезно для всей отрасли.

В целом программа обучения в Академии построена грамотно для старта. Она помогает подготовить универсального бойца, который сможет качественно заниматься разработкой и в студии, и в крупной продуктовой компании. Если человек защитился на 100%, то это показатель, что у него всё в порядке с обучаемостью, мотивированностью и личными качествами, которые понадобятся в будущем на работе. А дальше уже всё зависит от активности и способности доказать свои умения делом.

Яна Крикливая разработчик клиентской части, Авито

Авито

Авито Интернет-сервис для размещения объявлений о товарах, услугах, вакансиях и резюме на рынке труда.

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

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

В этом смысле, подход Академии к обучению кажется адекватным: кодревью от опытного разработчика хорошо подготавливает к работе. Особенно ценно, что вся работа над проектами сразу идёт через Git — у нас также вся работа в компании проходит через обязательные ревью.

Сейчас в команде работает выпускник Академии Павел и я им доволен. Необходимые базовые навыки, понимание семантики, работа с чистым CSS — всё это на хорошем уровне, а что касается JavaScript — он быстро ориентируется, если делал что-то похожее — вспоминает. Он был сразу готов взять и начать работать.

Иногда бывает, что при выходе нового джуниор-разработчика, менторить приходится до самых мелких моментов. В случае с Павлом вливание в команду прошло практически беззаботно.

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

Сергей Чикирев Wrike Website Team Lead

Wrike

Wrike Популярный сервис для управления проектами и совместной работы.

Мы в Ostrovok.ru постоянно ищем талантливых ребят: наш продукт быстро развивается и лишние фронтендерские руки (желательно «золотые») нужны всегда. Хорошего специалиста найти не так просто, поэтому мы уже несколько раз обращались к Академии, когда подбирали джуниоров.

Ребята приходили с хорошей базой и горящими глазами, быстро вливались в процессы и команду. Сейчас в Ostrovok.ru работают три выпускника Академии — все на позиции джунов и отлично справляются.

Спасибо Академии за хорошо подготовленных специалистов.

Ostrovok.ru

Ostrovok.ru Интернет-сервис по бронированию более 900 000 отелей.

Мы регулярно отправляем своих сотрудников на тренинги, семинары, интенсивы и всячески открыты к образовательным программам, так мы и познакомились с HTML Academy.

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

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

Валерия Шемякина Менеджер по обучению Ozon.

Ozon

Ozon Крупнейший российский интернет-магазин.

HTML Академия — лучшее, что происходило с ИТ-образованием в России.

Если вы боитесь, что не разберётесь или «программирование — это не для вас», то HTML Академия подойдёт вам идеально. Всегда будет у кого спросить и кто вас поддержит.

Они много работали с сообществом, чтобы понять какие именно знания нужны на работе. Круто насколько всё приближено к реальной разработке.

Андрей Ситник

Андрей Ситник Автор множества проектов с открытым исходным кодом. Создатель PostCSS, Autoprefixer и Logux_io.

К нам на вакансию фронтенд-разработчика пришёл выпускник Академии. Знания, полученные на интенсивах по JavaScript и вёрстке помогают ему решать задачи с минимальными трудозатратами.

В целом, именно обучение на курсах Академии дало нашему сотруднику возможность развиваться как хорошему разработчику и профессионально подходить к решению проблем в работе.

ГиперМетод

ГиперМетод Ведущий разработчик решений для организации дистанционного обучения, управления знаниями и учебным процессом, развития и оценки персонала в компаниях и учебных заведениях.

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

NORDMOUNT

NORDMOUNT Внедрение, кастомизация и интеграция Salesforce на рынках США и западной Европы.

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

Обучение Участие в живых лекциях, работа над проектом с наставником.

Раздел 1

Старт

Познакомимся с преподавателями, наставниками и учебным процессом на курсе. Рассмотрим устройство веба и чем вы будете заниматься на работе. Установим и настроим инструменты для работы.

  • Познакомимся со структурой курса, сделаем обзор личных проектов и критериев качества, по которым они будут оцениваться.
  • Узнаем, кто такие авторы, кураторы и наставники курса.
  • Поговорим о том, из чего состоят сайты, кто и как их делает, и за что в этом процессе отвечает верстальщик.
  • Посмотрим на инструменты для работы на курсе: редакторы графики и кода, браузеры и отладчики, систему контроля версий.
  • Разберём процесс работы над проектом и его защиту.
СкринкастыСкринкастыСтатьиСтатьи
  • Статьи, которые помогут выбрать редактор кода, разобраться с принципами работы консоли и начать работать с системой контроля версий.
ПроектыПроекты
  • Выбираем наставника.
  • Настраиваем инструменты разработки, получаем графические макеты и создаём репозитории проектов.
  • Отрабатываем процесс выполнения заданий. Вносим изменения в проект в отдельной ветке и предлагаем пулреквест в Гитхабе.
Раздел 2

Методологии вёрстки

Создадим семантичную, доступную разметку с использованием методологии.

  • Порядок в коде.
  • Работа в команде.
  • Недостатки технологий.
  • Классический подход.
  • Независимые блоки.
  • Атомарный подход.
  • Компоненты и модули.
  • Зачем всё так усложнять.
  • Как разбить интерфейс на блоки.
  • Элементы и модификаторы.
  • Ошибки и узкие места.
  • Разбор учебного проекта по БЭМу.
ДемонстрацииИнтерактивные демонстрацииСтатьиСтатьи
  • Статьи о методологиях и стилях кодирования, которые помогут вам делать качественную разметку.
ПроектыПроекты
  • Задание на тренировку разметки по методологии БЭМ: «для выделенного элемента выберите класс из списка».
  • Задание на разметку страниц личного проекта.
Раздел 3

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

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

  • В чём разница между физическими и логическими пикселями.
  • Что такое «ретиновая» графика.
  • Приёмы ретинизации содержимого веб-страницы.
  • Тег на все случаи жизни — <picture>.
  • Ретинизация контентных изображений с помощью атрибута srcset.
  • Кадрирование изображений с помощью <source>.
  • Использование современных форматов графики с помощью <source>.
  • Изображения неопределённых размеров и sizes.
ДемонстрацииИнтерактивные демонстрации
  • Интерактивные демонстрации адаптивной графики.
СтатьиСтатьи
  • Статьи о тонкостях адаптивной графики.
ПроектыПроекты
  • Задание на ретинизацию изображений и подключение адаптивных изображений.
Раздел 4

Препроцессоры и автоматизация

Взглянем на препроцессоры и разберёмся, чем они помогают в процессе вёрстки.

  • Обзор препроцессоров.
  • Новые возможности CSS.
  • Сравнение возможностей.
  • Сравнение препроцессоров.
  • Переменные и математика.
  • Вложенные селекторы.
  • Операции с цветами.
  • Подключение файлов.
  • Примеси и расширения.
  • Организация кода.
  • Сборка стилей.
  • Система сборки на Node.js.
  • Сборщик Gulp.
  • Автоматизация сборки и вотчеры.
ТренажёрыТренажёрыСтатьиСтатьи
  • Статьи о подходах к архитектуре CSS-кода, о возможностях препроцессоров и о настройках окружения для автоматизации.
ПроектыПроекты
  • Забрать обновление Кекса из мастер-репозитория.
  • Начать вёрстку личного проекта с помощью препроцессора.
Раздел 5

Векторная графика

Научимся использовать векторную графику всеми возможными способами. Разберёмся, как использовать графику оптимально.

  • Плюсы и минусы векторной графики.
  • Подключение SVG внешним ресурсом.
  • Встраивание SVG.
  • Зачем нужны, в каких случаях полезны.
  • Варианты реализации.
  • Что можно, а что нельзя.
  • Анимация.
  • Адаптивность.
  • Особенности экспорта из Figma.
  • Дожимаем и оптимизируем SVG.
  • Доступность.
  • Сжатие с потерями и без.
  • Обзор возможностей оптимизатора Squoosh.
  • Обзор формата WebP и особенностей его применения.
ДемонстрацииИнтерактивные демонстрации
  • Интерактивная демонстрация примеров работы SVG.
ТренажёрыТренажёрыСтатьиСтатьи
  • Тренажёры по работе с SVG.
  • Статьи о тонкостях адаптивной графики, об особенностях векторной графики и почему разработчики должны выбирать правильные форматы графики.
ПроектыПроекты
  • Задание на подключение разных версий изображений для разных состояний личного проекта.
Раздел 6

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

Узнаем как создавать адаптивные сетки с использованием гридов и флексов.

  • Устройство шаблонов: строки, колонки, линии, отступы.
  • Ручная и автоматическая раскладка.
  • Спецификация Box Alignment и выравнивание внутри сетки.
  • Гриды для адаптивных макетов.
  • Введение во флексы.
  • Контейнер, элементы, оси.
  • Алгоритм расчёта размеров элементов.
  • Выравнивание и распределение элементов вдоль осей.
  • Однострочный и многострочный контейнер, управление рядами.
  • Особенности флексов при создании сеток.
  • Принципы перестроения сетки.
  • Медиавыражения и брейкпоинты.
  • Организация кода разных версий страницы: мобильной, планшетной и десктопной.
  • Проблема двух вьюпортов на мобильных.
  • Настройка вьюпорта.

Учебник

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

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

ДемонстрацииИнтерактивные демонстрации
  • Интерактивные демонстрации адаптивных сеток. Экспериментируйте с ними самостоятельно.
ТренажёрыТренажёрыСтатьиСтатьи
  • Тренажёры для закрепления приёмов построения сеток.
  • Статьи, которые помогут вам разобраться с адаптивностью, сложностями медиавыражений, особенностями вьюпорта.
ПроектыПроекты
  • Задание на создание адаптивных сеток для всех страниц и состояний личного проекта.
Раздел 7

Адаптивные декоративные элементы

Разбираемся с адаптивными декоративными элементами. Делаем адаптивную вёрстку с резиновыми сетками.

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

Погружение в автоматизацию

Подготовим сборку проекта для его публикации.

  • Минификация CSS-кода.
  • Оптимизация изображений.
  • Сборка и минификация SVG-спрайта.
  • Как держать код для разработчика удобным, а для браузеров — быстрым.
СтатьиСтатьи
  • Статьи о погружении в автоматизацию: зачем это нужно и в чём разница между инструментами.
  • Набор необходимых инструментов для автоматизации с помощью Gulp.
ПроектыПроекты
  • Задание на подготовку автоматизированной сборки проекта с необходимыми оптимизациями файлов личного проекта.
Раздел 9

Производительность вёрстки

Разберёмся с производительностью вёрстки и попробуем оптимизировать узкие места.

  • Количество и объём ресуров.
  • Разница между типами ресурсов.
  • Метрики загрузки.
  • Области ответственности между бэкендом и фронтендом.
  • Приоритеты загрузки.
  • Инструменты анализа.
  • Последствия медленной загрузки.
  • Форматы и браузерная поддержка.
  • Негативные эффекты при загрузке.
  • Управление отрисовкой с помощью font-display.
  • Анализ скорости с помощью Lighthouse.
  • Чтение отчёта Lighthouse.
  • Альтернативные инструменты.
  • Подсказки по загрузке ресурсов.
СтатьиСтатьи
  • Статьи о производительности CSS-анимаций, оптимизации шрифтов и оптимизации SVG.
  • Статьи о производительности рендеринга вёрстки, подробнее о перерисовке и перерасчёте.

Защита проекта Подготовка проекта к итоговой защите и оценка его проверяющим наставником по критериям качества.

Защита проекта

Проверка проекта проверяющим наставником по критериям качества, его улучшение и защита.

Рекомендованные для прохождения курса программы *

Операционная система
  • Windows 10 x64
  • Mac OS 11 Big Sur и новее
  • Ubuntu 20.04 и новее
Браузер
  • Браузер, основанный на Blink: Chrome, Яндекс.Браузер, Opera, Edge — последняя версия
  • Mozilla Firefox последняя версия
  • Apple Safari 15.2 и новее
Система контроля версий
  • Git
  • Git bash для Windows
Среда разработки
  • Node.js LTS
  • npm (версия, которая поставляется вместе с Node.js)

* Мы рекомендуем такое окружение, потому что проверили на нём все учебные задачи и убедились, что с таким набором программ всё работает без ошибок.

Появились вопросы?

Сертификат

После прохождения курса вы получите электронный сертификат

Образовательная деятельность осуществляется на основании государственной лицензии № 3026 от 6 июня 2017 года.

Сертификат онлайн-курса «HTML и CSS. Адаптивная вёрстка и автоматизация»

Статистика Академии

  • 12лет на рынке обучения
  • 232онлайн-курса проведено
  • 40 945выпускников защитили проекты

Отзывы выпускников

Индивидуальный формат Хит

Индивидуальный формат идеально подходит для компаний. Сделайте процесс обучения сотрудников максимально эффективным и подстройте его под рабочий график.

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

Запишитесь на консультацию

Мы поможем выбрать курс, ответим на все вопросы и расскажем о действующих скидках.


*Обязательное поле