In Woche 3 der 31-Tage-Challenge stand CSS im Fokus: von Positioning über Flexbox bis zu Units wie Pixel und Prozent. Anfänger lernten die fundamentalen Konzepte, um Elemente auf einer Seite korrekt zu positionieren und responsive Layouts zu bauen. Mit diesen CSS-Grundlagen haben Teilnehmer eine solide Basis für professionelle Webentwicklung.
Was dich in Woche 3 der Web Development Challenge erwartet hat
Woche 3 der 31-Tage-Challenge war die CSS-Woche. Sieben Tage, in denen du gelernt hast, wie Elemente auf einer Seite wirklich positioniert werden, warum Flexbox so mächtig ist, und welches Tool kein Entwickler missen will. Wer das alles verinnerlicht, hat die wichtigsten CSS-Grundlagen beisammen.
CSS Units: Wann nimmst du Pixel, wann Prozent?
Tag 15 drehte sich um Einheiten. Klingt trocken, ist aber grundlegend. Der Unterschied: absolute Einheiten wie Pixel haben feste Werte, unabhängig vom Kontext. Relative Einheiten passen sich an.
In der Praxis begegnest du hauptsächlich:
pxfür absolute Werte%relativ zur Breite oder Höhe des Elternelementsemundrembasierend auf der Schriftgröße (rem immer relativ zum Root-Element)vwundvhrelativ zur Breite bzw. Höhe des Viewports
Wenn du responsive Layouts bauen willst, die auf verschiedenen Bildschirmen gut aussehen, kommst du an relativen Einheiten nicht vorbei. Pixel allein reichen da nicht.
Display, Float und Opacity: CSS-Attribute die du täglich brauchst
An Tag 16 gab es weitere CSS-Eigenschaften. text-align zum Ausrichten von Text, opacity für Transparenz (0 ist unsichtbar, 1 ist vollständig sichtbar). Und dann display.
Das display-Attribut steuert, wie sich ein Element auf der Seite verhält:
block: nimmt die volle Breite ein, neue Zeileinline: passt sich dem Textfluss annone: Element wird ausgeblendetflexundgrid: die modernen Layout-Systeme
float wurde auch erwähnt, aber ehrlich gesagt: Wenn du Flex oder Grid nutzen kannst, tu das. Float macht komplexe Layouts schnell unübersichtlich.
Flexbox und Grid: Das Herzstück moderner Layouts
Tag 17 war dem Layout gewidmet, und das zurecht. Flexbox ist das Werkzeug, das du in fast jedem Projekt brauchst. Mit display: flex und ein paar zusätzlichen Eigenschaften wie justify-content: center und align-items: center kannst du Elemente horizontal und vertikal zentrieren. Etwas, das früher echte Kopfschmerzen bereitet hat.
Grid kommt dann zum Einsatz, wenn du Zeilen und Spalten brauchst: klassische Tabellen-Layouts, Card-Grids, komplexe Seitenaufteilungen.
Wenn du Flex noch nicht richtig verstanden hast, schau es dir nochmal an. Kein Witz. Du wirst es in jedem Projekt brauchen, egal ob du später im Frontend Fundamentals anfängst oder direkt ins Fullstack-Gebiet einsteigst.
CSS Farben, Selektoren und Positionierung
Tag 18 hat gezeigt, wie viele Wege es gibt, eine Farbe zu definieren:
- Farbname:
red - RGB:
rgb(255, 0, 0) - Hex:
#ff0000 - HSL:
hsl(0, 100%, 50%)
Alle führen zum gleichen Rot. Hex ist in der Praxis am häufigsten, aber RGB mit Alpha (rgba) ist praktisch, wenn du Transparenz brauchst.
Tag 19 brachte erweiterte Selektoren. :hover kennst du vielleicht schon, damit änderst du das Aussehen eines Elements, sobald die Maus drüber geht. :before und :after sind sogenannte Pseudoelemente. Du erzeugst damit per CSS Inhalte, die im HTML gar nicht stehen. Nützlich für Dekorationen, Icons oder kleine UI-Effekte.
Tag 20 behandelte Positionierung. Drei Werte sind zentral:
static: Standard, kein spezielles Verhaltenrelative: positioniert sich relativ zu sich selbstabsolute: positioniert sich relativ zum nächsten übergeordneten Element mitposition: relative
Wenn absolute mal “falsch” sitzt, liegt es fast immer daran, dass kein relatives Elternelement gesetzt ist.
Der Profi-Tipp: Browser Developer Tools
Das Beste kommt zum Schluss. Drück mal F12. Die Browser Developer Tools sind dein bester Freund beim Entwickeln. Du siehst den HTML-Code, das CSS, kannst Werte live ändern und sofort sehen, was passiert. Wenn du die Seite neu lädst, sind die Änderungen weg, aber das ist völlig okay. Es geht ums Ausprobieren.
Besonders praktisch: Der Inspektor. Rechtsklick auf ein Element, dann “Inspect”. Du siehst sofort im Code, womit du es zu tun hast. Und du kannst direkt im Styles-Bereich neue CSS-Regeln hinzufügen oder bestehende deaktivieren, nur mit einem Klick.
Bei Flexbox-Layouts zeigt der Browser inzwischen sogar Flex-spezifische Steuerungen an. Du kannst Ausrichtung und Abstände direkt im Browser einstellen, ohne eine einzige Zeile Code zu schreiben.
Wer das noch nicht benutzt, verliert Zeit. Und das muss nicht sein.
Wenn dir die Challenge Spaß macht und du überlegst, ob das auch beruflich was für dich sein könnte, schau dir mal den geförderten Web-Developer-Kurs an. Der ist AZAV-zertifiziert und kann über Bildungsgutschein vom Jobcenter oder der Agentur für Arbeit finanziert werden.
Häufige Fragen
Was ist der Unterschied zwischen Flexbox und Grid?
Flexbox ist für eindimensionale Layouts gedacht, also Elemente in einer Reihe oder einer Spalte. Grid ist zweidimensional: du arbeitest gleichzeitig mit Zeilen und Spalten. In der Praxis nutzt du Flex häufiger für kleinere Komponenten, Grid für größere Seitenstrukturen.
Warum sollte ich rem statt px verwenden?
rem orientiert sich an der Schriftgröße des Root-Elements und passt sich automatisch an, wenn Nutzer die Schriftgröße im Browser ändern. Das macht deine Seite zugänglicher. Für feste Werte wie Rahmen oder Icons ist px aber weiterhin gut geeignet.
Wofür sind die Browser Developer Tools wirklich nützlich?
Du kannst damit CSS live bearbeiten, ohne deinen Code zu ändern. Das spart enorm viel Zeit beim Debuggen und beim Ausprobieren von Layouts. Außerdem siehst du sofort, welche Styles auf ein Element angewendet werden und woher sie kommen. F12 ist die Abkürzung, Rechtsklick + “Inspect” geht auch.