SCSS Mittelstufe ~50 Std 1 Studenten eingeschrieben

SCSS & CSS-Frameworks

Präprozessoren, Methodologien, Bootstrap und Tailwind CSS. Von Variablen und Mixins bis hin zu produktionsreifen Layouts mit UI-Frameworks.

Jetzt lernen Bereits ein Konto? Anmelden
47 Lektionen
30 Aufgaben
4070 XP für den Kurs
~50 Std

Was du lernst

Warum Präprozessoren
SCSS: Variablen
SCSS: Verschachtelung
SCSS: Mixins
SCSS: Funktionen
SCSS: Extend & Placeholder
SCSS: Loops & Conditions
SCSS: Modules & Architecture
SCSS: Real-World Patterns
BEM-Methodologie
Other CSS Methodologies
Bootstrap: Einführung
Bootstrap: Grid System
Bootstrap: Komponenten
Bootstrap: Forms
Bootstrap: Utilities
Tailwind CSS: Einführung
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
Abschlussprojekt

Dieser Kurs enthält

Interaktive Übungen mit sofortigem Feedback
Echter Compiler im Browser
Zertifikat nach Abschluss
Gamification: XP, Level, Abzeichen

Lehrplan

26 lektionen · 47 Lektionen · 30 Aufgaben

1

Warum Präprozessoren

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: Variablen

Variables, data types, operations and scopes

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

SCSS: Verschachtelung

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: Funktionen

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-Methodologie

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: Einführung

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: Komponenten

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: Einführung

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

Abschlussprojekt

Portfolio page with your framework of choice

  • Brief: Portfolio Page +30 XP

Voraussetzungen

Keine Vorkenntnisse erforderlich — wir beginnen bei null

Kurs-FAQ

Brauche ich Programmiererfahrung?
Nein! Dieser Kurs ist für absolute Anfänger. Wir beginnen mit den Grundlagen und steigern schrittweise die Komplexität.
Wie funktionieren die Lektionen?
Jede Lektion enthält Theorie mit Beispielen und interaktive Aufgaben. Du schreibst Code direkt im Browser und unser Compiler überprüft das Ergebnis.
Wie lange dauert der Kurs?
Im Durchschnitt kann man den Kurs in wenigen Tagen bei 1-2 Stunden pro Tag abschließen. Aber es gibt keinen Zeitdruck — lerne in deinem Tempo.
Bekomme ich ein Zertifikat?
Ja! Nach Abschluss aller Lektionen und Aufgaben erhältst du ein elektronisches Zertifikat mit einer einzigartigen ID.

Bereit zu starten?

Registriere dich kostenlos und fange jetzt an zu programmieren. Erstes Ergebnis in 5 Minuten.

Jetzt lernen