- БЛОК 1. Теория. Препроцессор LESS
В данном блоке будет подробным образом разобрана теоретическая часть препроцессора Less. Начнем с самых основ: разберем, что такое Less, и где он используется. У препроцессора Less есть множество возможностей применения и компиляции, каждая из которых будет рассмотрена в рамках данного курса. Мы разберемся в самой простой из них: компиляции без написания единой строчки кода, создадим свой собственный компилятор с помощью платформы NodeJS и рассмотрим возможности компиляции с помощью таск-раннера Gulp с использованием возможностей PostCSS. Мы с вами будем знакомиться со всеми возможностями данного языка. Помимо синтаксиса, будут разобраны самые важные конструкции, такие как: переменные, вложенные стили, наследование, создание функций, циклы и многое другое.
Вы узнаете, что такое препроцессоры, и зачем они нужны. Далее, с помощью тестового онлайн-компилятора, мы увидим пример и базовую возможность Less для создания CSS стилей, и вы поймете, каким образом оно работает"
- Урок 2. Компиляция на клиенте.
Рассмотрим первый способ, который позволит нам скомпилировать данный язык программирования. Это самый простой способ, который не требует от нас ничего в плане написания кода, и будет делать все средствами, которые заложены в библиотеке Less. Вся компиляция будет происходить в файле index.html" class="col_3 col_3_medium"
- Урок 3. Компиляция на NodeJS.
Рассмотрим следующий способ компиляции языка Less — с помощью платформы NodeJS. В ходе урока мы напишем свой собственный компилятор, который будет считывать Less файлы и генерировать на их основе .css файлы"
- Урок 4. Компиляция с помощью Gulp.
В ходе урока вы узнаете, как подключить Gulp к проекту, какие шаги нужно учесть для написания задач компиляции препроцессора. Также нами будет организован сервер автоматической перезагрузки окна браузера для моментального применения скомпилированных стилей"
В этом уроке вы узнаете все про переменные в языке Less. Начнем мы с синтаксиса и узнаем, какие значения можно задавать переменным. Также мы поговорим про область видимости переменных, которая присутствует и в данном языке, про ссылки на другие переменные и многое другое" class="col_3 col_3_medium"
- Урок 6. Миксины. Часть 1.
Вы узнаете, каким образом создавать миксины в языке Less, как сделать компилируемые миксины и некомпилируемые, которые будут использоваться только в рамках разработки и выполнять действие функций. А также вы узнаете, как работает флаг !important для миксинов, и в чем его особенность"
- Урок 7. Миксины. Часть 2.
Узнаете, как создавать миксины-функции, которые работают с входными параметрами. Поймете, как можно перегружать функции, подобно другим языкам программирования, в зависимости от разного количества параметров. Узнаете, как передавать параметры по умолчанию, и что такое ключевое слово Arguments, по аналогии с JavaScript"
- Урок 8. Миксины. Часть 3.
Вы узнаете, как создавать миксины, которые генерируют параметры или другие миксины. Поговорим про их область видимости и способы применения" class="col_3 col_3_medium"
В этом уроке Вы увидите, как просто можно записывать различные сложные структуры CSS стилей без дублирования кода, создавать названия классов, основываясь на других классах, и просто задавать псевдоселекторы"
В данном уроке вы узнаете, как с помощью введения операторов в язык стилей препроцессор Less упростил жизнь для разработки дизайнов"
Из этого видео вы поймете, что такое функция Extend, как ее использовать, ее синтаксис, и увидите, как с помощью различных параметров — селекторов и флагов, можно управлять наследованием " class="col_3 col_3_medium"
- Урок 12. Некомпилируемые строки.
В языке CSS порой появляются новые возможности, которые иногда конфликтуют с синтаксисом препроцессоров. Для того чтобы результат был ожидаемым, вне зависимости от нововведений, в препроцессоре Less есть важная функция, которая позволяет не обрабатывать определенные строки, с ней вы и познакомитесь в данном уроке"
Из этого урока, вы узнаете, с помощью каких конструкций можно создать цикл в языке стилей, зачем они нужны, и как их применить на практике — например, для генерации большого количества классов для сетки вашего сайта с помощью пары строк кода"
Рассмотрим, как препроцессор Less расширяет возможность стандартных импортов CSS, и как с ними работать. Вы поймете, как Less может взаимодействовать с CSS, какие флаги, и зачем используются при импортировании стилей в файлах языка Less" class="col_3 col_3_medium"
- Урок 15. Встроенные функции.
Познакомитесь с некоторыми встроенными функциями в язык Less, которые расширяют стандартные возможности CSS. Например, вы узнаете, как можно сделать цвет темнее или светлее, не меняя его, а используя лишь встроенные функции"
► В итоге, вы научитесь нескольким способам компиляции языка Less, а также освоите все его функции, которые сможете применить на реальных проектах. Вы поймете, почему препроцессоры целесообразно использовать на любом из проектов, и как сильно Less упрощает жизнь в плане написания стилей
- БЛОК 2. Теория. Препроцессор SASS
В данном блоке будет подробнейшим образом рассмотрена теоретическая составляющая препроцессора SASS и SCSS. Вы узнаете, как и где его использовать, а также, как настроить рабочее окружение, чтобы с ним работать. В первую очередь, мы разберем два основных понятия данного препроцессора — SASS и SCSS. Вы узнаете, что это такое, почему эти две аббревиатуры часто идут вместе, и в чем их отличие. Далее мы рассмотрим, как можно настроить максимально эффективное рабочее окружение для компиляции данного препроцессора — с помощью таск раннера Gulp. В него будут входить разные возможности PostCSS для обработки стилей после компиляции, сервер автоматического применения стилей без перезагрузки окна браузера, минификация, исходные карты и т. д. После прохождения данного блока вы смело сможете использовать SASS и SCSS при разработке ваших проектов, используя максимально возможный функционал данного языка. Мы детально разберем каждую из возможностей языка, начиная с синтаксиса. Аналогично будут разобраны следующие возможности: переменные и их область видимости, функции, миксины, медиа запросы, генерация классов через 3 вида циклов и многое другое.
- Урок 1. Что такое SASS и SCSS.
В данном уроке вы узнаете, что такое препроцессор SASS. Вы узнаете, где он используется, зачем он нужен. Также вы увидите, в чем отличие SASS от SCSS, и какой синтаксис лучше использовать"
- Урок 2. Настройка окружения для компиляции.
В этом уроке вы увидите, как с помощью такого инструмента как Gulp, настроить рабочее окружение для компиляции препроцессора SASS. Вы узнаете, какие шаги стоит реализовать при настройке рабочего окружения. Поймете, какие плагины от PostCSS можно использовать для более эффективного написания кода " class="col_3 col_3_medium"
В этом уроке вы познакомитесь с синтаксисом SCSS и конкретно узнаете, как создавать переменные в рамках данного языка. Также вы узнаете, какие значения могут принимать переменные в SASS. И еще мы поговорим про область видимости переменных, и какие проблемы могут возникнуть с ней"
- Урок 4. Некомпилируемые файлы настройки.
В данном уроке вы узнаете, что такое файлы настроек в препроцессорах, в чем их особенность, и зачем они нужны. Вы увидите на реальном примере создание такого файла-конфига, и по каким правилам их нужно создавать"
- Урок 5. Некомпилируемые файлы настройки.
В данном уроке мы начнем знакомство с одной из самых главных функций языка SASS — миксинами. Вы узнаете, с помощью каких конструкций можно создавать миксины, что это такое, и зачем они нужны" class="col_3 col_3_medium"
- Урок 6. Миксины. Часть 2.
В данном уроке мы продолжим изучение миксинов, и на этот раз поговорим про то, как можно передавать параметры в них. Вы узнаете все особенности передачи параметров, начиная от задания параметров по умолчанию до задания именованных параметров и конкатенации входящих данных"
- Урок 7. Миксины. Часть 3.
В этом уроке мы закончим изучение миксинов в языке SASS. Из этого урока вы узнаете, что такое ключевое слово Content, и как удобно можно с ним работать совместно с миксинами"
В результате данного урока мы напишем специальный миксин, который будет загружать нужные шрифты с удаленного сервера, основываясь только на входящем имена шрифта. Также вы увидите, как правильно использовать шаблонизацию в рамках данного препроцессора" class="col_3 col_3_medium"
В данном уроке вы увидите, как препроцессор SASS облегчает работу с медиа запросами в CSS. Вы узнаете, как вместе с миксинами можно удобно использовать данную возможность для адаптации некоторых стилей под различную ширину экрана"
В этом уроке вы познакомитесь с такой темой в языке SASS, как операторы. Вы увидите, какие из них можно применять в рамках данного языка, как их использовать, как быть с конвертацией различных единиц измерения и увидите, как операторы можно применять для удобной работы с цветами"
- Урок 11. Встроенные функции.
Из данного урока вы узнаете какими удобными функциями язык SASS расширяет стандартные возможности CSS. Мы разберем несколько из них, например, для удобной работы с цветами или задания прозрачности элементам" class="col_3 col_3_medium"
- Урок 12. Создание своих функций.
Из данного урока вы узнаете, как можно создавать свои собственные функции в SASS, и чем они отличаются от миксинов. Вы увидите, где и как их можно использовать, а также узнаете еще несколько ключевых слов, которые нужны для работы с данным функционалом в языке SASS"
- Урок 13. Наследование стилей.
Из данного урока вы узнаете про еще одно ключевое слово в препроцессоре SASS —Extend. Вы поймете, зачем данная директива нужна, как она может пригодиться в реальном приложении. Также вы увидите особенности синтаксиса данной конструкции, и с помощью каких параметров можно регулировать наследование"
- Урок 14. Условные директивы If Else.
В данном уроке мы познакомимся еще с одним интересным и очень важным функционалом языка SASS — условными директивами If и Else. Вы увидите, как их использовать в коде, зачем они нужны, за что они отвечают, и как их можно применить в реальном проекте" class="col_3 col_3_medium"
В данном уроке вы познакомитесь еще с одним важным функционалом препроцессора SASS — циклами. Вы узнаете, как их можно применить в рамках языка стилей, увидите генерацию грид-сетки, а также генерацию специальных классов со специальными идентификаторами"
► После прохождения данного блока вы смело сможете использовать SASS и SCSS при разработке ваших проектов, используя максимально возможный функционал данного языка. Мы детально разберем каждую из возможностей языка, начиная с синтаксиса. Аналогично будут разобраны следующие возможности: переменные и их область видимости, функции, миксины, медиа запросы, генерация классов через 3 вида циклов и многое другое.
- БЛОК 3. Теория. CSS методологии
Будут рассмотрены 2 основных способа организации CSS кода: БЭМ и наследование. Вы увидите на простых идентичных примерах, как применять ту или иную инструкцию, и в чем их отличие.
- Урок 1. Что такое CSS методологии.
В данном уроке вы узнаете, зачем были созданы такие понятия, как CSS методологии. Вы узнаете, какие проблемы стандартного CSS они решают, почему нужно придерживаться данных инструкций"
В этом уроке вы узнаете, что такое CSS методология БЭМ. Вы познакомитесь с основными ее принципами, и на простом, но наглядном примере, поймете, каким образом ее применять на практике"
В этом уроке вы узнаете, что такое CSS методология наследование. Вы познакомитесь с основными ее принципами, и на простом, но наглядном примере поймете, каким образом ее применять на практике"
► В рамках данного блока вы познакомитесь с таким понятием, как CSS методологии, и узнаете, что из себя представляют данные инструкции, и зачем они нужны.
- БЛОК 4. Практика. Препроцессор SASS
Вы узнаете, какие первые шаги нужно будет сделать для более быстрой верстки — задание основных параметров проекта и создание глобальных некомпилируемых миксинов. После задания общей структуры проекта мы начнем непосредственно саму верстку проекта по отдельным блокам. Верстать будем по CSS методологии БЭМ: вы увидите, как ее применить на практике, включая сложные блоки со множественной вложенностью. После завершения верстки вы увидите, как за несколько секунд сделать финальную сборку одного CSS файла, который будет включать в себя все стили проекта, сделать его минификацию и удалить исходные карты.
В данном обзорном уроке вы узнаете план на данный блок, с помощью чего мы будем верстать макет, увидите сам макет, с помощью какой методологии будет проходить практика и узнаете одну особенность данного блока"
- Урок 2. Настройка рабочего окружения.
В данном уроке вы увидите, как профессионально настроить Gulp для осуществления максимально эффективной работы над версткой макета на препроцессоре"
- Урок 3. Создание миксинов и параметров проекта.
В данном уроке вы увидите первые шаги, которые необходимо предпринять для начала работы над макетом уже непосредственно в SCSS коде"
В этом уроке нами будет сверстан блок навигации, с использованием методологии БЭМ и такого CSS инструмента, как Flexbox. Также вы узнаете, что такое vh, и как с помощью данной величины сделать блок на всю высоту экрана без JavaScript"
В данном уроке вы увидите, как можно сверстать блок хедера, и как всего лишь двумя свойствами выровнять элементы по центру блока: по горизонтали и по вертикали с использованием флекс бокс"
- Урок 6. Блок авторизации.
В этом уроке мы сверстаем маленький блок для авторизации пользователей"
- Урок 7. Блок покупки. Часть 1.
В данном уроке мы начнем верстать самый объемный блок макета — блок покупок, или блок выбора домена. В первой части нам предстоит задать общую структуру и сделать первую часть блока — инпут"
- Урок 8. Блок покупки. Часть 2.
В этом уроке мы продолжим верстку блока покупок — сделаем верстку таблицы, с довольно необычными прерывающимися границами. Вы увидите один из самых простых подходов, который позволит это реализовать"
- Урок 9. Блок покупки. Часть 3.
В этом заключительном уроке по блоку покупок мы с вами сверстаем выпадающий список, который будет появляться только при наведении мыши без использования JavaScript. Также мы установим библиотеку для шрифтов — Font Awesome"
В этом уроке вы увидите, как можно сверстать блок пакетов или тарифов. В данном уроке мы создадим новый миксин, который позволит очень сильно сократить код в зависимости от модификатора на элементе"
В данном уроке будет сверстан блок макета «О нас»
В данном уроке мы сверстаем слайдер и добавим 3 слайда, но пока без функционала"
- Урок 13. Блок преимущества.
В данном уроке мы сверстаем довольно простой блок преимуществ, в котором снова будем использовать иконки Font Awesome"
Данный урок посвящен блоку подвала или футера, который будет являться заключительным для макета"
- Урок 15. Функционал слайдера и продакшн сборка.
В этом уроке мы с вами сделаем продакшн сборку, то есть удалим всю ненужную информацию из CSS файла и сократим его размер в 4 раза! А еще мы напишем на чистом JavaScript функционал для слайдера"
► Вы с нуля увидите, как создать максимально эффективное рабочее окружение для верстки. Синтаксис используемый в блоке — SCSS, который является более строгой версией языка SASS.
- БЛОК 5. Практика. Препроцессор LESS
Методология, выбранная для данного блока — наследование. Вы увидите, как просто и правильно совместно с препроцессором использовать данную методологию, и как такой подход позволяет сократить количество классов и максимально очистить html. Также вы увидите, как можно подключить специальную библиотеку шрифтов-картинок и тем самым оптимизировать размер таблицы стилей. После задания всех стилей мы буквально за пару секунд с помощью сборщика сделаем финальную сборку в один файл, и вы увидите, как это важно, потому что результат шаблона не изменится, а размер файла сократится почти в 4 раза.
В данном вводном уроке вы увидите шаблон, который нам предстоит сверстать. Вы узнаете, с помощью какой методологии будет сверстан данный макет, и каким изменениям он будет подвержен"
- Урок 2. Настройка рабочего окружения.
В этом уроке вы увидите профессиональную настройку сборщика Gulp для автоматизации процессов при верстке на CSS препроцессоре"
- Урок 3. Создание миксинов и параметров проекта.
В данном уроке вы узнаете, какой первый шаг стоит сделать перед началом процесса верстки. В процессе урока мы зададим общие стили для проекта, создадим файл параметров и сделаем пару необходимых базовых миксинов"
В данном уроке нами будет сверстан блок навигации. Также мы рассмотрим способ добавление иконок из шрифта Font Awesome"
В этом уроке мы сверстаем блок хедера. Также мы добавим общий класс для кнопок на весь проект"
В данном уроке вы увидите, как сверстать блок функций, и как совместить картинку и текст"
- Урок 7. Блок преимуществ.
В данном уроке мы продолжим верстку макета с блоком преимуществ"
В данном уроке мы сверстаем довольно интересный блок с тремя элементами. В рамках урока будет затронута тема: как создать трапецию на чистом CSS"
Данный урок посвящен блоку с текстом и описанием автора"
В этом уроке мы сверстаем блок с тремя элементами с разным наполнением, но одинаковым каркасом"
Этот урок, финальный в плане верстки, будет посвящен подвалу или футеру макета. Также мы создадим еще один миксин"
- Урок 12. Финальная сборка.
В этом уроке мы сделаем продакшн сборку — сделаем минификацию файла CSS и уберем исходные карты, написав всего одну строчку кода. Вы увидите, как данная оптимизация применима на практике, и насколько она важна"
► Вы с нуля увидите, как организовать максимально эффективное и быстрое рабочее окружение для верстки с использованием препроцессора и сервера быстрой автоматической перезагрузки страницы. Также мы заложим функционал для создания финальной версии сборки стилей в один файл.
3D - моделирование (319)
Бизнес и заработок (416)
Графика и видео (449)
Графический дизайн (93)
Дети и их родители (84)
Духовные практики (20)
Женщина и мужчина (37)
Здоровье и спорт (192)
Инвестиции и финансы (290)
Иностранные языки (28)
Компьютер и программы (103)
Личностный рост (110)
Маркетинг и реклама (143)
Музыка и звука (21)
Программирование (92)
Работа и карьера (19)
Создание сайтов и блогов (296)
Строительство и ремонт (116)
Хобби и увлечения (158)
Разные курсы (1)
