БЛОК 1. Теория. Препроцессор LESS

В данном блоке будет подробным образом разобрана теоретическая часть препроцессора Less. Начнем с самых основ: разберем, что такое Less, и где он используется.
У препроцессора Less есть множество возможностей применения и компиляции, каждая из которых будет рассмотрена в рамках данного курса. Мы разберемся в самой простой из них: компиляции без написания единой строчки кода, создадим свой собственный компилятор с помощью платформы NodeJS и рассмотрим возможности компиляции с помощью таск-раннера Gulp с использованием возможностей PostCSS.
Мы с вами будем знакомиться со всеми возможностями данного языка. Помимо синтаксиса, будут разобраны самые важные конструкции, такие как: переменные, вложенные стили, наследование, создание функций, циклы и многое другое.
Урок 1. Что такое Less
Урок 2. Компиляция на клиенте
Урок 3. Компиляция на NodeJS
Урок 4. Компиляция с помощью Gulp
Урок 5. Переменные
Урок 6. Миксины. Часть 1
Урок 7. Миксины. Часть 2
Урок 8. Миксины. Часть 3
Урок 9. Вложенность
Урок 10. Операторы
Урок 11. Наследование
Урок 12. Некомпилируемые строки
Урок 13. Циклы
Урок 14. Импорты
Урок 15. Встроенные функции

БЛОК 2. Теория. Препроцессор SASS

В данном блоке будет подробнейшим образом рассмотрена теоретическая составляющая препроцессора SASS и SCSS. Вы узнаете, как и где его использовать, а также, как настроить рабочее окружение, чтобы с ним работать.
В первую очередь, мы разберем два основных понятия данного препроцессора — SASS и SCSS. Вы узнаете, что это такое, почему эти две аббревиатуры часто идут вместе, и в чем их отличие.
Далее мы рассмотрим, как можно настроить максимально эффективное рабочее окружение для компиляции данного препроцессора — с помощью таск раннера Gulp. В него будут входить разные возможности PostCSS для обработки стилей после компиляции, сервер автоматического применения стилей без перезагрузки окна браузера, минификация, исходные карты и т. д.
Урок 16. Что такое SASS и SCSS
Урок 17. Настройка окружения для компиляции
Урок 18. Переменные
Урок 19. Некомпилируемые файлы настройки
Урок 20. Миксины. Часть 1
Урок 21. Миксины. Часть 2
Урок 22. Миксины. Часть 3
Урок 23. Импорты
Урок 24. Медиа запросы
Урок 25. Операторы
Урок 26. Встроенные функции
Урок 27. Создание своих функций
Урок 28. Наследование стилей
Урок 29. Условные директивы if else
Урок 30. Циклы

БЛОК 3. Теория. CSS методологии

Будут рассмотрены 2 основных способа организации CSS кода: БЭМ и наследование. Вы увидите на простых идентичных примерах, как применять ту или иную инструкцию, и в чем их отличие.
Урок 31. Что такое css методологии
Урок 32. БЭМ
Урок 33. Наследование

БЛОК 4. Практика. Препроцессор SASS

Вы узнаете, какие первые шаги нужно будет сделать для более быстрой верстки — задание основных параметров проекта и создание глобальных некомпилируемых миксинов.
После задания общей структуры проекта мы начнем непосредственно саму верстку проекта по отдельным блокам. Верстать будем по CSS методологии БЭМ: вы увидите, как ее применить на практике, включая сложные блоки со множественной вложенностью.
После завершения верстки вы увидите, как за несколько секунд сделать финальную сборку одного CSS файла, который будет включать в себя все стили проекта, сделать его минификацию и удалить исходные карты.
Урок 34. Вводный
Урок 35. Настройка рабочего окружения
Урок 36. Создание миксинов и параметров проекта
Урок 37. Блок навигации
Урок 38. Блок хедера
Урок 39. Блок авторизации
Урок 40. Блок покупки. Часть 1
Урок 41. Блок покупки. Часть 2
Урок 42. Блок покупки. Часть 3
Урок 43. Блок пакетов
Урок 44. Блок о нас
Урок 45. Блок слайдера
Урок 46. Блок преимущества
Урок 47. Блок подвала
Урок 48. Функционал слайдера и продакшн сборка

БЛОК 5. Практика. Препроцессор LESS

Методология, выбранная для данного блока — наследование. Вы увидите, как просто и правильно совместно с препроцессором использовать данную методологию, и как такой подход позволяет сократить количество классов и максимально очистить html. Также вы увидите, как можно подключить специальную библиотеку шрифтов-картинок и тем самым оптимизировать размер таблицы стилей.
После задания всех стилей мы буквально за пару секунд с помощью сборщика сделаем финальную сборку в один файл, и вы увидите, как это важно, потому что результат шаблона не изменится, а размер файла сократится почти в 4 раза.
Урок 49. Вводный
Урок 50. Настройка рабочего окружения (gulp)
Урок 51. Создание миксинов и параметров проекта
Урок 52. Блок навигации
Урок 53. Блок хедера
Урок 54. Блок функций
Урок 55. Блок преимуществ
Урок 56. Блок решений
Урок 57. Блок автора
Урок 58. Блок шагов
Урок 59. Блок подвала
Урок 60. Финальная сборка

БОНУС 1. Премиум курс по NodeJS: Основы

Урок 61. Бонус: Введение, установка и запуск
Урок 62. Бонус: Работа с модулями
Урок 63. Бонус: Пакетный менеджер NPM
Урок 64. Бонус: Package.json
Урок 65. Бонус: Глобальные модули
Урок 66. Бонус: Встроенные модули
Урок 67. Бонус: Работа с файлами
Урок 68. Бонус: Создание простого веб-сервера. Часть 1
Урок 69. Бонус: Создание простого веб-сервера. Часть 2
Урок 70. Бонус: Получения данных из командной строки

БОНУС 2. Премиум курс по GULP: Основы

Урок 71. Бонус: Что такое gulp и его установка
Урок 72. Бонус: Работа с файлами
Урок 73. Бонус: Подключение плагинов. Сборка Less файлов
Урок 74. Бонус: Gulp debug и работа с плагинами
Урок 75. Бонус: Gulp watch
Урок 76. Бонус: Подключение browser sync