[HTML Academy] Интенсивный онлайн-курс «Продвинутый HTML и CSS» (2017)

Пока оценок нет

Загрузка...

500р.~~16700р.~~

В корзину

Об инфопродукте

Сайт:	htmlacademy.ru показать
Компания:	HTML Academy
Дата публикации:	02.05.2017
Размер:	8,35 гб
Год:	2017
Продолжительность:	>18 часов
Страна:	Россия
Качество видео:	PCRec
Видео:	AVC/H.264, 1600x900-1728x1080, ~735-988 Kbps
Аудио:	AAC, 2 ch, 235 Kbps, VBR
Направление:	Программирование

Описание
Отзывы – 0

Интенсив предназначен для тех, кто прошёл базовый курс или уже уверенно владеет вёрсткой. Здесь мы «прокачаемся» от верстальщика-новичка до полноценного специалиста, востребованного на рынке.

В процессе обучения будут использоваться те инструменты, которыми должен владеть каждый верстальщик-профессионал. Практическая часть завязана на 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 раздел: инструменты ускорения вёрстки
Теория	Что помогает верстать быстрее. Обзор фреймворков, использование на любых проектах. Кросспроектные библиотеки компонентов.