32 KiB

Raw Blame History

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. Verhoog je vaardigheden en optimaliseer je kennisbehoud met onze effectieve projectgerichte aanpak. Begin vandaag nog met je codeerreis!

Word lid van de Azure AI Foundry Discord Community

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

Fork de Repository: Klik
Clone de Repository: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Word lid van de Azure AI Foundry Discord en ontmoet experts en mede-ontwikkelaars

🌐 Meertalige Ondersteuning

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

Als je extra vertalingen wilt, staan de ondersteunde talen hier

🧑‍🎓 Ben je een student?

Bezoek de Student Hub-pagina 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 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 die je kunt voltooien met GitHub Copilot en Agent-modus. Als je Agent-modus nog niet hebt gebruikt, het kan 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-assistentproject 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.
Interactie met historische personages 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 van onderwerpen zoals:

Prompting en prompt engineering
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, begin voor elke les met een quiz voorafgaand aan de les en ga verder met het lezen van het lesmateriaal, het voltooien van de verschillende activiteiten en controleer je begrip met de quiz na de les.

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

Om je opleiding verder te ontwikkelen, raden we aan om Microsoft Learn te verkennen voor aanvullende studiematerialen.

📋 Je omgeving instellen

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

Maak je repository aan

Om je werk gemakkelijk op te slaan, raden we aan 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:

Fork de Repository: Klik op de knop "Fork" rechtsboven op deze pagina.
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 op de knop Code en selecteer Open with Codespaces. Dit maakt een nieuwe Codespace voor je om in te 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, zal je door verschillende opties voor elk van deze tools leiden, zodat je kunt kiezen wat het beste voor je werkt.

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

Clone je repository naar je computer. Dit kun je doen door op de knop Code 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 net hebt gekopieerd:
```
git clone <your-repository-url>
```
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 net hebt gekloond.

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 sketchnote
optionele aanvullende video
opwarmquiz voorafgaand aan de les
geschreven les
voor projectgebaseerde lessen, stapsgewijze handleidingen om het project te bouwen
kennischecks
een uitdaging
aanvullende literatuur
opdracht
quiz na de les

Een opmerking over quizzen: Alle quizzen zijn opgenomen in de Quiz-app map, in totaal 48 quizzen met elk drie vragen. Ze zijn beschikbaar hier en de quiz-app kan lokaal worden uitgevoerd of worden gedeployed naar Azure; volg de instructies in de quiz-app map.

🗃️ Lessen

	Projectnaam	Geleerde 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 hun werk te doen	Introductie tot programmeertalen en tools van het vak	Jasmine
02	Aan de slag	Basisprincipes van GitHub, inclusief werken in een team	Hoe GitHub te gebruiken in je project, hoe samen te werken met anderen aan een codebase	Introductie tot GitHub	Floor
03	Aan de slag	Toegankelijkheid	Leer de basisprincipes van webtoegankelijkheid	Basisprincipes van toegankelijkheid	Christopher
04	JS Basisprincipes	JavaScript Datatypes	De basisprincipes van JavaScript datatypes	Datatypes	Jasmine
05	JS Basisprincipes	Functies en Methoden	Leer over functies en methoden om de logische stroom van een applicatie te beheren	Functies en Methoden	Jasmine en Christopher
06	JS Basisprincipes	Beslissingen nemen met JS	Leer hoe je voorwaarden in je code kunt maken 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 maken, met de focus op het bouwen van een layout	Introductie tot HTML	Jen
09	Terrarium	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	Jen
10	Terrarium	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	Jen
11	Typingspel	Bouw een Typingspel	Leer hoe je toetsenbordgebeurtenissen kunt gebruiken om de logica van je JavaScript-app aan te sturen	Event-Driven Programming	Christopher
12	Groene Browserextensie	Werken met Browsers	Leer hoe browsers werken, hun geschiedenis, en hoe je de eerste elementen van een browserextensie kunt opzetten	Over Browsers	Jen
13	Groene Browserextensie	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 opgeslagen in lokale opslag	API's, Formulieren, en Lokale Opslag	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 enkele optimalisaties om te maken	Achtergrondtaken en Prestaties	Jen
15	Ruimtespel	Meer Geavanceerde Spelontwikkeling met JavaScript	Leer over Inheritance met zowel Classes als Composition en het Pub/Sub patroon, ter voorbereiding op het bouwen van een spel	Introductie tot Geavanceerde Spelontwikkeling	Chris
16	Ruimtespel	Tekenen op canvas	Leer over de Canvas API, gebruikt om elementen op een scherm te tekenen	Tekenen op Canvas	Chris
17	Ruimtespel	Elementen bewegen over het scherm	Ontdek hoe elementen beweging kunnen krijgen met behulp van cartesiaanse coördinaten en de Canvas API	Elementen Bewegen	Chris
18	Ruimtespel	Botsingsdetectie	Laat elementen botsen en op elkaar reageren met behulp van toetsen en zorg voor een cooldown functie om de prestaties van het spel te garanderen	Botsingsdetectie	Chris
19	Ruimtespel	Score bijhouden	Voer wiskundige berekeningen uit op basis van de status en prestaties van het spel	Score Bijhouden	Chris
20	Ruimtespel	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 variabele waarden	De Eindconditie	Chris
21	Bankapp	HTML Templates en Routes in een Webapp	Leer hoe je de structuur van een meerpagina website kunt opzetten met routing en HTML templates	HTML Templates 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 om Data op te halen en te gebruiken	Hoe data in en uit je app stroomt, hoe je het kunt ophalen, opslaan en verwijderen	Data	Yohan
24	Bankapp	Concepten van State Management	Leer hoe je app de staat behoudt en hoe je deze programmatisch kunt beheren	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

Ons 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 door hedendaagse webontwikkelaars worden gebruikt. Studenten krijgen de kans om praktische ervaring op te doen door een typingspel, virtueel terrarium, milieuvriendelijke browserextensie, ruimte-invader-stijl spel en een bankapp voor bedrijven te bouwen. Aan het einde van de serie hebben studenten een solide begrip van webontwikkeling opgedaan.

🎓 Je kunt de eerste paar 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 begrip van concepten versterkt. We hebben ook enkele startlessen in JavaScript-basisprincipes geschreven om concepten te introduceren, gekoppeld aan een video uit de "Beginners Series to: JavaScript" collectie van videotutorials, waarvan sommige auteurs hebben bijgedragen aan dit curriculum.

Daarnaast zorgt een laagdrempelige quiz voorafgaand aan een les ervoor dat de student zich richt op het leren van een onderwerp, terwijl een tweede quiz na de les verdere retentie garandeert. 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.

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".

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

🧭 Offline toegang

Je kunt deze documentatie offline uitvoeren met behulp van Docsify. Fork deze repo, installeer Docsify op je lokale machine, en typ vervolgens 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 andere cursussen! Bekijk:

Azure / Edge / MCP / Agents

Generatieve AI Serie

Kern Leren

Copilot Serie

Hulp krijgen

Als je vastloopt of vragen hebt over het bouwen van AI-apps, sluit je dan aan bij medeleerlingen en ervaren ontwikkelaars in discussies over MCP. Het is een ondersteunende community 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 we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde 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.

32 KiB Raw Blame History