diff --git a/translations/fi/README.md b/translations/fi/README.md index 60f09f20..5744b951 100644 --- a/translations/fi/README.md +++ b/translations/fi/README.md @@ -1,8 +1,8 @@ -[![GitHub licentie](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) -[![GitHub bijdragers](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) +[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) +[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) [![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) [![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) -[![PRs Welkom](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) -[![GitHub sterren](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) +[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) [![](https://dcbadge.vercel.app/api/server/ByRwuEEgH4)](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott) [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +[![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4) + +Volg deze stappen om aan de slag te gaan met deze bronnen: +1. **Fork de repository**: Klik op [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +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**](https://discord.com/invite/ByRwuEEgH4) + # Webontwikkeling voor Beginners - Een Curriculum -Leer de basisprincipes van webontwikkeling met onze 12-weekse uitgebreide cursus van Microsoft Cloud Advocates. Elke van de 24 lessen behandelt JavaScript, CSS en HTML via praktische projecten zoals terrariums, browserextensies en ruimtegames. Doe mee met quizzen, discussies en praktische opdrachten. Versterk je vaardigheden en optimaliseer je kennisbehoud met onze effectieve projectgerichte aanpak. Begin vandaag nog met je codeerreis! +Leer de basisprincipes van webontwikkeling met onze 12-weekse uitgebreide cursus van Microsoft Cloud Advocates. Elke van de 24 lessen behandelt JavaScript, CSS en HTML via praktische projecten zoals terrariums, browserextensies en ruimtegames. Doe mee met quizzen, discussies en praktische opdrachten. Verhoog je vaardigheden en optimaliseer je kennisbehoud met onze effectieve projectgerichte aanpak. Begin vandaag nog aan je codeeravontuur! #### 🧑‍🎓 _Ben je een student?_ -Bezoek de [**Student Hub-pagina**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) waar je beginnersbronnen, studentpakketten en zelfs manieren vindt om een gratis certificaatvoucher te krijgen. Dit is de pagina die je wilt bookmarken en regelmatig wilt bekijken, aangezien we maandelijks de inhoud vernieuwen. +Bezoek de [**Student Hub-pagina**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) waar je bronnen voor beginners, studentenpakketten en zelfs manieren vindt om een gratis certificaatvoucher te krijgen. Dit is de pagina die je wilt bookmarken en regelmatig wilt bekijken, omdat we maandelijks nieuwe inhoud toevoegen. -### 📣 Aankondiging - _Nieuw Curriculum_ over Generatieve AI voor JavaScript is net uitgebracht +### 📣 Aankondiging - _Nieuw Curriculum_ over Generatieve AI voor JavaScript is zojuist uitgebracht Mis ons nieuwe curriculum over Generatieve AI niet! -Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om te beginnen! +Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om aan de slag te gaan! -
- -
+![Achtergrond](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.nl.png) -- Lessen die alles behandelen, van de basis tot RAG. -- Interactie met historische personages via GenAI en onze begeleidende app. -- Een leuke en boeiende verhaallijn, je zult tijdreizen! +- Lessen die alles behandelen, van basisprincipes tot RAG. +- Interactie met historische personages met behulp van GenAI en onze begeleidende app. +- Een leuke en boeiende verhaallijn, je gaat tijdreizen! -
- -
+![personage](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.nl.png) Elke les bevat een opdracht om te voltooien, een kennischeck en een uitdaging om je te begeleiden bij het leren van onderwerpen zoals: - Prompting en prompt engineering -- Tekst- en afbeeldingsapp-generatie -- Zoekapps +- Tekst- en afbeeldingsapplicaties genereren +- Zoekapplicaties -Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om te beginnen! +Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om aan de slag te gaan! ## 🌱 Aan de slag @@ -60,13 +63,13 @@ Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om te be **[Leerlingen](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, begin voor elke les met een quiz voorafgaand aan de lezing en ga verder met het lezen van het lesmateriaal, het voltooien van de verschillende activiteiten en controleer je begrip met de quiz na de lezing. -Om je leerervaring te verbeteren, werk samen met je medestudenten aan de projecten! Discussies worden aangemoedigd in ons [discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) waar ons team van moderators beschikbaar zal zijn om je vragen te beantwoorden. +Om je leerervaring te verbeteren, kun je samenwerken met je medestudenten aan de projecten! Discussies worden aangemoedigd in ons [discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) waar ons team van moderators beschikbaar is om je vragen te beantwoorden. Om je opleiding verder te verdiepen, raden we aan om [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) te verkennen voor aanvullende studiematerialen. ### 📋 Je omgeving instellen -Dit curriculum heeft een ontwikkelomgeving die klaar is voor gebruik! Bij het starten kun je ervoor kiezen om het curriculum te draaien in een [Codespace](https://github.com/features/codespaces/) (_een browsergebaseerde omgeving zonder installaties_), of lokaal op je computer met behulp van een teksteditor zoals [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Dit curriculum heeft een ontwikkelomgeving die klaar is voor gebruik! Bij het starten kun je ervoor kiezen om het curriculum uit te voeren in een [Codespace](https://github.com/features/codespaces/) (_een browsergebaseerde omgeving zonder installaties_), of lokaal op je computer met behulp van een teksteditor zoals [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). #### Maak je repository aan Om je werk eenvoudig op te slaan, raden we aan 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 in je GitHub-account met een kopie van het curriculum. @@ -75,21 +78,21 @@ Volg deze stappen: 1. **Fork de repository**: Klik op de knop "Fork" 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 +#### Het curriculum uitvoeren in een Codespace -In je kopie van deze repository die je hebt aangemaakt, klik op de knop **Code** en selecteer **Open with Codespaces**. Dit maakt een nieuwe Codespace aan waarin je kunt werken. +In je kopie van deze repository die je hebt gemaakt, klik je op de knop **Code** en selecteer je **Open with Codespaces**. Dit maakt een nieuwe Codespace aan waarin je kunt werken. -Codespace aanmaken +[!Codespace](./images/createcodespace.png) -#### Het curriculum lokaal draaien op je computer +#### Het curriculum lokaal op je computer uitvoeren -Om dit curriculum lokaal op je computer te draaien, heb je een teksteditor, een browser en een commandoregeltool nodig. Onze eerste les, [Introductie tot programmeertalen en tools](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), begeleidt je door verschillende opties voor elk van deze tools, zodat je kunt kiezen wat het beste bij je past. +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](../../1-getting-started-lessons/1-intro-to-programming-languages), begeleidt je door verschillende opties voor elk van deze tools, zodat je kunt kiezen wat het beste voor je werkt. Onze aanbeveling is om [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) te gebruiken als je editor, die ook een ingebouwde [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) heeft. Je kunt Visual Studio Code [hier downloaden](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). 1. Clone je repository naar je computer. Dit kun je doen door op de knop **Code** te klikken en de URL te kopiëren: - Kopieer je repository-URL + [!CodeSpace](./images/createcodespace.png) Open vervolgens [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) binnen [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) en voer het volgende commando uit, waarbij je `` vervangt door de URL die je zojuist hebt gekopieerd: @@ -97,11 +100,11 @@ Onze aanbeveling is om [Visual Studio Code](https://code.visualstudio.com/?WT.mc git clone ``` -2. Open de map in Visual Studio Code. Dit kun je doen door te klikken op **File** > **Open Folder** en de map te selecteren die je zojuist hebt gecloned. +2. Open de map in Visual Studio Code. Dit kun je doen door te klikken op **File** > **Open Folder** en de map te selecteren die je zojuist hebt gekloond. -> Aanbevolen Visual Studio Code-extensies: +> Aanbevolen Visual Studio Code-extensies: > -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - om HTML-pagina's te bekijken binnen Visual Studio Code +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - om HTML-pagina's binnen Visual Studio Code te bekijken > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - om je te helpen sneller code te schrijven ## 📂 Elke les bevat: @@ -110,68 +113,67 @@ Onze aanbeveling is om [Visual Studio Code](https://code.visualstudio.com/?WT.mc - optionele aanvullende video - quiz voorafgaand aan de les - geschreven les -- voor projectgerichte lessen, stapsgewijze handleidingen om het project te bouwen +- voor projectgebaseerde lessen, stapsgewijze handleidingen om het project te bouwen - kennischecks - een uitdaging -- aanvullende literatuur +- aanvullende lectuur - opdracht -- quiz na de les +- [quiz na de les](https://ff-quizzes.netlify.app/) -> **Een opmerking over quizzen**: Alle quizzen bevinden zich in de Quiz-app-map, in totaal 48 quizzen van elk drie vragen. Ze zijn gelinkt vanuit de lessen en de quiz-app kan lokaal worden uitgevoerd of worden gedeployed naar Azure; volg de instructies in de `quiz-app`-map. Ze worden geleidelijk gelokaliseerd. +> **Een opmerking over quizzen**: Alle quizzen zijn opgenomen in de Quiz-app map, in totaal 48 quizzen van elk drie vragen. Ze zijn beschikbaar [hier](https://ff-quizzes.netlify.app/) en 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 tools van het vak | Leer de basisprincipes achter de meeste programmeertalen en over software die professionele ontwikkelaars helpt bij hun werk | [Introductie tot programmeertalen en tools van het vak](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | 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 | [Introductie tot GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Aan de slag | Toegankelijkheid | Leer de basisprincipes van webtoegankelijkheid | [Basisprincipes van toegankelijkheid](/1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS Basis | JavaScript Datatypes | De basisprincipes van JavaScript-datatypes | [Datatypes](/2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS Basis | Functies en Methodes | Leer over functies en methodes om de logische stroom van een applicatie te beheren | [Functies en Methodes](/2-js-basics/2-functions-methods/README.md) | Jasmine en Christopher | -| 06 | JS Basis | Beslissingen nemen met JS | Leer hoe je voorwaarden in je code maakt met behulp van besluitvormingsmethoden | [Beslissingen nemen](/2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS Basis | Arrays en Lussen | Werk met data met behulp van arrays en lussen in JavaScript | [Arrays en Lussen](/2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML in de praktijk | Bouw de HTML om een online terrarium te maken, met de focus op het bouwen van een lay-out | [Introductie tot HTML](/3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS in de praktijk | Bouw de CSS om het online terrarium te stylen, met de focus op de basisprincipes van CSS, inclusief het responsief maken van de pagina | [Introductie tot CSS](/3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](/3-terrarium/solution/README.md) | JavaScript Closures, DOM-manipulatie | Bouw de JavaScript om het terrarium te laten functioneren als een drag/drop-interface, met de focus op closures en DOM-manipulatie | [JavaScript Closures, DOM-manipulatie](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typingspel](/4-typing-game/solution/README.md) | Bouw een Typingspel | Leer hoe je toetsenbordgebeurtenissen gebruikt om de logica van je JavaScript-app aan te sturen | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Werken met browsers | Leer hoe browsers werken, hun geschiedenis, en hoe je de eerste elementen van een browserextensie opzet | [Over Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Een formulier bouwen, een API aanroepen en variabelen opslaan in lokale opslag | Bouw de JavaScript-elementen van je browserextensie om een API aan te roepen met variabelen die in lokale opslag zijn opgeslagen | [API's, Formulieren en Lokale Opslag](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Achtergrondprocessen in de browser, webprestaties | Gebruik de achtergrondprocessen van de browser om het pictogram van de extensie te beheren; leer over webprestaties en enkele optimalisaties | [Achtergrondtaken en Prestaties](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Space Game](/6-space-game/solution/README.md) | 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 spel | [Introductie tot Geavanceerde Gameontwikkeling](/6-space-game/1-introduction/README.md) | Chris | -| 16 | [Space Game](/6-space-game/solution/README.md) | Tekenen op canvas | Leer over de Canvas API, die wordt gebruikt om elementen op een scherm te tekenen | [Tekenen op Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Space Game](/6-space-game/solution/README.md) | Elementen bewegen op het scherm | Ontdek hoe elementen beweging kunnen krijgen met behulp van cartesiaanse coördinaten en de Canvas API | [Elementen Bewegen](/6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Space Game](/6-space-game/solution/README.md) | Botsingsdetectie | Laat elementen met elkaar botsen en reageren op toetsen, en implementeer een cooldown-functie om de prestaties van het spel te verbeteren | [Botsingsdetectie](/6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Space Game](/6-space-game/solution/README.md) | Score bijhouden | Voer wiskundige berekeningen uit op basis van de status en prestaties van het spel | [Score Bijhouden](/6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Space Game](/6-space-game/solution/README.md) | Het spel beëindigen en opnieuw starten | Leer hoe je het spel beëindigt en opnieuw start, inclusief het opruimen van assets en het resetten van variabelen | [De Eindconditie](/6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Banking App](/7-bank-project/solution/README.md) | HTML-sjablonen en routes in een webapp | Leer hoe je de structuur van een meerpaginawebsite opzet met routing en HTML-sjablonen | [HTML-sjablonen en Routes](/7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Banking App](/7-bank-project/solution/README.md) | Een inlog- en registratieformulier bouwen | Leer hoe je formulieren bouwt en validatieroutines afhandelt | [Formulieren](/7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Banking App](/7-bank-project/solution/README.md) | Methoden voor het ophalen en gebruiken van gegevens | Hoe gegevens in en uit je app stromen, hoe je ze ophaalt, opslaat en verwijdert | [Gegevens](/7-bank-project/3-data/README.md) | Yohan | -| 24 | [Banking App](/7-bank-project/solution/README.md) | Concepten van statusbeheer | Leer hoe je app de status behoudt en hoe je deze programmatisch beheert | [Statusbeheer](/7-bank-project/4-state-management/README.md) | Yohan | +| | Projectnaam | Behandelde Concepten | Leerdoelen | Gelinkte 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 bij hun werk | [Introductie tot Programmeertalen en Tools van het Vak](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Aan de slag | Basisprincipes van GitHub, inclusief samenwerken | Hoe je GitHub gebruikt in je project, hoe je samenwerkt met anderen aan een codebase | [Introductie tot GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Aan de slag | Toegankelijkheid | Leer de basisprincipes van webtoegankelijkheid | [Basisprincipes van Toegankelijkheid](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS Basis | JavaScript Datatypes | De basisprincipes van JavaScript-datatypes | [Datatypes](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS Basis | Functies en Methodes | Leer over functies en methodes om de logische stroom van een applicatie te beheren | [Functies en Methodes](./2-js-basics/2-functions-methods/README.md) | Jasmine en Christopher | +| 06 | JS Basis | Beslissingen maken met JS | Leer hoe je voorwaarden in je code maakt met behulp van besluitvormingsmethoden | [Beslissingen maken](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS Basis | Arrays en Lussen | Werk met gegevens met behulp van arrays en lussen in JavaScript | [Arrays en Lussen](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in de Praktijk | Bouw de HTML om een online terrarium te maken, met de focus op het bouwen van een lay-out | [Introductie tot HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in de Praktijk | Bouw de CSS om het online terrarium te stylen, met de focus op de basisprincipes van CSS, inclusief het responsief maken van de pagina | [Introductie tot CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-manipulatie | Bouw de JavaScript om het terrarium te laten werken als een drag-and-drop interface, met focus op closures en DOM-manipulatie | [JavaScript Closures, DOM-manipulatie](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Typing Game](./4-typing-game/solution/README.md) | Typingspel bouwen | Leer hoe je toetsenbordgebeurtenissen gebruikt om de logica van je JavaScript-app aan te sturen | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Werken met browsers | Leer hoe browsers werken, hun geschiedenis, en hoe je de eerste elementen van een browserextensie opzet | [Over Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Formulieren bouwen, een 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](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 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](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](./6-space-game/solution/README.md) | Geavanceerdere game-ontwikkeling 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 Game-ontwikkeling](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Space Game](./6-space-game/solution/README.md) | Tekenen op canvas | Leer over de Canvas API, die wordt gebruikt om elementen op een scherm te tekenen | [Tekenen op Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](./6-space-game/solution/README.md) | Elementen over het scherm bewegen | Ontdek hoe elementen beweging krijgen met behulp van cartesiaanse coördinaten en de Canvas API | [Elementen Bewegen](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | Botsingsdetectie | Laat elementen botsen en op elkaar reageren met behulp van toetsaanslagen en implementeer een cooldownfunctie voor betere prestaties | [Botsingsdetectie](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Space Game](./6-space-game/solution/README.md) | Score bijhouden | Voer wiskundige berekeningen uit op basis van de status en prestaties van de game | [Score Bijhouden](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Space Game](./6-space-game/solution/README.md) | Het spel beëindigen en opnieuw starten | Leer hoe je het spel beëindigt en opnieuw start, inclusief het opruimen van assets en het resetten van variabelen | [De Eindconditie](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-sjablonen en routes in een webapp | Leer hoe je de structuur van een meerpaginawebsite opzet met behulp van routing en HTML-sjablonen | [HTML-sjablonen en Routes](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Banking App](./7-bank-project/solution/README.md) | Een inlog- en registratieformulier bouwen | Leer hoe je formulieren bouwt en validatieroutines afhandelt | [Formulieren](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banking App](./7-bank-project/solution/README.md) | Methoden voor het ophalen en gebruiken van data | Hoe data in en uit je app stroomt, hoe je het ophaalt, opslaat en verwijdert | [Data](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banking App](./7-bank-project/solution/README.md) | Concepten van state management | Leer hoe je app de staat behoudt en hoe je deze programmeerbaar beheert | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | ## 🏫 Pedagogiek Ons curriculum is ontworpen met twee belangrijke pedagogische principes in gedachten: -* projectmatig leren +* projectgebaseerd leren * frequente quizzen -Het programma leert de basisprincipes van JavaScript, HTML en CSS, evenals de nieuwste tools en technieken die door moderne webontwikkelaars worden gebruikt. Studenten krijgen de kans om praktische ervaring op te doen door een typgame, virtueel terrarium, milieuvriendelijke browserextensie, space-invader-stijl spel en een bankapp voor bedrijven te bouwen. Aan het einde van de serie hebben studenten een solide begrip van webontwikkeling opgedaan. - +Het programma leert de basisprincipes van JavaScript, HTML en CSS, evenals de nieuwste tools en technieken die door hedendaagse webontwikkelaars worden gebruikt. Studenten krijgen de kans om praktische ervaring op te doen door een typingspel, virtueel terrarium, milieuvriendelijke browserextensie, space-invader-achtige game en een bankapp voor bedrijven te bouwen. Aan het einde van de serie hebben studenten een solide begrip van webontwikkeling. -> 🎓 Je kunt de eerste paar lessen in dit curriculum volgen als een [Leerpad](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) op Microsoft Learn! +> 🎓 Je kunt de eerste paar lessen van dit curriculum volgen als een [Leerpad](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) op Microsoft Learn! -Door ervoor te zorgen dat de inhoud aansluit bij projecten, wordt het proces boeiender voor studenten en wordt het begrip van concepten versterkt. We hebben ook verschillende startlessen geschreven over de basisprincipes van JavaScript om concepten te introduceren, gecombineerd met een video uit de "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collectie van videotutorials, waarvan sommige auteurs hebben bijgedragen aan dit curriculum. +Door ervoor te zorgen dat de inhoud aansluit bij projecten, wordt het proces boeiender voor studenten en wordt het begrip van concepten vergroot. We hebben ook enkele starterlessen in JavaScript-basisprincipes geschreven om concepten te introduceren, gecombineerd met een video uit de "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"-collectie van videotutorials, waarvan sommige auteurs hebben bijgedragen aan dit curriculum. -Daarnaast zorgt een laagdrempelige quiz vóór een les ervoor dat de student zich richt op het leren van een onderwerp, terwijl een tweede quiz na de les verdere retentie bevordert. Dit curriculum is ontworpen om flexibel en leuk te zijn en kan in zijn geheel of gedeeltelijk worden gevolgd. De projecten beginnen klein en worden tegen het einde van de 12-weekse cyclus steeds complexer. +Daarnaast zet een laagdrempelige quiz vóór een les de intentie van de student om een onderwerp te leren, terwijl een tweede quiz na de les zorgt voor verdere conceptverankering. Dit curriculum is ontworpen om flexibel en leuk te zijn en kan in zijn geheel of gedeeltelijk worden gevolgd. De projecten beginnen klein en worden steeds complexer tegen het einde van de 12-weekse cyclus. -Hoewel we bewust hebben vermeden JavaScript-frameworks te introduceren om ons te concentreren op de basisvaardigheden die nodig zijn als webontwikkelaar voordat een framework wordt aangenomen, zou een goede volgende stap na het voltooien van dit curriculum zijn om meer te leren over Node.js via een andere collectie video's: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +Hoewel we bewust hebben vermeden om JavaScript-frameworks te introduceren om ons te concentreren op de basisvaardigheden die nodig zijn als webontwikkelaar voordat een framework wordt aangenomen, zou een goede volgende stap na het voltooien van dit curriculum zijn om meer te leren over Node.js via een andere videocollectie: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". -> Bezoek onze [Gedragscode](CODE_OF_CONDUCT.md) en [Bijdragen](CONTRIBUTING.md) richtlijnen. We verwelkomen je constructieve feedback! +> Bezoek onze [Gedragscode](CODE_OF_CONDUCT.md) en [Bijdragen](CONTRIBUTING.md)-richtlijnen. We verwelkomen je constructieve feedback! ## 🧭 Offline toegang -Je kunt deze documentatie offline uitvoeren met behulp van [Docsify](https://docsify.js.org/#/). Fork deze repo, [installeer Docsify](https://docsify.js.org/#/quickstart) op je lokale machine, en typ vervolgens in de hoofdmap van deze repo `docsify serve`. De website wordt geserveerd op poort 3000 op je localhost: `localhost:3000`. +Je kunt deze documentatie offline gebruiken met [Docsify](https://docsify.js.org/#/). Fork deze repo, [installeer Docsify](https://docsify.js.org/#/quickstart) op je lokale machine, en typ vervolgens in de hoofdmap van deze repo `docsify serve`. De website wordt geserveerd op poort 3000 op je localhost: `localhost:3000`. ## 📘 PDF @@ -180,7 +182,7 @@ Een PDF van alle lessen is te vinden [hier](https://microsoft.github.io/Web-Dev- ## 🎒 Andere Cursussen -Ons team produceert andere cursussen! Bekijk: +Ons team produceert ook andere cursussen! Bekijk: - [Generatieve AI voor Beginners](https://aka.ms/genai-beginners) - [Generatieve AI voor Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet) @@ -192,10 +194,10 @@ Ons team produceert andere cursussen! Bekijk: - [Cybersecurity voor Beginners](https://github.com/microsoft/Security-101) - [Webontwikkeling voor Beginners](https://aka.ms/webdev-beginners) - [IoT voor Beginners](https://aka.ms/iot-beginners) -- [XR Ontwikkeling voor Beginners](https://github.com/microsoft/xr-development-for-beginners) +- [XR-ontwikkeling voor Beginners](https://github.com/microsoft/xr-development-for-beginners) - [Mastering GitHub Copilot voor Agentic gebruik](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming) - [Mastering GitHub Copilot voor C#/.NET Ontwikkelaars](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers) -- [Kies Je Eigen Copilot Avontuur](https://github.com/microsoft/CopilotAdventures) +- [Kies je eigen Copilot Avontuur](https://github.com/microsoft/CopilotAdventures) ## Licentie @@ -204,4 +206,4 @@ Deze repository is gelicentieerd onder de MIT-licentie. Zie het [LICENSE](../../ --- **Disclaimer**: -Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling. \ No newline at end of file +Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we ons best doen voor nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. 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. \ No newline at end of file