[HTML academy] Продвинутый онлайн-интенсив «Создание веб-интерфейсов с помощью HTML и CSS»

[HTML academy] Продвинутый онлайн-интенсив «Создание веб-интерфейсов с помощью HTML и CSS»

Из складчины будут исключены участники с малым количествов оплаченных складчин (<7-8) и/или недавней регистрацией (меньше месяца-двух).
​

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

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

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

Почему мы?

• Мы являемся работодателями, постоянно ищем технических специалистов и знаем, что они должны уметь и как их этому научить.
• Уже сейчас интерактивные курсы на HTML Academy с удовольствием проходят более 150 000 учеников, которые выполнили более двенадцати миллионов заданий.
• Нас знают на рынке.

Что включает в себя интенсив:

• 9 вебинаров длительностью 2 часа.
• 5 часов индивидуальных консультаций персонального наставника.
• Методические материалы: видеозаписи лекций, презентации, интерактивные пошаговые руководства.
• Отдельный форум для общения и взаимопомощи.
• Сертификат при успешном прохождении интенсива.

Спойлер: Программа интенсива

1 раздел: Организация рабочего процесса (workflow)

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

2 раздел: Методологии верстки

• Вёрстка независимыми блоками — БЭМ.
• Альтернативная методология — SMACSS.
• Работа с инспектором.
• Как верстать, чтобы не ломалось.

3 раздел: Препроцессоры CSS

• Вёрстка с препроцессорами LESS и SASS.
• Возможности препроцессоров: переменные, вложенность правил, импорты, миксины и другие полезные функции.
• Сборка файлов препроцессора в стилевой файл.
• Автоматизация сборки препроцессоров.

4 раздел: Резиновая и адаптивная верстка

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

5 раздел: Флексбокс

• Основные понятия: флекс-контейнер и флекс-элемент, главная и поперечная оси.
• Управление осями, выравнивание и распределение флекс-элементов.
• Многострочный флекс-контейнер.
• Управление размерами и «гибкостью» флекс-элементов.
• Изменение порядка флекс-элементов.

6 раздел: Адаптивная и векторная графика

• Экранные и CSS-пиксели.
• «Ретина» или экраны с повышенной плотностью пикселей.
• Приёмы ретинизации содержимого веб-страницы.
• Адаптивная графика, тег <picture>.
• Типовые случаи использования <picture>.
• Векторная графика в вебе, формат SVG.
• Внешний и встроенный SVG, адаптивный SVG, SVG-спрайты.
• Горькая правда об иконочных шрифтах: достоинства и недостатки.

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

• Какие CSS-свойства тяжёлые, а какие быстрые.
• Что нужно знать, когда пользуешься CSS-анимацией и плавными переходами.
• Что нужно знать о перерисовке (repaint) и перекомпоновке (reflow) страниц.
• Отличается ли быстродействие сайта на десктопе от мобильного.

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

• Разберёмся, что лучше для автоматизации Grunt или Gulp.
• Оптимизация кода и графики.
• Следуем кодгайду автоматически.
• Как держать код для разработчика удобным, а для остальных — быстрым.

9 раздел: Инструменты ускорения верстки

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