Frontend Academy logo
HTMLBegynderWebNiveauer A1 → C222 sprog

Frontend Academy

Udvikl visuelt imponerende og responsive websites med Frontend Development Academy. Et læringsforløb på CoddyKit med 41 korte kurser og 163 interaktive lektioner – med en AI-vejleder ved din side døgnet rundt.

Kurser
41
Lektioner
163
Interaktive trin
2,186
Gratis at komme i gang
Kursus 1
Kursusindhold

41 kurser på denne sti

Alle kurser på Frontend Academy-stien i læringsrækkefølge. Det første kursus er gratis.

1

A13 lektionerGratis

Forstå, hvad frontend-udviklere faktisk laver, hvorfor det er en af de mest efterspurgte og kreative karrierer inden for teknologi, og hvordan HTML, CSS og JavaScript fungerer sammen.

2

A14 lektionerPRO

Forstå webbet i grundtræk: hvordan browsere anmoder om sider, hvad DNS gør, hvordan HTTP fungerer, og hvad der sker, når De skriver en URL. Når De er færdig, ved De præcis, hvad en browser gør, før d…

3

A14 lektionerPRO

Lær byggestenene i enhver webside. Skriv gyldige HTML5-dokumenter med semantiske elementer, strukturér indhold med overskrifter og lister, indlejr billeder og links, og byg tilgængelige formularer.

4

A14 lektionerPRO

Stil Deres HTML med sikkerhed. Lær, hvordan cascade og specificitet fungerer, anvend farver og typografi, behersk boksmodellen, og styr layoutet med display-egenskaber og positionering.

5

A14 lektionerPRO

Skriv Deres første JavaScript-programmer. Lær at deklarere variabler, arbejde med primitive datatyper, definere funktioner og styre programflow med betingelser og løkker.

6

A14 lektionerPRO

Arbejd som en professionel frontendudvikler. Bliv fortrolig med Chrome DevTools til inspektion og fejlfinding, konfigurér VSCode med nyttige udvidelser, og opsæt værktøjer til kodekvalitet som Pretti…

7

A24 lektionerPRO

Tilføj typer til JavaScript, og find fejl, før de når browseren. Lær TypeScripts typesystem, annotér variable og funktioner, definér interfaces, og kompilér TypeScript til JavaScript med tsconfig.

8

A24 lektionerPRO

Gør Deres HTML interaktiv med JavaScript. Vælg elementer, lyt efter hændelser, læs og ændr indhold, og opret eller fjern elementer dynamisk ved hjælp af Document Object Model.

9

A24 lektionerPRO

Skab layout, der fungerer på alle skærmstørrelser. Lær viewport-meta-tagget, brug Flexbox og Grid til fleksible layout, og skriv media queries med en mobile-first-tilgang.

10

A24 lektionerPRO

Styrk Deres HTML-viden. Opbyg fuldt tilgængelige formularer med ARIA-attributter, brug hele udvalget af HTML5-inputtyper, udnyt indbygget validering, og skriv markup, der formidler strukturen til all…

11

A24 lektionerPRO

Løft Deres JavaScript-kundskaber med moderne syntaks og effektive indbyggede metoder. Manipulér arrays med map, filter og reduce, destrukturér objekter, spred data med spread, brug template literals,…

12

A24 lektionerPRO

Brug Git effektivt som frontendudvikler. Lær de vigtigste kommandoer til at gemme arbejde, forstå branching til udvikling af funktioner, push til GitHub, og samarbejd via pull requests.

13

A24 lektionerPRO

Giv interfaces liv med bevægelse i CSS. Brug brugerdefinerede egenskaber til vedligeholdelige designtokens, tilføj glidende transitions ved tilstandsændringer, opbyg keyframe-animationer, og respekte…

14

B14 lektionerPRO

Gå videre end det grundlæggende, og mestér CSS-layout. Udforsk justering og ombrydning i Flexbox i dybden, udnyt CSS Grid-templateområder og auto-fit, kombinér begge teknikker, og brug brugerdefinere…

15

B14 lektionerPRO

Forstå den moderne JavaScript-toolchain. Brug ES-modulsyntaks, administrér pakker med npm, start øjeblikkelige udviklingsservere med Vite, og lær de bundlingskoncepter, der holder produktionsbundter…

16

B14 lektionerPRO

Gå i dybden med TypeScripts typesystem. Skriv genanvendelige generiske funktioner, brug utility types til at transformere interfaces, opbyg mapped og conditional types, og indsnævr typer sikkert ved…

17

B14 lektionerPRO

Opbyg Deres første React-applikationer. Forstå JSX-syntaks, sammensæt brugergrænseflader af funktionelle komponenter, send data med props, og håndtér lokal tilstand med useState-hooket for at skabe i…

18

B14 lektionerPRO

Synkronisér React-komponenter med eksterne systemer. Lær, hvordan useEffect fungerer, hent data fra API'er ved montering, vis indlæsnings- og fejltilstande, og ryd korrekt op efter sideeffekter med A…

19

B14 lektionerPRO

Opbyg Deres første Vue 3-applikationer med Single-File Components. Lær Options API, de centrale direktiver, og hvordan De kommunikerer mellem over- og underkomponenter med props og emits.

20

B14 lektionerPRO

Opbyg interfaces, som alle kan bruge. Forstå WCAG's overensstemmelsesniveauer, brug semantisk HTML som fundament for tilgængelighed, anvend ARIA-roller og -attributter korrekt, og sørg for fuld navig…

21

B24 lektionerPRO

Mestér asynkron JavaScript fra bunden. Forstå event loop, gå fra callback-mønstre til Promises, og skriv ren async/await-kode med korrekt fejlhåndtering.

22

B24 lektionerPRO

Mestér hele Reacts hooks-API. Del data uden prop drilling med useContext, håndtér kompleks tilstand med useReducer, optimér ydeevnen med useMemo og useCallback, og udtræk logik i brugerdefinerede hoo…

23

B24 lektionerPRO

Få fuldt udbytte af Vue 3 med Composition API. Brug ref og reactive til reaktiv tilstand, computed og watch til afledte værdier og sideeffekter, og opbyg genanvendelige composables.

24

B24 lektionerPRO

Håndtér tilstand på tværs af hele applikationen effektivt. Lær Redux Toolkit til React, det letvægtige Zustand som et enklere alternativ, Pinia til Vue og principperne, der hjælper Dem med at afgøre,…

25

B24 lektionerPRO

Skriv automatiserede tests til Deres frontendkode. Opsæt Jest, test React-komponenter med Testing Library, test Vue-komponenter, og mock moduler og API-kald, så testene forbliver hurtige og isolerede.

26

B24 lektionerPRO

Skriv CSS, der kan skaleres. Lær BEM-navngivningskonventionen til forudsigelige selektorer, afgræns styles med CSS Modules, tilføj CSS direkte i JavaScript med styled-components og Emotion, og tag Ta…

27

B24 lektionerPRO

Forbind Deres frontend med backend-API'er. Brug den indbyggede Fetch API til alle HTTP-metoder, tilføj Axios til interceptors og base-URL'er, håndtér HTTP-fejl på en robust måde, og cache serverdata…

28

B24 lektionerPRO

Opbyg produktionsklare React-applikationer med Next.js. Forstå både Pages Router og den moderne App Router, skeln mellem Server- og Client Components, vælg den rette renderingsstrategi, og tilføj ser…

29

B24 lektionerPRO

Opbyg full-stack Vue-applikationer med Nuxt 3. Brug filbaseret routing og auto-imports for at eliminere boilerplate, hent serverdata med composables, udvid funktionaliteten med moduler, og deploy som…

30

B24 lektionerPRO

Forvandl websites til app-lignende oplevelser. Skriv et Web App Manifest, så appen kan installeres, registrér Service Workers til offline-understøttelse, implementér cachingstrategier, og tilføj push…

31

B24 lektionerPRO

Opbyg brugergrænseflader i realtid. Brug den indbyggede WebSocket API, integrér Socket.io-klientbiblioteket, modtag server-sent events til envejsdatastrømme, og anvend UI-mønstre til live-data som op…

32

B24 lektionerPRO

Mestér den hurtigt udviklende JavaScript-toolchain. Udvid Vite med plugins, og brug det til SSR, forstå hvordan esbuild opnår sin hastighed, administrér workspaces med pnpm, og accelerér monorepo-bui…

33

C14 lektionerPRO

Gør Deres websites hurtige, og mål forbedringen. Forstå Core Web Vitals, kør Lighthouse-audits, optimér billeder til web, og reducér JavaScript-payloadens størrelse med code splitting og lazy loading.

34

C14 lektionerPRO

Pres TypeScript til grænsen. Opbyg typer med template literal types, annotér React-komponenter og hooks med præcise generics, aktivér strict mode for at eliminere usikker brug af any, og udforsk deco…

35

C14 lektionerPRO

Skriv React-kode, som biblioteksforfattere gør. Opbyg compound components baseret på Context, brug render props og HOCs til at dele tværgående funktionalitet, render uden for træet med Portals, og hå…

36

C14 lektionerPRO

Mestér avancerede Vue 3-mønstre, som bruges i professionelle applikationer. Del logik på tværs af et komponenttræ med provide/inject, indlæs komponenter asynkront med Suspense, skriv brugerdefinerede…

37

C14 lektionerPRO

Design frontendapplikationer, der kan skaleres til store teams. Anvend Atomic Design på komponenthierarkier, administrér flere pakker med Turborepo-monorepoer, implementér micro-frontend Module Feder…

38

C14 lektionerPRO

Opbyg og vedligehold et delt komponentbibliotek. Dokumentér komponenter i Storybook, definér designtokens med Style Dictionary, versionsstyr og publicér til npm, og integrér systemet i de applikation…

39

C14 lektionerPRO

Beskyt Deres brugere mod websikkerhedstrusler. Forebyg XSS med outputencoding og Content Security Policy, beskyt mod CSRF med SameSite-cookies og tokens, konfigurér CSP-headere, og implementér OAuth…

40

C14 lektionerPRO

Automatisér leveringen af Deres frontend. Skriv GitHub Actions-workflows, der linter, tester og builder ved hvert push, deploy automatisk til Vercel, Netlify og Cloudflare Pages, administrér miljøvar…

41

C24 lektionerPRO

Arbejd på seniorniveau. Gå til systemdesigninterviews med frontend-specifikke frameworks, frem en sund kultur for code review, udvikl junioringeniører gennem mentoring og dokumentation, og hold Dem a…

CoddyKit PRO

Lås op for alle 41 kurser på denne sti og alle kurser på alle andre stier

AI-vejleder, certificeringseksamen og certifikat. Fungerer på web, iOS og Android.

Se alle abonnementer
Årligt$29.90 / årCa. $2.49 om månedenBetal én gangLivstid$69.99 én gangIngen fornyelser. PRO for altid.
Kursusoversigt

Få hele bredden af moderne frontend med

Frontendudvikling handler om at omsætte kode til alt det, en bruger ser og interagerer med i en browser — HTML-struktur, CSS-præsentation, JavaScript-adfærd samt de rammeværker og værktøjer, der binder det hele sammen i produktionsskala. Dette forløb dækker hele stakken: fra hvordan internettet leverer en side, til at skrive typesikre React- og Vue-applikationer, optimere ydeevnen og implementere via et CI/CD-forløb.

Det lærer du

Du begynder med grundlæggende HTML, CSS og JavaScript og opbygger derefter fortrolighed med TypeScript, DOM'en og browser-API'er, responsivt design samt ES6+-mønstre, herunder asynkron programmering og moduler. Derefter går du videre til React (hooks, avancerede mønstre, Next.js SSR) og Vue 3 (Composition API, Nuxt 3 SSR), tilstandshåndtering, frontendtest, CSS-arkitektur og realtidsgrænseflader med WebSockets. Forløbet afsluttes med optimering af webydeevne, frontend-sikkerhed, designsystemer samt frontend-CI/CD og DevOps.

Læringsforløbet

41 kurser dækker niveauerne A1 til C2. Kurserne på A1- og A2-niveau etablerer grundlaget — hvordan internettet fungerer, semantisk markup, CSS-animationer, Git og en introduktion til TypeScript. Kurserne på B1- og B2-niveau opbygger professionelle færdigheder: CSS Layout Mastery, JavaScript-moduler og byggeværktøjer, grundlæggende React og Vue 3, API-integration, progressive webapps og serverside-rendering med både Next.js og Nuxt 3. Kurserne på C1-niveau tager fat på emner for erfarne udviklere: Advanced TypeScript for Frontend, React Advanced Patterns, Vue Advanced Patterns, frontend-arkitektur, designsystemer og komponentbiblioteker, frontend-sikkerhed samt frontend-CI/CD og DevOps. Forløbet slutter på C2 med Senior Frontend Engineering, som samler det hele i praksis på produktionsniveau.

Sådan fungerer det

Hvert kursus er opdelt i korte, praktiske lektioner, som du gennemfører i den indbyggede kodeeditor med feedback i realtid. Du kan få hjælp af en AI-underviser, når du går i stå, og hvert begreb styrkes gennem øvelser, der afspejler browseres og rammeværkers virkelige adfærd i stedet for konstruerede eksempler.

Sådan lærer du

  1. 01

    Interaktive lektioner

    Praktiske kodeøvelser med feedback i realtid

  2. 02

    AI-underviser

    Få øjeblikkelig hjælp fra vores AI, når du sidder fast

  3. 03

    Indbygget editor

    Skriv og kør kode direkte i din browser

  4. 04

    Certifikat

    Få et certifikat, når du gennemfører kurset

Ofte stillede spørgsmål

Ofte stillede spørgsmål

Er Frontend Academy-kurset gratis?

Ja. Du kan begynde på Frontend Academy-kurset gratis og gennemføre de interaktive lektioner uden omkostninger. Et valgfrit PRO-abonnement giver adgang til avancerede AI-værktøjer og et certifikat, der kan deles.

Skal jeg have erfaring på forhånd for at lære HTML?

Nej. Kurset begynder med det grundlæggende og bevæger sig gradvist videre til mere avancerede emner, så du kan starte uden tidligere erfaring med HTML.

Hvordan lærer jeg HTML på CoddyKit?

Du lærer ved at øve dig. Korte interaktive lektioner kombinerer en tydelig forklaring med en praktisk kodeøvelse, der kører i realtid, og en AI-vejleder, der er tilgængelig døgnet rundt, hjælper dig personligt, når du sidder fast.

Får jeg et certifikat, når jeg gennemfører Frontend Academy?

Ja. PRO-brugere kan tage en eksamen og få et certifikat for gennemførelse af Frontend Academy-kurset, som kan deles og indeholder en verificerbar kode.

Kan jeg lære HTML på min telefon?

Ja. CoddyKit er tilgængeligt på nettet og som indbyggede iOS- og Android-apps, så du kan lære HTML på enhver enhed, og dine fremskridt synkroniseres på tværs af dem.

Hvad koster CoddyKit PRO?

Det første kursus på Frontend Academy-stien er gratis. CoddyKit PRO giver adgang til alle kurser: $5.90 om ugen, $7.90 om måneden, $29.90 om året eller $69.99 én gang for livstidsadgang uden fornyelser.

Hvor lang tid tager det at gennemføre Frontend Academy?

Frontend Academy har 41 kurser og 163 lektioner. De fleste lektioner tager cirka 5–10 minutter, så hele stien kræver omkring 19 timers praktisk øvelse i dit eget tempo.

Start på Frontend Academy nu

Slut dig til tusindvis af kursister, der mestrer programmering med AI-drevne lektioner.