SmartGrid 2. Продвинутая вёрстка (2019)

Бесит адаптивная вёрстка? Дизайнеры, требующие соблюдения сетки? Bootstrap, когда из-за его классов становился не виден остальной HTML-код? Тогда посмотрите данный курс и вы узнаете что такое удобная вёрстка. Новый способ, которому автор хочет вас научить, использует в себе всю мощь современных технологий: flexbox и функция calc из CSS3, один из препроцессоров на выбор (LESS, SCSS, SASS, Stylus), сборщик проектов gulp и пара его чудесных плагинов. Всё это даёт невероятный прирост в скорости и качестве вёрстки.

Содержание:

1. Урок

• Основы Flexbox
• Основная и вспомогательная оси
• Лёгкие вертикальные выравнивания
• Адаптивка без media-запросов
• Определение размера элементов

2. Урок

• Разбор домашних работ
• Прокачивание мастерства Flexbox
• Тонкости адаптивных реализаций
• Всевозможные выравнивания
• Слабости flexbox без media

3. Урок

• Node.js и NPM — основы магии
• Gulp — сборка проекта
• LESS — генератор CSS
• Group CSS Media Queries
• Autoprefixer — кроссбраузерность

4. Урок

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

5. Урок

• Основы создания сетки
• Отступы в px или в %
• Margin и padding варианты
• npm i smartgrid — поехали!
• Настройка свойств сетки

6. Урок

• Вёрстка макета
• Оптимизация кода
• Иерархия селекторов vs BEM
• Дополнительные приёмы вёрстки
• Наслаждение результатом

Автор: Дмитрий Лаврик
Язык: русский
Продолжительность: ~13 часов

Формат: MP4 (+доп. файлы)
Видео: AVC, 1920x1080, ~354 Kbps
Аудио: AAC, 126 Kbps, 48.0 KHz

 

Скачать обучающее видео "SmartGrid 2. Продвинутая вёрстка" (2,96 ГБ):