Интенсивный онлайн‑курс
«Продвинутый HTML и CSS»
c 27 февраля по 2 апреля 2017

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

В чём отличие от базового интенсива?
Начальный уровень: средний

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

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

Этот интенсив предназначен для «прокачки» от верстальщика-новичка до полноценного специалиста, востребованного на рынке.

Продвинутые инструменты

В процессе обучения на интенсиве используются те инструменты, которыми должен владеть каждый верстальщик-профессионал. Практическая часть завязана на Git и GitHub, в работе активно используются средства автоматизации.

Что включает в себя интенсив
Почему мы?
Программа интенсива

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

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

Личный макет «Пинк»

1 раздел: организация рабочего процесса
Теория
  • Как будет организован учебный процесс на интенсиве.
  • Введение в Гит.
  • Базовый рабочий процесс в Гите: фиксация изменений и синхронизация репозиториев.
  • Работа с ветками: создание, синхронизация, слияние.
  • Конфликты и их разрешение.
  • Инструменты для работы с Гитом.
  • Обзор Гитхаба.
Практика

Пошагово разбираем процесс выполнения практических заданий на интенсиве:

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

Узнаём, как получать изменения из мастер-репозитория в форк.

Результат
Создан репозиторий личного проекта, настроены инструменты работы с Гитхабом, закреплён рабочий процесс «ветка в форке → пулреквест из форка в мастер-репозиторий → слияние пулреквеста в мастер-репозиторий».
2 раздел: методологии вёрстки
Теория
  • Вёрстка независимыми блоками — БЭМ.
  • Альтернативные методологии.
  • Работа с инспектором.
  • Как верстать, чтобы не ломалось.
Практика
  • Размечаем главную страницу учебного проекта по методологии БЭМ.
Результат
Создана разметка страниц личного проекта в соответствии методологией БЭМ.
3 раздел: CSS-препроцессоры
Теория
  • Вёрстка с препроцессорами LESS, SASS и PostCSS.
  • Возможности препроцессоров: переменные, вложенность правил, импорты, миксины и другие полезные функции.
  • Сборка файлов препроцессора в стилевой файл.
  • Автоматизация сборки препроцессоров.
Практика
  • Настраиваем автоматическую компиляцию файлов препроцессора при сохранении.
Результат
Свёрстана сетка мобильной версии личного проекта с использованием выбранного препроцессора: LESS, SASS или PostCSS.
4 раздел: резиновая и адаптивная вёрстка
Теория
  • Резиновые сетки. Переход от «фикса» к «резине».
  • Принцип «перестройки сетки».
  • «Проблема двух вьюпортов» на мобильных.
  • Мета-тег <viewport>.
  • Медиавыражения, макро- и микробрейкпоинты.
  • Как организовать код разных версий: мобильной, планшетной, десктопной.
  • Единицы измерения vh и vw: примеры использования, проблема «100vw».
  • Адаптивность с фиксированными и резиновыми сетками.
Практика
  • Создаём адаптивную фиксированную сетку учебного проекта.
  • Переходим от фиксированной сетки учебного проекта к резиновой.
Результат
Свёрстана адаптивная сетка трёх версий личного проекта: мобильной, планшетной и десктопной.
5 раздел: флексбокс
Теория
  • Основные понятия: флекс-контейнер и флекс-элемент, главная и поперечная оси.
  • Управление осями, выравнивание и распределение флекс-элементов.
  • Многострочный флекс-контейнер.
  • Управление размерами и «гибкостью» флекс-элементов.
  • Изменение порядка флекс-элементов.
Практика
  • Создаём адаптивную сетку учебного проекта на флексбоксе.
  • Создаём адаптивные элементы содержания учебного проекта на флексбоксе.
Результат
Завершена адаптивная вёрстка трёх версий личного проекта: мобильной, планшетной и десктопной.
6 раздел: адаптивная и векторная графика
Теория
  • Экранные и CSS-пиксели.
  • «Ретина» или экраны с повышенной плотностью пикселей.
  • Приёмы ретинизации содержимого веб-страницы.
  • Адаптивная графика, тег <picture>.
  • Типовые случаи использования <picture>.
  • Векторная графика в вебе, формат SVG.
  • Внешний и встроенный SVG, адаптивный SVG, SVG-спрайты.
  • Горькая правда об иконочных шрифтах: достоинства и недостатки.
Практика
  • Получаем «ретиновую» и векторную графику личного проекта из мастер-репозитория.
  • Ретинизируем растровую графику учебного проекта.
  • Подключаем в учебный проект векторную графику, используем векторные спрайты.
  • Используем адаптивные изображения в учебном проекте.
Результат
Завершена ретинизация личного проекта, использованы векторная графика и адаптивные изображения.
7 раздел: производительность вёрстки
Теория
  • Какие CSS-свойства тяжёлые, а какие быстрые.
  • Что нужно знать, когда пользуешься CSS-анимацией и плавными переходами.
  • Что нужно знать о перерисовке (repaint) и перекомпоновке (reflow) страниц.
  • Отличается ли быстродействие сайта на десктопе от мобильного.
Практика
  • Тестируем производительность вёрстки учебного проекта, находим «узкие места» и оптимизируем их.
Результат
Произведена оптимизация вёрстки личного проекта.
8 раздел: погружение в автоматизацию
Теория
  • Разберёмся, что лучше для автоматизации Grunt или Gulp.
  • Оптимизация кода и графики.
  • Следуем кодгайду автоматически.
  • Как держать код для разработчика удобным, а для остальных — быстрым.
Практика
  • Настраиваем сборку учебного проекта.
  • Готовим учебный проект к публикации.
Результат
Настроена сборка личного проекта. Проект подготовлен к защите.
9 раздел: инструменты ускорения вёрстки
Теория
  • Что помогает верстать быстрее.
  • Обзор фреймворков, использование на любых проектах.
  • Кросспроектные библиотеки компонентов.
Отзывы об интенсивах

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

Вот несколько отзывов об интенсиве:

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

Сергей Кравченко

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

Vladimir Bataev

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

Natalia Yorkina

Интенсив был очень насыщенный и интересный! Несмотря на то, что не защитила проект, начала применять новые знания в работе с первого занятия. Перестала бояться Git, теперь без него никуда! На раз-два делаю адаптивную вёрстку. А сборщик проектов Gulp заметно ускорил и упростил работу: спрайты и CSS собираются автоматически. Жду продолжения! Большое спасибо!

Евгения Шешукова

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

Юлия Антонова

Более подробные отчёты о результатах интенсивов можно прочитать у нас в блоге.

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

Nadya Tsivina

Было нелегко, но оно того стоило. Очень качественный курс. Теперь есть крепкая уверенность в своей конкурентоспособности. Добавил в своё резюме сразу несколько инструментов и новый адпативный сайт в портфолио. Спасибо HTML Academy, вы как всегда лучше всех.

Дима Сухинин

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

Олег Зубов
Преподаватели интенсива

Александр Першин

Александр Першин Создатель и автор курсов HTML Academy
Опыт веб-разработки 11 лет
Выпускник кафедры «Компьютерные образовательные технологии» НИУ ИТМО
Действующий преподаватель НИУ ИТМО

Алексей Симоненко

Алексей Симоненко Опыт веб-разработки 15 лет
Сооснователь маркетингового агентства и конференции для маркетологов
Автор блога о современных технологиях в веб-разработке Web Energy

Николай Громов

Николай Громов Опыт веб-разработки 14 лет
Автор курсов

Стоимость интенсива
17 500 руб.
18 500 рублей после 12 декабря
19 500 рублей после 27 декабря
20 500 рублей после 27 января

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