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

ПОЛЬЗОВАТЕЛЬ
Регистрация
29 Июн 2019
Сообщения
10,973
Реакции
10,667
[SmartGrid] Дмитрий Лаврик - Продвинутая вёрстка (2020)
Посмотреть вложение 45435
Это мероприятие для тех, кто

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

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

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

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 раза.

ПРОДАЖНИК
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
Скрытое содержимое доступно для зарегистрированных пользователей!

СКАЧАТЬ
Скрытое содержимое. Вам нужно войти или зарегистрироваться.
 
Последнее редактирование:
ПОЛЬЗОВАТЕЛЬ
Регистрация
24 Май 2018
Сообщения
50
Реакции
21
Толковый автор, приятно слушать. Минимум воды, всё по делу!
Посоветуйте курс, который поможет мне закрыть дыры именно в нарезке макета в конечную вёрстку, а именно - взятие размеров (где лучше пиксель, где процент).
 
Назад
Сверху Снизу