In diesem Grundkurs baust du Schritt für Schritt eine vollständige Website auf –
von der ersten HTML-Zeile bis zur fertigen, responsiven Seite. Jeder Teil baut
auf dem vorherigen auf, sodass du am Ende nicht nur eine funktionierende Website
hast, sondern auch verstehst, warum sie so aufgebaut ist.
Der Kurs besteht aus fünf Teilen: Im ersten Teil legst du das Grundgerüst
an – HTML-Struktur, Wrapper und die ersten CSS-Regeln. Teil zwei widmet sich dem
Layout, Teil drei den Inhalten. In Teil vier kommt
das Design dazu, und in Teil fünf machst du die Seite
Responsive – also fit für alle Bildschirmgrößen.
-
Teil 1 – Grundgerüst
Wir legen das Fundament: HTML-Grundgerüst, der Wrapper als Umschlag für die Seite,
der 62,5 %-Trick mit rem und warum Paddings und Hintergrundfarben für ein
ruhiges, strukturiertes Layout sorgen.
-
Teil 2 – Layout
Jetzt bekommt die Seite eine Aufteilung: Mit CSS Grid entstehen zwei Spalten – ein breiter Hauptbereich und eine schmalere Sidebar. Du lernst, was fr, gap und align-items: start bedeuten und warum <aside> mehr ist als nur ein <div>.
-
Teil 3 – Inhalte & Komponenten
Das Layout steht – jetzt kommen die Inhalte. Du baust Cards mit Bild, Text und Link, lernst was hinter alt="" steckt und wie rgba beim box-shadow für einen weichen Hover-Effekt sorgt. Außerdem: warum Emojis im HTML als 💻 stehen.
-
Teil 4 – Navigation & Typografie
Die Seite bekommt Orientierung und Charakter. Du baust eine Navigationsleiste aus <nav> und <ul>, lernst warum transition im Normalzustand steht und nicht im :hover, und wie zwei Schriftarten – Serif für Überschriften, Sans-Serif im Fließtext – sofort mehr Professionalität erzeugen.
-
Teil 5 - Responsive Design
Die Seite passt sich jetzt jedem Bildschirm an. Du lernst, wie @media-Regeln funktionieren, warum in Media Queries immer px statt rem steht, und wie ein einziges grid-template-columns: 1fr das zweispaltige Layout auf Tablets einspaltig macht – während auf Smartphones die Navigation mit flex-direction: column umklappt.
-
Fragen? Her damit.
Steckst du fest oder kommt etwas nicht so heraus wie gedacht? In der dev-community findest du Entwickler und Designer die gerne helfen – egal ob Anfänger oder nicht. Keine Frage ist zu klein.
