CSS Lernen: Programmieren — CSS-Programmieren üben mit einem Live-HTML- und CSS-Editor auf deinem Smartphone

Drei Bereiche verursachen die meisten Layout-Probleme bei Einsteigern. Das Box-Modell: Padding und Rahmen werden standardmäßig zur festgelegten Breite eines Elements addiert, sodass eine Box am Ende breiter ist als die Zahl, die du eingegeben hast. Die Spezifität: Eine spezifischere Regel an anderer Stelle überschreibt deine Regel unbemerkt. Und das falsche Layout-Tool: der Versuch, mit Flexbox eine zweidimensionale Seite umzusetzen, obwohl Flexbox für eine einzelne Zeile entwickelt wurde. CSS Lernen: Programmieren ordnet die Kurse so an, dass du diese drei Themen in genau dieser Reihenfolge verstehst, statt sie durch Ausprobieren zu entdecken.

Ein wenig – und du kannst es parallel zu den Lektionen lernen, statt es vorher vollständig abzuschließen. CSS beschreibt, wie HTML-Elemente dargestellt werden. Als Grundlage reicht es daher, zu wissen, dass eine Seite aus Elementen besteht – Überschriften, Absätzen, Listen und Bildern. Der Live-Editor der App zeigt HTML und CSS gemeinsam, sodass der Zusammenhang zwischen beiden bereits ab der ersten Lektion sichtbar ist.

Flexbox ordnet Elemente entlang einer Linie an – etwa eine Reihe von Buttons oder eine Navigationsleiste – und verteilt den übrigen Platz entlang dieser einen Achse. Grid definiert gleichzeitig Zeilen und Spalten. Dadurch platzierst du Elemente in einem echten zweidimensionalen Raster, statt sie mit Margins zurechtzurücken. Das Layout einer ganzen Seite wird normalerweise mit Grid umgesetzt; eine einzelne Reihe von Steuerelementen darin normalerweise mit Flexbox. Im Kurs lernst du beides, bevor du selbst entscheidest.

CSS löst widersprüchliche Regeln zuerst anhand der Spezifität und erst danach anhand der Reihenfolge im Quelltext auf. Ein ID-Selektor schlägt einen Klassen-Selektor, und ein Klassen-Selektor schlägt einen einfachen Element-Selektor – unabhängig davon, welcher weiter unten im Stylesheet steht. Deshalb kann eine scheinbar korrekte Regel trotzdem gegen eine Regel verlieren, die du an anderer Stelle vergessen hast. Der Kurs Specificity & Cascade in der App ist genau dafür da, diese Reihenfolge vorhersehbar statt rätselhaft zu machen.

Ja, es lohnt sich weiterhin, CSS direkt zu lernen. Utility-Frameworks wie Tailwind sind eine auf CSS-Konzepten aufbauende Ebene, kein Ersatz dafür. Wenn eine Utility-Klasse nicht das tut, was du erwartest, helfen dir Kenntnisse über das Box-Modell, die Spezifität und die zugrunde liegenden Layout-Systeme weiter. Außerdem gehört CSS zu den Fähigkeiten, bei denen du besonders schnell Ergebnisse siehst, da jede Änderung sofort auf der Seite sichtbar ist.

Regelmäßigkeit ist wichtiger als die Gesamtzahl der Stunden. Wenn du täglich kurze Lektionen bearbeitest, können die meisten Einsteiger innerhalb weniger Wochen sicher mit Selektoren, Abständen, Typografie und grundlegenden Flexbox- oder Grid-Layouts umgehen – lange bevor die schwierigeren Themen wie Sonderfälle bei der Spezifität oder Container Queries an der Reihe sind. Die 20 angeleiteten Projekte der App sind genau dazu da, diese Phase zu üben – eine echte Seite nach der anderen.

Die App kann kostenlos im App Store und bei Google Play heruntergeladen werden. Der erste Kurs, das erste angeleitete Projekt, zwei Bug-Hunt-Missionen und der Live-Editor sind kostenlos, einschließlich eines täglichen Kontingents für den KI-Mentor. Pro schaltet alle Kurse, alle 20 Projekte und 20 Missionen, die Zertifikatsprüfung und die unbegrenzte Nutzung des KI-Mentors frei und entfernt Werbung.

CSS Lernen: Programmieren ist für iPhone und iPad im App Store und für Android bei Google Play verfügbar. Die Benutzeroberfläche gibt es in 22 Sprachen, die Altersfreigabe liegt bei 4+. Die App richtet sich an komplette Einsteiger, Designer, die ihre eigenen Seiten gestalten möchten, sowie an Berufsumsteiger und Studierende, die sich auf Front-end-Interviews vorbereiten.

Für die sofortige Vorschau ist ausdrücklich eine Verbindung erforderlich, damit dein HTML und CSS gerendert werden können. Die App weist darauf hin, statt die Funktion stillschweigend einzuschränken. Lektionstexte und Lernmaterial sind so gestaltet, dass sie auch bei einer instabilen Verbindung weiter funktionieren – das deckt die meisten Pendelfahrten ab. Eine vollständig offline nutzbare Live-Vorschau bietet dieser Editor jedoch nicht.

CSS Lernen: Programmieren läuft auf iOS über den App Store und auf Android über Google Play. Die App ist in 22 Sprachen verfügbar und hat eine Altersfreigabe von 4+. Wenn du die Abschlussprüfung bestehst, stellt die App ein Abschlusszertifikat aus – ein Nachweis für deine geleistete Arbeit, der sich im Lebenslauf neben den angeleiteten Projekten, über die du sprechen kannst, gut macht, aber keine akkreditierte Qualifikation darstellt.