Web-Dev-For-Beginners/translations/nl

Webontwikkeling voor beginners - Een curriculum

Leer de basisprincipes van webontwikkeling met onze 12-weekse cursus van Microsoft Cloud Advocates. Elke van de 24 lessen duikt in JavaScript, CSS en HTML via praktische projecten zoals terrariums, browserextensies en ruimtegames. Doe mee met quizzen, discussies en praktische opdrachten. Verbeter je vaardigheden en optimaliseer je kennisbehoud met onze effectieve projectgerichte didactiek. Begin vandaag nog met je codeerreis!

Sluit je aan bij de Azure AI Foundry Discord Community

Volg deze stappen om aan de slag te gaan met deze bronnen:

1. Fork de Repository: Klik op
2. Clone de Repository: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Word lid van The Azure AI Foundry Discord en ontmoet experts en medeontwikkelaars

🌐 Meertalige ondersteuning

Ondersteund via GitHub Action (Geautomatiseerd & altijd up-to-date)

Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Khmer | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese

Liever lokaal clonen?

Deze repository bevat meer dan 50 taalvertalingen, wat de downloadgrootte aanzienlijk verhoogt. Om te clonen zonder vertalingen, gebruik je sparse checkout:

Bash / macOS / Linux:

git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'

CMD (Windows):

git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"

Dit geeft je alles wat je nodig hebt om de cursus te voltooien met een veel snellere download.

Als je wilt dat er extra vertalingen worden ondersteund, staan deze hier

🧑‍🎓 Ben je een student?

Bezoek de Student Hub pagina waar je beginnersmaterialen, studentpakketten en zelfs manieren vindt om een gratis certificaatvoucher te krijgen. Dit is de pagina die je wilt bookmarken en van tijd tot tijd wilt bekijken, omdat we maandelijks inhoud wisselen.

📣 Aankondiging - Nieuwe GitHub Copilot Agent modus uitdagingen om te voltooien!

Nieuwe uitdaging toegevoegd, zoek naar "GitHub Copilot Agent Challenge 🚀" in de meeste hoofdstukken. Dat is een nieuwe uitdaging om te voltooien met behulp van GitHub Copilot en de Agent-modus. Als je Agent-modus nog niet eerder hebt gebruikt, kan deze niet alleen tekst genereren, maar ook bestanden maken en bewerken, opdrachten uitvoeren en meer.

📣 Aankondiging - Nieuw project om te bouwen met Generatieve AI

Net toegevoegd: een nieuw AI-assistentproject, bekijk het project

📣 Aankondiging - Nieuw curriculum over Generatieve AI voor JavaScript is net uitgebracht

Mis ons nieuwe Generatieve AI-curriculum niet!

Bezoek https://aka.ms/genai-js-course om te beginnen!

• Lessen die alles behandelen van de basis tot RAG.
• Interactie met historische personen via GenAI en onze begeleidende app.
• Levendig en boeiend verhaal, je reist door de tijd!

Elke les bevat een opdracht om te voltooien, een kennischeck en een uitdaging die je begeleidt bij het leren van onderwerpen zoals:

• Prompting en prompt engineering
• Tekst- en beeldapplicatie-generatie
• Zoek-applicaties

Bezoek https://aka.ms/genai-js-course om te beginnen!

🌱 Aan de slag

Docenten, we hebben enkele suggesties opgenomen over hoe dit curriculum te gebruiken. We horen graag je feedback in ons discussieforum!

Leerlingen, voor elke les begin je met een pre-lecture quiz en ga je door met het lezen van het lesmateriaal, het voltooien van de verschillende activiteiten en controleer je je begrip met de post-lecture quiz.

Om je leerervaring te verbeteren, verbind je met je medeleerlingen om samen aan de projecten te werken! Discussies worden aangemoedigd in ons discussieforum waar ons team van moderators beschikbaar zal zijn om je vragen te beantwoorden.

Om je opleiding verder te bevorderen, raden we sterk aan om Microsoft Learn te verkennen voor aanvullende studiematerialen.

📋 Je omgeving instellen

Dit curriculum heeft een ontwikkelomgeving klaar voor gebruik! Als je begint kun je ervoor kiezen om het curriculum te draaien in een Codespace (een browsergebaseerde, geen installatie benodigde omgeving), of lokaal op je computer met een teksteditor zoals Visual Studio Code.

Maak je eigen repository

Om je werk gemakkelijk op te slaan, wordt het aanbevolen om een eigen kopie van deze repository te maken. Dit kun je doen door op de knop Use this template bovenaan de pagina te klikken. Dit maakt een nieuwe repository aan in je GitHub-account met een kopie van het curriculum.

Volg deze stappen:

1. Fork de Repository: Klik op de "Fork" knop rechtsboven op deze pagina.
2. Clone de Repository: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Het curriculum uitvoeren in een Codespace

In je kopie van deze repository die je hebt gemaakt, klik op de Code knop en selecteer Open with Codespaces. Dit maakt een nieuwe Codespace voor je werkruimte.

Het curriculum lokaal uitvoeren op je computer

Om dit curriculum lokaal op je computer uit te voeren, heb je een teksteditor, een browser en een opdrachtregeltool nodig. Onze eerste les, Introductie tot programmeertalen en tools van het vak, zal je door verschillende opties voor elk van deze tools leiden zodat je kunt kiezen wat het beste voor jou werkt.

Onze aanbeveling is om Visual Studio Code te gebruiken als je editor, die ook een ingebouwde Terminal heeft. Je kunt Visual Studio Code hier downloaden.

1. Clone je repository naar je computer. Dit kun je doen door op de Code knop te klikken en de URL te kopiëren:

   CodeSpace

   Open vervolgens Terminal binnen Visual Studio Code en voer het volgende commando uit, waarbij je <your-repository-url> vervangt door de URL die je zojuist hebt gekopieerd:

   git clone <your-repository-url>
   

2. Open de map in Visual Studio Code. Dit kun je doen door te klikken op Bestand > Map openen en de map te selecteren die je zojuist hebt gekloond.

Aanbevolen Visual Studio Code extensies:

• Live Server - om HTML-pagina's binnen Visual Studio Code te bekijken
• Copilot - om je te helpen sneller code te schrijven

📂 Elke les bevat:

• optionele sketchnote
• optionele aanvullende video
• warming-up quiz voor de les
• schriftelijke les
• voor projectgebaseerde lessen, stapsgewijze handleidingen over hoe het project te bouwen
• kennistests
• een uitdaging
• aanvullende leesstof
• opdracht
• quiz na de les

Een opmerking over quizzes: Alle quizzes bevinden zich in de Quiz-app map, in totaal 48 quizzes met elk drie vragen. Ze zijn beschikbaar hier. De quiz-app kan lokaal worden uitgevoerd of worden gedeployed naar Azure; volg de instructies in de quiz-app map.

🗃️ Lessen

	Projectnaam	Behandelde Concepten	Leerdoelen	Gelinkte les	Auteur
01	Aan de slag	Introductie tot programmeren en de gebruikte tools	Leer de basisprincipes achter de meeste programmeertalen en over software die professionele ontwikkelaars helpt	Introductie tot Programmeertalen en Tools	Jasmine
02	Aan de slag	Basis van GitHub, inclusief samenwerken in een team	Hoe je GitHub gebruikt in je project, hoe je samenwerkt met anderen aan een codebase	Introductie tot GitHub	Floor
03	Aan de slag	Toegankelijkheid	Leer de basis van webtoegankelijkheid	Toegankelijkheidsbasisprincipes	Christopher
04	JS Basis	JavaScript Datatypes	De basis van JavaScript datatypes	Datatypes	Jasmine
05	JS Basis	Functies en Methodes	Leer over functies en methodes om de logica van een applicatie te beheren	Functies en Methodes	Jasmine en Christopher
06	JS Basis	Beslissingen maken met JS	Leer hoe je voorwaarden creëert in je code via beslissingsmethodes	Beslissingen maken	Jasmine
07	JS Basis	Arrays en Lussen	Werk met data via arrays en lussen in JavaScript	Arrays en Lussen	Jasmine
08	Terrarium	HTML in de praktijk	Bouw de HTML om een online terrarium te maken, met focus op het bouwen van een layout	Introductie tot HTML	Jen
09	Terrarium	CSS in de praktijk	Bouw de CSS om het online terrarium te stylen, met focus op CSS-basis en het responsief maken van de pagina	Introductie tot CSS	Jen
10	Terrarium	JavaScript Closures, DOM-manipulatie	Bouw de JavaScript voor het terrarium om te functioneren als een drag/drop-interface, met focus op closures en DOM-manipulatie	JavaScript Closures, DOM Manipulatie	Jen
11	Typing Game	Bouw een Typing Game	Leer hoe je toetsevenementen gebruikt om de logica van je JavaScript app aan te sturen	Event-Driven Programming	Christopher
12	Green Browser Extension	Werken met Browsers	Leer hoe browsers werken, hun geschiedenis, en hoe je de eerste elementen van een browser-extensie opzet	Over Browsers	Jen
13	Green Browser Extension	Formulieren maken, API aanroepen en variabelen opslaan in lokale opslag	Bouw de JavaScript-elementen van je browser-extensie om een API aan te roepen met gebruik van variabelen opgeslagen in lokaal opslag	API's, Formulieren en Lokale Opslag	Jen
14	Green Browser Extension	Achtergrondprocessen in de browser, webprestaties	Gebruik de achtergrondprocessen van de browser om het icoon van de extensie te beheren; leer over webprestaties en optimalisaties	Achtergrondtaken en Prestaties	Jen
15	Space Game	Meer geavanceerde gameontwikkeling met JavaScript	Leer over Overerving met zowel Klassen als Compositie en het Pub/Sub-patroon, ter voorbereiding op het bouwen van een game	Introductie tot Geavanceerde Gameontwikkeling	Chris
16	Space Game	Tekenen op canvas	Leer over de Canvas API, gebruikt om elementen op een scherm te tekenen	Tekenen op Canvas	Chris
17	Space Game	Elementen bewegen over het scherm	Ontdek hoe elementen beweging krijgen met behulp van cartesische coördinaten en de Canvas API	Elementen Bewegen	Chris
18	Space Game	Detectie van botsingen	Laat elementen botsen en reageren op elkaar via toetsaanslagen en zorg voor een cooldown-functie ter verbetering van prestaties	Botsingsdetectie	Chris
19	Space Game	Score bijhouden	Voer wiskundige berekeningen uit op basis van de status en prestaties van het spel	Score bijhouden	Chris
20	Space Game	Het spel beëindigen en opnieuw starten	Leer over het beëindigen en herstarten van het spel, inclusief opruimen van assets en resetten van variabelen	De eindvoorwaarde	Chris
21	Banking App	HTML-templates en routes in een webapp	Leer hoe je de structuur van een meerpagina-website maakt met routing en HTML-templates	HTML-templates en Routes	Yohan
22	Banking App	Bouw een login- en registratieformulier	Leer over het bouwen van formulieren en het afhandelen van validatieroutines	Formulieren	Yohan
23	Banking App	Methoden voor het ophalen en gebruiken van data	Hoe data in en uit je app stroomt, hoe je het ophaalt, opslaat en opruimt	Data	Yohan
24	Banking App	Concepten van state management	Leer hoe je app de staat behoudt en hoe je dit programmeerbaar beheert	State Management	Yohan
25	Browser/VScode Code	Werken met VScode	Leer hoe je een code-editor gebruikt	Gebruik van VScode Code Editor	Chris
26	AI Assistants	Werken met AI	Leer hoe je je eigen AI-assistent bouwt	AI Assistant project	Chris

🏫 Pedagogiek

Onze leerstof is ontworpen met twee belangrijke pedagogische principes in gedachten:

• projectgebaseerd leren
• regelmatige quizzes

Het programma leert de basisprincipes van JavaScript, HTML en CSS, evenals de nieuwste tools en technieken die hedendaagse webontwikkelaars gebruiken. Studenten krijgen de kans om praktijkervaring op te doen door het bouwen van een typing game, virtueel terrarium, milieuvriendelijke browser-extensie, space-invader-stijl game en een banking app voor bedrijven. Aan het einde van de serie hebben studenten een solide begrip van webontwikkeling verworven.

🎓 Je kunt de eerste lessen in deze leerstof volgen als een Leertraject op Microsoft Learn!

Door ervoor te zorgen dat de inhoud aansluit bij projecten, wordt het proces boeiender voor studenten en wordt het vasthouden van concepten vergroot. We hebben ook verschillende startlessen in JavaScript basics geschreven om concepten te introduceren, gecombineerd met een video uit de "Beginners Series to: JavaScript" verzameling van videotutorials, waarvan enkele auteurs hebben bijgedragen aan deze leerstof.

Daarnaast zet een low-stakes quiz voor een les de intentie van de student om een onderwerp te leren, terwijl een tweede quiz na de les zorgt voor verdere opname. Deze leerstof is ontworpen om flexibel en leuk te zijn en kan geheel of gedeeltelijk worden gevolgd. De projecten beginnen klein en worden steeds complexer tegen het einde van de 12-weekse cyclus.

Hoewel we er bewust voor hebben gekozen om geen JavaScript-frameworks te introduceren om te focussen op de basisvaardigheden die een webontwikkelaar nodig heeft vóór het gebruik van een framework, zou een goede volgende stap om deze leerstof te voltooien het leren over Node.js kunnen zijn via een andere collectie video's: "Beginner Series to: Node.js".

Bekijk onze Gedragscode en Bijdragen richtlijnen. We verwelkomen je constructieve feedback!

🧭 Offline toegang

Je kunt deze documentatie offline draaien met behulp van Docsify. Fork deze repo, installeer Docsify op je lokale machine en typ in de hoofdmap van deze repo docsify serve. De website wordt geserveerd op poort 3000 op je localhost: localhost:3000.

📘 PDF

Een PDF van alle lessen is te vinden hier.

🎒 Andere Cursussen

Ons team maakt ook andere cursussen! Bekijk:

LangChain

Azure / Edge / MCP / Agents

---

Generative AI Series

---

Kernleren

---

Copilot Series

Hulp Krijgen

Als je vastloopt of vragen hebt over het bouwen van AI-apps. Sluit je aan bij mede-leren en ervaren ontwikkelaars in discussies over MCP. Het is een ondersteunende gemeenschap waar vragen welkom zijn en kennis vrij wordt gedeeld.

Als je productfeedback hebt of fouten ondervindt tijdens het bouwen, bezoek:

Licentie

Deze repository is gelicentieerd onder de MIT-licentie. Zie het LICENSE bestand voor meer informatie.

---

Disclaimer: Dit document is vertaald met behulp van de AI-vertalingsdienst Co-op Translator. Hoewel we streven naar nauwkeurigheid, dient u er rekening mee te houden dat automatische vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet als de gezaghebbende bron worden beschouwd. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortkomen uit het gebruik van deze vertaling.