Продвинутая вёрстка

Интерактивный онлайн курс от Дмитрия Лаврика.

Если ты думаешь, что знаешь, что такое удобная вёрстка — просто посмотри видео.

Описание курса:

Программа курса:

Вводный вебинар:

• Техническая информация
• Доступы в группы и к тренажёрам
• Обзор программы курса
• Обзор вспомогательных инструментов

1 Занятие:

• Основы Flexbox
• Основная и вспомогательная оси
• Тонкости выравнивания элементов
• Адаптивка без media-запросов
• Расчёт размеров элемента
• Разбор домашних работ
• Фокусы flex-grow
• Нюансы в IE 11
• Погрешность расчёта размеров
• Код без media-запросов: за и против

2 Занятие:

• Flex-direction: column
• Нюансы переноса элементов
• Вертикальные и горизонтальные отступы
• Смена порядка следования элементов
• Задачи, для которых flex неудобен
• Разбор домашних работ
• Общие выводы по технологиям
• Необходимость автоматизации мелочей
• Моральная подготовка к node.js

3 Занятие:

• Node.js и NPM — основы магии
• Gulp — сборка проекта
• Autoprefixer — кроссбраузерность
• Concat — соединение файлов
• Sourcemaps — удобная отладка
• Разбор домашних работ
• Плагин Clean CSS
• Group CSS Media Queries
• Неудобства плагина concat
• Чего не хватает в чистом CSS

4 Занятие:

• Основы CSS-препроцессоров
• Иерархическое написание
• Переменные и примеси
• Написание кода на LESS
• Написание кода на SASS (SCSS)
• Разбор домашних работ
• Синтаксисы разных препроцессоров
• LESS vs SCSS
• Препроцессоры vs постпроцессоры

5 Занятие:

• npm i smart-grid — поехали!
• Основы создания сетки
• Отступы в px или в %
• Margin и padding варианты
• Настройка свойств сетки
• Разбор домашних работ
• Нюансы fields и offset
• Резиновые и обычные элементы
• Row и col без size

6 Занятие:

• Вёрстка макета
• Оптимизация кода
• Иерархия селекторов vs BEM
• Дополнительные приёмы вёрстки
• Кроссбраузерность
• Разбор домашних работ
• Подведение итогов курса
• Ответы на финальные вопросы
• Направление дальнейшего развития

Материал может быть удален по запросу правообладателя!