Web-Dev-For-Beginners/translations/nl

Webontwikkeling voor Beginners - Een Curriculum

Leer de basisprincipes van webontwikkeling met onze 12-weken durende uitgebreide cursus van Microsoft Cloud Advocates. Elk van de 24 lessen verdiept zich in JavaScript, CSS en HTML via hands-on projecten zoals terrariums, browserextensies en ruimtegames. Doe mee met quizzen, discussies en praktische opdrachten. Verbeter je vaardigheden en optimaliseer je kennisretentie met onze effectieve projectgebaseerde 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 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 mede-ontwikkelaars

🌐 Meertalige Ondersteuning

Ondersteund via GitHub Actie (Geautomatiseerd & Altijd Actueel)

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 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 vertaaltalen worden ondersteund, zijn die te vinden hier

🧑‍🎓 Ben je een student?

Bezoek de Student Hub-pagina waar je beginnersmateriaal, studentenpakketten en zelfs manieren om een gratis certificaatvoucher te verkrijgen zult vinden. Dit is de pagina die je wilt bookmarken en van tijd tot tijd bekijken omdat we maandelijks de 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. Dit is een nieuwe uitdaging voor jou om te 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, commando's 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 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.
• Interageer met historische figuren met GenAI en onze begeleidende app.
• Leuk en boeiend verhaal, je gaat tijdreizen!

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

• Prompting en prompt engineering
• Generatie van tekst- en afbeeldingsapps
• Zoekapps

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

🌱 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, begin bij elke les met een pre-lecture quiz en volg deze op door het leesmateriaal van de les door te nemen, de verschillende activiteiten te voltooien en je begrip te controleren 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 moderatoren beschikbaar is om je vragen te beantwoorden.

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

📋 Je omgeving instellen

Dit curriculum heeft een ontwikkelomgeving die klaar is om te gebruiken! Als je begint, kun je ervoor kiezen om het curriculum te draaien in een Codespace (een browser gebaseerde omgeving zonder installatie nodig), of lokaal op je computer met een teksteditor zoals Visual Studio Code.

Maak je repository aan

Om je werk gemakkelijk op te slaan, wordt aangeraden om je 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 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 eigen 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 aan om in te werken.

Het curriculum lokaal op je computer draaien

Om dit curriculum lokaal op je computer te draaien, heb je een teksteditor, een browser en een command line tool nodig. Onze eerste les, Introductie tot Programmeertalen en Gereedschappen 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 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 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 doe je door te klikken op File > Open Folder 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 vóór de les
• geschreven les
• voor projectgerichte lessen, stapsgewijze handleidingen om het project te bouwen
• kenniscontroles
• 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 met elk drie vragen. Ze zijn beschikbaar hier. De quiz-app kan lokaal worden uitgevoerd of naar Azure worden gedeployed; volg de instructies in de quiz-app map.

🗃️ Lessen

	Projectnaam	Behandelde Concepten	Leerdoelen	Gekoppelde Les	Auteur
01	Aan de slag	Introductie tot programmeren en tools van het vak	Leer de basisprincipes achter de meeste programmeertalen en over software die professionele ontwikkelaars helpt hun werk te doen	Intro tot Programmeertalen en Tools van het Vak	Jasmine
02	Aan de slag	Basisprincipes van GitHub, inclusief samenwerken in een team	Hoe je GitHub gebruikt in je project, hoe je samenwerkt met anderen aan een codebase	Intro tot GitHub	Floor
03	Aan de slag	Toegankelijkheid	Leer de basis van webtoegankelijkheid	Toegankelijkheidsfundamentals	Christopher
04	JS Basisprincipes	JavaScript Datatypes	De basis van JavaScript-datatypes	Datatypes	Jasmine
05	JS Basisprincipes	Functies en Methoden	Leer over functies en methoden om de logica van een applicatie te beheren	Functies en Methoden	Jasmine en Christopher
06	JS Basisprincipes	Beslissingen nemen met JS	Leer hoe je voorwaarden maakt in je code met behulp van besluitvormingsmethoden	Beslissingen nemen	Jasmine
07	JS Basisprincipes	Arrays en Lussen	Werk met data met behulp van arrays en lussen in JavaScript	Arrays en Lussen	Jasmine
08	Terrarium	HTML in de praktijk	Bouw de HTML om een online terrarium te creëren, met focus op het maken van een lay-out	Introductie tot HTML	Jen
09	Terrarium	CSS in de praktijk	Bouw de CSS om het online terrarium te stylen, met focus op de basis van CSS inclusief het responsief maken van de pagina	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	Typen Spel	Bouw een Typingspel	Leer hoe je toetsenbord-events gebruikt om de logica van je JavaScript-app aan te sturen	Event-Driven Programmeren	Christopher
12	Groene Browser Extensie	Werken met Browsers	Leer hoe browsers werken, hun geschiedenis en hoe je de eerste elementen van een browserextensie maakt	Over Browsers	Jen
13	Groene Browser Extensie	Bouw een formulier, bellen van een API en opslaan van variabelen in lokale opslag	Bouw de JavaScript-elementen van je browserextensie om een API aan te roepen met variabelen die in lokale opslag zijn opgeslagen	APIs, Formulieren en Lokale Opslag	Jen
14	Groene Browser Extensie	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	Geavanceerdere spelontwikkeling met JavaScript	Leer over overerving met behulp van klassen en compositie en het Pub/Sub-patroon, ter voorbereiding op het bouwen van een spel	Introductie tot 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 verplaatsen over het scherm	Ontdek hoe elementen beweging krijgen met behulp van cartesiaanse coördinaten en de Canvas API	Elementen Verplaatsen	Chris
18	Ruimte Spel	Botsingsdetectie	Laat elementen botsen en op elkaar reageren met toetsdrukken en voorzie in een afkoelfunctie om de prestaties van het spel te waarborgen	Botsingsdetectie	Chris
19	Ruimte Spel	Puntentelling	Voer wiskundige berekeningen uit op basis van de status en prestaties van het spel	Puntentelling	Chris
20	Ruimte Spel	Het spel beëindigen en opnieuw starten	Leer over het beëindigen en opnieuw starten van het spel, inclusief het opruimen van assets en het resetten van variabelen	De Eindvoorwaarde	Chris
21	Bankieren App	HTML Templates en Routes in een Web App	Leer hoe je de opbouw van een multi-page website maakt met routing en HTML-templates	HTML Templates en Routes	Yohan
22	Bankieren App	Bouw een Login- en Registratieformulier	Leer over het bouwen van formulieren en het afhandelen van validatieroutines	Formulieren	Yohan
23	Bankieren App	Methoden om data op te halen en te gebruiken	Hoe data in en uit je app stroomt, hoe je het ophaalt, opslaat en opruimt	Data	Yohan
24	Bankieren App	Concepten van State Management	Leer hoe je app status behoudt en hoe je dat programmeerbaar 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 Assistenten	Werken met AI	Leer hoe je je eigen AI-assistent bouwt	AI Assistent project	Chris

🏫 Pedagogiek

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

• projectgebaseerd leren
• frequente quizzen

Het programma leert 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 typingspel, 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 opgedaan.

🎓 Je kunt de eerste lessen van dit curriculum volgen als een Leerroute op Microsoft Learn!

Door te zorgen dat de inhoud aansluit bij projecten wordt het leerproces boeiender voor studenten en wordt het vasthouden van concepten vergroot. We schreven ook enkele starterlessen in JavaScript-basisprincipes om concepten te introduceren, gecombineerd met een video uit de "Beginners Series to: JavaScript" collectie van videotutorials, waarvan enkele auteurs aan dit curriculum hebben bijgedragen.

Daarnaast zet een quiz met lage druk vóór de les de intentie van de student om een onderwerp te leren, terwijl een tweede quiz na de les verdere retentie waarborgt. Dit curriculum 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 bewust hebben vermeden om JavaScript-frameworks te introduceren om ons te concentreren op de basisvaardigheden die nodig zijn als webontwikkelaar vóór het adopteren van een framework, zou een goede volgende stap na het voltooien van dit curriculum het leren over Node.js zijn via een andere collectie video's: "Beginner Series to: Node.js".

Bezoek onze Gedragscode en Bijdragen richtlijnen. We stellen je constructieve feedback op prijs!

🧭 Offline toegang

Je kunt deze documentatie offline gebruiken door gebruik te maken van Docsify. Fork deze repo, installeer Docsify op je lokale machine, en typ vervolgens in de root-map van deze repo docsify serve. De website zal worden geserveerd op poort 3000 op je localhost: localhost:3000.

📘 PDF

Een PDF van alle lessen is hier te vinden here.

🎒 Andere Cursussen

Ons team produceert ook andere cursussen! Neem een kijkje bij:

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 andere leerlingen 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 tegenkomt 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-vertalingsservice Co-op Translator. Hoewel we streven naar nauwkeurigheid, dient u er rekening mee te houden dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal dient als gezaghebbende bron te worden beschouwd. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.