Lær frontend-utvikling
Lær frontend-utvikling — Frontendutvikling fra HTML til React, med forhåndsvisning i sanntid
Lær frontend-utvikling er en gratis iOS- og Android-app for nybegynnere, designere og karriereskiftere som vil bli webutviklere. HTML, CSS og JavaScript vises side om side i en redigerer i sanntid, og siden nedenfor oppdateres mens du skriver. 41 kurs og 163 korte leksjoner tar deg fra den første taggen via responsivt layout og TypeScript til React og Vue, med 20 veiledede prosjekter, feilsøkingsoppdrag og en AI-mentor for feilen du ikke finner.
- Pris
- Gratis, Pro-oppgradering
- Plattformer
- iOS og Android
- Språk
- 22
- Aldersgrense
- 4+
- Krever
- iOS 15.1 eller nyere
Endre én linje og se siden endre seg.
Redigereren viser HTML-, CSS- og JavaScript-paneler ved siden av hverandre, med en forhåndsvisning i sanntid under. Dermed lærer du markup, styling og funksjonalitet som én side, i stedet for som tre separate fag.
Hva det er
Lær frontend-utvikling er en gratis iOS- og Android-app som lærer deg frontendutvikling – den delen av et nettsted som folk ser og bruker – ved hjelp av en HTML-, CSS- og JavaScript-redigerer i sanntid på telefonen. Den tilbyr 41 kurs og 163 leksjoner på nivåer fra nybegynner til senior, og dekker grunnleggende webutvikling, responsivt layout, JavaScript og DOM, TypeScript, React, Vue, testing, tilgjengelighet og ytelse. I tillegg får du veiledede prosjekter, feilsøkingsoppdrag, intervjuspørsmål og en AI-mentor.
Inne i appen
Slik ser den ut
Kurset
Dette lærer du i frontend-kurset
41 kurs og 163 leksjoner hentet fra appens egen kursliste – fra den første HTML-taggen til frontend-arkitektur og utvikling på seniornivå.
Nettet og de tre grunnpilarene
Velkommen til frontend-utvikling, slik fungerer nettet, grunnleggende HTML, grunnleggende CSS og det viktigste innen JavaScript.
Layout og responsivt design
Grunnlaget for responsivt design, HTML-skjemaer og semantisk oppmerking, avansert CSS-layout samt CSS-variabler, overganger og animasjoner.
JavaScript i nettleseren
DOM og nettleser-API-er, arrayer, objekter og ES6+, asynkron programmering samt JavaScript-moduler og byggeverktøy.
Arbeidsflyt og verktøy
Utviklerverktøy og arbeidsflyt, Git og samarbeid samt moderne frontend-verktøy.
TypeScript
Introduksjon til TypeScript, fordypning i typer og grensesnitt samt avansert TypeScript for frontend.
React og Vue
Grunnleggende React, useEffect og datainnhenting, avanserte hooks og mønstre, deretter grunnleggende Vue 3, Composition API og avanserte Vue-mønstre.
Data, gjengivelse og sanntid
Tilstandsbehandling, API-integrasjon og REST, gjengivelse på serversiden med Next.js og Nuxt 3, progressive webapper samt WebSockets og frontend i sanntid.
Kvalitet og arkitektur
Tilgjengelighet, frontend-testing, optimalisering av nettytelse, frontend-sikkerhet, CSS-arkitektur, designsystemer, frontend-CI/CD og frontend-utvikling på seniornivå.
Slik fungerer det
Slik lærer du med appen
Rekkefølgen i appen følger rekkefølgen i faget: bygg en side først, få den deretter til å fungere, og lær så verktøyene som gjør det mulig å skalere den.
Begynn med det første gratis kurset
Welcome to Frontend Development åpner veien videre, og redigereren i sanntid er gratis fra start. Hver leksjon består av noen minutters forklaring, etterfulgt av noe du kan endre og kjøre.
Rediger et panel og les forhåndsvisningen
Endre HTML, CSS eller JavaScript, så følger forhåndsvisningen under etter. Nye prosjekter kan starte fra en HTML-, React-, Vue-, Angular-, Node- eller TypeScript-mal.
Bygg prosjekter og løs virkelige feil
Tjue veiledede prosjekter lærer deg trinn for trinn å bygge en oppskriftsside, et kontaktskjema, et kortnett, en navbar og en datatabell, mens 15 feilsøkingsoppdrag gir deg ødelagte sider du skal reparere.
Hva den inneholder
Dette følger med appen
41
Kurs, fra nybegynner til senior
163 leksjoner på nivåer fra A1 til C2, fra hvordan nettet fungerer og grunnleggende HTML til TypeScript, React, Vue 3, tilstandsbehandling, gjengivelse på serversiden med Next.js og Nuxt 3, samt progressive webapper.
Direkte
Redigerer med umiddelbar forhåndsvisning
HTML-, CSS- og JavaScript-paneler med en forhåndsvisning under, slik at en endring vises umiddelbart. Start nye prosjekter fra flere rammeverksmaler.
15
Feilsøkingsoppdrag
Oppdrag basert på virkelige frontendproblemer: et layout som bryter sammen ved 375 piksler, et bilde som gjør siden treg, et skjema ingen kan nå med tastaturet, en minnelekkasje i en komponent og en test som består lokalt, men mislykkes i CI.
20
Veiledede prosjekter
Små prosjekter som forklares trinn for trinn, for eksempel en oppskriftsside, et kontaktskjema, et kortnett, en navbar og en datatabell.
AI
AI-mentor og lekeplass
Spør om en feil, en leksjon eller din egen kode, eller beskriv en side i AI-lekeplassen og se koden bli skrevet. Gratisbrukere får tre AI-spørsmål om dagen.
50
Intervjuspørsmål med svar
Femti intervjuspørsmål for frontend- og webutviklere med svar, i tillegg til et jukseark med 83 oppføringer om syntaks og mønstre og et bibliotek med korte eksempler du kan åpne og redigere.
Bakgrunn
Hva lærer en frontendutvikler egentlig, og i hvilken rekkefølge?
En frontendutvikler bygger det som kjører i nettleseren: strukturen på en side, hvordan den ser ut på alle skjermstørrelser, og hvordan den reagerer når noen klikker, skriver eller ruller. Den fornuftige rekkefølgen er først struktur (HTML), deretter presentasjon (CSS), så funksjonalitet (JavaScript), og først etter det verktøyene som organiserer større prosjekter: TypeScript, et rammeverk som React eller Vue, testing og et byggesteg. Å hoppe rett til et rammeverk før du kan de tre grunnleggende delene, er den vanligste grunnen til at nybegynnere står fast, fordi et rammeverk i hovedsak skjuler vanlig JavaScript og DOM bak sin egen syntaks.
Semantisk HTMLmening før utseende
Når du velger en overskrift, liste, skjemamerking eller knapp ut fra hva innholdet er, i stedet for hvordan det skal se ut, gir du skjermlesere, søkemotorer og tastaturer noe de kan bruke. Det er også den rimeligste tilgjengelighetsforbedringen på enhver side.
Responsivt layoutén side, alle skjermer
Flexbox, grid og media queries lar ett og samme layout omorganisere seg fra en smal telefon til en bred skjerm. Ved å teste tidlig på en liten bredde, for eksempel 375 piksler, oppdager du layoutfeil som er smertefulle å rette senere.
DOMsiden som et levende objekt
Nettleseren gjør HTML om til et tre av objekter som JavaScript kan lese og endre. Alle rammeverk er i bunn og grunn en praktisk måte å oppdatere dette treet på, så når du forstår det, blir det mye enklere å forstå React og Vue.
Core Web Vitals og ytelsehastighet folk kan merke
En side som sent laster inn et stort, uoptimalisert bilde, eller som flytter på seg mens den lastes inn, føles treg selv når koden er riktig. Ytelse er en ferdighet som først blir synlig når du jobber med virkelige sider og virkelige bilder.
Passer
Hvem den er for – og ikke for
Passer godt for deg hvis du
- Vil bli webutvikler og begynner helt fra grunnen
- Er designer og vil bygge sidene du designer
- Kan litt HTML og CSS og vil lære JavaScript, TypeScript, React eller Vue i tillegg
- Forbereder deg til ditt første frontend-intervju og vil ha spørsmål med svar
- Foretrekker å se en side endre seg mens du skriver, fremfor å lese lange forklaringer
Ikke riktig verktøy for deg hvis du
- Trenger å bygge og publisere et stort nettsted med mange filer, noe som fortsatt krever en bærbar datamaskin og en fullverdig editor
- Forventer at alt er gratis: det første kurset, det første prosjektet, to feilsøkingsoppdrag og editoren er gratis, mens Pro låser opp resten
- Vil ha et backend- eller databasekurs, fordi denne stien handler om det som kjører i nettleseren
- Jobber allerede som senior frontend-utvikler og vil ha et oppslagsverk i stedet for leksjoner
Spørsmål
Ofte stilte spørsmål
Hva er frontend-utvikling?
Frontend-utvikling handler om å bygge den delen av et nettsted eller en webapp som kjører i nettleseren: strukturen med HTML, utseendet med CSS og funksjonaliteten med JavaScript, samt rammeverkene og verktøyene som bygger videre på dem. Lær frontend-utvikling lærer deg denne teknologistakken i den rekkefølgen, med en direkte forhåndsvisning slik at du ser hver endring med én gang.
Kan jeg lære frontend-utvikling på telefonen?
Du kan lære konseptene og lage de første sidene godt på telefonen, fordi HTML, CSS og JavaScript er lite nok til å redigere i korte økter, og forhåndsvisningen viser resultatet umiddelbart. Appen viser de tre panelene og en direkte forhåndsvisning på skjermen. En bærbar datamaskin blir mer praktisk når du vedlikeholder et større prosjekt med mange filer, men du trenger den ikke for å komme i gang.
Hvem passer det for, og hvor bør en helt nybegynner starte?
Det passer for nybegynnere, designere som vil bygge det de designer, utviklere som kan litt HTML og CSS, og personer som bytter karriere og forbereder seg til sin første frontend-jobb. Start med hvordan nettet fungerer og ren HTML, fortsett deretter med CSS og så JavaScript. Lær frontend-utvikling følger denne rekkefølgen og begynner med gratiskurset Velkommen til frontend-utvikling.
Lærer appen bort React og Vue?
Ja. Etter HTML, CSS, JavaScript og TypeScript har appen React-kurs om det grunnleggende, useEffect og datainnhenting samt avanserte hooks og mønstre, og Vue 3-kurs om det grunnleggende, Composition API og avanserte mønstre. Den dekker også tilstandsbehandling og gjengivelse på serversiden med Next.js og Nuxt 3.
Må jeg lære TypeScript?
Det er ikke nødvendig for å bygge den første siden, men de fleste profesjonelle React- og Vue-kodebaser bruker det, så det er verdt å lære etter det grunnleggende i JavaScript. Appen introduserer TypeScript med et kurs i det grunnleggende, et fordypningskurs i typer og grensesnitt og et avansert kurs for frontend-mønstre.
Hvordan fungerer feilsøkingsoppdragene?
Hvert av de 15 feilsøkingsoppdragene gir deg en ødelagt side eller komponent som gjenspeiler et reelt frontend-problem, for eksempel en layout som bryter sammen ved 375 piksler, et skjema som ikke kan brukes med tastaturet, en minnelekkasje i en komponent eller en test som bare mislykkes i CI – og du løser problemet. To oppdrag er gratis.
Kan det hjelpe meg med å forberede meg til et frontend-utviklerintervju?
Det kan hjelpe deg med kunnskapsdelen. Lær frontend-utvikling har 50 intervjuspørsmål med svar, et jukseark med 83 oppføringer om syntaks og mønstre, samt kurs i testing, ytelse, tilgjengelighet og arkitektur – temaer intervjuer ofte går over til etter det grunnleggende. Det erstatter ikke en portefølje med dine egne prosjekter.
Hvor lang tid tar det å lære frontend-utvikling?
En nybegynner som øver litt hver dag, kan vanligvis bygge enkle responsive sider i løpet av noen uker, mens det tar måneder å bli trygg på JavaScript og et rammeverk. Appen deler læringsstien opp i leksjoner på noen få minutter, med streaks og påminnelser, slik at fremgangen kommer gjennom jevnlige, korte økter i stedet for én lang økt.
Er Lær frontend-utvikling gratis?
Den kan lastes ned gratis fra App Store og Google Play. Det første kurset, det første veiledede prosjektet, to feilsøkingsoppdrag og kodeeditoren er gratis, med tre spørsmål til AI-mentoren per dag, og gratisversjonen viser annonser. Pro låser opp alle kurs, prosjekter og oppdrag, sertifiseringseksamenen og ubegrenset AI, og fjerner annonser.
Hvilke plattformer og språk støtter den, og er appen i App Store den samme?
Lær frontend-utvikling fungerer på iOS via App Store og på Android via Google Play, på 22 språk og med aldersgrensen 4+. Oppføringen i App Store heter Learn Frontend Development, mens oppføringen på Google Play heter Lær frontend-utvikling, men det er den samme appen. Når du består den avsluttende eksamenen, får du et fullføringssertifikat.
Kom i gang
Bygg din første webside i dag
Gratis å komme i gang på iOS og Android, på 22 språk.
Mer fra CoddyKit
Tilgjengelig på iOS.