Lär dig frontend-utveckling
Lär dig frontend-utveckling — Frontendutveckling från HTML till React, med liveförhandsvisning
Lär dig frontend-utveckling är en kostnadsfri iOS- och Android-app för nybörjare, designers och karriärbytare som vill bli webbutvecklare. HTML, CSS och JavaScript visas sida vid sida i en live-editor, och sidan nedanför uppdateras medan du skriver. 41 kurser och 163 korta lektioner tar dig från den första taggen via responsiv layout och TypeScript till React och Vue, med 20 guidade projekt, felsökningsuppdrag och en AI-mentor för buggen du inte hittar.
- Pris
- Gratis, uppgradering till Pro
- Plattformar
- iOS och Android
- Språk
- 22
- Åldersgräns
- 4+
- Kräver
- iOS 15.1 eller senare
Ändra en rad och se sidan förändras.
Editorn visar HTML-, CSS- och JavaScript-paneler bredvid varandra med en liveförhandsvisning under, så att markupen, utseendet och beteendet lärs in som en enda sida i stället för som tre separata ämnen.
Vad det är
Lär dig frontend-utveckling är en kostnadsfri iOS- och Android-app som lär ut frontendutveckling – den del av en webbplats som människor ser och använder – med en live-editor för HTML, CSS och JavaScript i mobilen. Den erbjuder 41 kurser och 163 lektioner på nivåer från nybörjare till senior, som täcker webbens grunder, responsiv layout, JavaScript och DOM, TypeScript, React, Vue, testning, tillgänglighet och prestanda, samt guidade projekt, felsökningsuppdrag, intervjufrågor och en AI-mentor.
I appen
Så här ser det ut
Kursen
Det här omfattar frontendkursen
41 kurser och 163 lektioner hämtade från appens egen kurslista: från den första HTML-taggen till frontendarkitektur och utveckling på seniornivå.
Webben och de tre grunderna
Välkommen till frontendutveckling, Så fungerar webben, Grunderna i HTML, Grunderna i CSS och Grunderna i JavaScript.
Layout och responsiv design
Grunderna i responsiv design, HTML-formulär och semantisk uppmärkning, avancerad CSS-layout samt CSS-variabler, övergångar och animationer.
JavaScript i webbläsaren
DOM och webbläsar-API:er, arrayer, objekt och ES6+, asynkron programmering samt JavaScript-moduler och byggverktyg.
Arbetsflöde och verktyg
Utvecklarverktyg och arbetsflöde, Git och samarbetsflöden samt moderna frontendverktyg.
TypeScript
Introduktion till TypeScript, fördjupning i typer och gränssnitt samt avancerad TypeScript för frontend.
React och Vue
Grunderna i React, useEffect och datahämtning, avancerade hooks och mönster, följt av grunderna i Vue 3, Composition API och avancerade Vue-mönster.
Data, rendering och realtid
Tillståndshantering, API-integration och REST, rendering på serversidan med Next.js och Nuxt 3, progressiva webbappar samt WebSockets och frontend i realtid.
Kvalitet och arkitektur
Tillgänglighet, frontendtestning, optimering av webbprestanda, frontend säkerhet, CSS-arkitektur, designsystem, frontend CI/CD och frontendutveckling på seniornivå.
Så fungerar det
Så lär du dig med appen
Appens ordning följer hantverkets ordning: bygg först en sida, få den sedan att fungera och lär dig därefter verktygen som gör att den kan skalas upp.
Börja med den kostnadsfria första kursen
Welcome to Frontend Development öppnar vägen, och live-editorn är kostnadsfri från början. Varje lektion består av några minuters förklaring följt av något du kan ändra och köra.
Redigera en panel och läs förhandsvisningen
Ändra HTML, CSS eller JavaScript och se förhandsvisningen nedanför följa efter. Nya projekt kan startas från en mall för HTML, React, Vue, Angular, Node eller TypeScript.
Bygg projekt och lös riktiga buggar
Tjugo guidade projekt lär dig steg för steg att bygga en receptsida, ett kontaktformulär, ett kortgitter, en navbar och en datatabell, medan 15 felsökningsuppdrag ger dig trasiga sidor att reparera.
Det här ingår
Det här ingår i appen
41
Kurser, från nybörjar- till seniornivå
163 lektioner på nivåerna A1 till C2, från hur webben fungerar och HTML-grunderna till TypeScript, React, Vue 3, tillståndshantering, rendering på serversidan med Next.js och Nuxt 3 samt progressiva webbappar.
Live
Editor med direktförhandsvisning
HTML-, CSS- och JavaScript-paneler med en förhandsvisning under, så att en ändring visas direkt. Starta nya projekt från flera ramverksmallar.
15
Felsökningsuppdrag
Uppdrag baserade på riktiga frontendproblem: en layout som går sönder vid 375 pixlar, en bild som gör sidan långsam, ett formulär som ingen kan nå med tangentbordet, en minnesläcka i en komponent och ett test som fungerar lokalt men misslyckas i CI.
20
Guidade projekt
Mindre projekt som förklaras steg för steg, till exempel en receptsida, ett kontaktformulär, ett kortgitter, en navbar och en datatabell.
AI
AI-mentor och playground
Fråga om ett fel, en lektion eller din egen kod, eller beskriv en sida i AI-playgrounden och se hur koden skrivs. Gratisanvändare får tre AI-frågor per dag.
50
Intervjufrågor med svar
Femtio intervjufrågor med svar för frontend- och webbutvecklare, plus en fusklapp med 83 poster om syntax och mönster samt ett bibliotek med korta exempel som du kan öppna och redigera.
Bakgrund
Vad lär sig en frontendutvecklare egentligen, och i vilken ordning?
En frontendutvecklare bygger det som körs i webbläsaren: sidans struktur, hur den ser ut på alla skärmstorlekar och hur den reagerar när någon klickar, skriver eller rullar. Den logiska ordningen är först struktur (HTML), sedan utseende (CSS), därefter beteende (JavaScript) och först efter det verktygen som organiserar större projekt: TypeScript, ett ramverk som React eller Vue, testning och ett byggsteg. Den vanligaste orsaken till att nybörjare kör fast är att de hoppar till ett ramverk innan de behärskar de tre grunderna, eftersom ett ramverk till stor del döljer vanlig JavaScript och DOM bakom sin egen syntax.
Semantisk HTMLbetydelse före utseende
När du väljer en rubrik, lista, formuläretikett eller knapp utifrån vad innehållet är, snarare än hur det ska se ut, får skärmläsare, sökmotorer och tangentbord något att arbeta med. Det är också den enklaste tillgänglighetsvinsten på vilken sida som helst.
Responsiv layouten sida, alla skärmar
Flexbox, grid och media queries gör att en och samma layout kan anpassa sig från en smal mobil till en bred bildskärm. Genom att testa tidigt vid en liten bredd, som 375 pixlar, upptäcker du layoutbuggar som annars är jobbiga att åtgärda senare.
DOMsidan som ett levande objekt
Webbläsaren omvandlar HTML till ett träd av objekt som JavaScript kan läsa och ändra. Alla ramverk är i grunden ett smidigt sätt att uppdatera det trädet, så en förståelse för det gör React och Vue mycket enklare att förstå.
Core Web Vitals och prestandaen hastighet människor kan känna
En sida som sent laddar in en stor, ooptimerad bild eller hoppar medan den laddas känns långsam även när koden är korrekt. Prestanda är en färdighet som blir tydlig först när riktiga sidor och riktiga bilder är inblandade.
Passar
Vem den är till för – och vem den inte är till för
Passar bra om du
- Vill bli webbutvecklare och börjar från noll
- Är designer och vill bygga sidorna du designar
- Kan lite HTML och CSS och vill lära dig JavaScript, TypeScript, React eller Vue som nästa steg
- Förbereder dig inför din första frontendintervju och vill ha frågor med svar
- Föredrar att se en sida ändras medan du skriver framför att läsa långa förklaringar
Inte rätt verktyg om du
- Behöver bygga och distribuera en stor webbplats med flera filer, vilket fortfarande kräver en laptop och en komplett editor
- Förväntar dig att allt ska vara gratis: den första kursen, det första projektet, två felsökningsuppdrag och editorn är gratis, och Pro låser upp resten
- Vill ha en backend- eller databaskurs, eftersom den här vägen handlar om det som körs i webbläsaren
- Arbetar redan som senior frontendutvecklare och vill ha ett referensverktyg snarare än lektioner
Frågor
Vanliga frågor
Vad är frontendutveckling?
Frontendutveckling handlar om att bygga den del av en webbplats eller webbapp som körs i webbläsaren: strukturen med HTML, utseendet med CSS och beteendet med JavaScript, samt ramverken och verktygen som bygger vidare på dem. Lär dig frontend-utveckling lär ut den tekniken i den ordningen, med en liveförhandsvisning så att varje ändring syns direkt.
Kan jag lära mig frontendutveckling på mobilen?
Du kan lära dig grunderna och skapa de första sidorna på mobilen, eftersom HTML, CSS och JavaScript är tillräckligt små för att redigeras under korta sessioner och förhandsvisningen visar resultatet direkt. Appen visar de tre panelerna och en liveförhandsvisning på skärmen. En laptop blir bekvämare när du underhåller ett större projekt med många filer, men behövs inte för att komma igång.
Vem passar det för, och var bör en total nybörjare börja?
Det passar totala nybörjare, designers som vill bygga det de designar, utvecklare som kan lite HTML och CSS samt personer som byter karriär och förbereder sig inför sitt första frontendjobb. Börja med hur webben fungerar och vanlig HTML, fortsätt sedan med CSS och därefter JavaScript. Lär dig frontend-utveckling följer den ordningen och börjar med den kostnadsfria kursen Välkommen till frontendutveckling.
Lär appen ut React och Vue?
Ja. Efter HTML, CSS, JavaScript och TypeScript innehåller appen React-kurser om grunderna, useEffect och datahämtning samt avancerade hooks och mönster. Det finns också Vue 3-kurser om grunderna, Composition API och avancerade mönster. Appen tar även upp tillståndshantering och rendering på serversidan med Next.js och Nuxt 3.
Måste jag lära mig TypeScript?
Det krävs inte för att bygga din första sida, men de flesta professionella React- och Vue-kodbaser använder det, så det är värt att lära sig efter grunderna i JavaScript. Appen introducerar TypeScript med en första kurs om typer, en fördjupningskurs om typer och gränssnitt samt en avancerad kurs om frontendmönster.
Hur fungerar felsökningsuppdragen?
Vart och ett av de 15 felsökningsuppdragen ger dig en trasig sida eller komponent som speglar ett verkligt frontendproblem, till exempel en layout som går sönder vid 375 pixlar, ett formulär som inte kan användas med tangentbordet, en minnesläcka i en komponent eller ett test som bara misslyckas i CI. Sedan åtgärdar du problemet. Två uppdrag är gratis.
Kan appen hjälpa mig att förbereda mig inför en intervju för frontendutvecklare?
Den kan hjälpa dig med kunskapsdelen. Lär dig frontend-utveckling har 50 intervjufrågor med svar, en fusklapp med 83 poster om syntax och mönster samt kurser om testning, prestanda, tillgänglighet och arkitektur – ämnen som intervjuer ofta går vidare till efter grunderna. Den ersätter inte en portfölj med dina egna projekt.
Hur lång tid tar det att lära sig frontendutveckling?
En nybörjare som övar lite varje dag kan vanligtvis bygga enkla responsiva sidor inom några veckor, medan det tar månader att bli säker på JavaScript och ett ramverk. Appen delar upp vägen i lektioner på några minuter, med sviter och påminnelser, så framstegen kommer från regelbundna korta sessioner i stället för ett enda långt pass.
Är Lär dig frontend-utveckling gratis?
Det är gratis att ladda ner från App Store och Google Play. Den första kursen, det första vägledda projektet, två felsökningsuppdrag och kodeditorn är gratis, med tre frågor till AI-mentorn per dag, och gratisversionen visar annonser. Pro låser upp alla kurser, alla projekt och uppdrag, certifieringsprovet och obegränsad AI-användning samt tar bort annonserna.
Vilka plattformar och språk stöds, och är appen i App Store samma app?
Lär dig frontend-utveckling finns för iOS via App Store och för Android via Google Play, på 22 språk och med åldersgränsen 4+. Appen i App Store heter Learn Frontend Development och appen på Google Play heter Lär dig frontend-utveckling, men det är samma app. När du klarar slutprovet får du ett kursintyg.
Kom igång
Bygg din första webbsida idag
Gratis att komma igång på iOS och Android, på 22 språk.
Mer från CoddyKit
Tillgänglig på iOS.