HTML und CSS: deine erste Webseite bauen
HTML strukturiert den Inhalt, CSS gestaltet ihn. Dieses Duo ist der sichtbarste Einstieg ins Programmieren.
Den Unterschied zwischen HTML und CSS verstehen
HTML ist das Skelett: Überschriften, Absätze, Bilder, Links, Buttons. CSS ist die Haut: Farben, Schriften, Abstände, Layout. Eine Seite ohne CSS funktioniert, sieht aber wie ein rohes Dokument aus. Eine Seite ohne HTML hat nichts zum Gestalten. Lerne, Dinge in HTML sauber zu strukturieren, bevor du dir um Design Gedanken machst – gut organisierter Inhalt lässt sich viel leichter gestalten.
Modernes Layout beherrschen
Vergiss die alten tabellenbasierten Tricks. Heute decken zwei CSS-Werkzeuge 90 % aller Layouts ab: Flexbox zum Ausrichten von Elementen in einer Reihe oder Spalte, und Grid für rasterbasierte Anordnungen. Nimm dir einen Tag, um dich mit beiden vertraut zu machen. Wenn du beides draufhast, wird das Layouten einer Seite logisch statt mühsam.
Von Anfang an responsiv denken
Der Großteil des Webtraffics kommt vom Handy. Deine Seite muss sich an jede Bildschirmgröße anpassen. Verwende flexible Einheiten statt fixer Pixel und Media Queries, um das Layout je nach Breite anzupassen. Teste regelmäßig, indem du das Browserfenster verkleinerst. Eine toll aussehende Desktop-Seite, die auf dem Handy bricht, ist eine gescheiterte Seite.
Jetzt anwenden
- Erstelle eine index.html-Datei und schreibe eine grundlegende Struktur
- Füge Überschriften, Absätze, Bilder und Links hinzu
- Verknüpfe ein externes CSS-Stylesheet
- Lerne Flexbox und dann Grid anhand kleiner Beispiele
- Mach die Seite mit Media Queries responsiv
- Stelle deine Seite kostenlos online, um sie zu teilen