Lær CSS i praksis — Øvelse i CSS-kodning med en live HTML- og CSS-editor på din telefon

Tre områder skaber de fleste layoutproblemer for begyndere. Boksmodellen: padding og borders lægges som standard til et elements angivne bredde, så en boks ender med at være bredere end det tal, du skrev. Specificity: En mere specifik regel et andet sted tilsidesætter ubemærket din regel. Og det forkerte layoutværktøj: Du forsøger at skabe en todimensionel side med flexbox, som er bygget til én enkelt række. Lær CSS i praksis gennemgår kurserne i en rækkefølge, så du forstår disse tre ting i den rigtige orden i stedet for at opdage dem gennem trial and error.

En lille smule, og du kan lære det sideløbende med lektionerne i stedet for at afslutte det først. CSS beskriver, hvordan HTML-elementer vises, så det er et tilstrækkeligt grundlag at vide, at en side består af elementer — overskrifter, afsnit, lister og billeder — for at komme i gang. Appens live-editor viser både HTML og CSS sammen, så forbindelsen mellem dem er synlig allerede fra den første lektion.

Flexbox arrangerer elementer langs én linje — en række knapper eller en navigationslinje — og fordeler den resterende plads langs denne ene akse. Grid definerer rækker og kolonner samtidig, så du placerer elementer i et faktisk todimensionelt gitter i stedet for at skubbe dem på plads med margins. Et layout på sideniveau er normalt grid, mens en enkelt række kontrolelementer i det normalt er flexbox, og kurset lærer dig begge dele, før du selv skal vælge.

CSS løser modstridende regler efter specificity først og kildeorden derefter. En ID-selector vinder over en class-selector, og en class-selector vinder over en almindelig element-selector, uanset hvilken der står længst nede i dit stylesheet. Derfor kan en regel, der ser korrekt ud, stadig tabe til en regel, du har glemt et andet sted — kurset Specificity & Cascade i appen findes netop for at gøre denne rækkefølge forudsigelig i stedet for mystisk.

Ja, det kan stadig betale sig at lære CSS direkte. Utility-frameworks som Tailwind er et lag, der bygger på CSS-koncepter, ikke en erstatning for dem — når en utility class ikke gør det, du forventer, er det forståelsen af boksmodellen, specificity og de underliggende layout-systemer, der hjælper dig videre. Det er også en af de hurtigste færdigheder at se resultater med, fordi enhver ændring straks kan ses på siden.

Regelmæssighed betyder mere end det samlede antal timer. Hvis du arbejder med korte daglige lektioner, kan de fleste begyndere trygt håndtere selectors, spacing, typografi og grundlæggende flexbox- eller grid-layout inden for få uger — længe før de sværere områder som særlige specificity-tilfælde eller container queries. Appens 20 guidede projekter er lavet specifikt til at øve dette trin, én rigtig side ad gangen.

Appen kan downloades gratis fra App Store og Google Play. Det første kursus, det første guidede projekt, to bug-hunt-missioner og live-editoren er gratis, med et dagligt antal AI Mentor-sessioner. Pro låser op for alle kurser, alle 20 projekter og 20 missioner, certifikateksamen og ubegrænset brug af AI Mentor — og fjerner reklamer.

Lær CSS i praksis fås til iPhone og iPad i App Store og til Android i Google Play, med grænseflade på 22 sprog og en aldersklassificering på 4+. Den er til komplette begyndere, designere, der vil style deres egne sider, samt karriereskiftere eller studerende, der forbereder sig til front-end-samtaler.

Den øjeblikkelige forhåndsvisning kræver specifikt en forbindelse for at gengive din HTML og CSS, hvilket appen oplyser i stedet for stille at levere en forringet funktion. Lektionstekst og læsemateriale er udviklet til fortsat at fungere med en ustabil forbindelse, hvilket dækker de fleste pendlerture, men en helt offline session med live-forhåndsvisning er ikke noget, denne editor tilbyder.

Lær CSS i praksis kører på iOS via App Store og på Android via Google Play, og appen findes på 22 sprog. Den har aldersklassificeringen 4+. Bestå den afsluttende eksamen, og appen udsteder et gennemførelsescertifikat — dokumentation for det arbejde, du har udført, som kan bruges på et CV sammen med de guidede projekter, du kan gennemgå, men ikke en akkrediteret kvalifikation.