Leer CSS: Code & Praktijk — Oefenen met CSS-codering en een live HTML- en CSS-editor op je telefoon

Drie dingen veroorzaken de meeste layoutproblemen bij beginners. Het boxmodel: padding en borders worden standaard opgeteld bij de opgegeven breedte van een element, waardoor een box uiteindelijk breder wordt dan het getal dat je hebt ingevoerd. Specificity: een specifiekere regel elders overschrijft die van jou zonder dat je het merkt. En de verkeerde layouttool: een tweedimensionale pagina proberen te bouwen met flexbox, dat bedoeld is voor één rij. Leer CSS: Code & Praktijk behandelt deze drie onderwerpen in die volgorde, zodat je ze begrijpt in plaats van ze al doende en met vallen en opstaan te ontdekken.

Een beetje, maar je kunt die kennis naast de lessen opdoen in plaats van HTML eerst helemaal af te ronden. CSS beschrijft hoe HTML-elementen worden weergegeven, dus het is voldoende als je weet dat een pagina uit elementen bestaat — koppen, alinea's, lijsten en afbeeldingen — om te beginnen. De live editor van de app toont HTML en CSS samen, zodat je vanaf de eerste les ziet hoe ze met elkaar verbonden zijn.

Flexbox ordent items op één lijn — een rij knoppen of een navigatiebalk — en verdeelt de overgebleven ruimte langs die ene as. Grid definieert tegelijkertijd rijen en kolommen, zodat je items in een echte tweedimensionale grid plaatst in plaats van ze met margins op hun plek te duwen. Voor de layout van een hele pagina gebruik je normaal gesproken grid; voor één rij bedieningselementen daarin meestal flexbox. De cursus leert je beide voordat je zelf die keuze maakt.

CSS lost conflicterende regels eerst op basis van specificity op en daarna op basis van de bronvolgorde. Een ID-selector wint van een class-selector, en een class-selector wint van een gewone elementselector, ongeacht welke verderop in de stylesheet staat. Daarom kan een regel die er correct uitziet toch verliezen van een regel die je elders over het hoofd hebt gezien — de cursus Specificity & Cascade in de app is er specifiek op gericht om die volgorde voorspelbaar te maken in plaats van mysterieus.

Ja, het is nog steeds de moeite waard om CSS rechtstreeks te leren. Utility-frameworks zoals Tailwind zijn een laag die is geschreven op basis van CSS-concepten, geen vervanging ervan — als een utility class niet doet wat je verwacht, helpt inzicht in het boxmodel, specificity en de onderliggende layoutsystemen je verder. Het is bovendien een van de snelste vaardigheden waarbij je resultaat ziet, omdat elke wijziging meteen op de pagina zichtbaar is.

Regelmaat is belangrijker dan het totale aantal uren. Als je elke dag korte lessen volgt, kunnen de meeste beginners binnen een paar weken vol vertrouwen werken met selectors, spacing, typografie en een basislayout met flexbox of grid — ruim voordat ze aan de lastigere onderdelen komen, zoals randgevallen rond specificity of container queries. De 20 begeleide projecten van de app zijn er specifiek om die fase te oefenen, telkens met één echte pagina.

De app is gratis te downloaden in de App Store en op Google Play. De eerste cursus, het eerste begeleide project, twee bughuntmissies en de live editor zijn gratis, met een dagelijks tegoed voor AI Mentor. Pro ontgrendelt elke cursus, alle 20 projecten en 20 missies, het certificaatexamen en onbeperkt gebruik van AI Mentor, en verwijdert advertenties.

Leer CSS: Code & Praktijk is beschikbaar voor iPhone en iPad in de App Store en voor Android op Google Play, met een interface in 22 talen en een leeftijdsclassificatie van 4+. De app is bedoeld voor complete beginners, designers die hun eigen pagina's willen stijlen en mensen die van carrière willen switchen of studenten die zich voorbereiden op front-end-sollicitaties.

Voor de directe preview is specifiek een verbinding nodig om je HTML en CSS te renderen; de app geeft dat duidelijk aan in plaats van stilletjes minder functionaliteit te bieden. De lesteksten en het lesmateriaal zijn zo ontworpen dat ze blijven werken bij een instabiele verbinding, wat voor de meeste woon-werkritten voldoende is, maar een volledig offline live-preview-sessie biedt deze editor niet.

Leer CSS: Code & Praktijk draait op iOS via de App Store en op Android via Google Play, en de app is beschikbaar in 22 talen. De app heeft een leeftijdsclassificatie van 4+. Als je slaagt voor het eindexamen, verstrekt de app een certificaat van voltooiing — bewijs van het werk dat je hebt gedaan en nuttig op je cv naast de begeleide projecten waarover je kunt vertellen, maar geen erkende kwalificatie.