Интенсивный онлайн‑курс
«Продвинутый 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 лет
Автор курсов

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

Запись на интенсив закрыта.