Web-Dev-For-Beginners/translations/nl

Webontwikkeling voor Beginners - Een Curriculum

Leer de basisprincipes van webontwikkeling met onze 12 weken durende uitgebreide cursus door Microsoft Cloud Advocates. Elke van de 24 lessen duikt in JavaScript, CSS en HTML via praktische projecten zoals terrariums, browserextensies en ruimtespellen. Doe mee met quizzen, discussies en praktische opdrachten. Versterk je vaardigheden en optimaliseer je kennisretentie met onze effectieve projectgerichte didactiek. Begin vandaag nog met coderen!

Word lid van de Azure AI Foundry Discord Community

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

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 de 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 | 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 vergroot. Om zonder vertalingen te clonen, gebruik dan sparse checkout:

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 wenst dat extra vertalingen ondersteund worden, zijn die hier te vinden hier

🧑‍🎓 Ben je een student?

Bezoek de Student Hub pagina waar je beginnersbronnen, studentpakketten en zelfs manieren vindt om een gratis certificaatvoucher te bemachtigen. Dit is de pagina die je wilt bookmarken en af en toe bezoeken, aangezien we maandelijks content wisselen.

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

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

📣 Aankondiging - Nieuw Project te bouwen met Generatieve AI

Nieuw AI-assistentproject toegevoegd, bekijk het project

📣 Aankondiging - Nieuw Curriculum over Generatieve AI voor JavaScript is zojuist uitgebracht

Mis ons nieuwe Generatieve AI-curriculum niet!

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

• Lessen die alles behandelen van basisprincipes tot RAG.
• Interactie met historische personages via GenAI en onze compagnon-app.
• Leuk en boeiend verhaal, je reist door de tijd!

Elke les omvat een opdracht om te voltooien, een kennischeck en een uitdaging om je te begeleiden bij het leren van onderwerpen zoals:

• Prompting en promptengineering
• Tekst- en afbeeldingsapp-generatie
• Zoekapps

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

🌱 Aan de slag

Docenten, we hebben enkele suggesties opgenomen over hoe je dit curriculum kunt 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 medestudenten om samen aan de projecten te werken! Discussies worden aangemoedigd in ons discussieforum waar ons team van moderator beschikbaar zal zijn om je vragen te beantwoorden.

Om je educatie verder te bevorderen, raden we ten zeerste aan Microsoft Learn te verkennen voor aanvullende studiematerialen: Microsoft Learn.

📋 Je omgeving instellen

Dit curriculum heeft een ontwikkelomgeving die klaar is om te gebruiken! Terwijl je begint, kun je ervoor kiezen de cursus uit te voeren in een Codespace (een browsergebaseerde, geen installatie benodigde omgeving), of lokaal op je computer met een teksteditor zoals Visual Studio Code.

Maak je repository aan

Om je werk makkelijk op te slaan, is het aanbevolen een eigen kopie van deze repository te maken. Dit kan 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

De cursus draaien in een Codespace

In je kopie van deze repository die je hebt aangemaakt, klik je de knop Code en selecteer je Open with Codespaces. Dit maakt een nieuwe Codespace aan waarin je kunt werken.

De cursus lokaal draaien op je computer

Om deze cursus lokaal op je computer te draaien, 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 bij jou past.

We raden aan om Visual Studio Code als editor te gebruiken, die ook een ingebouwde Terminal heeft. Je kunt Visual Studio Code hier downloaden.

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

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

   git clone <your-repository-url>
   

2. Open de map in Visual Studio Code. Dit kan door te klikken op File > Open Folder en de map te selecteren die u zojuist hebt gekloond.

Aanbevolen Visual Studio Code-extensies:

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

📂 Elke les bevat:

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

Een opmerking over quizzen: Alle quizzen bevinden zich in de Quiz-app map, in totaal 48 quizzen van 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	Aangeleerde Concepten	Leerdoelen	Gelinkte Les	Auteur
01	Aan de slag	Introductie in programmeren en tools van het vak	Leer de basisprincipes achter de meeste programmeertalen en over software die professionele ontwikkelaars helpt	Introductie in programmeertalen en tools van het vak	Jasmine
02	Aan de slag	Basiskennis van GitHub, inclusief samenwerken in een team	Hoe GitHub te gebruiken in jouw project, hoe samen te werken met anderen aan een codebase	Introductie in GitHub	Floor
03	Aan de slag	Toegankelijkheid	Leer de basis van webtoegankelijkheid	Fundamentals Toegankelijkheid	Christopher
04	JS Grundlagen	JavaScript Datatypes	De basis van JavaScript datatypes	Datatypes	Jasmine
05	JS Grundlagen	Functies en Methoden	Leer over functies en methoden om de logica van een applicatie te beheren	Functies en Methodes	Jasmine en Christopher
06	JS Grundlagen	Beslissingen maken met JS	Leer hoe je voorwaarden maakt in je code met besluitvormingsmethoden	Beslissingen maken	Jasmine
07	JS Grundlagen	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 in HTML	Jen
09	Terrarium	CSS in de praktijk	Bouw de CSS om het online terrarium te stylen, met basiskennis van CSS, inclusief het responsief maken van de pagina	Introductie in CSS	Jen
10	Terrarium	JavaScript Closures, DOM-manipulatie	Bouw de JavaScript om het terrarium als een sleep-en-zet-interface te laten functioneren, met focus op closures en DOM-manipulatie	JavaScript Closures, DOM-manipulatie	Jen
11	Typwedstrijd	Bouw een Typwedstrijd	Leer hoe je toetsenbordgebeurtenissen gebruikt om de logica van je JavaScript-app aan te sturen	Gebeurtenisgestuurd programmeren	Christopher
12	Groene Browserextensie	Werken met browsers	Leer hoe browsers werken, hun geschiedenis, en hoe je de eerste elementen van een browserextensie bouwt	Over Browsers	Jen
13	Groene Browserextensie	Formulier bouwen, API aanroepen en variabelen opslaan in local storage	Bouw de JavaScript-elementen van je browserextensie om een API aan te roepen met variabelen opgeslagen in local storage	APIs, formulieren en local storage	Jen
14	Groene Browserextensie	Achtergrondprocessen in de browser, webprestaties	Gebruik de achtergrondprocessen van de browser om het pictogram van de extensie te beheren; leer over webprestaties en optimalisaties	Achtergrondtaken en prestaties	Jen
15	Ruimte Spel	Geavanceerde spelontwikkeling met JavaScript	Leer over overerving met zowel klassen als compositie en het Pub/Sub-patroon, ter voorbereiding op het bouwen van een spel	Introductie in geavanceerde spelontwikkeling	Chris
16	Ruimte Spel	Tekenen op canvas	Leer over de Canvas API, gebruikt om elementen op een scherm te tekenen	Tekenen op Canvas	Chris
17	Ruimte Spel	Elementen rond het scherm bewegen	Ontdek hoe elementen beweging krijgen met behulp van kartesische coördinaten en de Canvas API	Elementen bewegen	Chris
18	Ruimte Spel	Detectie van botsingen	Laat elementen botsen en op elkaar reageren via toetsaanslagen en zorg voor een cooldown-functie om prestaties te waarborgen	Botsingsdetectie	Chris
19	Ruimte Spel	Score bijhouden	Voer wiskundige berekeningen uit op basis van de status en prestaties van het spel	Score bijhouden	Chris
20	Ruimte Spel	Het spel beëindigen en herstarten	Leer over het beëindigen en herstarten van het spel, inclusief opruimen van middelen en resetten van variabelen	De eindvoorwaarde	Chris
21	Bankapp	HTML-sjablonen en routes in een webapp	Leer hoe je de opbouw van een meerpaginawebsite architectuur maakt met routing en HTML-sjablonen	HTML-sjablonen en routes	Yohan
22	Bankapp	Bouw een inlog- en registratieformulier	Leer over het bouwen van formulieren en het afhandelen van validatieroutines	Formulieren	Yohan
23	Bankapp	Methoden voor ophalen en gebruiken van data	Hoe data in en uit je app stroomt, hoe je het ophaalt, opslaat en verwijdert	Data	Yohan
24	Bankapp	Concepten van State Management	Leer hoe je app state behoudt en hoe je die programmatisch beheert	State Management	Yohan
25	Browser/VScode Code	Werken met VScode	Leer hoe je een code-editor gebruikt	Use VScode Code Editor	Chris
26	AI Assistants	Werken met AI	Leer hoe je je eigen AI-assistent bouwt	AI Assistant project	Chris

🏫 Pedagogiek

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

• projectgebaseerd leren
• frequente quizzen

Het programma onderwijst de basisprincipes van JavaScript, HTML en CSS, evenals de nieuwste tools en technieken die tegenwoordig door webontwikkelaars worden gebruikt. Studenten krijgen de kans om praktische ervaring op te doen door het bouwen van een typwedstrijd, virtueel terrarium, milieuvriendelijke browserextensie, space-invader-stijl spel en een bankapp voor bedrijven. Aan het einde van de serie hebben studenten een solide begrip van webontwikkeling opgebouwd.

🎓 Je kunt de eerste paar lessen van deze cursus volgen als een Leerpad op Microsoft Learn!

Doordat de inhoud aansluit bij projecten, wordt het proces voor studenten boeiender en wordt het onthouden van concepten vergroot. We hebben ook verschillende startlessen in JavaScript basics geschreven om de concepten te introduceren, gekoppeld aan een video uit de "Beginners Series to: JavaScript" collectie van videotutorials, waarvan sommige auteurs hebben bijgedragen aan deze cursus.

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

Hoewel we er bewust voor hebben gekozen om geen JavaScript-frameworks te introduceren, om ons te concentreren op de basisvaardigheden die nodig zijn als webontwikkelaar voordat je een framework adopteert, zou een goede vervolgstap na deze cursus het leren van Node.js zijn via een andere collectie video’s: "Beginner Series to: Node.js".

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

🧭 Offline toegang

Je kunt deze documentatie offline gebruiken met Docsify. Fork deze repository, installeer Docsify op je lokale machine, en typ vervolgens in de hoofdmap van deze repository 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

---

Generatieve AI Serie

---

Kernleren

---

Copilot Serie

Hulp krijgen

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

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

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-vertalingsservice Co-op Translator. Hoewel wij 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 worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.