diff --git a/3-terrarium/translations/README.nl.md b/3-terrarium/translations/README.nl.md new file mode 100644 index 00000000..085f1e9f --- /dev/null +++ b/3-terrarium/translations/README.nl.md @@ -0,0 +1,34 @@ +# Mijn Terrarium: een project om te leren over HTML-, CSS- en DOM-manipulatie met JavaScript 🌵🌱 + +Een kleine codemeditatie met drag and drop. Met een beetje HTML, JS en CSS kunt u een webinterface bouwen, deze opmaken en een interactie toevoegen. + +![mijn terrarium](../images/screenshot_gray.png) + +# Lessen + +1. [Inleiding tot HTML](./1-intro-to-html/README.md) +2. [Inleiding tot CSS](./2-intro-to-css/README.md) +3. [Inleiding tot DOM en JS Sluitingen](./3-intro-to-DOM-and-closures/README.md) + +## Credits + +Geschreven met ♥ ️door [Jen Looper](https://www.twitter.com/jenlooper) + +Het terrarium gemaakt via CSS is geïnspireerd op de glazen pot van Jakub Mandra [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY). + +Het artwork is met de hand getekend door [Jen Looper](http://jenlooper.com) met Procreate. + +## Zet uw terrarium in + +U kunt uw terrarium op internet zetten of publiceren met Azure Static Web Apps. + +1. Fork deze repo + +2. druk op deze knop + +[![Implementeer in Azure knop](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp) + +3. Loop door de wizard om uw app te maken. Zorg ervoor dat u de app-root instelt op `/solution` of de root van uw codebase. Er zit geen API in deze app, dus maakt u geen zorgen om die toe te voegen. Er wordt een .github-map gemaakt in uw geforkte repo die Azure Static Web Apps helpt bij het bouwen van services en het publiceren van uw app naar een nieuwe URL. + + + diff --git a/4-typing-game/translations/README.nl.md b/4-typing-game/translations/README.nl.md new file mode 100644 index 00000000..e45c22a3 --- /dev/null +++ b/4-typing-game/translations/README.nl.md @@ -0,0 +1,30 @@ +# Event-Driven Programming - Bouw een Typspel + +## Inleiding + +Typen is een van de meest onderschatte vaardigheden van de ontwikkelaar. De mogelijkheid om snel gedachten van uw hoofd naar uw editor over te brengen, zorgt ervoor dat creativiteit vrijelijk kan stromen. Een van de beste manieren om te leren is door een spel te spelen! + +> Dus laten we een typspel bouwen! + +Je gaat de JavaScript-, HTML- en CSS-vaardigheden gebruiken die u tot nu toe hebt opgebouwd om een typspel te maken. Het spel zal de speler een willekeurig citaat laten zien (we gebruiken [Sherlock Holmes](https://nl.wikipedia.org/wiki/Sherlock_Holmes) aanhalingstekens) en de tijd hoe lang het duurt voordat de speler het nauwkeurig intypt. U gaat de JavaScript-, HTML- en CSS-vaardigheden gebruiken die u tot nu toe hebt opgebouwd om een typspel te maken. + +![demo](../images/demo.gif) + +## Vereisten + +In deze les wordt ervan uitgegaan dat u bekend bent met de volgende concepten: + +- Tekstinvoer en knopbedieningen maken +- CSS en het instellen van stijlen met behulp van class +- JavaScript-basisprincipes + - Een array maken + - Een willekeurig nummer maken + - De huidige tijd ophalen + +## Les + +[Een typspel maken met behulp van event driven programming](../typing-game/translations/README.it.md) + +## Credits + +Geschreven met ♥ ️door [Christopher Harrison](http://www.twitter.com/geektrainer) diff --git a/5-browser-extension/translations/README.nl.md b/5-browser-extension/translations/README.nl.md new file mode 100644 index 00000000..40ad0080 --- /dev/null +++ b/5-browser-extension/translations/README.nl.md @@ -0,0 +1,28 @@ +# Een browserextensie bouwen + +Het bouwen van browserextensies is een leuke en interessante manier om na te denken over de prestaties van uw apps terwijl u een ander type webitem bouwt. Deze module bevat lessen over hoe browsers werken en hoe u een browserextensie implementeert, hoe u een formulier bouwt, een API aanroept en lokale opslag gebruikt, en hoe u de prestaties van uw website peilt en deze verbetert. + +U bouwt een browserextensie die werkt op Edge, Chrome en Firefox. Deze extensie, die lijkt op een mini-website die is afgestemd op een zeer specifieke taak, controleert de [C02 Signal API](https://www.co2signal.com) voor het elektriciteitsverbruik en de koolstofintensiteit van een bepaalde regio en geeft een lezing over de ecologische voetafdruk van de regio. + +Deze extensie kan door een gebruiker ad-hoc worden genoemd zodra een API-sleutel en regiocode in een formulier zijn ingevoerd om het lokale elektriciteitsverbruik te bepalen en daardoor gegevens te bieden die de elektriciteitsbeslissingen van een gebruiker kunnen beïnvloeden. Het kan bijvoorbeeld de voorkeur hebben om het gebruik van een wasdroger (een koolstofintensieve activiteit) uit te stellen tijdens een periode van hoog elektriciteitsverbruik in uw regio. + +### Onderwerpen + +1. [Over de browser](../1-about-browsers/translations/README.nl.md) +2. [Formulieren en lokale opslag](../2-forms-browsers-local-storage/translations/README.nl.md) +3. [Achtergrondtaken en prestaties](../3-background-tasks-and-performance/translations/README.nl.md) + +### Credits + +![een groene browserextensie](../extension-screenshot.png) + +## Credits + +Het idee voor deze web-koolstoftrigger werd aangedragen door Asim Hussain, hoofd bij Microsoft van het Green Cloud Advocacy-team en auteur van de [Green Principles](https://principles.green/). Het was oorspronkelijk een [websiteproject](https://github.com/jlooper/green). + +De structuur van de browserextensie werd beïnvloed door [de COVID-extensie van Adebola Adeniran](https://github.com/onedebos/covtension). + +Het concept achter het 'punt'-pictogramsysteem werd gesuggereerd door de pictogramstructuur van de [Energy Lollipop](https://energylollipop.com/) browserextensie voor Californische emissies. + +Deze lessen zijn geschreven met ♥ door [Jen Looper](https://www.twitter.com/jenlooper) + diff --git a/6-space-game/translations/README.nl.md b/6-space-game/translations/README.nl.md new file mode 100644 index 00000000..b884533b --- /dev/null +++ b/6-space-game/translations/README.nl.md @@ -0,0 +1,31 @@ +# Bouw een Ruimtegame + +Een ruimtegame om meer geavanceerde JavaScript-basisprincipes te leren + +In deze les leert u hoe u uw eigen ruimtegame kunt bouwen. Als u ooit het spel "Space Invaders" hebt gespeeld, heeft dit spel hetzelfde idee: een ruimteschip besturen en schieten op monsters die van boven naar beneden komen. Hier is hoe het voltooide spel eruit zal zien: + +![Voltooid spel](../images/pewpew.gif) + +In deze zes lessen leert u het volgende: + +- **Werk** met het Canvas-element om dingen op een scherm te tekenen +- **Begrijp** het cartesische coördinatensysteem +- **Leer** het Pub-Sub-patroon om een degelijke game-architectuur te creëren die gemakkelijker te onderhouden en uit te breiden is +- **Maak gebruik van** Async/Await om gamebronnen te laden +- **Behandel** toetsenbordgebeurtenissen + +## Overzicht + +- Theorie + - [Inleiding tot het bouwen van spellen met JavaScript](../1-introduction/translations/README.md) +- Praktijk + - [Tekenen op canvas](../2-drawing-to-canvas/translations/README.md) + - [Elementen over het scherm laten bewegen](../3-moving-elements-around/translations/README.md) + - [Botsingsdetectie](../4-collision-detection/translations/README.md) + - [Score bijhouden](../5-keeping-score/translations/README.md) + - [Het spel beëindigen en opnieuw starten](../6-end-condition/translations/README.md) + +## Credits + +De middelen die hiervoor zijn gebruikt, waren afkomstig van https://www.kenney.nl/. +Als u van het bouwen van games houdt, zijn dit enkele zeer goede activa, veel is gratis en sommige worden betaald. diff --git a/7-bank-project/translations/README.nl.md b/7-bank-project/translations/README.nl.md new file mode 100644 index 00000000..024091e7 --- /dev/null +++ b/7-bank-project/translations/README.nl.md @@ -0,0 +1,21 @@ +# :dollar: Bouw een bank + +In dit project leert u hoe u een fictieve bank bouwt. Deze lessen bevatten instructies voor het opmaken van een web-app en het aanbieden van routes, het bouwen van formulieren, het beheren van de staat en het ophalen van gegevens uit een API waaruit u de gegevens van de bank kunt ophalen. + +| ![Scherm1](../images/screen1.png) | ![Scherm2](../images/screen2.png) | +|--------------------------------|--------------------------------| + +## Lessen + +1. [HTML-sjablonen en routes in een webapp](../1-template-route/translations/README.nl.md) +2. [Bouw een aanmeldings- en registratieformulier](../2-forms/translations/README.nl.md) +3. [Methoden voor het ophalen en gebruiken van gegevens](../3-data/translations/README.nl.md) +4. [Concepten van staatsbeheer](../4-state-management/translations/README.nl.md) + +### Credits + +Deze lessen zijn geschreven met :hearts: door [Yohan Lasorsa](https://twitter.com/sinedied). + +Als u geïnteresseerd bent om te leren hoe u de [server API](../api/translations/README.nl.md) bouwt die in deze lessen wordt gebruikt, kunt u [deze reeks video's](https://aka.ms/NodeBeginner) volgen (in het bijzonder video's 17 t/m 21). + +U kunt ook een kijkje nemen op [deze interactieve Leer-tutorial](https://aka.ms/learn/express-api). \ No newline at end of file