von Mario Wiecha · Webdesigner

Interaktive CSS-Tutorials

Kurze, praxisnahe Module zu den Grundlagen von modernem Webdesign – zum Ausprobieren statt nur Lesen. Regler bewegen, Ergebnis live sehen, Konzept verstehen.

Einführung HTML CSS JavaScript

Modul 01

</>

Was ist HTML?

Der gleiche Text, verpackt in unterschiedliche Tags – und warum HTML nur die Struktur, nicht das Design bestimmt.

Verfügbar Modul 02

Was ist CSS?

Derselbe HTML-Inhalt, aber mit CSS komplett anders gestaltet – Farbe, Größe und Form live verändern.

Verfügbar Modul 03

{ }

Was ist JavaScript?

Ein Klick, eine Reaktion: wie JavaScript eine fertig geladene Seite nachträglich verändert.

Verfügbar

Modul 04

</>

HTML-Struktur

Semantische Landmarken wie header, nav, main und footer ein- und ausschalten und den Code live sehen.

Verfügbar

Modul 05

Box-Modell

Content, Padding, Border und Margin live einstellen und den Querschnitt jeder Box verstehen.

Verfügbar Modul 05b

Box-Modell – Referenzdiagramm

Statisches Diagramm mit Legende zu Content, Padding, Border und Margin – auf einen Blick zum Nachschlagen.

Verfügbar Modul 06

Flexbox

Achsen, Ausrichtung und Verteilung entlang einer Zeile oder Spalte – interaktiv erklärt.

Verfügbar Modul 07

CSS Grid

Spalten, Zeilen und Grid-Template-Areas aufbauen und live sehen, wie sich Layouts verhalten.

Verfügbar

Modul 08

{ }

JavaScript & DOM

Text, Klassen und Stil eines Elements live per JavaScript verändern und den passenden Code sehen.

Verfügbar