Lär dig CSS i praktiken — CSS-kodning med en live HTML- och CSS-editor i mobilen

Tre saker orsakar de flesta layoutproblemen för nybörjare. Boxmodellen: padding och borders läggs som standard till ett elements angivna bredd, så en box blir bredare än siffran du skrev in. Specificitet: en mer specifik regel någon annanstans åsidosätter tyst din regel. Och fel layoutverktyg: att försöka skapa en tvådimensionell sida med flexbox, som är byggt för en enda rad. Lär dig CSS i praktiken lägger upp kurserna så att du förstår de här tre delarna i den ordningen, i stället för att upptäcka dem genom att prova dig fram.

Lite grann, och du kan lära dig det parallellt med lektionerna i stället för att läsa klart det först. CSS beskriver hur HTML-element presenteras, så det räcker som grund att veta att en sida består av element — rubriker, stycken, listor och bilder — för att komma igång. Appens live-editor visar både HTML och CSS samtidigt, så kopplingen mellan dem blir synlig redan från den första lektionen.

Flexbox placerar objekt längs en linje — en rad med knappar eller ett navigeringsfält — och fördelar det återstående utrymmet längs den ena axeln. Grid definierar rader och kolumner samtidigt, så att du placerar objekt i ett verkligt tvådimensionellt rutnät i stället för att flytta dem med margins. En layout för hela sidan görs normalt med grid, medan en enda rad med kontroller inuti den normalt görs med flexbox. Kursen lär ut båda innan du själv behöver välja.

CSS löser motstridiga regler genom att först titta på specificitet och sedan på källordning. En ID-selektor vinner över en klass-selektor, och en klass vinner över en vanlig elementselektor, oavsett vilken som står längre ner i styleshe för?

Ja, det är fortfarande värt att lära sig CSS direkt. Utility-ramverk som Tailwind är ett lager byggt på CSS-koncept, inte en ersättning för dem — när en utility-klass inte gör det du förväntar dig är det förståelsen av boxmodellen, specificitet och de underliggande layoutsystemen som hjälper dig vidare. Det är också en av de snabbaste färdigheterna att se resultat av, eftersom varje ändring syns direkt på sidan.

Regelbundenhet är viktigare än det totala antalet timmar. Om du arbetar med korta dagliga lektioner kan de flesta nybörjare tryggt hantera selektorer, avstånd, typografi och grundläggande layout med flexbox eller grid inom några veckor — långt innan de svårare delarna, som specialfall med specificitet eller container queries. Appens 20 guidade projekt finns där för att öva just på det stadiet, en riktig sida i taget.

Appen är gratis att ladda ner från App Store och Google Play. Den första kursen, det första guidade projektet, två bug-jaktuppdrag och live-editorn är gratis, med en daglig kvot för AI Mentor. Pro låser upp alla kurser, alla 20 projekt och 20 uppdrag, certifikatsprovet och obegränsad användning av AI Mentor, samt tar bort annonser.

Lär dig CSS i praktiken finns för iPhone och iPad på App Store och för Android på Google Play, med gränssnitt på 22 språk och en åldersgräns på 4+. Den passar helt nybörjare, designers som vill utforma sina egna sidor samt personer som byter karriär eller studerar och förbereder sig för front-end-intervjuer.

Direktförhandsvisningen kräver specifikt en anslutning för att återge din HTML och CSS, vilket appen tydligt anger i stället för att tyst försämra funktionen. Lektionstext och läsmaterial är utformade för att fortsätta fungera med en instabil anslutning, vilket täcker de flesta pendlingssituationer, men en helt offlinebaserad liveförhandsvisning är inte något den här editorn erbjuder.

Lär dig CSS i praktiken körs på iOS via App Store och på Android via Google Play, och appen finns på 22 språk. Den har betyget 4+. När du klarar slutprovet utfärdar appen ett genomförandecertifikat — ett bevis på arbetet du har gjort, användbart i ett CV tillsammans med de guidade projekt du kan berätta om, men inte en ackrediterad kvalifikation.