Frontend-roadmap

Hva: Grunnstrukturen i enhver nettside.

Hvorfor: Alt annet bygger på et solid HTML-fundament.

Bør kunne: Skrive gyldig, velstrukturert markup uten et rammeverk.

Hva: Bruk av elementer som beskriver innhold, ikke bare utseende (header, nav, main, article).

Hvorfor: Forbedrer tilgjengelighet, SEO og lesbarhet i koden.

Bør kunne: Velge riktig element ut fra betydning, ikke default til div.

Hva: Styling, layout og visuell presentasjon.

Hvorfor: Skiller innhold fra utseende.

Bør kunne: Forstå boksmodell, arv og spesifisitet.

Hva: Endimensjonalt layout-system for rader og kolonner.

Hvorfor: Løser de fleste vanlige layoututfordringer enkelt.

Bør kunne: Bygge navigasjonsbarer og kortrekker uten float-hacks.

Hva: Todimensjonalt layout-system for rader og kolonner samtidig.

Hvorfor: Best egnet for helsideoppsett og responsive grid av kort.

Bør kunne: Bygge responsive grid uten mediaquery-spaghetti.

Hva: Layouter som tilpasser seg skjermstørrelse.

Hvorfor: Trafikk kommer fra mobil, nettbrett og desktop om hverandre.

Bør kunne: Designe mobil-først med tydelige breddepunkter.

Hva: Programmeringsspråket som gjør sider interaktive.

Hvorfor: Kjernespråket for all frontend-logikk.

Bør kunne: Skrive funksjoner, håndtere events og manipulere DOM uten rammeverk.

Hva: Document Object Model — nettleserens representasjon av siden som et tre.

Hvorfor: Alt JavaScript-basert UI-arbeid går via DOM-en.

Bør kunne: Selektere, endre og lytte på DOM-elementer direkte.

Hva: Nettleser-API for å hente data over nettverket.

Hvorfor: Grunnlaget for all kommunikasjon med API-er fra klienten.

Bør kunne: Hente og håndtere JSON-data, inkludert feilhåndtering.

Hva: Syntaks for å skrive asynkron kode som ser synkron ut.

Hvorfor: Gjør asynkron logikk lesbar og enklere å feilsøke.

Bør kunne: Håndtere flere asynkrone kall med try/catch.

Hva: Statisk typing på toppen av JavaScript.

Hvorfor: Fanger feil tidlig og dokumenterer kode gjennom typer.

Bør kunne: Bruke interfaces, generics og strict mode komfortabelt.

Hva: Komponentbasert bibliotek for å bygge brukergrensesnitt.

Hvorfor: Den mest brukte tilnærmingen til moderne UI-utvikling.

Bør kunne: Bygge komponenter med state og hooks fra bunnen av.

Hva: React-rammeverk med routing, rendering-strategier og API-ruter innebygd.

Hvorfor: Gir en produksjonsklar struktur for React-applikasjoner.

Bør kunne: Forstå App Router, Server- og Client Components.

Hva: Utility-first CSS-rammeverk.

Hvorfor: Raskere iterasjon og mer konsistent styling enn håndskrevet CSS i store prosjekter.

Bør kunne: Bygge komplette layouter uten å forlate markup-filen.

Hva: Kopierbare, tilgjengelige komponenter bygget på Tailwind.

Hvorfor: Gir et solid utgangspunkt uten å låse deg til et stort komponentbibliotek.

Bør kunne: Tilpasse komponentene til eget designsystem.

Hva: Automatiserte tester for komponenter og logikk.

Hvorfor: Gir trygghet til å endre kode uten å introdusere regresjoner.

Bør kunne: Skrive enhets- og komponenttester for kritiske deler.

Hva: Design og kode som fungerer for alle brukere, inkludert skjermleserbrukere.

Hvorfor: En stor andel brukere er avhengig av tilgjengelige grensesnitt.

Bør kunne: Teste med tastatur og kjenne til grunnleggende ARIA-attributter.

Hva: Optimalisering av lastetid, bundlestørrelse og rendering.

Hvorfor: Trege sider mister brukere og skårer dårligere på SEO.

Bør kunne: Måle og forbedre Core Web Vitals på egne prosjekter.