Frontend Academy logo
HTMLNybörjareWebbNivåer A1 → C222 språk

Frontend Academy

Utveckla visuellt imponerande och responsiva webbplatser med Frontend Development Academy. En lärstig från CoddyKit med 41 korta kurser och 163 interaktiva lektioner, med en AI-handledare till hands dygnet runt.

Kurser
41
Lektioner
163
Interaktiva steg
2,186
Gratis att börja
Kurs 1
Kursplan

41 kurser i den här lärvägen

Alla kurser i lärvägen Frontend Academy, i rätt ordning. Den första är gratis.

1

A13 lektionerGratis

Förstå vad frontendutvecklare faktiskt gör, varför detta är en av de mest efterfrågade och kreativa karriärerna inom teknik och hur HTML, CSS och JavaScript samverkar.

2

A14 lektionerPRO

Förstå webbens grunder: hur webbläsare begär sidor, vad DNS gör, hur HTTP fungerar och vad som händer när du skriver in en URL. När du är klar vet du exakt vad en webbläsare gör innan en enda pixel v…

3

A14 lektionerPRO

Lär dig byggstenarna i varje webbsida. Skriv giltiga HTML5-dokument med semantiska element, strukturera innehåll med rubriker och listor, bädda in bilder och länkar och bygg tillgängliga formulär.

4

A14 lektionerPRO

Formge HTML med säkerhet. Lär dig hur kaskad och specificitet fungerar, använd färger och typografi, bemästra boxmodellen och styr layouten med display-egenskaper och positionering.

5

A14 lektionerPRO

Skriv dina första JavaScript-program. Lär dig deklarera variabler, arbeta med primitiva datatyper, definiera funktioner och styra programflödet med villkor och loopar.

6

A14 lektionerPRO

Arbeta som en professionell frontendutvecklare. Bemästra Chrome DevTools för inspektion och felsökning, konfigurera VSCode med användbara tillägg och konfigurera verktyg för kodkvalitet som Prettier…

7

A24 lektionerPRO

Lägg till typer i JavaScript och upptäck buggar innan de når webbläsaren. Lär er TypeScripts typsystem, annotera variabler och funktioner, definiera gränssnitt och kompilera TypeScript till JavaScrip…

8

A24 lektionerPRO

Gör HTML interaktivt med JavaScript. Välj element, lyssna efter händelser, läs och ändra innehåll och skapa eller ta bort element dynamiskt med Document Object Model.

9

A24 lektionerPRO

Bygg layouter som fungerar på alla skärmstorlekar. Lär dig viewport-meta-taggen, använd Flexbox och Grid för följsamma layouter och skriv media queries med ett mobile-first-tänk.

10

A24 lektionerPRO

Fördjupa era HTML-kunskaper. Bygg helt tillgängliga formulär med ARIA-attribut, använd hela utbudet av HTML5-inmatningstyper, dra nytta av inbyggd validering och skriv uppmärkning som kommunicerar st…

11

A24 lektionerPRO

Ta era JavaScript-kunskaper till nästa nivå med modern syntax och kraftfulla inbyggda metoder. Manipulera arrayer med map, filter och reduce, destrukturera objekt, sprid data med spread, använd malls…

12

A24 lektionerPRO

Använd Git effektivt som frontendutvecklare. Lär er de viktigaste kommandona för att spara arbete, förstå förgreningar vid utveckling av funktioner, skicka kod till GitHub och samarbeta genom pull re…

13

A24 lektionerPRO

Ge gränssnitt liv med rörelse i CSS. Använd anpassade egenskaper för lättunderhållna designtokens, lägg till mjuka övergångar vid tillståndsändringar, bygg keyframe-animeringar och respektera använda…

14

B14 lektionerPRO

Gå bortom grunderna och bemästra CSS-layout på riktigt. Utforska justering och radbrytning i Flexbox på djupet, använd CSS Grid-mallområden och auto-fit, kombinera båda teknikerna och använd anpassad…

15

B14 lektionerPRO

Förstå den moderna verktygskedjan för JavaScript. Använd ES-modुलsyntax, hantera paket med npm, starta omedelbara utvecklingsservrar med Vite och lär er byggkoncepten som håller produktionspaketen sm…

16

B14 lektionerPRO

Gå djupare in i TypeScripts typsystem. Skriv återanvändbara generiska funktioner, använd verktygstyper för att omforma gränssnitt, bygg mappade och villkorade typer och begränsa typer säkert vid körn…

17

B14 lektionerPRO

Bygg era första React-applikationer. Förstå JSX-syntax, komponera användargränssnitt med funktionella komponenter, skicka data med props och hantera lokalt tillstånd med useState-hooken för att skapa…

18

B14 lektionerPRO

Synkronisera React-komponenter med externa system. Lär er hur useEffect fungerar, hämta data från API:er vid montering, visa laddnings- och feltillstånd och städa upp sidoeffekter korrekt med AbortCo…

19

B14 lektionerPRO

Bygg era första Vue 3-applikationer med Single-File Components. Lär er Options API, centrala direktiv och hur komponenter kommunicerar mellan förälder och barn med props och emits.

20

B14 lektionerPRO

Bygg gränssnitt som alla kan använda. Förstå WCAG:s konformitetsnivåer, använd semantisk HTML som tillgänglighetsgrund, tillämpa ARIA-roller och -attribut korrekt och säkerställ fullständig tangentbo…

21

B24 lektionerPRO

Bemästra asynkront JavaScript från grunden. Förstå händelseloopen, gå från callback-mönster till Promises och skriv ren async/await-kod med korrekt felhantering.

22

B24 lektionerPRO

Bemästra hela Reacts hooks-API. Dela data utan prop drilling med useContext, hantera komplext tillstånd med useReducer, optimera prestandan med useMemo och useCallback och bryt ut logik i anpassade h…

23

B24 lektionerPRO

Frigör hela kraften i Vue 3 med Composition API. Använd ref och reactive för reaktivt tillstånd, computed och watch för härledda värden och sidoeffekter och bygg återanvändbara composables.

24

B24 lektionerPRO

Hantera tillstånd som omfattar hela applikationen effektivt. Lär er Redux Toolkit för React, det lättviktiga Zustand som ett enklare alternativ, Pinia för Vue och principerna som hjälper er avgöra nä…

25

B24 lektionerPRO

Skriv automatiserade tester för er frontendkod. Konfigurera Jest, testa React-komponenter med Testing Library, testa Vue-komponenter och mocka moduler och API-anrop så att testerna förblir snabba och…

26

B24 lektionerPRO

Skriv CSS som kan skalas. Lär er BEM-namngivningskonventionen för förutsägbara selektorer, avgränsa stilar med CSS Modules, lägg till CSS direkt i JavaScript med styled-components och Emotion och anv…

27

B24 lektionerPRO

Anslut er frontend till backend-API:er. Använd det inbyggda Fetch API:t för alla HTTP-metoder, lägg till Axios för interceptorer och bas-URL:er, hantera HTTP-fel på ett bra sätt och cachelagra server…

28

B24 lektionerPRO

Bygg produktionsklara React-applikationer med Next.js. Förstå både Pages Router och den moderna App Router, skilj mellan Server- och Client Components, välj rätt renderingsstrategi och lägg till serv…

29

B24 lektionerPRO

Bygg fullstack-Vue-applikationer med Nuxt 3. Använd filbaserad routing och auto-imports för att minska boilerplate, hämta serverdata med composables, utöka funktionaliteten med moduler och distribuer…

30

B24 lektionerPRO

Förvandla webbplatser till applika upplevelser. Skriv ett Web App Manifest för installerbarhet, registrera Service Workers för offline-stöd, implementera cachelagringsstrategier och lägg till pushnot…

31

B24 lektionerPRO

Bygg användargränssnitt i realtid. Använd det inbyggda WebSocket API:t, integrera klientbiblioteket Socket.io, ta emot server-sända händelser för enkelriktade dataströmmar och använd gränssnittsmönst…

32

B24 lektionerPRO

Bemästra den snabbt föränderliga verktygskedjan för JavaScript. Utöka Vite med plugins och använd det för SSR, förstå hur esbuild uppnår sin hastighet, hantera arbetsytor med pnpm och snabba upp mono…

33

C14 lektionerPRO

Gör era webbplatser snabba och mät förbättringarna. Förstå Core Web Vitals, kör Lighthouse-granskningar, optimera bilder för webben och minska mängden JavaScript med koddelning och lazy loading.

34

C14 lektionerPRO

Pressa TypeScript till dess gränser. Bygg typer med mallsträngstyper, annotera React-komponenter och hooks med precisa generiska typer, aktivera strikt läge för att eliminera osäker användning av any…

35

C14 lektionerPRO

Skriv React-kod som biblioteksförfattare gör. Bygg sammansatta komponenter med stöd av Context, använd render props och HOCs för att dela tvärgående funktionalitet, rendera utanför trädet med Portals…

36

C14 lektionerPRO

Bemästra avancerade Vue 3-mönster som används i professionella applikationer. Dela logik i ett komponentträd med provide/inject, läs in komponenter asynkront med Suspense, skriv anpassade direktiv oc…

37

C14 lektionerPRO

Utforma frontendapplikationer som kan skalas till stora team. Tillämpa Atomic Design på komponenthierarkier, hantera flera paket med Turborepo-monorepon, implementera micro-frontend Module Federation…

38

C14 lektionerPRO

Bygg och underhåll ett gemensamt komponentbibliotek. Dokumentera komponenter i Storybook, definiera designtokens med Style Dictionary, versionshantera och publicera till npm och integrera systemet i…

39

C14 lektionerPRO

Skydda era användare mot webbsäkerhetshot. Förhindra XSS med utkodning av utdata och Content Security Policy, skydda mot CSRF med SameSite-cookies och tokens, konfigurera CSP-headers och implementera…

40

C14 lektionerPRO

Automatisera leveransen av er frontend. Skriv GitHub Actions-arbetsflöden som lintar, testar och bygger vid varje push, distribuera automatiskt till Vercel, Netlify och Cloudflare Pages, hantera milj…

41

C24 lektionerPRO

Arbeta på senior nivå. Ta er an intervjuer om systemdesign med frontendinriktade ramverk, främja en sund kodgranskningskultur, utveckla juniora utvecklare genom mentorskap och dokumentation och håll…

CoddyKit PRO

Lås upp alla 41 kurser i den här lärvägen och alla andra lärvägar

AI-handledare, certifieringsprov och certifikat. Fungerar på webben, iOS och Android.

Se alla abonnemang
Årsvis$29.90 / årCirka $2.49 i månadenBetala en gångLivstid$69.99 en gångInga förnyelser. PRO för alltid.
Kursöversikt

Bygg hela spektrumet av modern frontend

Frontendutveckling handlar om att omvandla kod till allt som användaren ser och interagerar med i en webbläsare – HTML-struktur, CSS-presentation, JavaScript-beteende samt ramverken och verktygen som knyter ihop allt detta i produktion. I den här utbildningsvägen går du igenom hela stacken: från hur webben levererar en sida till att skriva typsäkra React- och Vue-applikationer, optimera prestanda och driftsätta genom en CI/CD-pipeline.

Det här lär du dig

Du börjar med grunderna i HTML, CSS och JavaScript och blir sedan bekväm med TypeScript, DOM och webbläsar-API:er, responsiv design samt ES6+-mönster, inklusive asynkron programmering och moduler. Därefter går du vidare till React (hooks, avancerade mönster och SSR med Next.js) och Vue 3 (Composition API och SSR med Nuxt 3), tillståndshantering, frontendtestning, CSS-arkitektur och realtidsgränssnitt med WebSockets. Utbildningsvägen avslutas med optimering av webbprestanda, frontend-säkerhet, designsystem samt CI/CD och DevOps för frontend.

Lärandets upplägg

Fyrtioen kurser sträcker sig från nivå A1 till C2. Kurserna på A1- och A2-nivå lägger grunden – hur webben fungerar, semantisk uppmärkning, CSS-animationer, Git och en introduktion till TypeScript. Kurserna på B1- och B2-nivå bygger upp yrkesmässig kompetens: CSS-layout på djupet, JavaScript-moduler och byggverktyg, grunderna i React och Vue 3, API-integration, progressiva webbappar samt serverrendering med både Next.js och Nuxt 3. Kurserna på C1-nivå behandlar frågor för seniora utvecklare: avancerad TypeScript för frontend, avancerade React-mönster, avancerade Vue-mönster, frontendarkitektur, designsystem och komponentbibliotek, frontend-säkerhet samt CI/CD och DevOps för frontend. Utbildningsvägen avslutas på C2 med Senior frontendutveckling, där allt sammanförs i arbetssätt anpassade för produktion.

Så fungerar det

Varje kurs är indelad i korta, praktiska lektioner som du genomför i den inbyggda kodeditorn med feedback i realtid. En AI-handledare finns tillgänglig när du kör fast, och varje koncept förstärks genom övningar som återspeglar verkligt beteende i webbläsare och ramverk i stället för konstlade exempel.

Så lär du dig

  1. 01

    Interaktiva lektioner

    Praktiska kodövningar med feedback i realtid

  2. 02

    AI-handledare

    Få omedelbar hjälp av vår AI när du kör fast

  3. 03

    Inbyggd kodredigerare

    Skriv och kör kod direkt i webbläsaren

  4. 04

    Certifikat

    Få ett certifikat när du slutför kursen

FAQ

Vanliga frågor

Är kursen i Frontend Academy gratis?

Ja. Ni kan börja kursen i Frontend Academy gratis och genomföra de interaktiva lektionerna utan kostnad. Med en valfri PRO-prenumeration får Ni tillgång till avancerade AI-verktyg och ett certifikat som kan delas.

Behöver jag tidigare erfarenhet för att lära mig HTML?

Nej. Kursen börjar med grunderna och går stegvis vidare till mer avancerade ämnen, så Ni kan börja även utan tidigare erfarenhet av HTML.

Hur lär jag mig HTML på CoddyKit?

Ni lär Er genom att göra. Korta interaktiva lektioner kombinerar tydliga förklaringar med praktiska kodövningar som körs i realtid, och en AI-handledare som är tillgänglig dygnet runt ger personlig hjälp när Ni kör fast.

Får jag ett certifikat när jag har slutfört Frontend Academy?

Ja. PRO-användare kan göra ett prov och få ett delbart intyg på att de har slutfört kursen i Frontend Academy, med en verifierbar kod.

Kan jag lära mig HTML i mobilen?

Ja. CoddyKit finns på webben och som inbyggda iOS- och Android-appar, så Ni kan lära Er HTML på valfri enhet och synkronisera Era framsteg mellan dem.

Vad kostar CoddyKit PRO?

Den första kursen i Frontend Academy är gratis. CoddyKit PRO låser upp alla kurser: $5.90 per vecka, $7.90 per månad, $29.90 per år eller $69.99 en gång för livstidsåtkomst utan förnyelser.

Hur lång tid tar det att slutföra Frontend Academy?

Frontend Academy har 41 kurser och 163 lektioner. De flesta lektioner tar cirka 5–10 minuter, så hela lärvägen motsvarar ungefär 19 timmars praktisk övning i egen takt.

Börja med Frontend Academy nu

Anslut Er till tusentals deltagare som lär sig programmering med AI-drivna lektioner.