[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
# Web-kehitys aloittelijoille - Opintokokonaisuus
[](https://discord.com/invite/ByRwuEEgH4)
Opi web-kehityksen perusteet Microsoft Cloud Advocatesin 12 viikon kattavalla kurssilla. Jokainen 24 oppitunnista käsittelee JavaScriptiä, CSS:ää ja HTML:ää käytännön projektien, kuten terraarioiden, selainlaajennusten ja avaruuspelien, kautta. Osallistu visailuihin, keskusteluihin ja käytännön tehtäviin. Paranna taitojasi ja optimoi oppimisesi tehokkaalla projektipohjaisella pedagogiikalla. Aloita koodausmatkasi jo tänään!
Seuraa näitä ohjeita, jotta pääset alkuun näiden resurssien käytössä:
3. [**Liity Azure AI Foundry Discordiin ja tapaa asiantuntijoita sekä muita kehittäjiä**](https://discord.com/invite/ByRwuEEgH4)
# Web-kehitys aloittelijoille - Opetussuunnitelma
Opi web-kehityksen perusteet Microsoft Cloud Advocatesin 12 viikon kattavalla kurssilla. Jokainen 24 oppitunnista käsittelee JavaScriptiä, CSS:ää ja HTML:ää käytännön projektien, kuten terraarioiden, selainlaajennusten ja avaruuspelien, kautta. Osallistu visailuihin, keskusteluihin ja käytännön tehtäviin. Paranna taitojasi ja optimoi oppimisesi tehokkaalla projektipohjaisella pedagogiikallamme. Aloita koodausmatkasi jo tänään!
#### 🧑🎓 _Oletko opiskelija?_
#### 🧑🎓 _Oletko opiskelija?_
Käy [**Student Hub -sivulla**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), josta löydät aloittelijoille suunnattuja resursseja, opiskelijapakkauksia ja jopa tapoja saada ilmainen sertifikaattivoucher. Tämä on sivu, jonka haluat tallentaa kirjanmerkkeihin ja tarkistaa säännöllisesti, sillä sisältöä vaihdetaan kuukausittain.
Vieraile [**Student Hub -sivulla**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), josta löydät aloittelijaresursseja, opiskelijapakkauksia ja jopa tapoja saada ilmainen sertifikaattivoucher. Tämä on sivu, jonka haluat lisätä kirjanmerkkeihin ja tarkistaa säännöllisesti, sillä vaihdamme sisältöä kuukausittain.
### 📣 Ilmoitus - _Uusi opintokokonaisuus_ Generatiivisesta tekoälystä JavaScriptille on juuri julkaistu
### 📣 Ilmoitus - _Uusi opetussuunnitelma_ Generatiivisesta AI:sta JavaScriptille on juuri julkaistu
Älä missaa uutta Generatiivisen tekoälyn opintokokonaisuutta!
Älä missaa uutta Generatiivisen AI:n opetussuunnitelmaamme!
Käy osoitteessa [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) aloittaaksesi!
> **Opettajat**, olemme [lisänneet joitakin ehdotuksia](for-teachers.md) siitä, miten tätä opintokokonaisuutta voi käyttää. Kuulemme mielellämme palautettanne [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Opettajat**, olemme [lisänneet joitakin ehdotuksia](for-teachers.md) siitä, miten käyttää tätä opetussuunnitelmaa. Haluaisimme kuulla palautettanne [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Oppijat](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, aloita jokainen oppitunti ennakkovisalla ja jatka lukemalla oppituntimateriaali, suorittamalla erilaisia aktiviteetteja ja tarkistamalla ymmärryksesi jälkivisalla.
**[Oppijat](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, aloita jokainen oppitunti ennakkovisalla ja jatka lukemalla oppituntimateriaali, suorittamalla erilaisia aktiviteetteja ja tarkista ymmärryksesi jälkivisalla.
Parantaaksesi oppimiskokemustasi, yhdistä voimasi muiden kanssa ja työskentele projekteissa yhdessä! Keskustelut ovat tervetulleita [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), jossa moderaattoritiimimme vastaa kysymyksiisi.
Parantaaksesi oppimiskokemustasi, yhdistä voimasi muiden kanssa ja työskentele projekteissa yhdessä! Keskusteluja kannustetaan [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), jossa moderaattoritiimimme vastaa kysymyksiisi.
Lisäopiskelua varten suosittelemme tutustumaan [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) -sivustoon, josta löydät lisämateriaaleja.
Tämä opintokokonaisuus sisältää valmiin kehitysympäristön! Aloittaessasi voit valita, haluatko käyttää opintokokonaisuutta [Codespacessa](https://github.com/features/codespaces/) (_selaimen kautta, ei asennuksia_) vai paikallisesti tietokoneellasi tekstieditorilla, kuten [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Tämä opetussuunnitelma sisältää valmiin kehitysympäristön! Aloittaessasi voit valita, haluatko käyttää opetussuunnitelmaa [Codespacessa](https://github.com/features/codespaces/) (_selaimen kautta, ei asennuksia tarvita_) vai paikallisesti tietokoneellasi tekstieditorilla, kuten [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Luo oma repositoriosi
#### Luo oma repositorio
Jotta voit helposti tallentaa työsi, suosittelemme luomaan oman kopion tästä repositoriosta. Voit tehdä tämän napsauttamalla **Use this template** -painiketta sivun yläosassa. Tämä luo uuden repositorion GitHub-tilillesi opintokokonaisuuden kopion kanssa.
Jotta voit helposti tallentaa työsi, suosittelemme luomaan oman kopion tästä repositoriosta. Voit tehdä tämän klikkaamalla **Käytä tätä mallia** -painiketta sivun yläosassa. Tämä luo uuden repositorion GitHub-tilillesi kopiona opetussuunnitelmasta.
Seuraa näitä ohjeita:
Seuraa näitä ohjeita:
1. **Haarauta repositorio**: Napsauta "Fork"-painiketta sivun oikeassa yläkulmassa.
1. **Haarauta repositorio**: Klikkaa "Fork"-painiketta tämän sivun oikeassa yläkulmassa.
Jos haluat suorittaa opintokokonaisuuden paikallisesti tietokoneellasi, tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, [Johdatus ohjelmointikieliin ja työkaluihin](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), opastaa sinut eri vaihtoehtojen läpi, jotta voit valita itsellesi parhaiten sopivat työkalut.
Jos haluat suorittaa opetussuunnitelman paikallisesti tietokoneellasi, tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, [Johdatus ohjelmointikieliin ja työkaluihin](../../1-getting-started-lessons/1-intro-to-programming-languages), opastaa sinut eri vaihtoehtojen läpi, jotta voit valita itsellesi parhaiten sopivat työkalut.
Suosituksemme on käyttää [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) -editoria, jossa on myös sisäänrakennettu [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Voit ladata Visual Studio Coden [täältä](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Suosituksemme on käyttää [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) -editoria, jossa on myös sisäänrakennettu [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Voit ladata Visual Studio Coden [täältä](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Kloonaa repositoriosi tietokoneellesi. Voit tehdä tämän napsauttamalla **Code**-painiketta ja kopioimalla URL-osoitteen:
1. Kloonaa repositorio tietokoneellesi. Voit tehdä tämän klikkaamalla **Koodi**-painiketta ja kopioimalla URL-osoitteen:
Avaa sitten [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Codessa](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ja suorita seuraava komento, korvaten `<your-repository-url>` juuri kopioimallasi URL-osoitteella:
Avaa sitten [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Codessa](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ja suorita seuraava komento, korvaten `<your-repository-url>` juuri kopioimallasi URL-osoitteella:
@ -97,7 +100,7 @@ Suosituksemme on käyttää [Visual Studio Code](https://code.visualstudio.com/?
git clone <your-repository-url>
git clone <your-repository-url>
```
```
2. Avaa kansio Visual Studio Codessa. Voit tehdä tämän napsauttamalla **File** > **Open Folder** ja valitsemalla juuri kloonaamasi kansion.
2. Avaa kansio Visual Studio Codessa. Voit tehdä tämän klikkaamalla **Tiedosto** > **Avaa kansio** ja valitsemalla juuri kloonaamasi kansion.
> Suositellut Visual Studio Code -laajennukset:
> Suositellut Visual Studio Code -laajennukset:
>
>
@ -115,63 +118,62 @@ Suosituksemme on käyttää [Visual Studio Code](https://code.visualstudio.com/?
- haaste
- haaste
- lisälukemista
- lisälukemista
- tehtävä
- tehtävä
- jälkivisa
- [jälkivisa](https://ff-quizzes.netlify.app/)
> **Huomio visoista**: Kaikki visat löytyvät Quiz-app-kansiosta, yhteensä 48 visaa, joissa on kolme kysymystä kussakin. Ne on linkitetty oppitunneista, ja visasovelluksen voi suorittaa paikallisesti tai julkaista Azureen; seuraa ohjeita `quiz-app`-kansiossa. Visat lokalisoidaan vähitellen.
> **Huomio visoista**: Kaikki visat löytyvät Quiz-app-kansiosta, yhteensä 48 visaa, joissa on kolme kysymystä kussakin. Ne ovat saatavilla [täällä](https://ff-quizzes.netlify.app/), ja visailusovelluksen voi suorittaa paikallisesti tai julkaista Azureen; seuraa ohjeita `quiz-app`-kansiossa.
## 🗃️ Oppitunnit
## 🗃️ Oppitunnit
| | Projektin nimi | Opetettavat käsitteet | Oppimistavoitteet | Linkitetty oppitunti | Tekijä |
| | Projektin nimi | Opetettavat käsitteet | Oppimistavoitteet | Linkitetty oppitunti | Tekijä |
| 01 | Aloittaminen | Johdatus ohjelmointiin ja työkaluihin | Opi ohjelmointikielten perusperiaatteet ja ohjelmistoista, jotka auttavat ammattilaisia työssään | [Johdatus ohjelmointikieliin ja työkaluihin](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 01 | Aloittaminen | Johdatus ohjelmointiin ja työkaluihin | Opi ohjelmointikielten perusperiaatteet ja ohjelmistot, jotka auttavat ammattilaiskehittäjiä työssään | [Johdatus ohjelmointikieliin ja työkaluihin](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Aloittaminen | GitHubin perusteet, sisältää tiimityöskentelyn | Kuinka käyttää GitHubia projektissasi ja tehdä yhteistyötä muiden kanssa koodipohjassa | [Johdatus GitHubiin](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 02 | Aloittaminen | GitHubin perusteet, sisältää tiimityöskentelyn | Kuinka käyttää GitHubia projektissasi, kuinka tehdä yhteistyötä muiden kanssa koodipohjassa | [Johdatus GitHubiin](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 05 | JS-perusteet | Funktiot ja metodit | Opi funktioista ja metodeista, jotka hallitsevat sovelluksen logiikkaa | [Funktiot ja metodit](/2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher |
| 05 | JS Perusteet | Funktiot ja metodit | Opi funktioista ja metodeista sovelluksen logiikan hallintaan | [Funktiot ja metodit](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher |
| 06 | JS-perusteet | Päätöksenteko JS:llä | Opi luomaan ehtoja koodissasi päätöksentekomenetelmien avulla | [Päätöksenteko](/2-js-basics/3-making-decisions/README.md) | Jasmine |
| 06 | JS Perusteet | Päätöksenteko JS:llä | Opi luomaan ehtoja koodissasi päätöksentekomenetelmien avulla | [Päätöksenteko](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS-perusteet | Taulukot ja silmukat | Työskentele datan kanssa JavaScriptin taulukoiden ja silmukoiden avulla | [Taulukot ja silmukat](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 07 | JS Perusteet | Taulukot ja silmukat | Työskentele datan kanssa JavaScriptin taulukoiden ja silmukoiden avulla | [Taulukot ja silmukat](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terraario](/3-terrarium/solution/README.md) | HTML käytännössä | Rakenna HTML luodaksesi online-terraarion, keskittyen ulkoasun rakentamiseen | [Johdatus HTML:ään](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 08 | [Terraario](./3-terrarium/solution/README.md) | HTML käytännössä | Rakenna HTML luodaksesi online-terraarion, keskittyen layoutin rakentamiseen | [Johdatus HTML:ään](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terraario](/3-terrarium/solution/README.md) | CSS käytännössä | Rakenna CSS tyylitelläksesi online-terraarion, keskittyen CSS:n perusteisiin, mukaan lukien sivun responsiivisuus | [Johdatus CSS:ään](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 09 | [Terraario](./3-terrarium/solution/README.md) | CSS käytännössä | Rakenna CSS tyylittääksesi online-terraarion, keskittyen CSS:n perusteisiin, mukaan lukien sivun responsiivisuus | [Johdatus CSS:ään](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terraario](/3-terrarium/solution/README.md) | JavaScriptin sulkeet, DOM-manipulaatio | Rakenna JavaScript, joka tekee terraariosta toimivan drag/drop-käyttöliittymän, keskittyen sulkeisiin ja DOM-manipulaatioon | [JavaScriptin sulkeet, DOM-manipulaatio](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript-sulkeumat, DOM-manipulaatio | Rakenna JavaScript, joka tekee terrariumista vedä ja pudota -käyttöliittymän, keskittyen sulkeumiin ja DOM-manipulaatioon | [JavaScript-sulkeumat, DOM-manipulaatio](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Kirjoituspeli](/4-typing-game/solution/README.md) | Rakenna kirjoituspeli | Opi käyttämään näppäimistötapahtumia JavaScript-sovelluksesi logiikan ohjaamiseen| [Tapahtumapohjainen ohjelmointi](/4-typing-game/typing-game/README.md)| Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Työskentely selainten kanssa| Opi, miten selaimet toimivat, niiden historia ja miten luoda ensimmäiset elementit selainlaajennukselle | [Tietoa selaimista](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Työskentely selainten kanssa | Opi, miten selaimet toimivat, niiden historia ja miten luoda ensimmäiset elementit selainlaajennukselle | [Tietoa selaimista](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Lomakkeen rakentaminen, API:n kutsuminen ja muuttujien tallentaminen paikalliseen muistiin | Rakenna selainlaajennuksesi JavaScript-elementit kutsumaan API:a käyttäen paikalliseen muistiin tallennettuja muuttujia| [API:t, lomakkeet ja paikallinen muisti](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Lomakkeen rakentaminen, API:n kutsuminen ja muuttujien tallentaminen paikalliseen muistiin | Rakenna JavaScript-elementit selainlaajennuksellesi kutsumaan API:a käyttäen paikalliseen muistiin tallennettuja muuttujia | [API:t, lomakkeet ja paikallinen muisti](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Taustaprosessit selaimessa, verkkosuorituskyky | Käytä selaimen taustaprosesseja hallitsemaan laajennuksen kuvaketta; opi verkkosuorituskyvystä ja optimoinneista sen parantamiseksi | [Taustatehtävät ja suorituskyky](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Taustaprosessit selaimessa, verkkosuorituskyky | Käytä selaimen taustaprosesseja hallitsemaan laajennuksen kuvaketta; opi verkkosuorituskyvystä ja optimoinneista | [Taustatehtävät ja suorituskyky](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution/README.md) | Edistyneempi pelinkehitys JavaScriptillä | Opi perinnästä sekä luokkien että koostamisen avulla ja Pub/Sub-mallista, valmistautuessasi pelin rakentamiseen | [Johdatus edistyneeseen pelinkehitykseen](/6-space-game/1-introduction/README.md) | Chris |
| 15 | [Space Game](./6-space-game/solution/README.md) | Edistyneempi pelinkehitys JavaScriptillä | Opi perinnöstä käyttäen sekä luokkia että koostumusta sekä Pub/Sub-mallia pelin rakentamisen valmistelussa | [Johdatus edistyneeseen pelinkehitykseen](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution/README.md) | Piirtäminen canvasille | Opi Canvas API:sta, jota käytetään elementtien piirtämiseen näytölle| [Piirtäminen canvasille](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Piirtäminen canvasille | Opi Canvas API:sta, jota käytetään elementtien piirtämiseen näytölle | [Piirtäminen canvasille](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution/README.md) | Elementtien liikuttaminen näytöllä | Tutustu siihen, miten elementit voivat saada liikettä koordinaatiston ja Canvas API:n avulla | [Elementtien liikuttaminen](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Elementtien liikuttaminen näytöllä | Tutustu siihen, miten elementit voivat liikkua käyttäen koordinaatistoa ja Canvas API:a | [Elementtien liikuttaminen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution/README.md) | Törmäysten tunnistaminen | Tee elementeistä törmääviä ja reagoivia toisiinsa näppäinpainallusten avulla ja tarjoa viivefunktio pelin suorituskyvyn varmistamiseksi | [Törmäysten tunnistaminen](/6-space-game/4-collision-detection/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Törmäysten tunnistus | Tee elementeistä törmääviä ja reagoivia toisiinsa näppäinpainallusten avulla ja lisää viivefunktio pelin suorituskyvyn varmistamiseksi | [Törmäysten tunnistus](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution/README.md) | Pisteiden laskeminen | Suorita matemaattisia laskelmia pelin tilan ja suorituskyvyn perusteella| [Pisteiden laskeminen](/6-space-game/5-keeping-score/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Pisteiden laskeminen | Suorita matemaattisia laskelmia pelin tilan ja suorituskyvyn perusteella | [Pisteiden laskeminen](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution/README.md) | Pelin lopettaminen ja uudelleenkäynnistäminen | Opi pelin lopettamisesta ja uudelleenkäynnistämisestä, mukaan lukien resurssien siivoaminen ja muuttujien arvojen palauttaminen | [Lopetusehto](/6-space-game/6-end-condition/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Pelin lopettaminen ja uudelleenkäynnistys | Opi pelin lopettamisesta ja uudelleenkäynnistämisestä, mukaan lukien resurssien siivoaminen ja muuttujien arvon palauttaminen | [Lopetusehto](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | HTML-mallipohjat ja reitit verkkosovelluksessa| Opi luomaan monisivuisen verkkosivuston arkkitehtuurin perusta reitityksen ja HTML-mallipohjien avulla | [HTML-mallipohjat ja reitit](/7-bank-project/1-template-route/README.md) | Yohan |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-mallit ja reitit verkkosovelluksessa | Opi luomaan monisivuisen verkkosivuston arkkitehtuurin perusta käyttäen reititystä ja HTML-malleja | [HTML-mallit ja reitit](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | Kirjautumis- ja rekisteröintilomakkeen rakentaminen | Opi lomakkeiden rakentamisesta ja validointirutiinien käsittelystä | [Lomakkeet](/7-bank-project/2-forms/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Kirjautumis- ja rekisteröintilomakkeen rakentaminen | Opi lomakkeiden rakentamisesta ja validointirutiinien käsittelystä | [Lomakkeet](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | Tiedon hakemisen ja käyttämisen menetelmät | Miten tieto kulkee sovelluksessasi, miten sitä haetaan, tallennetaan ja hävitetään | [Tiedot](/7-bank-project/3-data/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Tiedon hakemisen ja käytön menetelmät | Miten tieto kulkee sovelluksesi sisään ja ulos, miten sitä haetaan, tallennetaan ja hävitetään | [Tiedot](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | Tilanhallinnan käsitteet | Opi, miten sovelluksesi säilyttää tilan ja miten sitä hallitaan ohjelmallisesti| [Tilanhallinta](/7-bank-project/4-state-management/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Tilanhallinnan käsitteet | Opi, miten sovelluksesi säilyttää tilan ja miten sitä hallitaan ohjelmallisesti | [Tilanhallinta](./7-bank-project/4-state-management/README.md) | Yohan |
## 🏫 Pedagogiikka
## 🏫 Pedagogiikka
Opetussuunnitelmamme on suunniteltu kahden keskeisen pedagogisen periaatteen mukaisesti:
Opetussuunnitelmamme on suunniteltu kahden keskeisen pedagogisen periaatteen mukaisesti:
* projektipohjainen oppiminen
* projektipohjainen oppiminen
* säännölliset tietovisat
* säännölliset kyselyt
Ohjelma opettaa JavaScriptin, HTML:n ja CSS:n perusteet sekä uusimmat työkalut ja tekniikat, joita nykypäivän web-kehittäjät käyttävät. Opiskelijat saavat mahdollisuuden kehittää käytännön kokemusta rakentamalla kirjoituspelin, virtuaalisen terraarion, ympäristöystävällisen selainlaajennuksen, avaruuspelin ja yrityksille suunnatun pankkisovelluksen. Sarjan lopussa opiskelijat ovat saavuttaneet vankan ymmärryksen web-kehityksestä.
Ohjelma opettaa JavaScriptin, HTML:n ja CSS:n perusteet sekä uusimmat työkalut ja tekniikat, joita nykypäivän web-kehittäjät käyttävät. Opiskelijat saavat käytännön kokemusta rakentamalla kirjoituspelin, virtuaalisen terrariumin, ympäristöystävällisen selainlaajennuksen, avaruuspelin ja yrityksille suunnatun pankkisovelluksen. Sarjan lopussa opiskelijoilla on vankka ymmärrys web-kehityksestä.
> 🎓 Voit ottaa tämän opetussuunnitelman ensimmäiset oppitunnit [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) -muodossa Microsoft Learnissa!
> 🎓 Voit ottaa tämän opetussuunnitelman ensimmäiset oppitunnit [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) -muodossa Microsoft Learnissa!
Varmistamalla, että sisältö liittyy projekteihin, prosessi muuttuu opiskelijoille kiinnostavammaksi ja käsitteiden muistaminen paranee. Kirjoitimme myös useita aloitusoppitunteja JavaScriptin perusteista käsitteiden esittelemiseksi, yhdistettynä videoon "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" -videotutoriaalikokoelmasta, joiden tekijät osallistuivat tämän opetussuunnitelman laatimiseen.
Varmistamalla, että sisältö liittyy projekteihin, prosessi on opiskelijoille kiinnostavampi ja käsitteiden muistaminen paranee. Kirjoitimme myös useita JavaScriptin perusteisiin liittyviä aloitusoppitunteja käsitteiden esittelemiseksi, yhdistettynä videoon "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" -videotutoriaalien kokoelmasta, joiden tekijät osallistuivat tämän opetussuunnitelman luomiseen.
Lisäksi matalan kynnyksen tietovisa ennen oppituntia suuntaa opiskelijan huomion aiheen oppimiseen, kun taas toinen tietovisa oppitunnin jälkeen varmistaa käsitteiden paremman muistamisen. Tämä opetussuunnitelma on suunniteltu joustavaksi ja hauskaksi, ja sen voi suorittaa kokonaan tai osittain. Projektit alkavat pienistä ja muuttuvat yhä monimutkaisemmiksi 12 viikon jakson loppuun mennessä.
Lisäksi matalan kynnyksen kysely ennen oppituntia ohjaa opiskelijan huomion oppimaan aihetta, kun taas toinen kysely oppitunnin jälkeen varmistaa paremman muistamisen. Tämä opetussuunnitelma on suunniteltu joustavaksi ja hauskaksi, ja sen voi suorittaa kokonaan tai osittain. Projektit alkavat pienistä ja muuttuvat yhä monimutkaisemmiksi 12 viikon jakson loppuun mennessä.
Vaikka olemme tarkoituksella välttäneet JavaScript-kehysten esittelyä keskittyäksemme web-kehittäjän perustaitoihin ennen kehysten käyttöönottoa, hyvä seuraava askel tämän opetussuunnitelman suorittamisen jälkeen olisi Node.js:n opiskelu toisen videokokoelman avulla: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Vaikka olemme tarkoituksella välttäneet JavaScript-kehysten esittelyä keskittyäksemme web-kehittäjän perusosaamiseen ennen kehysten käyttöönottoa, hyvä seuraava askel tämän opetussuunnitelman suorittamisen jälkeen olisi Node.js:n opiskelu toisen videokokoelman avulla: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Tutustu [Code of Conduct](CODE_OF_CONDUCT.md) ja [Contributing](CONTRIBUTING.md) -ohjeisiin. Otamme mielellämme vastaan rakentavaa palautettasi!
> Tutustu [Code of Conduct](CODE_OF_CONDUCT.md) ja [Contributing](CONTRIBUTING.md) -ohjeisiin. Otamme mielellämme vastaan rakentavaa palautettasi!
## 🧭 Offline-käyttö
## 🧭 Offline-käyttö
Voit käyttää tätä dokumentaatiota offline-tilassa käyttämällä [Docsify](https://docsify.js.org/#/). Haarauta tämä repo, [asenna Docsify](https://docsify.js.org/#/quickstart) paikalliselle koneellesi ja kirjoita tämän repon juurikansiossa `docsify serve`. Verkkosivusto palvelee portissa 3000 paikallisessa isännässäsi: `localhost:3000`.
Voit käyttää tätä dokumentaatiota offline-tilassa käyttämällä [Docsify](https://docsify.js.org/#/). Haaroita tämä repo, [asenna Docsify](https://docsify.js.org/#/quickstart) paikalliselle koneellesi ja kirjoita tämän repon juurikansiossa `docsify serve`. Verkkosivusto palvelee portissa 3000 paikallisessa isännässäsi: `localhost:3000`.
## 📘 PDF
## 📘 PDF
@ -180,7 +182,7 @@ Kaikkien oppituntien PDF löytyy [täältä](https://microsoft.github.io/Web-Dev
## 🎒 Muut kurssit
## 🎒 Muut kurssit
Tiimimme tuottaa myös muita kursseja! Tutustu:
Tiimimme tuottaa muita kursseja! Tutustu:
- [Generative AI for Beginners](https://aka.ms/genai-beginners)
- [Generative AI for Beginners](https://aka.ms/genai-beginners)
- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
@ -204,4 +206,4 @@ Tämä repo on lisensoitu MIT-lisenssillä. Katso lisätietoja [LICENSE](../../L
---
---
**Vastuuvapauslauseke**:
**Vastuuvapauslauseke**:
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://discord.com/invite/ByRwuEEgH4)
עקבו אחר השלבים הבאים כדי להתחיל להשתמש במשאבים אלו:
2. **שכפלו את המאגר**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**הצטרפו ל-Azure AI Foundry Discord ופגשו מומחים ומפתחים נוספים**](https://discord.com/invite/ByRwuEEgH4)
# פיתוח אתרים למתחילים - תוכנית לימודים
# פיתוח אתרים למתחילים - תוכנית לימודים
למדו את יסודות פיתוח האתרים עם קורס מקיף בן 12 שבועות מבית Microsoft Cloud Advocates. כל אחד מ-24 השיעורים מתמקד ב-JavaScript, CSS ו-HTML דרך פרויקטים מעשיים כמו טרריומים, תוספי דפדפן ומשחקי חלל. השתתפו בחידונים, דיונים ומשימות מעשיות. שפרו את המיומנויות שלכם והעמיקו את הידע שלכם עם שיטת הלימוד מבוססת הפרויקטים שלנו. התחילו את מסע הקידוד שלכם עוד היום!
למדו את יסודות פיתוח האתרים עם קורס מקיף של 12 שבועות מבית Microsoft Cloud Advocates. כל אחד מ-24 השיעורים מתמקד ב-JavaScript, CSS ו-HTML דרך פרויקטים מעשיים כמו טרריומים, הרחבות לדפדפן ומשחקי חלל. השתתפו בחידונים, דיונים ומשימות מעשיות. שפרו את הכישורים שלכם והעמיקו את הידע שלכם עם שיטת הלימוד מבוססת הפרויקטים שלנו. התחילו את מסע הקידוד שלכם היום!
#### 🧑🎓 _אתם סטודנטים?_
#### 🧑🎓 _האם אתם סטודנטים?_
בקרו ב-[**עמוד הסטודנטים**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) שם תמצאו משאבים למתחילים, חבילות לסטודנטים ואפילו דרכים לקבל שובר לתעודה בחינם. זהו עמוד שכדאי לשמור ולבדוק מדי פעם, שכן אנו מעדכנים את התוכן מדי חודש.
בקרו בעמוד [**Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) שבו תמצאו משאבים למתחילים, חבילות לסטודנטים ואפילו דרכים לקבל שובר לתעודה בחינם. זהו עמוד שכדאי לשמור ולבדוק מדי פעם, שכן אנו מעדכנים את התוכן מדי חודש.
כל שיעור כולל משימה לביצוע, בדיקת ידע ואתגר שיעזרו לכם ללמוד נושאים כמו:
כל שיעור כולל משימה לביצוע, בדיקת ידע ואתגר שמנחה אתכם בלימוד נושאים כמו:
- הנחיה והנדסת הנחיות
- הנחיה והנדסת הנחיות
- יצירת אפליקציות טקסט ותמונה
- יצירת אפליקציות טקסט ותמונה
- אפליקציות חיפוש
- אפליקציות חיפוש
בקרו ב-[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) כדי להתחיל!
בקרו ב-[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) כדי להתחיל!
## 🌱 התחלה
## 🌱 התחלת העבודה
> **מורים**, כללנו [כמה הצעות](for-teachers.md) כיצד להשתמש בתוכנית הלימודים הזו. נשמח לשמוע את דעתכם [בפורום הדיונים שלנו](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **מורים**, אנו [הוספנו כמה הצעות](for-teachers.md) כיצד להשתמש בתוכנית הלימודים הזו. נשמח לשמוע את דעתכם [בפורום הדיונים שלנו](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[לומדים](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, לכל שיעור התחילו בחידון מקדים, המשיכו בקריאת חומרי השיעור, השלימו את הפעילויות השונות ובדקו את הבנתכם עם החידון המסכם.
**[לומדים](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, בכל שיעור, התחילו עם חידון מקדים, המשיכו בקריאת חומר השיעור, השלימו את הפעילויות השונות ובדקו את הבנתכם עם חידון מסכם.
כדי לשפר את חוויית הלמידה שלכם, התחברו עם חברים כדי לעבוד יחד על הפרויקטים! דיונים מעודדים ב-[פורום הדיונים שלנו](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) שם צוות המנחים שלנו יהיה זמין לענות על שאלותיכם.
כדי לשפר את חוויית הלמידה שלכם, התחברו עם חברים כדי לעבוד יחד על הפרויקטים! דיונים מעודדים בפורום הדיונים שלנו [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), שבו צוות המנחים שלנו יהיה זמין לענות על שאלותיכם.
כדי להעמיק את הלימודים שלכם, אנו ממליצים בחום לחקור את [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) למקורות לימוד נוספים.
כדי להעמיק את הלימודים שלכם, אנו ממליצים מאוד לחקור את [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) עבור חומרי לימוד נוספים.
### 📋 הגדרת סביבת העבודה שלכם
### 📋 הגדרת סביבת העבודה שלכם
לתוכנית הלימודים הזו יש סביבת פיתוח מוכנה לשימוש! כשאתם מתחילים, תוכלו לבחור להריץ את התוכנית ב-[Codespace](https://github.com/features/codespaces/) (_סביבה מבוססת דפדפן, ללא צורך בהתקנות_), או מקומית על המחשב שלכם באמצעות עורך טקסט כמו [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
לתוכנית הלימודים הזו יש סביבת פיתוח מוכנה לשימוש! כשאתם מתחילים, תוכלו לבחור להריץ את התוכנית ב-[Codespace](https://github.com/features/codespaces/) (_סביבה מבוססת דפדפן, ללא צורך בהתקנות_), או באופן מקומי על המחשב שלכם באמצעות עורך טקסט כמו [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### יצירת מאגר משלכם
#### יצירת מאגר משלכם
כדי לשמור בקלות על העבודה שלכם, מומלץ ליצור עותק משלכם של מאגר זה. תוכלו לעשות זאת על ידי לחיצה על כפתור **Use this template** בראש העמוד. פעולה זו תיצור מאגר חדש בחשבון ה-GitHub שלכם עם עותק של תוכנית הלימודים.
כדי לשמור את העבודה שלכם בקלות, מומלץ ליצור עותק משלכם של המאגר הזה. תוכלו לעשות זאת על ידי לחיצה על כפתור **Use this template** בראש העמוד. פעולה זו תיצור מאגר חדש בחשבון GitHub שלכם עם עותק של תוכנית הלימודים.
בצעו את השלבים הבאים:
עקבו אחר השלבים הבאים:
1. **פיצול המאגר**: לחצו על כפתור "Fork" בפינה הימנית העליונה של עמוד זה.
1. **עשו Fork למאגר**: לחצו על כפתור "Fork" בפינה הימנית העליונה של העמוד הזה.
כדי להריץ את התוכנית מקומית על המחשב שלכם, תצטרכו עורך טקסט, דפדפן וכלי שורת פקודה. השיעור הראשון שלנו, [מבוא לשפות תכנות וכלי עבודה](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), ידריך אתכם באפשרויות השונות לכלים אלו כדי שתוכלו לבחור את מה שמתאים לכם ביותר.
כדי להריץ את התוכנית באופן מקומי על המחשב שלכם, תצטרכו עורך טקסט, דפדפן וכלי שורת פקודה. השיעור הראשון שלנו, [מבוא לשפות תכנות וכלי עבודה](../../1-getting-started-lessons/1-intro-to-programming-languages), ידריך אתכם באפשרויות השונות עבור כל אחד מהכלים הללו כדי שתוכלו לבחור את מה שמתאים לכם ביותר.
ההמלצה שלנו היא להשתמש ב-[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) כעורך שלכם, הכולל גם [טרמינל מובנה](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). תוכלו להוריד את Visual Studio Code [כאן](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
ההמלצה שלנו היא להשתמש ב-[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) כעורך הטקסט שלכם, שיש לו גם [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) מובנה. תוכלו להוריד את Visual Studio Code [כאן](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. שכפלו את המאגר שלכם למחשב. תוכלו לעשות זאת על ידי לחיצה על כפתור **Code** והעתקת ה-URL:
1. שכפלו את המאגר שלכם למחשב. תוכלו לעשות זאת על ידי לחיצה על כפתור **Code** והעתקת ה-URL:
<imgsrc="./images/createcodespace.png"alt="Copy your repository URL"style="width:270px;"/>
[!CodeSpace](./images/createcodespace.png)
לאחר מכן, פתחו [טרמינל](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) בתוך [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) והריצו את הפקודה הבאה, תוך החלפת `<your-repository-url>` ב-URL שהעתקתם:
לאחר מכן, פתחו [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) בתוך [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) והריצו את הפקודה הבאה, תוך החלפת `<your-repository-url>` ב-URL שהעתקתם:
```bash
```bash
git clone <your-repository-url>
git clone <your-repository-url>
@ -101,76 +104,76 @@ CO_OP_TRANSLATOR_METADATA:
> תוספים מומלצים ל-Visual Studio Code:
> תוספים מומלצים ל-Visual Studio Code:
>
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - לצפייה מקדימה של דפי HTML בתוך Visual Studio Code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - כדי להציג דפי HTML בתוך Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - לעזור לכם לכתוב קוד מהר יותר
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - כדי לעזור לכם לכתוב קוד מהר יותר
## 📂 כל שיעור כולל:
## 📂 כל שיעור כולל:
- איור סקיצה אופציונלי
- סקיצה אופציונלית
- סרטון משלים אופציונלי
- סרטון משלים אופציונלי
- חידון חימום לפני השיעור
- חידון חימום לפני השיעור
- שיעור כתוב
- שיעור כתוב
- עבור שיעורים מבוססי פרויקטים, מדריכים שלב-אחר-שלב לבניית הפרויקט
- עבור שיעורים מבוססי פרויקטים, מדריכים שלב-אחר-שלב כיצד לבנות את הפרויקט
- בדיקות ידע
- בדיקות ידע
- אתגר
- אתגר
- קריאה משלימה
- קריאה משלימה
- משימה
- משימה
- חידון מסכם
- [חידון מסכם](https://ff-quizzes.netlify.app/)
> **הערה לגבי חידונים**: כל החידונים נמצאים בתיקיית Quiz-app, 48 חידונים בסך הכל, כל אחד עם שלוש שאלות. הם מקושרים מתוך השיעורים וניתן להריץ את אפליקציית החידונים מקומית או לפרוס אותה ב-Azure; עקבו אחר ההוראות בתיקיית `quiz-app`. החידונים מתורגמים בהדרגה.
> **הערה לגבי חידונים**: כל החידונים נמצאים בתיקיית Quiz-app, סה"כ 48 חידונים של שלוש שאלות כל אחד. הם זמינים [כאן](https://ff-quizzes.netlify.app/) וניתן להריץ את אפליקציית החידונים באופן מקומי או לפרוס אותה ב-Azure; עקבו אחר ההוראות בתיקיית `quiz-app`.
## 🗃️ שיעורים
## 🗃️ שיעורים
| | שם הפרויקט | נושאים נלמדים | מטרות למידה | קישור לשיעור | מחבר |
| | שם הפרויקט | מושגים נלמדים | מטרות לימוד | שיעור מקושר | מחבר |
| 01 | התחלה | מבוא לתכנות וכלי עבודה | למדו את היסודות שמאחורי רוב שפות התכנות ואת התוכנות שעוזרות למפתחים מקצועיים לבצע את עבודתם | [מבוא לשפות תכנות וכלי עבודה](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | ג'סמין |
| 01 | התחלת העבודה | מבוא לתכנות וכלי עבודה | למדו את היסודות מאחורי רוב שפות התכנות ואת התוכנות שעוזרות למפתחים מקצועיים לבצע את עבודתם | [מבוא לשפות תכנות וכלי עבודה](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | התחלה | יסודות GitHub, כולל עבודה בצוות | כיצד להשתמש ב-GitHub בפרויקט שלכם, וכיצד לשתף פעולה עם אחרים על בסיס קוד | [מבוא ל-GitHub](/1-getting-started-lessons/2-github-basics/README.md) | פלור |
| 02 | התחלת העבודה | יסודות GitHub, כולל עבודה בצוות | כיצד להשתמש ב-GitHub בפרויקט שלכם, כיצד לשתף פעולה עם אחרים על בסיס קוד | [מבוא ל-GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | התחלה | נגישות | למדו את היסודות של נגישות אתרים | [יסודות נגישות](/1-getting-started-lessons/3-accessibility/README.md) | כריסטופר |
| 03 | התחלת העבודה | נגישות | למדו את יסודות הנגישות באינטרנט | [יסודות נגישות](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | יסודות JS | סוגי נתונים ב-JavaScript | היסודות של סוגי נתונים ב-JavaScript | [סוגי נתונים](/2-js-basics/1-data-types/README.md) | ג'סמין |
| 04 | יסודות JS | סוגי נתונים ב-JavaScript | יסודות סוגי הנתונים ב-JavaScript | [סוגי נתונים](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | יסודות JS | פונקציות ושיטות | למדו על פונקציות ושיטות לניהול זרימת הלוגיקה של האפליקציה שלכם | [פונקציות ושיטות](/2-js-basics/2-functions-methods/README.md) | ג'סמין וכריסטופר |
| 05 | יסודות JS | פונקציות ושיטות | למדו על פונקציות ושיטות לניהול זרימת הלוגיקה של אפליקציה | [פונקציות ושיטות](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | יסודות JS | קבלת החלטות עם JS | למדו כיצד ליצור תנאים בקוד שלכם באמצעות שיטות קבלת החלטות | [קבלת החלטות](/2-js-basics/3-making-decisions/README.md) | ג'סמין |
| 06 | יסודות JS | קבלת החלטות עם JS | למדו כיצד ליצור תנאים בקוד שלכם באמצעות שיטות קבלת החלטות | [קבלת החלטות](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | יסודות JS | מערכים ולולאות | עבודה עם נתונים באמצעות מערכים ולולאות ב-JavaScript | [מערכים ולולאות](/2-js-basics/4-arrays-loops/README.md) | ג'סמין |
| 07 | יסודות JS | מערכים ולולאות | עבודה עם נתונים באמצעות מערכים ולולאות ב-JavaScript | [מערכים ולולאות](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [טרריום](/3-terrarium/solution/README.md) | HTML בפועל | בנו את ה-HTML ליצירת טרריום מקוון, תוך התמקדות בבניית פריסה | [מבוא ל-HTML](/3-terrarium/1-intro-to-html/README.md) | ג'ן |
| 08 | [טרריום](./3-terrarium/solution/README.md) | HTML בפועל | בניית HTML ליצירת טרריום מקוון, תוך התמקדות בבניית פריסה | [מבוא ל-HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [טרריום](/3-terrarium/solution/README.md) | CSS בפועל | בנו את ה-CSS לעיצוב הטרריום המקוון, תוך התמקדות ביסודות ה-CSS כולל הפיכת הדף לרספונסיבי | [מבוא ל-CSS](/3-terrarium/2-intro-to-css/README.md) | ג'ן |
| 09 | [טרריום](./3-terrarium/solution/README.md) | CSS בפועל | בניית CSS לעיצוב הטרריום המקוון, תוך התמקדות ביסודות CSS כולל הפיכת הדף לרספונסיבי | [מבוא ל-CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [טרריום](/3-terrarium/solution/README.md) | סגירות ב-JavaScript, מניפולציה של DOM | בנו את ה-JavaScript כדי לגרום לטרריום לפעול כממשק גרירה ושחרור, תוך התמקדות בסגירות ובמניפולציה של DOM | [סגירות ב-JavaScript, מניפולציה של DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | ג'ן |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | סגירות ב-JavaScript, מניפולציה של DOM | כתבו את הקוד ב-JavaScript כדי לגרום לטרריום לתפקד כממשק גרירה ושחרור, תוך התמקדות בסגירות ובמניפולציה של DOM | [סגירות ב-JavaScript, מניפולציה של DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [משחק הקלדה](/4-typing-game/solution/README.md) | בניית משחק הקלדה | למדו כיצד להשתמש באירועי מקלדת כדי להניע את הלוגיקה של אפליקציית ה-JavaScript שלכם | [תכנות מונחה אירועים](/4-typing-game/typing-game/README.md) | כריסטופר |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | בניית משחק הקלדה | למדו כיצד להשתמש באירועי מקלדת כדי להניע את הלוגיקה של אפליקציית ה-JavaScript שלכם | [תכנות מונחה אירועים](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | עבודה עם דפדפנים | למדו כיצד דפדפנים פועלים, ההיסטוריה שלהם, וכיצד לבנות את האלמנטים הראשונים של תוסףלדפדפן | [אודות דפדפנים](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | עבודה עם דפדפנים | למדו כיצד דפדפנים עובדים, ההיסטוריה שלהם, וכיצד לבנות את האלמנטים הראשונים של הרחבת דפדפן | [על דפדפנים](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | בניית טופס, קריאה ל-API ואחסון משתנים באחסון מקומי | בנו את האלמנטים של JavaScript בתוסף הדפדפן שלכם כדי לקרוא ל-API באמצעות משתנים המאוחסנים באחסון מקומי | [APIs, טפסים ואחסון מקומי](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | בניית טופס, קריאה ל-API ואחסון משתנים באחסון מקומי | כתבו את האלמנטים ב-JavaScript של הרחבת הדפדפן שלכם כדי לקרוא ל-API באמצעות משתנים המאוחסנים באחסון מקומי | [APIs, טפסים ואחסון מקומי](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | תהליכיםברקע בדפדפן, ביצועי רשת | השתמשו בתהליכי הרקע של הדפדפן כדי לנהל את האייקון של התוסף; למדו על ביצועי רשת וכמה אופטימיזציות לשיפור | [משימות רקע וביצועים](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | תהליכי רקע בדפדפן, ביצועי רשת | השתמשו בתהליכי הרקע של הדפדפן כדי לנהל את סמל ההרחבה; למדו על ביצועי רשת וכמה אופטימיזציות לשיפור | [תהליכי רקע וביצועים](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution/README.md) | פיתוח משחק מתקדם יותר עם JavaScript | למדו על ירושה באמצעות מחלקות וקומפוזיציה ועל תבנית Pub/Sub, כהכנה לבניית משחק | [מבוא לפיתוח משחק מתקדם](/6-space-game/1-introduction/README.md) | Chris |
| 15 | [Space Game](./6-space-game/solution/README.md) | פיתוח משחק מתקדם יותר עם JavaScript | למדו על ירושה באמצעות מחלקות והרכבה ועל תבנית Pub/Sub, כהכנה לבניית משחק | [מבוא לפיתוח משחק מתקדם](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution/README.md) | ציור על קנבס | למדו על Canvas API, המשמש לציור אלמנטים על המסך | [ציור על קנבס](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | ציור על קנבס | למדו על ממשק ה-Canvas API, המשמש לציור אלמנטים על המסך | [ציור על קנבס](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution/README.md) | הזזת אלמנטים על המסך | גלו כיצד אלמנטים יכולים לקבל תנועה באמצעות קואורדינטות קרטזיות ו-Canvas API | [הזזת אלמנטים](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | הזזת אלמנטים על המסך | גלו כיצד אלמנטים יכולים לקבל תנועה באמצעות קואורדינטות קרטזיות וממשק ה-Canvas API | [הזזת אלמנטים](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution/README.md) | זיהוי התנגשויות | גרמו לאלמנטים להתנגש ולהגיב זה לזה באמצעות לחיצות מקשים, והוסיפו פונקציית קירור לשמירה על ביצועי המשחק | [זיהוי התנגשויות](/6-space-game/4-collision-detection/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | זיהוי התנגשויות | גרמו לאלמנטים להתנגש ולהגיב זה לזה באמצעות לחיצות מקשים וספקו פונקציית קירור כדי להבטיח ביצועי משחק | [זיהוי התנגשויות](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution/README.md) | שמירת ניקוד | בצעו חישובים מתמטיים בהתבסס על מצב המשחק והביצועים | [שמירת ניקוד](/6-space-game/5-keeping-score/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | שמירת ניקוד | בצעו חישובים מתמטיים בהתבסס על מצב המשחק וביצועיו | [שמירת ניקוד](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution/README.md) | סיום והתחלה מחדש של המשחק | למדו על סיום והתחלה מחדש של המשחק, כולל ניקוי משאבים ואיפוס ערכי משתנים | [תנאי סיום](/6-space-game/6-end-condition/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | סיום והתחלה מחדש של המשחק | למדו על סיום והתחלה מחדש של המשחק, כולל ניקוי נכסים ואיפוס ערכי משתנים | [תנאי סיום](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | תבניות HTML ונתיבים באפליקציית רשת | למדו כיצד ליצור את המבנה של ארכיטקטורת אתר מרובה עמודים באמצעות נתיבים ותבניות HTML | [תבניות HTML ונתיבים](/7-bank-project/1-template-route/README.md) | Yohan |
| 21 | [Banking App](./7-bank-project/solution/README.md) | תבניות HTML ונתיבים באפליקציית רשת | למדו כיצד ליצור את המבנה של ארכיטקטורת אתר מרובה עמודים באמצעות נתיבים ותבניות HTML | [תבניות HTML ונתיבים](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | בניית טופס התחברות ורישום | למדו על בניית טפסים וטיפול ברוטינות אימות | [טפסים](/7-bank-project/2-forms/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | בניית טופס כניסה וטופס הרשמה | למדו על בניית טפסים וטיפול ברוטינות אימות | [טפסים](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | שיטות לשליפת נתונים ושימוש בהם | כיצד נתונים זורמים פנימה והחוצה מהאפליקציה שלכם, כיצד לשלוף אותם, לאחסן אותם ולהיפטר מהם | [נתונים](/7-bank-project/3-data/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | שיטות לאחזור ושימוש בנתונים | כיצד נתונים זורמים פנימה והחוצה מהאפליקציה שלכם, כיצד לאחזר אותם, לאחסן אותם ולהיפטר מהם | [נתונים](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | מושגים של ניהול מצב | למדו כיצד האפליקציה שלכם שומרת מצב וכיצד לנהל אותו בצורה תכנותית | [ניהול מצב](/7-bank-project/4-state-management/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | מושגים של ניהול מצב | למדו כיצד האפליקציה שלכם שומרת מצב וכיצד לנהל אותו באופן תכנותי | [ניהול מצב](./7-bank-project/4-state-management/README.md) | Yohan |
## 🏫 פדגוגיה
## 🏫 פדגוגיה
תוכנית הלימודים שלנו עוצבה עם שני עקרונות פדגוגיים מרכזיים:
תוכנית הלימודים שלנו נבנתה על פי שני עקרונות פדגוגיים מרכזיים:
* למידה מבוססת פרויקטים
* למידה מבוססת פרויקטים
* חידונים תכופים
* מבחנים תכופים
התוכנית מלמדת את יסודות JavaScript, HTML ו-CSS, כמו גם את הכלים והטכניקות העדכניים ביותר בהם משתמשים מפתחי רשת כיום. התלמידים יקבלו הזדמנות לצבור ניסיון מעשי על ידי בניית משחק הקלדה, טרריום וירטואלי, תוסף דפדפן ידידותי לסביבה, משחק בסגנון פולש מהחלל, ואפליקציית בנקאות לעסקים. בסוף הסדרה, התלמידים ירכשו הבנה מוצקה של פיתוח רשת.
התוכנית מלמדת את יסודות ה-JavaScript, HTML ו-CSS, כמו גם את הכלים והטכניקות העדכניים ביותר בהם משתמשים מפתחי רשת כיום. התלמידים יקבלו הזדמנות לצבור ניסיון מעשי על ידי בניית משחק הקלדה, טרריום וירטואלי, הרחבת דפדפן ידידותית לסביבה, משחק בסגנון פולש חלל ואפליקציית בנקאות לעסקים. בסוף הסדרה, התלמידים ירכשו הבנה מוצקה של פיתוח רשת.
> 🎓 ניתן לקחת את השיעורים הראשונים בתוכנית זו כ-[מסלול למידה](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) ב-Microsoft Learn!
> 🎓 ניתן לקחת את השיעורים הראשונים בתוכנית הלימודים הזו כ-[מסלול למידה](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) ב-Microsoft Learn!
על ידי התאמת התוכן לפרויקטים, התהליך הופך למרתק יותר עבור התלמידים ושימור המושגים משתפר. בנוסף, כתבנו מספר שיעורי פתיחה ביסודות JavaScript להיכרות עם מושגים, יחד עם סרטון מתוך "[סדרת מתחילים: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", אוסף של מדריכי וידאו, שחלק מהכותבים שלהם תרמו לתוכנית זו.
על ידי התאמת התוכן לפרויקטים, התהליך הופך למרתק יותר עבור התלמידים ושימור המושגים משתפר. בנוסף, כתבנו מספר שיעורי פתיחה ביסודות JavaScript כדי להציג מושגים, יחד עם סרטון מתוך אוסף "[סדרת מתחילים ל-JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" של מדריכי וידאו, שחלק מהכותבים שלהם תרמו לתוכנית הלימודים הזו.
בנוסף, חידון קליל לפני השיעור מכוון את כוונת התלמיד ללמידת הנושא, בעוד חידון שני לאחר השיעור מבטיח שימור נוסף. תוכנית הלימודים עוצבה להיות גמישה ומהנה וניתן לקחת אותה בשלמותה או בחלקים. הפרויקטים מתחילים קטנים והופכים למורכבים יותר בסוף מחזור של 12 שבועות.
בנוסף, מבחן בעל סיכון נמוך לפני השיעור מכוון את כוונת התלמיד ללמידת הנושא, בעוד מבחן שני לאחר השיעור מבטיח שימור נוסף. תוכנית הלימודים הזו נועדה להיות גמישה ומהנה וניתן לקחת אותה בשלמותה או בחלקים. הפרויקטים מתחילים קטנים והופכים מורכבים יותר בסוף מחזור של 12 שבועות.
בעוד שבכוונה נמנענו מהכנסת מסגרות JavaScript כדי להתמקד בכישורים הבסיסיים הנדרשים כמפתח רשת לפני אימוץ מסגרת, הצעד הבא המומלץ לאחר השלמת תוכנית זו יהיה ללמוד על Node.js באמצעות אוסף נוסף של סרטונים: "[סדרת מתחילים: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
למרות שבכוונה נמנענו מהצגת מסגרות JavaScript כדי להתמקד בכישורים הבסיסיים הדרושים למפתח רשת לפני אימוץ מסגרת, צעד טוב להמשך לאחר סיום תוכנית הלימודים הזו יהיה ללמוד על Node.js באמצעות אוסף נוסף של סרטונים: "[סדרת מתחילים ל-Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> בקרו ב-[קוד ההתנהגות](CODE_OF_CONDUCT.md) וב-[הנחיות התרומה](CONTRIBUTING.md) שלנו. נשמח לקבל את המשוב הבונה שלכם!
> בקרו ב-[קוד ההתנהגות](CODE_OF_CONDUCT.md) וב-[הנחיות לתרומה](CONTRIBUTING.md) שלנו. נשמח לקבל את המשוב הבונה שלכם!
## 🧭 גישה לא מקוונת
## 🧭 גישה לא מקוונת
ניתן להפעיל את התיעוד הזה במצב לא מקוון באמצעות [Docsify](https://docsify.js.org/#/). עשו Fork למאגר זה, [התקינו את Docsify](https://docsify.js.org/#/quickstart) במחשב המקומי שלכם, ואז בתיקיית השורש של מאגר זה, הקלידו `docsify serve`. האתר יפעל על פורט 3000 ב-localhost שלכם: `localhost:3000`.
ניתן להפעיל את התיעוד הזה במצב לא מקוון באמצעות [Docsify](https://docsify.js.org/#/). עשו Fork למאגר הזה, [התקינו את Docsify](https://docsify.js.org/#/quickstart) במחשב המקומי שלכם, ואז בתיקיית השורש של המאגר הזה, הקלידו `docsify serve`. האתר יוגש על פורט 3000 ב-localhost שלכם: `localhost:3000`.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://discord.com/invite/ByRwuEEgH4)
Volg deze stappen om aan de slag te gaan met deze bronnen:
1. **Fork de repository**: Klik op [](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
# 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?_
#### 🧑🎓 _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!
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!
Elke les bevat een opdracht om te voltooien, een kennischeck en een uitdaging om je te begeleiden bij het leren van onderwerpen zoals:
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
- Prompting en prompt engineering
- Tekst- en afbeeldingsapp-generatie
- Tekst- en afbeeldingsapplicaties genereren
- Zoekapps
- 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
## 🌱 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.
**[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.
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
### 📋 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
#### 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.
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.
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`
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.
#### 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).
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:
1. Clone je repository naar je computer. Dit kun je doen door op de knop **Code** te klikken en de URL te kopiëren:
<imgsrc="./images/createcodespace.png"alt="Kopieer je repository-URL"style="width:270px;"/>
[!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 `<your-repository-url>` vervangt door de URL die je zojuist hebt gekopieerd:
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 `<your-repository-url>` 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 <your-repository-url>
git clone <your-repository-url>
```
```
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
> * [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:
## 📂 Elke les bevat:
@ -110,68 +113,67 @@ Onze aanbeveling is om [Visual Studio Code](https://code.visualstudio.com/?WT.mc
- optionele aanvullende video
- optionele aanvullende video
- quiz voorafgaand aan de les
- quiz voorafgaand aan de les
- geschreven les
- geschreven les
- voor projectgerichte lessen, stapsgewijze handleidingen om het project te bouwen
- voor projectgebaseerde lessen, stapsgewijze handleidingen om het project te bouwen
- kennischecks
- kennischecks
- een uitdaging
- een uitdaging
- aanvullende literatuur
- aanvullende lectuur
- opdracht
- 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.
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 data met behulp van arrays en lussen in JavaScript | [Arrays en Lussen](/2-js-basics/4-arrays-loops/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 |
| 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 |
| 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 |
| 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 | [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 |
| 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 |
| 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 |
| 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 enkele optimalisaties | [Achtergrondtaken en Prestaties](/5-browser-extension/3-background-tasks-and-performance/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) | 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 |
| 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 |
| 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 |
| 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 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 |
| 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 het spel | [Score Bijhouden](/6-space-game/5-keeping-score/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 |
| 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 |
| 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 |
| 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 |
| 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 statusbeheer | Leer hoe je app de status behoudt en hoe je deze programmatisch beheert | [Statusbeheer](/7-bank-project/4-state-management/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
## 🏫 Pedagogiek
Ons curriculum is ontworpen met twee belangrijke pedagogische principes in gedachten:
Ons curriculum is ontworpen met twee belangrijke pedagogische principes in gedachten:
* projectmatig leren
* projectgebaseerd leren
* frequente quizzen
* 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
## 🧭 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
## 📘 PDF
@ -180,7 +182,7 @@ Een PDF van alle lessen is te vinden [hier](https://microsoft.github.io/Web-Dev-
## 🎒 Andere Cursussen
## 🎒 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](https://aka.ms/genai-beginners)
- [Generatieve AI voor Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
- [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)
- [Cybersecurity voor Beginners](https://github.com/microsoft/Security-101)
- [Webontwikkeling voor Beginners](https://aka.ms/webdev-beginners)
- [Webontwikkeling voor Beginners](https://aka.ms/webdev-beginners)
- [IoT voor Beginners](https://aka.ms/iot-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 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)
- [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
## Licentie
@ -204,4 +206,4 @@ Deze repository is gelicentieerd onder de MIT-licentie. Zie het [LICENSE](../../
---
---
**Disclaimer**:
**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.
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.