[SmartGrid] Дмитрий Лаврик - Продвинутая вёрстка (2020)


Это мероприятие для тех, кто

Владеет основами вёрстки, в том числе, адаптивной
Периодически бесится при создании адаптивной вёрстки
Хочет освоить классный инструмент и стать мастером

Программа мероприятия

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

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
Дополнительные приёмы вёрстки
Кроссбраузерность

Разбор домашних работ
Подведение итогов курса
Ответы на финальные вопросы
Направление дальнейшего развития

Какова ценность умения верстать быстро, например, так, как было показано в видео наверху? — Не знаю, наверно, очень большая. Ведь эти приёмы нужно освоить всего один раз, и они ускорят вёрстку каждого макета в 2-3 раза.

ПРОДАЖНИК

СКАЧАТЬ