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

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

Содержание:

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

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

Результат
Создан репозиторий личного проекта, настроены инструменты работы с GitHub, закреплён рабочий процесс «ветка в форке > пулреквест из форка в мастер-репозиторий > слияние пулреквеста в мастер-репозиторий».

2 раздел: методологии вёрстки
Теория
Вёрстка независимыми блоками — БЭМ.
Альтернативная методология — SMACSS.
Работа с инспектором.
Как верстать, чтобы не ломалось.
Практика
Размечаем главную страницу учебного проекта по методологии БЭМ.
Результат
Создана разметка страниц личного проекта в соответствии с выбранной методологией: БЭМ или SMACSS.

3 раздел: препроцессоры CSS
Теория
Вёрстка с препроцессорами LESS и SASS.
Возможности препроцессоров: переменные, вложенность правил, импорты, миксины и другие полезные функции.
Сборка файлов препроцессора в стилевой файл.
Автоматизация сборки препроцессоров.
Практика
Настраиваем автоматическую компиляцию файлов препроцессора при сохранении.
Результат
Свёрстана сетка мобильной версии личного проекта с использованием выбранного препроцессора: LESS или SASS.

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

5 раздел: флексбокс
Теория
Основные понятия: флекс-контейнер и флекс-элемент, главная и поперечная оси.
Управление осями, выравнивание и распределение флекс-элементов.
Многострочный флекс-контейнер.
Управление размерами и «гибкостью» флекс-элементов.
Изменение порядка флекс-элементов.
Практика
Создаём адаптивную сетку учебного проекта на флексбоксе.
Создаём адаптивные элементы содержания учебного проекта на флексбоксе.
Результат
Завершена адаптивная вёрстка трёх версий личного проекта: мобильной, планшетной и десктопной.

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

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

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

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

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

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

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

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

Video: AVC, 1728x1080, 30.000 FPS, 735 kb/s
Audio: AAC LC, 48.0 kHz, 2 channels, 235 kb/s

Можно всегда скачать с облака:

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

Год: 2016
Язык: русский
Формат: mp4
Размер: 7.97 GB

Скачать:

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

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

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

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

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

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