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

Добавить в избранноеДобавлено в избранноеУдален из избранного 0

Как верстать быстро и качественно. Бесит адаптивная вёрстка? Или мучаешься с bootstrap? Тебе помогут: #css3 #calc #less #scss #npm #gulp #autoprefixer #новая супер сетка. Интерактивный онлайн курс от Дмитрия Лаврика. Если ты думаешь, что знаешь, что такое удобная вёрстка — просто посмотри видео.

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

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

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

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

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
  • Дополнительные приёмы вёрстки
  • Кроссбраузерность
  • Разбор домашних работ
  • Подведение итогов курса
  • Ответы на финальные вопросы
  • Направление дальнейшего развития

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

Оставить комментарий

avatar
  Подписаться  
Уведомление о
Logo
Зарегистрировать новый аккаунт
При регистрации логин пишем английскими буквами.
Сброс Пароля