Интенсивный онлайн‑курс
«Продвинутый HTML и CSS»

18 сентября — 25 октября 2017

Записаться на курс
Интенсивный онлайн‑курс «Продвинутый HTML и CSS»

HTML Academy — стандарт в обучении фронтендеров. Наша задача — готовить полноценных и востребованных специалистов, готовых работать в веб-индустрии.

Как проходит онлайн‑курс

Начальный уровень: средний

Интенсив предназначен для тех, кто прошёл «Базовый HTML и CSS», или для верстальщиков, желающих поднять свои навыки.

Даты интенсива

Интенсив длится пять недель, c 18 сентября по 25 октября. Каждую неделю проходят два живых вебинара, после которых надо выполнять практические задания и работать с наставником.
Программа интенсива

Живые вебинары

Вебинары проходят по понедельникам и четвергам с 19:00 до 21:00 по московскому времени. Преподаватель рассказывает лекцию, а студенты задают вопросы.

Записи вебинаров

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

Практика

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

Рабочий процесс

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

Личный наставник

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

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

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

Что даёт курс

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

Информация о средних зарплатах получена на основе исследования SuperJob.

Наставники

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

Студент на интенсиве HTML Academy
Какой CSS-препроцессор мне выбрать, я пока не вижу между ними разницу.
Наставник на интенсиве HTML Academy
Пока можешь выбрать любой из них, так как базовые возможности у них очень похожи.
Наставник на интенсиве HTML Academy

Наставник рассказывает о своей работе

Привет, Максим.

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

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

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

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

О том, как будет строиться наша с тобой работа

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

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

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

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

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

Теперь о времени

У тебя в общей сложности есть пять часов на консультации в течение пяти недель интенсива. Эффективнее всего проводить две получасовых консультации в неделю. Если хорошо подготовить список вопросов, то ты очень удивишься, сколько вопросов можно успеть обсудить за полчаса! То время, которое не будет использовано на одной неделе, будет перенесено на следующие и ближе к концу курса оно нам очень пригодится.

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

У меня есть несколько вопросов по поводу твоих начальных знаний и пожеланий:

  1. Какой у тебя уровень знаний на момент начала интенсива? Работаешь ли в веб-студии или может берёшь проекты на фрилансе? Завершены ли базовый курс по вёрстке и по JavaScript?
  2. Удобнее ли тебе работать самостоятельно, или мне необходимо контролировать выполнение заданий, чтобы мы точно успевали всё сделать в срок?
  3. Установлены ли уже все необходимые программы, или нужна какая-то помощь в выборе и настройке?

Расскажу ещё немного о себе

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

Я долго пытался учиться этому самостоятельно, но только после того, как попал к наставнику (это было ещё до появления интенсивов HTML Academy), я смог научиться чему-то реальному и практическому. Месяц моего общения с наставником был эффективнее чем полгода самообразования. В тот момент, помню, мне было очень жалко потерянного времени.

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

Учебный процесс

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

Рабочий процесс

Начинаем работу
Клонируем репозиторий
Создаём новую ветку
Коммитим изменения
Хотим показать работу
Отправляем изменения
Есть пулреквест?данет
Cоздаём пулреквест
Ревью кода с наставником
У нас всё тип-топ?данет
Мёржим в мастер
Получаем изменения
Завершаем работу
Кекс
Репозиторий? Коммиты? Что здесь происходит?

Жми на иконки, чтобы увидеть подробное описание.

Учебные макеты

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

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

Теория

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

Практика

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

Программа

Первая неделя
Введение
Теоретический вебинар
Теоретический вебинар
Понедельник с 19:00 до 21:00
Ведущий: Алексей Симоненко, опыт веб-разработки 17 лет

Познакомимся с системами контроля версий и рабочим процессом на интенсиве.

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

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

Системы контроля версий.

  • Зачем нужны системы контроля версий.
  • Обзор возможностей и работа с Гитом.
  • Работа с ветками: создание, синхронизация, слияние.
  • Конфликты и их разрешение.
  • Обзор Гитхаба.

Рабочий процесс на интенсиве.

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

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

ПроектЗадания
  • Выбираем наставника.
  • Настраиваем инструменты разработки, получаем графические макеты и создаём репозитории проектов.
  • Отрабатываем процесс выполнения заданий. Вносим изменения в проект в отдельной ветке и предлагаем пулреквест в Гитхабе.
Методологии вёрстки
Теоретический вебинар
Теоретический вебинар
Четверг с 19:00 до 21:00
Ведущий: Николай Громов

Приёмы создания надёжной вёрстки.


  • Вёрстка независимыми блоками — БЭМ.
  • Альтернативные методологии.
  • Работа с инспектором.
  • Как верстать, чтобы не ломалось.
КурсыКурсыСтатьиСтатьи
  • 4 практических курса для закрепления продвинутых CSS-селекторов, новых тегов и атрибутов из HTML5.
  • Статьи о методологиях и стилях кодирования, которые помогут вам делать качественную разметку.
ПроектЗадания
  • Задание на тренировку разметки по методологии БЭМ: «для выделенного элемента выберите класс из списка».
  • Задание на разметку страниц личного проекта.
Вторая неделя
Препроцессоры и автоматизация сборки
Практический вебинар
Практический вебинар
Понедельник с 19:00 до 21:00
Ведущий: Алексей Симоненко

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

Возможности препроцессоров Less, SASS и PostCSS.

  • Подключение файлов.
  • Переменные и математические операции.
  • Операции с цветами.
  • Вложенные селекторы.
  • Примеси и расширения.
  • Организация препроцессорного кода.

Сборка препроцессорного кода.

  • Как превратить препроцессорный код в CSS.
  • Автоматизация сборки файлов.
КурсыКурсыСтатьиСтатьи
  • 2 практических курса о работе препроцессора LESS.
  • Статьи о подходах к архитектуре CSS-кода, о возможностях препроцессоров и о настройках окружения для автоматизации.
ПроектЗадания
  • Забрать обновление Кекса из мастер-репозитория.
  • Начать вёрстку личного проекта с помощью препроцессора.
Резиновая и адаптивная вёрстка
Практический вебинар
Практический вебинар
Четверг с 19:00 до 21:00
Ведущий: Александр Першин, к.т.н., опыт веб-разработки 11 лет

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

Резиновые сетки. Переход от «фикса» к «резине».

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

  • Принципы «перестройки сетки».
  • Медиавыражения, макро- и микробрейкпоинты.
  • «Проблема двух вьюпортов» на мобильных.
  • Мета-тег <viewport>.
  • Адаптивность с фиксированными и резиновыми сетками.

Единицы измерения vh и vw: примеры использования, проблема «100vw».

Как организовать код разных состояний макета: мобильной, планшетной и десктопной.

ДемонстрацииИнтерактивные демонстрации

8 интерактивных демонстраций адаптивных сеток. Экспериментируйте с ними самостоятельно.

КурсыКурсыСтатьиСтатьи
  • 3 практических курса для закрепления приёмов построения сеток.
  • Статьи, которые помогут вам разобраться с адаптивностью, сложностями медиавыражений, особенностями вьюпорта.
ПроектЗадание

Задание на создание адаптивных сеток для всех страниц и состояний личного проекта.

Третья неделя
Флексбоксы
Практический вебинар
Практический вебинар
Понедельник с 19:00 до 21:00
Ведущий: Александр Першин

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

Погружаемся в работу с флексбоксами.

  • Флекс-контейнер, флекс-элементы и флекс-оси.
  • Алгоритм расчёта размеров флекс-элементов.
  • Выравнивание и распределение флекс-элементов вдоль осей.
  • Однострочный и многострочный флекс-контейнер, управление флекс-рядами.
  • Изменение порядка флекс-элементов.
  • Особенности флексов при создании сеток.
ДемонстрацииИнтерактивные демонстрации
  • 3 интерактивных демонстраций вёрстки блоков на флексбоксах.
  • 3 интерактивных демонстраций завершения вёрстки.
СтатьиСтатьи

Статьи о тонкостях работы флексбоксов и особенностях единиц измерения вьюпорта.

ПроектЗадание

Задание на завершение вёрстки всех страниц и состояний личного проекта.

После этого раздела предусмотрен недельный перерыв на выполнение заданий.

Четвёртая неделя
Адаптивная и векторная графика
Практический вебинар
Практический вебинар
Понедельник с 19:00 до 21:00
Ведущий: Александр Першин

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

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

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

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

  • Тег на все случаи жизни — <picture>.
  • Задачи, в которых помогает <picture>.

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

  • Чем хорош формат графики SVG.
  • Внешний и встроенный SVG.
  • Адаптивный SVG.
  • SVG-спрайты.

Горькая правда об иконочных шрифтах: достоинства и недостатки.

ДемонстрацииИнтерактивные демонстрации
  • 2 интерактивные демонстрации адаптивной графики.
  • Интерактивная демонстрация примеров работы SVG.
КурсыКурсыСтатьиСтатьи
  • 2 практических курса о работе с SVG.
  • Статьи о тонкостях адаптивной графики, об особенностях векторной графики и почему разработчики должны выбирать правильные форматы графики.
ПроектЗадания
  • Забрать обновление Кекса из мастер-репозитория.
  • Задание на ретинизацию изображений и подключение разных версий изображений для разных состояний личного проекта.
Производительность вёрстки
Теоретический вебинар
Теоретический вебинар
Четверг с 19:00 до 21:00
Ведущий: Михаил Баранов

Научимся тестировать производительность вёрстки и попробуем оптимизировать «узкие места».


  • Какие CSS-свойства тяжёлые, а какие быстрые.
  • Что нужно знать, когда пользуешься CSS-анимацией и плавными переходами.
  • Что нужно знать о перерисовке и перекомпоновке страниц.
  • Отличается ли быстродействие сайта на десктопе от мобильного.
СтатьиСтатьи
  • Статьи о производительности CSS-анимаций, оптимизации шрифтов и оптимизации SVG.
  • Статьи о производительности рендеренга вёрстки, подробнее о перерисовке и перерасчёте.
Пятая неделя
Погружение в автоматизацию
Практический вебинар
Практический вебинар
Понедельник с 19:00 до 21:00
Ведущий: Алексей Симоненко

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

Решим для себя, что лучше для автоматизации Grunt или Gulp.

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

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

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

СтатьиСтатьи
  • Статьи о погружении в автоматизацию: зачем это нужно и в чём разница между инструментами.
  • Набор необходимых инструментов для автоматизации Грантом и Галпом.
ПроектЗадание

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

Инструменты ускорения вёрстки
Теоретический вебинар
Теоретический вебинар
Четверг с 19:00 до 21:00
Ведущий: Николай Громов

Обзор фреймворков и библиотек компонентов.


  • Что помогает верстать быстрее.
  • Обзор фреймворков, использование на любых проектах.
  • Кросспроектные библиотеки компонентов.
СтатьиСтатьи
  • Список современных CSS-фреймворков.
  • Статьи об особенностях тестирования вёрстки.

Сертификат

После курса вы получите сертификат.

Сертификат интенсива «Базовый HTML и CSS»
Сертификат интенсива «Продвинутый HTML и CSS»

Об Академии

5лет на рынке обучения
41интенсив проведено
5 694студента закончили курсы

Главная цель интенсивных курсов — готовить профессионалов для IT-индустрии.

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

18 500
19 000
После 27 июля
19 500
После 11 августа
20 000
После 22 августа
20 500
После 1 сентября

Оплатить курс можно банковскими картами, электронными деньгами, через интернет-банкинг и наличными через терминал. Возможна оплата по безналичному расчёту для корпоративных клиентов. Нажмите «Записаться и оплатить курс», чтобы узнать больше.

Логотип VisaЛоготип Mastercard