Frontend Academy logo
HTMLNybegynnerNettNivåer A1 → C222 språk

Frontend Academy

Utvikle visuelt imponerende og responsive nettsteder med Frontend Development Academy. En læringssti fra CoddyKit med 41 korte kurs og 163 interaktive leksjoner, med en AI-veileder tilgjengelig døgnet rundt.

Kurs
41
Leksjoner
163
Interaktive trinn
2,186
Gratis å komme i gang
Kurs 1
Kursinnhold

41 kurs i denne læringsstien

Alle kursene i læringsstien Frontend Academy, i læringsrekkefølge. Det første er gratis.

1

A13 leksjonerGratis

Forstå hva frontend-utviklere faktisk gjør, hvorfor dette er en av de mest etterspurte og kreative teknologikarrierene, og hvordan HTML, CSS og JavaScript fungerer sammen.

2

A14 leksjonerPRO

Forstå grunnlaget for nettet: hvordan nettlesere ber om sider, hva DNS gjør, hvordan HTTP fungerer og hva som skjer når du skriver inn en URL. Etter kurset vet du nøyaktig hva nettleseren gjør før én…

3

A14 leksjonerPRO

Lær byggesteinene i alle nettsider. Skriv gyldige HTML5-dokumenter med semantiske elementer, strukturer innhold med overskrifter og lister, bygg inn bilder og lenker, og lag tilgjengelige skjemaer.

4

A14 leksjonerPRO

Stilsett HTML med trygghet. Lær hvordan kaskade og spesifisitet fungerer, bruk farger og typografi, bli ekspert på boksmodellen og styr layout med display-egenskaper og posisjonering.

5

A14 leksjonerPRO

Skriv dine første JavaScript-programmer. Lær å deklarere variabler, arbeide med primitive datatyper, definere funksjoner og styre programflyten med betingelser og løkker.

6

A14 leksjonerPRO

Arbeid som en profesjonell frontend-utvikler. Bli fortrolig med Chrome DevTools for inspeksjon og feilsøking, konfigurer VSCode med nyttige utvidelser, og sett opp verktøy for kodekvalitet som Pretti…

7

A24 leksjonerPRO

Legg til typer i JavaScript og finn feil før de når nettleseren. Lær om typesystemet i TypeScript, annoter variabler og funksjoner, definer grensesnitt, og kompiler TypeScript til JavaScript med tsco…

8

A24 leksjonerPRO

Gjør HTML interaktiv med JavaScript. Velg elementer, lytt etter hendelser, les og endre innhold, og opprett eller fjern elementer dynamisk med Document Object Model.

9

A24 leksjonerPRO

Lag oppsett som fungerer på alle skjermstørrelser. Lær om viewport-metaelementet, bruk Flexbox og Grid til fleksible oppsett, og skriv mediespørringer med en mobile-first-tilnærming.

10

A24 leksjonerPRO

Fordyp deg i HTML-kunnskapene dine. Lag fullt tilgjengelige skjemaer med ARIA-attributter, bruk hele utvalget av HTML5-inndatatyper, utnytt innebygd validering, og skriv oppmerking som formidler stru…

11

A24 leksjonerPRO

Ta JavaScript-ferdighetene dine til neste nivå med moderne syntaks og kraftige innebygde metoder. Manipuler tabeller med map, filter og reduce, destrukturer objekter, spre data, bruk malstrenglittera…

12

A24 leksjonerPRO

Bruk Git effektivt som frontend-utvikler. Lær de viktigste kommandoene for å lagre arbeid, forstå forgrening for funksjonsutvikling, push til GitHub, og samarbeid gjennom pull requests.

13

A24 leksjonerPRO

Gi grensesnittene liv med bevegelse i CSS. Bruk egendefinerte egenskaper for vedlikeholdbare designtoken, legg til jevne overganger ved tilstandsendringer, bygg keyframe-animasjoner, og ta hensyn til…

14

B14 leksjonerPRO

Gå utover det grunnleggende og bli virkelig god på CSS-layout. Utforsk justering og linjebryting i Flexbox i dybden, utnytt malområder og auto-fit i CSS Grid, kombiner begge teknikkene, og bruk egend…

15

B14 leksjonerPRO

Forstå den moderne verktøykjeden for JavaScript. Bruk ES-modulsyntaks, administrer pakker med npm, start umiddelbare utviklingsservere med Vite, og lær om bundling-konseptene som holder produksjonsbu…

16

B14 leksjonerPRO

Gå dypere inn i typesystemet i TypeScript. Skriv gjenbrukbare generiske funksjoner, bruk utility-typer til å transformere grensesnitt, bygg mapped- og conditional-typer, og snevre inn typer på en try…

17

B14 leksjonerPRO

Lag dine første React-applikasjoner. Forstå JSX-syntaks, sett sammen brukergrensesnitt fra funksjonelle komponenter, send data med props, og administrer lokal tilstand med useState-hooken for å lage…

18

B14 leksjonerPRO

Synkroniser React-komponenter med eksterne systemer. Lær hvordan useEffect fungerer, hent data fra API-er ved montering, vis tilstander for lasting og feil, og rydd riktig opp etter sideeffekter med…

19

B14 leksjonerPRO

Lag dine første Vue 3-applikasjoner med Single-File Components. Lær Options API, sentrale direktiver, og hvordan data kommuniseres mellom overordnede og underordnede komponenter med props og emits.

20

B14 leksjonerPRO

Lag grensesnitt som alle kan bruke. Forstå samsvarsnivåene i WCAG, bruk semantisk HTML som grunnlag for tilgjengelighet, bruk ARIA-roller og -attributter riktig, og sørg for full navigering med tasta…

21

B24 leksjonerPRO

Bli fortrolig med asynkron JavaScript fra grunnen av. Forstå hendelsesløkken, gå fra callback-mønstre til Promises, og skriv ryddig async/await-kode med riktig feilhåndtering.

22

B24 leksjonerPRO

Bli fortrolig med hele Reacts hooks-API. Del data uten prop drilling ved hjelp av useContext, administrer kompleks tilstand med useReducer, optimaliser ytelsen med useMemo og useCallback, og trekk ut…

23

B24 leksjonerPRO

Utnytt hele kraften i Vue 3 med Composition API. Bruk ref og reactive for reaktiv tilstand, computed og watch for avledede verdier og sideeffekter, og bygg gjenbrukbare composables.

24

B24 leksjonerPRO

Administrer tilstand som gjelder hele applikasjonen, på en effektiv måte. Lær Redux Toolkit for React, det lette alternativet Zustand, Pinia for Vue, og prinsippene som hjelper deg med å avgjøre når…

25

B24 leksjonerPRO

Skriv automatiserte tester for frontend-koden din. Sett opp Jest, test React-komponenter med Testing Library, test Vue-komponenter, og mock moduler og API-kall slik at testene forblir raske og isoler…

26

B24 leksjonerPRO

Skriv CSS som skalerer. Lær BEM-navnekonvensjonen for forutsigbare selektorer, avgrens stiler med CSS Modules, legg CSS direkte i JavaScript med styled-components og Emotion, og ta i bruk Tailwind fo…

27

B24 leksjonerPRO

Koble frontend-løsningen din til backend-API-er. Bruk det innebygde Fetch API for alle HTTP-metoder, legg til Axios for interceptors og basis-URL-er, håndter HTTP-feil på en god måte, og hurtigbufre…

28

B24 leksjonerPRO

Bygg React-applikasjoner klare for produksjon med Next.js. Forstå både Pages Router og den moderne App Router, skill mellom Server Components og Client Components, velg riktig gjengivelsesstrategi, o…

29

B24 leksjonerPRO

Bygg fullstack-Vue-applikasjoner med Nuxt 3. Bruk filbasert ruting og automatiske importer for å eliminere standardkode, hent serverdata med composables, utvid funksjonaliteten med moduler, og distri…

30

B24 leksjonerPRO

Gjør nettsteder om til app-lignende opplevelser. Skriv et Web App Manifest for installerbarhet, registrer Service Workers for støtte uten nett, implementer hurtigbufferstrategier, og legg til push-va…

31

B24 leksjonerPRO

Bygg brukergrensesnitt i sanntid. Bruk det innebygde WebSocket API-et, integrer klientbiblioteket Socket.io, motta server-sendte hendelser for enveis datastrømmer, og bruk grensesnittmønstre for leve…

32

B24 leksjonerPRO

Bli fortrolig med den raskt utviklende verktøykjeden for JavaScript. Utvid Vite med plugins og bruk det til SSR, forstå hvordan esbuild oppnår hastigheten sin, administrer arbeidsområder med pnpm, og…

33

C14 leksjonerPRO

Gjør nettstedene dine raske, og mål forbedringen. Forstå Core Web Vitals, kjør Lighthouse-analyser, optimaliser bilder for nettet, og reduser størrelsen på JavaScript-lasten med kodedeling og lazy lo…

34

C14 leksjonerPRO

Press TypeScript til det ytterste. Bygg typer med malstrenglitteral-typer, annoter React-komponenter og hooks med presise generiske typer, aktiver strict-modus for å eliminere usikker bruk av any, og…

35

C14 leksjonerPRO

Skriv React-kode slik bibliotekforfattere gjør. Bygg sammensatte komponenter basert på Context, bruk render props og HOCs til å dele tverrgående funksjonalitet, gjengi utenfor treet med Portals, og h…

36

C14 leksjonerPRO

Bli fortrolig med avanserte Vue 3-mønstre som brukes i profesjonelle applikasjoner. Del logikk på tvers av et komponenttre med provide/inject, last inn komponenter asynkront med Suspense, skriv egend…

37

C14 leksjonerPRO

Utform frontend-applikasjoner som skalerer til store team. Bruk Atomic Design på komponenthierarkier, administrer flere pakker med Turborepo-monorepoer, implementer Module Federation for mikrofronter…

38

C14 leksjonerPRO

Bygg og vedlikehold et delt komponentbibliotek. Dokumenter komponenter i Storybook, definer designtoken med Style Dictionary, versjoner og publiser til npm, og integrer systemet i applikasjonene som…

39

C14 leksjonerPRO

Beskytt brukerne dine mot sikkerhetstrusler på nettet. Forebygg XSS med output-koding og Content Security Policy, beskytt mot CSRF med SameSite-informasjonskapsler og token, konfigurer CSP-headere, o…

40

C14 leksjonerPRO

Automatiser leveringen av frontend-løsningen din. Skriv GitHub Actions-arbeidsflyter som lint-sjekker, tester og bygger ved hver push, distribuer automatisk til Vercel, Netlify og Cloudflare Pages, a…

41

C24 leksjonerPRO

Arbeid på seniornivå. Møt intervjuer om systemdesign med frontend-spesifikke rammeverk, frem en sunn kultur for kodegjennomgang, utvikle juniorutviklere gjennom veiledning og dokumentasjon, og hold d…

CoddyKit PRO

Lås opp alle 41 kursene i denne læringsstien og alle andre læringsstier

AI-veileder, sertifiseringseksamen og sertifikat. Fungerer på web, iOS og Android.

Se alle abonnementene
Årlig$29.90 / årOmtrent $2.49 per månedBetal én gangLivstid$69.99 én gangIngen fornyelser. PRO for alltid.
Kursoversikt

Bygg hele spekteret av moderne frontend

Frontendutvikling handler om å gjøre kode om til alt brukeren ser og samhandler med i en nettleser – HTML-struktur, CSS-presentasjon, JavaScript-atferd samt rammeverkene og verktøyene som binder dette sammen i produksjonsskala. Dette læringsløpet dekker hele stakken: fra hvordan nettet leverer en side, til å skrive typesikre React- og Vue-applikasjoner, optimalisere ytelsen og distribuere gjennom en CI/CD-pipeline.

Dette lærer De

De begynner med grunnleggende HTML, CSS og JavaScript, og blir deretter fortrolig med TypeScript, DOM-en og nettleser-API-er, responsivt design og ES6+-mønstre, inkludert asynkron programmering og moduler. Derfra går De videre til React (hooks, avanserte mønstre, Next.js SSR) og Vue 3 (Composition API, Nuxt 3 SSR), tilstandshåndtering, frontend-testing, CSS-arkitektur og sanntidsgrensesnitt med WebSockets. Læringsløpet avsluttes med optimalisering av nettleserytelse, frontend-sikkerhet, designsystemer samt frontend-CI/CD og DevOps.

Læringsløpet

41 kurs dekker nivåene A1 til C2. Kursene på A1- og A2-nivå bygger grunnlaget – hvordan nettet fungerer, semantisk markup, CSS-animasjoner, Git og en introduksjon til TypeScript. Kursene på B1- og B2-nivå bygger yrkeskompetanse innen CSS Layout Mastery, JavaScript-moduler og byggeverktøy, grunnleggende React og Vue 3, API-integrasjon, Progressive Web Apps og server-side rendering med både Next.js og Nuxt 3. Kursene på C1-nivå tar for seg temaer for erfarne utviklere: Advanced TypeScript for Frontend, React Advanced Patterns, Vue Advanced Patterns, frontend-arkitektur, designsystemer og komponentbiblioteker, frontend-sikkerhet samt frontend-CI/CD og DevOps. Læringsløpet avsluttes på C2 med Senior Frontend Engineering, som samler alt i praksis på produksjonsnivå.

Slik fungerer det

Hvert kurs er delt inn i korte, praktiske leksjoner som De fullfører i den innebygde koderedigereren, med tilbakemelding i sanntid. En AI-veileder er tilgjengelig når De står fast, og hvert konsept forsterkes gjennom øvelser som gjenspeiler hvordan nettlesere og rammeverk faktisk fungerer, i stedet for konstruerte eksempler.

Slik lærer du

  1. 01

    Interaktive leksjoner

    Praktiske kodeøvelser med tilbakemelding i sanntid

  2. 02

    AI-veileder

    Få øyeblikkelig hjelp fra AI-en vår når du står fast

  3. 03

    Innebygd kodeeditor

    Skriv og kjør kode direkte i nettleseren

  4. 04

    Sertifikat

    Få et sertifikat når du fullfører kurset

FAQ

Ofte stilte spørsmål

Er kurset i Frontend Academy gratis?

Ja. Du kan starte på kurset i Frontend Academy gratis og fullføre de interaktive leksjonene uten kostnad. Et valgfritt PRO-abonnement låser opp avanserte AI-verktøy og et delbart sertifikat.

Trenger jeg tidligere erfaring for å lære HTML?

Nei. Kurset begynner med det grunnleggende og går gradvis videre til mer avanserte emner, slik at du kan starte selv uten tidligere erfaring med HTML.

Hvordan lærer jeg HTML på CoddyKit?

Du lærer gjennom praksis. Korte, interaktive leksjoner kombinerer en tydelig forklaring med en praktisk kodeøvelse som kjører i sanntid, og en AI-veileder som er tilgjengelig døgnet rundt, gir deg personlig hjelp når du står fast.

Får jeg et sertifikat når jeg fullfører Frontend Academy?

Ja. PRO-brukere kan ta en eksamen og få et delbart fullføringssertifikat med en verifiserbar kode for kurset i Frontend Academy.

Kan jeg lære HTML på telefonen?

Ja. CoddyKit er tilgjengelig på nettet og som native iOS- og Android-apper, slik at du kan lære HTML på alle enheter, mens fremdriften synkroniseres mellom dem.

Hvor mye koster CoddyKit PRO?

Det første kurset i Frontend Academy er gratis. CoddyKit PRO gir tilgang til alle kurs: $5.90 per uke, $7.90 per måned, $29.90 per år eller $69.99 én gang for tilgang på livstid uten fornyelser.

Hvor lang tid tar det å fullføre Frontend Academy?

Frontend Academy består av 41 kurs og 163 leksjoner. De fleste leksjonene tar omtrent 5–10 minutter, så hele læringsstien tar rundt 19 timer med praktisk øving i eget tempo.

Start på Frontend Academy nå

Bli med tusenvis av elever som lærer programmering med AI-drevne leksjoner.