SCSS Intermediate ~50 h 1 students enrolled

SCSS & CSS Frameworks

Preprocessors, methodologies, Bootstrap and Tailwind CSS. From variables and mixins to production-ready layouts with UI frameworks.

Start Learning Already have an account? Sign In
47 lessons
30 exercises
4070 XP for course
~50 h

What You'll Learn

Why Preprocessors
SCSS: Variables
SCSS: Nesting
SCSS: Mixins
SCSS: Functions
SCSS: Extend & Placeholder
SCSS: Loops & Conditions
SCSS: Modules & Architecture
SCSS: Real-World Patterns
BEM Methodology
Other CSS Methodologies
Bootstrap: Introduction
Bootstrap: Grid System
Bootstrap: Components
Bootstrap: Forms
Bootstrap: Utilities
Tailwind CSS: Introduction
Tailwind: Flex & Grid Layout
Tailwind: Components from Utilities
Tailwind: Dark Mode & Responsive
Tailwind: Animations & Effects
Bootstrap vs Tailwind
Tailwind: Customization
Practice: Bootstrap Landing
Practice: Tailwind Dashboard
Final Project

This Course Includes

Interactive exercises with instant feedback
Real compiler in your browser
Certificate upon completion
Gamification: XP, levels, badges

Curriculum

26 lessons · 47 lessons · 30 exercises

1

Why Preprocessors

Problems of plain CSS and how SCSS/Sass/Less solve them

  • Problems of Plain CSS +10 XP
  • Preprocessors Overview +10 XP
  • SCSS vs Sass — What's the Difference? +10 XP
2

SCSS: Variables

Variables, data types, operations and scopes

  • SCSS Variables +15 XP
  • Maps and Lists +10 XP
  • Practice: Design Tokens +15 XP
3

SCSS: Nesting

Nested rules, & parent selector, @at-root and media queries

  • Rule Nesting +15 XP
  • Nested Media Queries +10 XP
  • Practice: Nesting +15 XP
4

SCSS: Mixins

Reusable style blocks with parameters and @content

  • Mixin Basics +10 XP
  • Mixins with @content +10 XP
  • Practice: Button System +15 XP
5

SCSS: Functions

Built-in and custom functions, colors, math

  • Functions in SCSS +15 XP
  • CSS calc() — Browser Functions +15 XP
6

SCSS: Extend & Placeholder

@extend, %placeholder selectors and when to use them

  • @extend and %placeholder +15 XP
7

SCSS: Loops & Conditions

@for, @each, @while, @if/@else — CSS generation

  • Conditions @if / @else +10 XP
  • Loops @for, @each, @while +15 XP
8

SCSS: Modules & Architecture

@use, @forward, partials, 7-1 pattern and real file organization

  • Partials and @use +10 XP
  • 7-1 Pattern & Architecture +10 XP
9

SCSS: Real-World Patterns

Design tokens, dark themes, responsive system, production patterns

  • Design Tokens in SCSS +10 XP
  • Responsive System +10 XP
10

BEM Methodology

Block-Element-Modifier — CSS naming standard

  • BEM: Block, Element, Modifier +15 XP
  • BEM in Real Components +10 XP
11

Other CSS Methodologies

OOCSS, SMACSS, Atomic CSS, CSS Modules — overview

  • OOCSS and SMACSS +10 XP
  • Atomic CSS & CSS Modules +10 XP
12

Bootstrap: Introduction

Setup, philosophy, breakpoints and containers

  • What is Bootstrap? +10 XP
  • Colors and Typography +10 XP
13

Bootstrap: Grid System

12-column grid, row, col, responsive layout

  • 12-Column Grid +15 XP
  • Grid Alignment +15 XP
14

Bootstrap: Components

Buttons, cards, navbar, alerts, badges, tables

  • Buttons and Badges +10 XP
  • Cards, Alerts and Navbar +15 XP
  • Tables and Lists +10 XP
15

Bootstrap: Forms

Inputs, selects, checkboxes, floating labels, validation

  • Bootstrap Forms +15 XP
  • Form Validation +15 XP
16

Bootstrap: Utilities

Spacing, display, flex, borders, shadows, sizing

  • Spacing and Display +15 XP
17

Tailwind CSS: Introduction

Utility-first approach, naming system, first project

  • What is Tailwind? +10 XP
  • Spacing, Layout and Typography +15 XP
18

Tailwind: Flex & Grid Layout

Building layouts: flex, grid, responsive

  • Flex Layout in Tailwind +15 XP
  • Grid Layout in Tailwind +15 XP
19

Tailwind: Components from Utilities

Cards, forms, button groups — built from utilities

  • Cards and Forms +15 XP
20

Tailwind: Dark Mode & Responsive

Dark theme with dark:, responsive breakpoints

  • Responsive Design +15 XP
21

Tailwind: Animations & Effects

Transitions, transforms, built-in animations, hover effects

  • Tailwind Animations +15 XP
22

Bootstrap vs Tailwind

Comparing approaches, when to use which

  • Framework Comparison +10 XP
23

Tailwind: Customization

tailwind.config, custom colors, fonts, plugins

  • Tailwind Configuration +15 XP
24

Practice: Bootstrap Landing

Building a complete Bootstrap landing page

  • Bootstrap Landing Page +20 XP
25

Practice: Tailwind Dashboard

Building dashboard: stat cards + table

  • Tailwind Dashboard +20 XP
26

Final Project

Portfolio page with your framework of choice

  • Brief: Portfolio Page +30 XP

Requirements

No prior knowledge required — we start from scratch

Course FAQ

Do I need programming experience?
Not at all! This course is built for complete beginners. We start from the basics and gradually increase complexity.
How do lessons work?
Each lesson includes theory with examples and interactive exercises. You write code right in your browser, and our compiler checks the result.
How long does the course take?
On average, you can complete the course in a few days at 1-2 hours per day. But there's no rush — learn at your own pace.
Will I get a certificate?
Yes! After completing all lessons and exercises, you'll receive an electronic certificate with a unique ID.

Ready to start?

Sign up for free and start coding right now. Your first result in 5 minutes.

Start Learning