hesher88
Участник
- Статус
- offline
- Регистрация
- 28.12.2016
- Сообщения
- 27
- Репутация
- 39
Теория
- Как будет организован учебный процесс на интенсиве.
- Введение в Гит.
- Базовый рабочий процесс в Гите: фиксация изменений и синхронизация репозиториев.
- Работа с ветками: создание, синхронизация, слияние.
- Конфликты и их разрешение.
- Инструменты для работы с Гитом.
- Обзор Гитхаба.
Пошагово разбираем процесс выполнения практических заданий на интенсиве:
- 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 раздел: инструменты ускорения вёрстки
Теория
- Что помогает верстать быстрее.
- Обзор фреймворков, использование на любых проектах.
- Кросспроектные библиотеки компонентов.
Ссылка на торрент : http://free-rutor.org/download/513827
