Frontend-ontwikkeling leren
Frontend-ontwikkeling leren — Frontendontwikkeling van HTML tot React, met live preview
Frontend-ontwikkeling leren is een gratis iOS- en Android-app voor beginners, designers en carrièreswitchers die webdeveloper willen worden. HTML, CSS en JavaScript staan naast elkaar in een live editor en de pagina eronder wordt bijgewerkt terwijl je typt. 41 cursussen en 163 korte lessen brengen je van de eerste tag via responsive layouts en TypeScript naar React en Vue, met 20 begeleide projecten, debugmissies en een AI-mentor voor de bug die je maar niet kunt vinden.
- Prijs
- Gratis, upgrade naar Pro
- Platforms
- iOS en Android
- Talen
- 22
- Leeftijdsclassificatie
- 4+
- Vereist
- iOS 15.1 of hoger
Pas één regel aan en kijk hoe de pagina verandert.
De editor toont HTML-, CSS- en JavaScript-panelen naast elkaar, met daaronder een live preview. Zo leer je de markup, styling en werking als één pagina, in plaats van als drie losse onderwerpen.
Wat het is
Frontend-ontwikkeling leren is een gratis iOS- en Android-app die frontendontwikkeling leert — het deel van een website dat mensen zien en aanraken — met een live HTML-, CSS- en JavaScript-editor op je telefoon. De app biedt 41 cursussen en 163 lessen, ingedeeld van beginners- tot seniorniveau. Je leert de basis van het web, responsive layouts, JavaScript en de DOM, TypeScript, React, Vue, testen, toegankelijkheid en performance, aangevuld met begeleide projecten, debugmissies, interviewvragen en een AI-mentor.
In de app
Hoe het eruitziet
De cursus
Wat de frontendcursus behandelt
41 cursussen en 163 lessen, afkomstig uit de eigen cursuslijst van de app: van je eerste HTML-tag tot frontendarchitectuur en engineering op seniorniveau.
Het web en de drie basisprincipes
Welkom bij Frontend Development, Hoe het web werkt, HTML Fundamentals, CSS Fundamentals en JavaScript Essentials.
Layout en responsive design
Responsive Design Foundations, HTML Forms and Semantic Markup, CSS Layout Mastery en CSS Variables, Transitions and Animations.
JavaScript in de browser
The DOM and Browser APIs, Arrays, Objects and ES6+, Async Programming en JavaScript Modules and Build Tools.
Workflow en tooling
Developer Tools and Workflow, Git and Collaboration Workflow en Modern Frontend Tooling.
TypeScript
TypeScript Introduction, Types and Interfaces Deep Dive en Advanced TypeScript for Frontend.
React en Vue
React Fundamentals, useEffect and Data Fetching, Advanced Hooks and Patterns, gevolgd door Vue 3 Fundamentals, the Composition API en Vue Advanced Patterns.
Data, rendering en real-time
State Management, API Integration and REST, Server-Side Rendering with Next.js and Nuxt 3, Progressive Web Apps en WebSockets and Real-time Frontend.
Kwaliteit en architectuur
Accessibility, Frontend Testing, Web Performance Optimization, Frontend Security, CSS Architecture, Design Systems, Frontend CI/CD en Senior Frontend Engineering.
Hoe het werkt
Zo leer je ermee
De volgorde in de app volgt de volgorde van het vak: bouw eerst een pagina, geef die daarna gedrag en leer vervolgens de tools waarmee je alles kunt opschalen.
Begin met de gratis eerste cursus
Welcome to Frontend Development opent de leerroute en de live editor is vanaf het begin gratis. Elke les bestaat uit een paar minuten uitleg, gevolgd door iets dat je kunt aanpassen en uitvoeren.
Pas een paneel aan en bekijk de preview
Pas de HTML, CSS of JavaScript aan en de preview eronder verandert mee. Nieuwe projecten kunnen starten vanuit een HTML-, React-, Vue-, Angular-, Node- of TypeScript-template.
Bouw projecten en los echte bugs op
Twintig begeleide projecten laten je stap voor stap een receptenpagina, contactformulier, card grid, navbar en datatabel bouwen, terwijl 15 debugmissies je kapotte pagina’s geven om te herstellen.
Wat erin zit
Wat je bij de app krijgt
41
Cursussen, van beginner tot senior
163 lessen, ingedeeld van A1 tot C2, van hoe het web werkt en de basis van HTML tot TypeScript, React, Vue 3, state management, server-side rendering met Next.js en Nuxt 3 en progressive web apps.
Live
Editor met directe preview
HTML-, CSS- en JavaScript-panelen met daaronder een preview, zodat een wijziging meteen zichtbaar wordt. Start nieuwe projecten vanuit verschillende frameworktemplates.
15
Debugmissies
Missies rond echte frontendproblemen: een layout die breekt bij 375 pixels, een afbeelding die de pagina vertraagt, een formulier dat niemand met het toetsenbord kan bereiken, een memory leak in een component en een test die lokaal slaagt maar in CI mislukt.
20
Begeleide projecten
Kleine projecten die stap voor stap worden uitgelegd, zoals een receptenpagina, contactformulier, card grid, navbar en datatabel.
AI
AI-mentor en playground
Stel een vraag over een fout, een les of je eigen code, of beschrijf een pagina in de AI-playground en kijk hoe de code wordt geschreven. Gratis gebruikers krijgen drie AI-vragen per dag.
50
Interviewvragen met antwoorden
Vijftig interviewvragen voor frontend- en webdevelopers met antwoorden, plus een cheatsheet met 83 items over syntax en patronen en een bibliotheek met korte voorbeelden die je kunt openen en aanpassen.
Achtergrond
Wat leert een frontenddeveloper eigenlijk, en in welke volgorde?
Een frontenddeveloper bouwt wat in de browser draait: de structuur van een pagina, hoe die eruitziet op elk schermformaat en hoe die reageert wanneer iemand klikt, typt of scrolt. De logische volgorde is eerst structuur (HTML), daarna presentatie (CSS), vervolgens gedrag (JavaScript) en pas daarna de tools die grotere projecten organiseren: TypeScript, een framework zoals React of Vue, testen en een buildstap. Als je naar een framework springt voordat je de drie basisprincipes beheerst, loop je als beginner het vaakst vast, omdat een framework gewone JavaScript en de DOM grotendeels verbergt achter een eigen syntax.
Semantische HTMLbetekenis vóór uiterlijk
Door een heading, lijst, formulierveldlabel of knop te kiezen op basis van wat de inhoud is, in plaats van hoe die eruit moet zien, geef je screenreaders, zoekmachines en toetsenborden iets om mee te werken. Het is bovendien de goedkoopste toegankelijkheidswinst op elke pagina.
Responsive layoutéén pagina, elk scherm
Met Flexbox, grid en media queries kan één layout zichzelf aanpassen van een smalle telefoon tot een brede monitor. Door vroeg te testen op een kleine breedte, zoals 375 pixels, ontdek je layoutbugs die later lastig te herstellen zijn.
De DOMde pagina als live object
De browser zet HTML om in een boom van objecten die JavaScript kan lezen en aanpassen. Elk framework is uiteindelijk een handige manier om die boom bij te werken. Als je de DOM begrijpt, kun je dus veel makkelijker met React en Vue werken.
Core Web Vitals en performancesnelheid die mensen voelen
Een pagina die laat een grote, niet-geoptimaliseerde afbeelding laadt of tijdens het laden verspringt, voelt traag aan, zelfs als de code klopt. Performance is een vaardigheid die pas echt zichtbaar wordt zodra je met echte pagina’s en echte afbeeldingen werkt.
Past bij jou
Voor wie het is — en voor wie niet
Past goed bij je als je
- Je wilt webdeveloper worden en begint vanaf nul
- Je bent designer en wilt de pagina's bouwen die je ontwerpt
- Je kent wat HTML en CSS en wilt daar JavaScript, TypeScript, React of Vue aan toevoegen
- Je bereidt je voor op je eerste frontendsollicitatie en wilt vragen met antwoorden
- Je ziet liever een pagina veranderen terwijl je typt dan dat je lange uitleg leest
Niet het juiste hulpmiddel als je
- Je moet een grote site met meerdere bestanden bouwen en publiceren; daarvoor heb je nog steeds een laptop en een volledige editor nodig
- Je verwacht dat alles gratis is: de eerste cursus, het eerste project, twee debuggingmissies en de editor zijn gratis, en met Pro krijg je toegang tot de rest
- Je wilt een backend- of databasecursus, omdat dit leerpad gaat over wat er in de browser draait
- Je werkt al als senior frontend engineer en wilt een naslagwerk in plaats van lessen
Vragen
Veelgestelde vragen
Wat is frontend development?
Frontend development is het bouwen van het deel van een website of webapp dat in de browser draait: de structuur met HTML, het uiterlijk met CSS en het gedrag met JavaScript, plus de frameworks en tools die daarop voortbouwen. Frontend-ontwikkeling leren leert je die stack in die volgorde, met een live preview zodat je elke wijziging meteen ziet.
Kan ik frontend development op mijn telefoon leren?
De concepten en de eerste pagina's kun je prima op een telefoon leren, omdat HTML, CSS en JavaScript klein genoeg zijn om in korte sessies te bewerken en de preview het resultaat meteen toont. De app zet de drie panelen en een live preview op het scherm. Een laptop wordt handiger zodra je een groter project met veel bestanden beheert, maar om te beginnen heb je die niet nodig.
Voor wie is het bedoeld en waar moet een complete beginner beginnen?
Het is geschikt voor complete beginners, designers die willen bouwen wat ze ontwerpen, developers die al wat HTML en CSS kennen en carrièreswitchers die zich voorbereiden op hun eerste frontendbaan. Begin met hoe het web werkt en met gewone HTML, daarna CSS en vervolgens JavaScript. Frontend-ontwikkeling leren volgt die volgorde en begint met de gratis cursus Welcome to Frontend Development.
Leert de app React en Vue?
Ja. Na HTML, CSS, JavaScript en TypeScript heeft de app React-cursussen over de basis, useEffect en data ophalen, geavanceerde hooks en patronen, plus Vue 3-cursussen over de basis, de Composition API en geavanceerde patronen. Ook state management en server-side rendering met Next.js en Nuxt 3 komen aan bod.
Moet ik TypeScript leren?
Je hebt het niet nodig om je eerste pagina te bouwen, maar de meeste professionele React- en Vue-codebases gebruiken het. Daarom is het de moeite waard om TypeScript te leren nadat je de basis van JavaScript kent. De app introduceert TypeScript met een cursus over de eerste types, een verdiepende cursus over types en interfaces en een geavanceerde cursus voor frontendpatronen.
Hoe werken de debuggingmissies?
Bij elk van de 15 debuggingmissies krijg je een kapotte pagina of component die een echt frontendprobleem nabootst, zoals een layout die breekt bij 375 pixels, een formulier dat niet met het toetsenbord kan worden gebruikt, een memory leak in een component of een test die alleen in CI mislukt. Jij lost het probleem op. Twee missies zijn gratis.
Kan het me helpen bij de voorbereiding op een sollicitatiegesprek voor frontenddeveloper?
Het kan helpen met het kennisgedeelte. Frontend-ontwikkeling leren heeft 50 sollicitatievragen met antwoorden, een cheatsheet met 83 items over syntax en patronen en cursussen over testing, performance, accessibility en architectuur — onderwerpen waar sollicitatiegesprekken na de basis vaak op doorgaan. Het vervangt niet het opbouwen van een portfolio met je eigen projecten.
Hoe lang duurt het om frontend development te leren?
Een beginner die elke dag een beetje oefent, kan meestal binnen een paar weken eenvoudige responsive pagina's bouwen, terwijl zelfverzekerd werken met JavaScript en een framework maanden duurt. De app deelt het leerpad op in lessen van een paar minuten, met streaks en herinneringen, zodat je vooruitgang boekt met regelmatig korte sessies in plaats van één lange sessie.
Is Frontend-ontwikkeling leren gratis?
De app is gratis te downloaden in de App Store en op Google Play. De eerste cursus, het eerste begeleide project, twee debuggingmissies en de code-editor zijn gratis, met drie vragen per dag aan de AI-mentor. De gratis versie toont advertenties. Pro geeft toegang tot elke cursus, alle projecten en missies, het certificaatexamen en onbeperkte AI, en verwijdert de advertenties.
Welke platforms en talen ondersteunt de app, en is de App Store-app hetzelfde?
Frontend-ontwikkeling leren werkt op iOS via de App Store en op Android via Google Play, in 22 talen, met een leeftijdsclassificatie van 4+. De vermelding in de App Store heet Learn Frontend Development en de vermelding op Google Play Frontend-ontwikkeling leren, maar het is dezelfde app. Als je slaagt voor het eindexamen, krijg je een certificaat van voltooiing.
Aan de slag
Bouw vandaag nog je eerste webpagina
Gratis te beginnen op iOS en Android, in 22 talen.
Meer van CoddyKit
Beschikbaar op iOS.