SCSS Средний ~50 ч 1 студентов записалось

SCSS & CSS-фреймворки

Препроцессоры, методологии, Bootstrap и Tailwind CSS. От переменных и миксинов до продакшн-ready вёрстки с UI-фреймворками.

Начать обучение Уже есть аккаунт? Войти
47 уроков
30 упражнений
4070 XP за курс
~50 ч

Чему ты научишься

Зачем нужны препроцессоры
SCSS: Переменные
SCSS: Вложенность
SCSS: Миксины
SCSS: Функции
SCSS: Extend и Placeholder
SCSS: Циклы и условия
SCSS: Модули и архитектура
SCSS: Реальные паттерны
CSS-методология BEM
Другие CSS-методологии
Bootstrap: Знакомство
Bootstrap: Grid-система
Bootstrap: Компоненты
Bootstrap: Формы
Bootstrap: Утилиты
Tailwind CSS: Введение
Tailwind: Flex и Grid Layout
Tailwind: Компоненты из утилит
Tailwind: Dark Mode и Responsive
Tailwind: Анимации и эффекты
Bootstrap vs Tailwind
Tailwind: Кастомизация
Практика: Bootstrap лендинг
Практика: Tailwind дашборд
Финальный проект

Курс включает

Интерактивные упражнения с проверкой
Реальный компилятор в браузере
Сертификат по завершении
Геймификация: XP, уровни, бейджи

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

26 уроков · 47 уроков · 30 упражнений

1

Зачем нужны препроцессоры

Проблемы чистого CSS и как их решают SCSS/Sass/Less

  • Проблемы чистого CSS +10 XP
  • Обзор препроцессоров +10 XP
  • SCSS vs Sass — в чём разница? +10 XP
2

SCSS: Переменные

Переменные, типы данных, операции и скоупы

  • Переменные в SCSS +15 XP
  • Карты и списки +10 XP
  • Практика: дизайн-токены +15 XP
3

SCSS: Вложенность

Вложенные правила, & (parent selector), @at-root и media-queries

  • Вложенность правил +15 XP
  • Вложенные media-queries +10 XP
  • Практика: вложенность +15 XP
4

SCSS: Миксины

Переиспользуемые блоки стилей с параметрами и @content

  • Основы миксинов +10 XP
  • Миксин с @content +10 XP
  • Практика: система кнопок +15 XP
5

SCSS: Функции

Встроенные и кастомные функции, цвета, математика

  • Функции в SCSS +15 XP
  • CSS calc() — функции в браузере +15 XP
6

SCSS: Extend и Placeholder

@extend, %placeholder-селекторы и когда их использовать

  • @extend и %placeholder +15 XP
7

SCSS: Циклы и условия

@for, @each, @while, @if/@else — генерация CSS

  • Условия @if / @else +10 XP
  • Циклы @for, @each, @while +15 XP
8

SCSS: Модули и архитектура

@use, @forward, partials, 7-1 паттерн и реальная организация файлов

  • Partials и @use +10 XP
  • 7-1 паттерн и архитектура +10 XP
9

SCSS: Реальные паттерны

Design tokens, тёмная тема, responsive система, production-паттерны

  • Design Tokens в SCSS +10 XP
  • Responsive система +10 XP
10

CSS-методология BEM

Block-Element-Modifier — стандарт именования CSS

  • BEM: Блок, Элемент, Модификатор +15 XP
  • BEM на реальных компонентах +10 XP
11

Другие CSS-методологии

OOCSS, SMACSS, Atomic CSS, CSS Modules — обзор подходов

  • OOCSS и SMACSS +10 XP
  • Atomic CSS и CSS Modules +10 XP
12

Bootstrap: Знакомство

Подключение, философия, breakpoints и контейнеры

  • Что такое Bootstrap? +10 XP
  • Цвета и типографика +10 XP
13

Bootstrap: Grid-система

12-колоночная сетка, row, col, responsive layout

  • 12-колоночная сетка +15 XP
  • Выравнивание в Grid +15 XP
14

Bootstrap: Компоненты

Кнопки, карточки, навбар, алерты, бейджи, таблицы

  • Кнопки и бейджи +10 XP
  • Карточки, алерты и навбар +15 XP
  • Таблицы и списки +10 XP
15

Bootstrap: Формы

Инпуты, селекты, чекбоксы, floating labels, валидация

  • Формы в Bootstrap +15 XP
  • Валидация форм +15 XP
16

Bootstrap: Утилиты

Spacing, display, flex, borders, shadows, sizing

  • Spacing и Display +15 XP
17

Tailwind CSS: Введение

Utility-first подход, система именования, первый проект

  • Что такое Tailwind? +10 XP
  • Spacing, Layout и Типографика +15 XP
18

Tailwind: Flex и Grid Layout

Построение layout-ов: flex, grid, responsive

  • Flex-layout в Tailwind +15 XP
  • Grid-layout в Tailwind +15 XP
19

Tailwind: Компоненты из утилит

Карточки, формы, группы кнопок — собираем из утилит

  • Карточки и формы +15 XP
20

Tailwind: Dark Mode и Responsive

Тёмная тема через dark:, адаптивные брейкпоинты

  • Адаптивный дизайн +15 XP
21

Tailwind: Анимации и эффекты

Transitions, transforms, встроенные анимации, hover-эффекты

  • Анимации в Tailwind +15 XP
22

Bootstrap vs Tailwind

Сравнение подходов, когда что использовать

  • Сравнение фреймворков +10 XP
23

Tailwind: Кастомизация

tailwind.config, кастомные цвета, шрифты, плагины

  • Настройка Tailwind +15 XP
24

Практика: Bootstrap лендинг

Собираем полный лендинг на Bootstrap

  • Лендинг на Bootstrap +20 XP
25

Практика: Tailwind дашборд

Собираем дашборд: stat-карточки + таблица

  • Дашборд на Tailwind +20 XP
26

Финальный проект

Портфолио-страница на выбранном фреймворке

  • Задание: Портфолио +30 XP

Требования

Никаких предварительных знаний не требуется — начинаем с нуля

Вопросы по курсу

Нужен ли опыт программирования?
Нет! Этот курс создан для абсолютных новичков. Мы начинаем с самых основ и постепенно усложняем материал.
Как проходят уроки?
Каждый урок содержит теорию с примерами и интерактивные задания. Ты пишешь код прямо в браузере, а наш компилятор проверяет результат.
Сколько времени нужно на курс?
В среднем курс можно пройти за несколько дней по 1-2 часа в день. Но спешить не нужно — учись в своём темпе.
Получу ли я сертификат?
Да! После прохождения всех уроков и заданий ты получишь электронный сертификат с уникальным ID.

Готов начать?

Запишись бесплатно и начни писать код прямо сейчас. Первый результат через 5 минут.

Начать обучение