Web-Dev-For-Beginners/translations/nl

Webontwikkeling voor Beginners - Een Curriculum

Leer de basisprincipes van webontwikkeling met onze uitgebreide cursus van 12 weken door Microsoft Cloud Advocates. Elk van de 24 lessen duikt in JavaScript, CSS en HTML aan de hand van praktijkprojecten zoals terrariums, browserextensies en ruimtespellen. Doe mee met quizzen, discussies en praktische opdrachten. Versterk je vaardigheden en optimaliseer je kennisbehoud 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 bronnen:

1. Fork de Repository: Klik
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 mede-ontwikkelaars

🌐 Meertalige Ondersteuning

Ondersteund via GitHub Action (Geautomatiseerd & Altijd Up-to-Date)

Arabisch | Bengaals | Bulgaars | Birmaans (Myanmar) | Chinees (Vereenvoudigd) | Chinees (Traditioneel, Hong Kong) | Chinees (Traditioneel, Macau) | Chinees (Traditioneel, Taiwan) | Kroatisch | Tsjechisch | Deens | Nederlands | Ests | Fins | Frans | Duits | Grieks | Hebreeuws | Hindi | Hongaars | Indonesisch | Italiaans | Japans | Kannada | Koreaans | Litouws | Maleis | Malayalam | Marathi | Nepalees | Nigeriaans Pidgin | Noors | Perzisch (Farsi) | Pools | Portugees (Brazilië) | Portugees (Portugal) | Punjabi (Gurmukhi) | Roemeens | Russisch | Servisch (Cyrillisch) | Slowaaks | Sloveens | Spaans | Swahili | Zweeds | Tagalog (Filipijns) | Tamil | Telugu | Thais | Turks | Oekraïens | Urdu | Vietnamees

Liever lokaal klonen?

Deze repository bevat meer dan 50 vertalingen wat de downloadgrootte aanzienlijk vergroot. Om zonder vertalingen te klonen, gebruik 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 extra vertaaltalen wilt laten ondersteunen, zijn deze hier te vinden here

🧑‍🎓 Ben je een student?

Bezoek de Student Hub pagina waar je beginnersbronnen, studentenpakketten en zelfs manieren vindt om een gratis certificaatvoucher te krijgen. Dit is de pagina die je wilt bookmarken en af en toe wilt bekijken omdat wij 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. Dat is een nieuwe uitdaging die je kunt voltooien met behulp van GitHub Copilot en Agent modus. Als je Agent modus nog niet 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

Nieuw AI-assistent project zojuist toegevoegd, 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 aan de slag te gaan!

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

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

• Prompting en prompt engineering
• Tekst- en beeldapp generatie
• Zoekapps

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

🌱 Aan de slag

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

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

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

Voor verdere verdieping raden we sterk aan om Microsoft Learn te verkennen voor aanvullende studiematerialen.

📋 Je omgeving instellen

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

Maak je repository aan

Om eenvoudig je werk op te slaan, wordt aanbevolen je eigen kopie van deze repository te maken. Dit kun je doen door te klikken op de knop Use this template bovenaan de pagina. 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 draaien in een Codespace

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

Het curriculum lokaal draaien op je computer

Om dit curriculum 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, laat je verschillende opties voor elk van deze tools zien zodat je kunt kiezen wat het beste bij jou past.

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

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

   CodeSpace Open vervolgens de 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 gecloned.

Aanbevolen Visual Studio Code-extensies:

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

📂 Elke les bevat:

• optionele schetsnotitie
• optionele aanvullende video
• opwarmquiz voor de les
• geschreven les
• voor projectgebaseerde lessen, stapsgewijze handleidingen over hoe je het project bouwt
• kenniscontroles
• een uitdaging
• aanvullende leesstof
• opdracht
• quiz na de les

Een noot over quizzen: Alle quizzen bevinden zich in de Quiz-app map, in totaal 48 quizzen 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	Concepten	Leerdoelen	Gelinkte les	Auteur
01	Aan de slag	Introductie tot programmeren en gebruikte tools	Leer de basisprincipes achter de meeste programmeertalen en over software die professionele ontwikkelaars helpt in hun werk	Inleiding tot programmeertalen en gebruikte tools	Jasmine
02	Aan de slag	Basisprincipes van GitHub, inclusief samenwerken	Hoe je GitHub gebruikt in je project, en hoe je samenwerkt aan een codebase	Intro tot GitHub	Floor
03	Aan de slag	Toegankelijkheid	Leer de basis van webtoegankelijkheid	Basisprincipes toegankelijkheid	Christopher
04	JS Basics	JavaScript datatype	De basis van JavaScript datatypes	Datatypes	Jasmine
05	JS Basics	Functies en methoden	Leer over functies en methoden om de logica van een applicatie te beheren	Functies en methoden	Jasmine and Christopher
06	JS Basics	Beslissingen maken met JS	Leer hoe je voorwaarden maakt in je code met besluitvormingsmethoden	Beslissingen maken	Jasmine
07	JS Basics	Arrays en lussen	Werk met data via arrays en lussen in JavaScript	Arrays en lussen	Jasmine
08	Terrarium	HTML in praktijk	Bouw de HTML om een online terrarium te creëren, met focus op het bouwen van een layout	Introductie tot HTML	Jen
09	Terrarium	CSS in praktijk	Bouw de CSS om het online terrarium te stijlen, met basiskennis van CSS inclusief responsiviteit	Introductie tot CSS	Jen
10	Terrarium	JavaScript closures, DOM-manipulatie	Bouw de JavaScript om het terrarium te laten functioneren als drag/drop interface, met focus op closures en DOM-manipulatie	JavaScript closures, DOM-manipulatie	Jen
11	Typing Game	Bouw een typgame	Leer hoe je keyboard events 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 browserextensie opzet	Over browsers	Jen
13	Green Browser Extension	Formulier bouwen, aanroepen API en lokale opslag	Bouw de JavaScript-elementen van je browserextensie om een API aan te roepen met variabelen opgeslagen in lokale opslag	API's, formulieren en lokale opslag	Jen
14	Green Browser Extension	Achtergrondprocessen in de browser, webprestaties	Gebruik achtergrondprocessen van de browser om het icoon van de extensie te beheren; leer over webprestaties en optimalisaties	Achtergrondtaken en prestaties	Jen
15	Space Game	Geavanceerde game-ontwikkeling met JavaScript	Leer over overerving met Classes en Compositie en het Pub/Sub patroon, als voorbereiding op het bouwen van een game	Introductie tot geavanceerde game-ontwikkeling	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 op het scherm	Ontdek hoe elementen beweging krijgen met de cartesische coördinaten en de Canvas API	Elementen verplaatsen	Chris
18	Space Game	Botsingsdetectie	Laat elementen botsen en op elkaar reageren via toetsaanslagen en zorg voor een cooldown-functie om prestaties te waarborgen	Botsingsdetectie	Chris
19	Space Game	Score bijhouden	Voer wiskundige berekeningen uit gebaseerd op de status en prestaties van het spel	Score bijhouden	Chris
20	Space Game	Eindigen en herstarten van het spel	Leer over het beëindigen en herstarten van het spel inclusief het opruimen van assets en resetten van variabelen	De eindvoorwaarde	Chris
21	Banking App	HTML-sjablonen en routes in een webapp	Leer hoe je de basisstructuur van een multipage website maakt met routing en HTML-sjablonen	HTML-sjablonen 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 verwijdert	Data	Yohan
24	Banking App	Concepten van state management	Leer hoe je app staat vasthoudt en hoe je die staat programmatisch beheert	State management	Yohan
25	Browser/VScode Code	Werken met VScode	Leer hoe je een code-editor gebruikt	Gebruik VScode Code Editor	Chris
26	AI Assistants	Werken met AI	Leer hoe je je eigen AI-assistent bouwt	AI Assistent project	Chris

🏫 Pedagogiek

Ons curriculum is ontworpen met twee belangrijke didactische principes in gedachten:

• leren via projecten
• frequente quizzen

Het programma leert de basis van JavaScript, HTML en CSS, evenals de nieuwste tools en technieken die hedendaagse webontwikkelaars gebruiken. Studenten krijgen de kans om praktische ervaring op te doen door het bouwen van een typgame, virtueel terrarium, milieuvriendelijke browserextensie, space-invader-stijl game, en een bankapp voor bedrijven. Aan het eind van de reeks hebben studenten een degelijke kennis van webontwikkeling opgedaan.

🎓 Je kunt de eerste lessen in dit curriculum volgen als een Leerpad 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 schreven ook enkele starterslessen in basis JavaScript om concepten uit te leggen, gecombineerd met een video uit de "Beginners Series to: JavaScript" collectie van videotutorials, waarvan sommige auteurs bijdroegen aan dit curriculum.

Daarnaast zet een quiz met lage druk voor een les de intentie van de student om een onderwerp te leren, terwijl een tweede quiz na de les verdere retentie verzekert. Dit curriculum is ontworpen om flexibel en leuk te zijn en kan geheel of deels worden gevolgd. De projecten beginnen klein en worden steeds complexer aan het eind van de 12-weekse cyclus.

We hebben er bewust voor gekozen om geen JavaScript-frameworks te introduceren, zodat de basisvaardigheden die nodig zijn als webontwikkelaar eerst goed worden beheerst alvorens een framework te leren. Een goede vervolgstap na dit curriculum is het leren over Node.js via een andere videoreeks: "Beginner Series to: Node.js".

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

🧭 Offline toegang

Je kunt deze documentatie offline gebruiken met behulp van Docsify. Fork deze repo, installeer Docsify op je lokale machine, en typ dan in de rootmap 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 produceert 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 met medeleerlingen en ervaren ontwikkelaars in discussies over MCP. Het is een ondersteunende gemeenschap waar vragen welkom zijn en kennis vrij gedeeld wordt.

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

Licentie

Deze repository is gelicenseerd 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 we streven naar nauwkeurigheid, dient u ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het oorspronkelijke 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.