Tämä on opetusohjelman arkisto, joka on suunniteltu opettamaan verkkokehityksen perusteita aloittelijoille. Opetusohjelma on kattava 12 viikon kurssi, jonka Microsoft Cloud Advocates on kehittänyt. Se sisältää 24 käytännön oppituntia, jotka käsittelevät JavaScriptiä, CSS:ää ja HTML:ää.
Tämä on opetuksellinen opetussuunnitelmarepositorio, joka on tarkoitettu web-kehityksen perusteiden opettamiseen aloittelijoille. Opetussuunnitelma on kattava 12 viikon kurssi, jonka ovat kehittäneet Microsoft Cloud Advocates, ja se sisältää 24 käytännön oppituntia, jotka kattavat JavaScriptin, CSS:n ja HTML:n.
### Keskeiset osat
### Keskeiset osat
- **Opetussisältö**: 24 jäsenneltyä oppituntia, jotka on järjestetty projektipohjaisiin moduuleihin
- `9-chat-project/README.md` - Tekoälyllä toimivan chat-avustajan projekti
### Monorepo-rakenne
### Monorepo-rakenne
Vaikka tämä ei ole perinteinen monorepo, arkisto sisältää useita itsenäisiä projekteja:
Vaikka tämä ei ole perinteinen monorepo, tämä arkisto sisältää useita itsenäisiä projekteja:
- Jokainen oppitunti on itsenäinen
- Jokainen oppitunti on itsenäinen
- Projektit eivät jaa riippuvuuksia
- Projektit eivät jaa riippuvuuksia
- Työskentele yksittäisten projektien parissa vaikuttamatta muihin
- Työskentele yksittäisten projektien parissa vaikuttamatta muihin
- Kloonaa koko arkisto saadaksesi täyden opetusohjelmakokemuksen
- Kloonaa koko arkisto saadaksesi koko opetussuunnitelman kokemuksen
---
---
**Vastuuvapauslauseke**:
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
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ä.
**Vastuuvapauslauseke**:
Tämä asiakirja on käännetty käyttäen tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, on hyvä huomioida, että automaattiset käännökset saattavat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäiskielellä tulee pitää auktoritatiivisena lähteenä. Tärkeissä asioissa suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa mistään väärinymmärryksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
Opi verkkokehityksen perusteet 12 viikon kattavalla kurssillamme, jonka on kehittänyt Microsoft Cloud Advocates. Jokainen 24 oppitunnista syventyy JavaScriptiin, CSS:ään ja HTML:ään käytännön projektien kautta, kuten terrariumeihin, selaimen laajennuksiin ja avaruuspeliin. Osallistu visoihin, keskusteluihin ja käytännön tehtäviin. Kehitä taitojasi ja optimoi tiedon säilytyskykyä tehokkaan projektipohjaisen opetusmetodimme avulla. Aloita koodausmatkasi jo tänään!
Opi verkkokehityksen perusteet kattavassa 12 viikon kurssissamme, jonka järjestävät Microsoft Cloud Advocates -tiimin jäsenet. Jokainen 24 oppitunnista sukeltaa JavaScriptiin, CSS:ään ja HTML:ään käytännön projektien, kuten terrarion, selaimen laajennusten ja avaruuspeliin, kautta. Osallistu tietokilpailuihin, keskusteluihin ja käytännön tehtäviin. Paranna taitojasi ja optimoi oppimisesi tehokkaalla projektipohjaisella opetuksellamme. Aloita koodausmatkasi tänään!
> Tässä repositoriossa on yli 50 käännöstä, mikä lisää merkittävästi latauskoon. Jos haluat kloonata ilman käännöksiä, käytä sparse checkoutia:
> Tämä arkisto sisältää yli 50 kielen käännöksiä, jotka lisäävät huomattavasti lataustiedoston kokoa. Jos haluat kloonata ilman käännöksiä, käytä sparse checkout:a:
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> ```
> Tämä antaa sinulle kaiken, mitä tarvitset kurssin suorittamiseen huomattavasti nopeammalla latauksella.
> Tämä antaa sinulle kaiken tarvittavan kurssin suorittamiseen paljon nopeammalla latauksella.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Jos haluat lisätä tuettuja käännöskieliä, ne on listattu [tässä](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Jos haluat lisätä lisää käännettyjä kieliä, tuetut kielet löytyvät [täältä](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Oletko opiskelija?_
#### 🧑🎓 _Oletko opiskelija?_
Vieraile [**Student Hub -sivulla**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), josta löydät aloittelijan resurssit, opiskelijapaketit ja jopa tapoja saada ilmainen sertifikaattikuponki. 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 aloittelijan resurssit, opiskelijapaketit ja jopa tapoja saada ilmainen sertifikaattivoucher. Tämä on sivu, jonka haluat tallentaa kirjanmerkkeihin ja tarkistaa silloin tällöin, sillä sisältömme vaihtuu kuukausittain.
### 📣 Ilmoitus - Uudet GitHub Copilot Agent -tilahaasteet suoritettavaksi!
Uusi haaste lisätty, katso "GitHub Copilot Agent Challenge 🚀" useimmista luvuista. Tämä on uusi haaste, jonka voit suorittaa käyttämällä GitHub Copilotia ja Agent-tilaa. Jos et ole aiemmin käyttänyt Agent-tilaa, se pystyy paitsi generoimaan tekstiä, myös luomaan ja muokkaamaan tiedostoja, suorittamaan komentoja ja muuta.
Uusi haaste lisätty, etsi "GitHub Copilot Agent Challenge 🚀" useimmista luvuista. Tämä on uusi haaste sinulle, joka suoritetaan käyttämällä GitHub Copilotia ja Agent-tilaa. Jos et ole käyttänyt Agent-tilaa aiemmin, se pystyy paitsi tuottamaan tekstiä, myös luomaan ja muokkaamaan tiedostoja, suorittamaan komentoja ja muuta.
### 📣 Ilmoitus – _Uusi generatiiviseen tekoälyyn perustuva projekti rakennettavaksi_
### 📣 Ilmoitus - _Uusi Generatiivisen tekoälyn projekti rakennettavaksi_
Uusi AI-avustajaprojekti juuri lisätty, tutustu [projektiin](./9-chat-project/README.md)
Uusi tekoälyavustajaprojekti juuri lisätty, tutustu [projektiin](./9-chat-project/README.md)
### 📣 Ilmoitus – _Uusi Generative AI -opetussuunnitelma JavaScriptille julkaistu_
### 📣 Ilmoitus - _Uusi opetussuunnitelma_ Generatiivisesta tekoälystä JavaScriptille juuri julkaistu
Älä jää paitsi uudesta Generative AI -opetussuunnitelmastamme!
Älä jää paitsi uudesta Generative AI -opetussuunnitelmastamme!
> **Opettajat**, olemme [sisällyttäneet ehdotuksia](for-teachers.md) tämän opetussuunnitelman käyttöön. Toivomme palautettasi [keskustelufoorumissamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Opettajat**, olemme [sisällyttäneet joitain ehdotuksia](for-teachers.md) tämän opetussuunnitelman käytöstä. Haluaisimme saada palautettanne [keskustelufoorumissamme](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 ennakkokyselyllä ja jatka luentomateriaalin lukemisella, suorita erilaiset aktiviteetit ja testaa ymmärryksesi jälkikyselyllä.
**[Oppijat](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, aloita jokainen oppitunti ennakkotietovisalla ja jatka sitten luentomateriaalin lukemiseen, erilaisten aktiviteettien suorittamiseen ja ymmärryksesi tarkistamiseen luennon jälkeisellä visalla.
Paranna oppimiskokemustasi liittymällä vertaistesi seuraan projekteissa! Keskustelut ovat tervetulleita [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), jossa moderaattoritiimimme vastaa kysymyksiisi.
Parantaaksesi oppimiskokemustasi, ota yhteyttä muihin oppijoihin työskennelläksesi projekteissa yhdessä! Keskusteluja kannustetaan [keskustelufoorumissamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), jossa moderaattoritiimimme on valmiina vastaamaan kysymyksiisi.
Syvennä osaamistasi tutustumalla myös [Microsoft Learniin](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) lisäopetusmateriaaleja varten.
Tämän opetussuunnitelman kehitysympäristö on valmiina! Aloittaessasi voit valita suorittaa opetussuunnitelman [Codespacessa](https://github.com/features/codespaces/) (_selaimessa toimiva, ei asennuksia vaativa ympäristö_) tai paikallisesti tietokoneellasi tekstieditorilla, kuten [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Tässä opetussuunnitelmassa on kehitysympäristö valmiina käyttöön! Alkaessasi voit valita suorittaa opetussuunnitelman [Codespacessa](https://github.com/features/codespaces/) (selainsovellus, johon ei tarvitse asentaa mitään) tai paikallisesti tietokoneella tekstieditorilla, kuten [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Luo oma repositoriosi
#### Luo oma repositoriosi
Jotta voit helposti tallentaa työsi, suosittelemme luomaan oman kopion tästä repositoriosta. Voit tehdä tämän painamalla sivun yläreunassa olevaa **Use this template** -painiketta. Tämä luo uuden repositorion GitHub-tilillesi, joka sisältää kopion opetussuunnitelmasta.
Jotta voit helposti tallentaa työsi, on suositeltavaa luoda oma kopiosi tästä repositoriosta. Voit tehdä tämän napsauttamalla sivun yläreunassa olevaa **Use this template** -painiketta. Tämä luo uuden repositorion GitHub-tilillesi opetussuunnitelman kopion kera.
Noudata näitä ohjeita:
Noudata näitä ohjeita:
1. **Haarauta repositorio**: Klikkaa tämän sivun oikeassa yläkulmassa olevaa "Fork"-painiketta.
1. **Forkkaa Repository**: Klikkaa "Fork" -painiketta tämän sivun oikeassa yläkulmassa.
Oman kopion repositoriosta luomasi jälkeen napsauta **Code**-painiketta ja valitse **Open with Codespaces**. Tämä luo sinulle uuden Codespace-ympäristön työskennellä.
Oman kopiosi repositoriosta, jonka loit, klikkaa **Code** -painiketta ja valitse **Open with Codespaces**. Tämä luo uuden Codespacen, jossa voit työskennellä.
Jos haluat suorittaa opetussuunnitelman paikallisesti tietokoneellasi, tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, [Johdanto ohjelmointikieliin ja työkaluihin](../../1-getting-started-lessons/1-intro-to-programming-languages), opastaa sinut eri vaihtoehtojen pariin, jotta voit valita itsellesi sopivimmat työkalut.
Suorittaaksesi opetussuunnitelman paikallisesti tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, [Ohjelmointikielien ja työkalujen perusasioiden esittely](../../1-getting-started-lessons/1-intro-to-programming-languages), opastaa sinua erilaisten näiden työkalujen vaihtoehtojen valinnassa.
Suosittelemme käyttämään tekstieditorina [Visual Studio Codea](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon), joka sisältää myös sisäänrakennetun [Komentorivin](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Voit ladata Visual Studio Coden [tästä](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Suosituksemme on käyttää tekstieditorina [Visual Studio Codea](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon), jossa on myös sisäänrakennettu [Komentorivi](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Voit ladata Visual Studio Coden [tästä](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Kloonaa oma repositorio tietokoneellesi. Voit tehdä tämän klikkaamalla **Code**-painiketta ja kopioimalla URL-osoitteen:
1. Kloonaa oma repositoriosi tietokoneellesi. Voit tehdä tämän napsauttamalla **Code**-painiketta ja kopioimalla URL-osoitteen:
[CodeSpace](./images/createcodespace.png)
[CodeSpace](./images/createcodespace.png)
Sitten avaa [Pääte](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) Visual Studio Codessa [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ja suorita seuraava komento korvaten `<your-repository-url>` juuri kopioimallasi URL-osoitteella:
Avaa sitten [Terminaali](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:
```bash
```bash
git clone <your-repository-url>
git clone <your-repository-url>
```
```
2. Avaa kansio Visual Studio Codessa. Voit tehdä tämän valitsemalla **Tiedosto** > **Avaa kansio** ja valitsemalla juuri kloonaamasi kansion.
2. Avaa kansio Visual Studio Codessa. Voit tehdä tämän napsauttamalla **Tiedosto** > **Avaa kansio** ja valitsemalla juuri kloonaamasi kansion.
> Suositellut Visual Studio Code -laajennukset:
> Suositellut Visual Studio Code -laajennukset:
>
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - esikatsele HTML-sivuja suoraan Visual Studio Codessa
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML-sivujen esikatseluun Visual Studio Codessa
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - auttaaksesi sinua kirjoittamaan koodia nopeammin
> **Huomio kyselyistä**: Kaikki kyselyt löytyvät Quiz-app-kansiosta, yhteensä 48 kyselyä joissa jokaisessa kolme kysymystä. Ne ovat saatavilla [tässä](https://ff-quizzes.netlify.app/web/). Kyselysovelluksen voi ajaa paikallisesti tai julkaista Azureen; noudata ohjeita `quiz-app`-kansiossa.
> **Huomautus kyselyistä**: Kaikki kyselyt on koottu Quiz-app-kansioon, yhteensä 48 kyselyä, joissa kullakin on kolme kysymystä. Ne ovat saatavilla [tässä](https://ff-quizzes.netlify.app/web/). Kyselysovelluksen voi suorittaa paikallisesti tai ottaa käyttöön Azureen; noudata `quiz-app`-kansion ohjeita.
## 🗃️ Oppitunnit
## 🗃️ Oppitunnit
| | Projektin nimi | Opitut käsitteet | Oppimistavoitteet | Linkitetty oppitunti | Tekijä |
| | Projektin nimi | Opitut käsitteet | Oppimistavoitteet | Linkitetty oppitunti | Tekijä |
| 01 | Aloittaminen | Johdanto ohjelmointiin ja työkaluihin | Opettele lähes kaikkien ohjelmointikielten perusperiaatteet sekä ohjelmistot jotka auttavat ammattilaisia työnsä tekemisessä | [Ohjelmointikielten ja työkalujen johdanto](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 01 | Aloittaminen | Johdatus ohjelmointiin ja työkaluihin | Opit ohjelmointikielten perustan 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, tiimityöskentely | Miten käytät GitHubia projektissasi ja teet yhteistyötä muiden kanssa koodipohjan parissa | [GitHubin johdanto](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 02 | Aloittaminen | GitHubin perusteet, tiimityöskentely | Kuinka käyttää GitHubia projektissasi ja tehdä yhteistyötä muiden kanssa koodipohjassa | [Johdatus GitHubiin](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 05 | JS Basics | Funktiot ja metodit | Opettele funktioista ja metodeista sovelluksen logiikan hallintaan | [Funktiot ja metodit](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher |
| 05 | JS Perusteet | Funktiot ja metodit | Opit funktioista ja metodeista sovelluksen logiikan hallinnassa | [Funktiot ja metodit](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher |
| 06 | JS Basics | Päätöksenteko JavaScriptillä | Opettele luomaan ehtoja koodissa päätöksentekomenetelmien avulla | [Päätöksenteko](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 06 | JS Perusteet | Päätöksenteko JS:llä | Opit luomaan olosuhteita koodissasi päätöksentekomenetelmien avulla | [Päätöksenteko](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Taulukot ja silmukat | Työskentele tietojen kanssa taulukkojen ja silmukoiden avulla JavaScriptissä | [Taulukot ja silmukat](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 07 | JS Perusteet | Taulukot ja silmukat | Työskentele tietojen kanssa taulukoiden ja silmukoiden avulla JavaScriptissä | [Taulukot ja silmukat](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML-käytännössä | Rakenna HTML verkossa olevaa terrariota varten, keskittyen asettelun rakentamiseen | [Johdanto HTML:ään](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML käytännössä | Rakenna HTML luodaksesi online-terraariumin, keskittyen asettelun tekemiseen | [Johdatus HTML:ään](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS-käytännössä | Rakenna CSS tyylittämään verkossa olevaa terrariota, keskittyen CSS:n perusteisiin ja sivun responsiivisuuteen | [Johdanto CSS:ään](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS käytännössä | Rakenna CSS tietoystävän terraariumin tyylittelyä varten, keskittyen CSS:n perusteisiin mukaan lukien responsiivisuus | [Johdatus CSS:ään](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScriptin sulkeet, DOM-käsittely | Rakenna JavaScript terrariumin vetämis- ja pudotusliittymän toiminnalle, keskittyen sulkuihin ja DOM:n käsittelyyn | [JavaScriptin sulkeet ja DOM-käsittely](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript sulkeet, DOM-manipulointi | Rakenna JavaScript, joka mahdollistaa terraariumin toiminnan drag/drop-käyttöliittymänä, keskittyen sulkeisiin ja DOM-manipulointiin | [JavaScript sulkeet ja DOM-manipulointi](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Kirjoituspelin rakentaminen | Opi käyttämään näppäimistötapahtumia sovelluksen logiikan ohjaamiseen | [Tapahtumapohjainen ohjelmointi](./4-typing-game/typing-game/README.md) | Christopher |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Kirjoituspelin rakentaminen | Opit 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 sekä miten rakentaa selaimen laajennuksen ensimmäiset elementit | [Selaimista](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Selainten toiminta | Opit miten selaimet toimivat, niiden historian ja miten rakentaa ensimmäiset elementit selainlaajennukseen | [Tietoa selaimista](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Lomakkeen rakentaminen, API-kutsu ja muuttujien tallennus paikalliseen tallennustilaan | Rakenna JavaScript-selaimen laajennuksen elementit API-kutsujen tekemiseen muuttujien avulla, jotka tallennetaan paikalliseen tallennustilaan | [API:t, lomakkeet ja paikallinen tallennus](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Lomakkeen rakentaminen, API-kutsut ja muuttujien tallennus | Rakenna selainlaajennukseesi JavaScript-elementit API-kutsuihin paikallisesti tallennettujen muuttujien avulla | [APIt, lomakkeet ja paikallinen tallennus](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Taustaprosessit selaimessa, verkkotehokkuus | Hyödynnä selaimen taustaprosesseja laajennuksen kuvakkeen hallinnassa; opi verkkotehokkuudesta ja optimoinneista | [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) | Selaintaustaprosessit, verkkosuorituskyky | Käytä selaimen taustaprosesseja hallitsemaan laajennuksen kuvaketta; opi verkkosuorituskyvystä ja optimointikeinoista | [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) | Kehittyneempi pelikehitys JavaScriptillä | Opi perinnöstä luokkien ja koostumuksen avulla sekä Pub/Sub-kuviosta valmistautuaksesi pelin rakentamiseen | [Johdanto kehittyneeseen pelikehitykseen](./6-space-game/1-introduction/README.md) | Chris |
| 15 | [Space Game](./6-space-game/solution/README.md) | Edistyneempi pelinkehitys JavaScriptillä | Opit periytymisestä luokkien ja komposition avulla sekä Pub/Sub-kuvioista valmistautuessasi pelin rakentamiseen | [Johdatus edistyneeseen pelinkehitykseen](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Piirtäminen canvakselle | Opi Canvas API:sta, joka on käytössä ruudulle piirtämisessä | [Piirtäminen canvakselle](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Piirtäminen kankaalle | Opit Canvas API:stä, jota käytetään elementtien piirtämiseen näytölle | [Piirtäminen kankaalle](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Elementtien liikuttaminen ruudulla | Opi miten elementit liikkuvat karteesisissa koordinaateissa ja Canvas APIn 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, miten elementit saavat liikkeen käyttäen karteesisia koordinaatteja ja Canvas API:ta | [Elementtien liikuttaminen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Törmäyksentunnistus | Tee elementeistä törmäileviä ja reagoivia, käytä näppäinkomentoja ja tarjoa jäähdytysfunktio pelin toiminnan varmistamiseksi | [Törmäyksentunnistus](./6-space-game/4-collision-detection/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Törmäyksentunnistus | Tee, että elementit törmäävät ja reagoivat toisiinsa näppäinyhdistelmillä ja tarjoavat jäähdytystoiminnon pelin suorituskyvyn turvaamiseksi | [Törmäyksentunnistus](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Pisteiden laskeminen | Suorita matemaattisia laskutoimituksia pelin tilaan ja suoritukseen perustuen | [Pisteiden laskeminen](./6-space-game/5-keeping-score/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Pisteiden laskeminen | Tee matemaattisia laskelmia pelin tilan ja suorituksen perusteella | [Pisteiden laskeminen](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Pelin lopetus ja uudelleenkäynnistys | Opi pelin lopettamisesta ja uudelleenkäynnistyksestä, mukaan lukien resurssien siivous ja muuttujien arvon nollaus | [Lopetusehto](./6-space-game/6-end-condition/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Pelin lopettaminen ja uudelleenkäynnistys | Opit pelin lopettamisesta ja uudelleenkäynnistämisestä, mukaan lukien resurssien siivous ja muuttujien arvojen nollaus | [Lopetusehto](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-pohjat ja reitit web-sovelluksessa | Opi luomaan monisivuisen verkkosivun arkkitehtuurin runko reitityksen ja HTML-pohjien avulla | [HTML-pohjat ja reitit](./7-bank-project/1-template-route/README.md) | Yohan |
| 21 | [Pankkisovellus](./7-bank-project/solution/README.md) | HTML-mallit ja reitit web-sovelluksessa | Opit luomaan monisivuisen verkkosivuston arkkitehtuurin runkoa reitityksen ja HTML-mallien avulla | [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 | Tutustu lomakkeiden rakentamiseen ja validointirutiinien käsittelyyn | [Lomakkeet](./7-bank-project/2-forms/README.md) | Yohan |
| 22 | [Pankkisovellus](./7-bank-project/solution/README.md) | Kirjautumis- ja rekisteröitymislomakkeen rakentaminen | Opit lomakkeiden rakentamisesta ja validointirutiinien käsittelystä | [Lomakkeet](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Datan hakemisen ja käytön menetelmät | Miten data virtaa sovellukseesi, miten hakea, tallentaa ja poistaa sitä | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 23 | [Pankkisovellus](./7-bank-project/solution/README.md) | Datan hakeminen ja käyttö | Kuinka data virtaa sovellukseesi, miten hakea, tallentaa ja poistaa sitä | [Data](./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ää tilansa ja hallitsee sitä ohjelmallisesti | [Tilanhallinta](./7-bank-project/4-state-management/README.md) | Yohan |
| 24 | [Pankkisovellus](./7-bank-project/solution/README.md) | Tilanhallinnan käsitteet | Opit, miten sovelluksesi säilyttää tilan ja miten hallita sitä ohjelmallisesti | [Tilanhallinta](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Selaimen/VScode koodi](../../8-code-editor) | Työskentely VScoden kanssa | Opi käyttämään koodieditoria| [Käytä VScode koodieditoria](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 25 | [Selain/VScode-koodi](../../8-code-editor) | Työskentely VScoden kanssa | Opit käyttämään koodieditoria | [Käytä VScode-koodieditoria](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI-apulaiset](./9-chat-project/README.md) | Työskentely tekoälyn kanssa | Opi rakentamaan oma tekoälyavustajasi | [AI-avustajaprojekti](./9-chat-project/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Työskentely tekoälyn kanssa | Opit rakentamaan oman tekoälyavustajan | [AI-avustajaprojekti](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogiikka
## 🏫 Pedagogiikka
Oppimäärämme on suunniteltu kahden keskeisen pedagogisen periaatteen mukaisesti:
Oppimateriaalimme on suunniteltu kahden keskeisen pedagogisen periaatteen pohjalta:
* projektipohjainen oppiminen
* projektioppiminen
* säännölliset kyselyt
* usein toistuvat kyselyt
Ohjelma opettaa JavaScriptin, HTML:n ja CSS:n perusteet sekä viimeisimmät työkalut ja tekniikat, joita nykyiset web-kehittäjät käyttävät. Oppilaat saavat käytännön kokemusta rakentamalla kirjoituspelin, virtuaalisen terrariumin, ekologisen selaimen laajennuksen, avaruusmuukalaisaiheisen pelin ja yrityskäyttöön tarkoitetun pankkisovelluksen. Sarjan lopussa oppilaat ovat hankkineet vahvan ymmärryksen verkkokehityksestä.
Ohjelma opettaa JavaScriptin, HTML:n ja CSS:n perusteet sekä nykyaikaisten web-kehittäjien käyttämiä työkaluja ja tekniikoita. Oppilailla on mahdollisuus kehittää käytännön taitoja rakentamalla kirjoituspeli, virtuaaliterraario, ympäristöystävällinen selainlaajennus, avaruustyyppinen peli ja liiketoiminta-pankkisovellus. Sarjan lopussa opiskelijoilla on vankka ymmärrys web-kehityksestä.
> 🎓 Voit suorittaa tämän oppimäärän ensimmäiset oppitunnit Microsoft Learnin [Oppimispolun](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) kautta!
> 🎓 Voit suorittaa tämän oppilaitoksen ensimmäiset oppitunnit [Oppimispolku](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)-muodossa Microsoft Learnissa!
Varmistamalla, että sisältö vastaa projekteja, prosessi tehdään opiskelijoille kiinnostavammaksi ja käsitteiden omaksuminen tehostuu. Kirjoitimme myös useita aloitusoppitunteja JavaScriptin perusteista esittelemään käsitteitä, jotka on yhdistetty videoon "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" -videokokoelmasta, joiden tekijöistä osa osallistui tähän oppimäärään.
Varmistamalla sisällön yhteensopivuuden projektien kanssa prosessi tulee opiskelijoille mielekkäämmäksi ja käsitteiden omaksuminen tehostuu. Kirjoitimme myös useita aloitusoppitunteja JavaScript-perusteista käynnistämään kokonaisuuden, jotka on yhdistetty videosarjaan "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", joiden tekijät osallistuivat tähän oppimateriaalin kokoamiseen.
Lisäksi kevyt kysely ennen tuntia suuntaa opiskelijan tarkoitusta oppia aihetta, ja toinen kysely tunnin jälkeen takaa lisäomaksumisen. Tämä oppimäärä on suunniteltu joustavaksi ja hauskaksi, ja sen voi suorittaa kokonaan tai osittain. Projektit alkavat pienestä ja monimutkaistuvat vähitellen 12 viikon jakson loppuun mennessä.
Lisäksi aloituskysely luokkahuoneen edellä asettaa opiskelijan tavoitteen aiheeseen tutustumiselle, ja luokan jälkeinen toinen kysely tukee oppien säilymistä. Tämä oppimateriaali on suunniteltu joustavaksi ja hauskaksi, ja se voidaan suorittaa kokonaisuudessaan tai osittain. Projektit alkavat pienestä ja monimutkaistuvat viimeistään 12 viikon syklin loppuun mennessä.
Vaikka olemme tarkoituksella välttäneet JavaScript-kehysten esittelyä keskittyäksemme perusosaamiseen, joka web-kehittäjällä tulee olla ennen kehysten käyttöönottoa, hyvä seuraava askel oppimäärän suorittamisen jälkeen olisi Node.js:n opiskeluun keskittyvä videokokoelma: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Vaikka olemme tietoisesti välttäneet JavaScript-kehysten käyttöönottoa keskittyäksemme web-kehittäjän perusvalmiuksiin ennen kehysten omaksumista, hyvä seuraava askel tämän oppimateriaalin suorittamisen jälkeen on oppia Node.js:stä toisen videosarjan avulla: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Tutustu [käyttäytymissääntöihimme](CODE_OF_CONDUCT.md) ja [osallistumisohjeisiin](CONTRIBUTING.md). Otamme mielellämme vastaan rakentavaa palautettasi!
> Tutustu myös [käytösohjeisiimme](CODE_OF_CONDUCT.md) ja [osallistumisohjeisiin](CONTRIBUTING.md). 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/#/). Forkkaa tämä repositorio, [asenna Docsify](https://docsify.js.org/#/quickstart) paikalliselle koneellesi, ja aja sitten tämän repojen juuressa komentoa `docsify serve`. Verkkosivusto palvellaan portissa 3000 osoitteessa`localhost:3000`.
Voit käyttää tätä dokumentaatiota offline-tilassa käyttämällä [Docsifya](https://docsify.js.org/#/). Haarauta tämä repo, [asenna Docsify](https://docsify.js.org/#/quickstart) paikallisesti ja kirjoita tämän repokansion juurikansiossa komento `docsify serve`. Verkkosivusto toimii portissa 3000 paikallisessa koneessasi:`localhost:3000`.
## 📘 PDF
## 📘 PDF
@ -204,16 +206,16 @@ 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 muitakin kursseja! Tutustu:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
---
### Azure / Edge / MCP / Agentit
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -221,7 +223,7 @@ Tiimimme tuottaa myös muita kursseja! Tutustu:
---
---
### Generatiivinen AI -sarja
### Generatiivisen tekoälyn sarja
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -229,7 +231,7 @@ Tiimimme tuottaa myös muita kursseja! Tutustu:
---
---
### Perusopiskelu
### Perusteet
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -248,21 +250,21 @@ Tiimimme tuottaa myös muita kursseja! Tutustu:
## Apua saamaan
## Apua saamaan
Jos jumitut tai sinulla on kysyttävää tekoälysovellusten rakentamisesta, liity muiden oppijoiden ja kokeneiden kehittäjien keskusteluihin MCP:stä. Se on kannustava yhteisö, jossa kysymykset ovat tervetulleita ja tietoa jaetaan vapaasti.
Jos jumitut tai sinulla on kysyttävää tekoälysovellusten rakentamisesta, liity muiden oppijoiden ja kokeneiden kehittäjien keskusteluihin MCP:stä. Se on tukeva yhteisö, jossa kysymyksiä saa esittää ja tietoa jaetaan vapaasti.
Tämä arkisto on lisensoitu MIT-lisenssillä. Lisätietoja on tiedostossa [LICENSE](../../LICENSE).
Tämä arkisto on lisensoitu MIT-lisenssillä. Lisätietoja löytyy tiedostosta [LICENSE](../../LICENSE).
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Vastuuvapauslauseke**:
**Vastuuvapauslauseke**:
Tämä asiakirja on käännetty tekoälypohjaisella käännöspalvelulla [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, otathan huomioon, että automaattikäännöksissä voi esiintyä virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäiskielellä tulee pitää ensisijaisena lähteenä. Tärkeissä asioissa suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä aiheutuvista väärinymmärryksistä tai tulkinnoista.
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, ole hyvä ja huomioi, että automaattikäännöksissä saattaa esiintyä virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäiskielellä tulisi pitää virallisena lähteenä. Tärkeissä tiedoissa suositellaan ammattilaisten tekemää ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä johtuvista väärinymmärryksistä tai tulkinnoista.
**Tämä varasto tarjoaa tiekartan verkkokehityksen perusteiden oppimiseen keskittyen JavaScriptiin, HTML:ään ja CSS:ään. Opetussuunnitelma on joustava ja sen voi käydä kokonaan tai osittain, 24 oppituntia jakautuen 12 viikolle.**
## Tärkeimmät virstanpylväät
* **Viikot 1-3:**
* Johdanto ohjelmointikieliin ja alan työkaluihin
* GitHubin perusteet
* Saavutettavuus
* JS:n perusteet: tietotyypit, funktiot ja metodit
* Päätöksenteko JS:llä
* **Viikot 4-6:**
* Taulukot ja silmukat
* Terrarium: HTML käytännössä
* CSS käytännössä
* JavaScriptin sulkeumat
* DOM:n manipulointi
* **Viikot 7-9:**
* Typing Game: tapahtumapohjainen ohjelmointi
* Green Browser Extension: selainten kanssa työskentely
* Lomakkeen rakentaminen, API:n kutsuminen ja muuttujien tallentaminen paikalliseen tallennustilaan
* Taustaprosessit selaimessa
* Verkkosuorituskyky
* **Viikot 10-12:**
* Space Game: edistyneempää pelinkehitystä JavaScriptillä
* Piirtäminen canvasille
* Elementtien liikuttaminen ruudulla
* Törmäyksentunnistus
* Pisteiden pitäminen, pelin lopettaminen ja uudelleenkäynnistys
* Banking App: HTML-mallit ja reitit web-sovelluksessa
* Kirjautumis- ja rekisteröitymislomakkeen rakentaminen
* Tietojen hakemisen ja käyttämisen menetelmät
* Tilanhallinnan käsitteet
## Oppimistulokset
**Tämän tiekartan suorittamalla opiskelijat saavat käytännön kokemusta kirjoituspelin, virtuaalisen terrariumin, ympäristöystävällisen selainlaajennuksen, avaruuspakopaistyylisen pelin ja yrityksille tarkoitetun pankkisovelluksen rakentamisesta. He kehittävät myös vahvan ymmärryksen verkkokehityksen perusteista.**
## Lisäresurssit
* Tämä varasto tarjoaa runsaasti materiaaleja jatko-opiskeluun, mukaan lukien tutoriaaleja, koodiesimerkkejä ja haasteita.
* Microsoft Learn -alusta tarjoaa useita verkkokehityskursseja ja oppimispolkuja.
* Verkkoyhteisöt, kuten Stack Overflow ja MDN Web Docs, tarjoavat arvokasta tukea ja resursseja web-kehittäjille.
**Toivon, että tämä tiekartta auttaa sinua verkkokehitysmatkallasi!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Vastuuvapauslauseke**:
Tämä asiakirja on käännetty tekoälypohjaisella käännöspalvelulla [Co-op Translator](https://github.com/Azure/co-op-translator). Pyrimme tarkkuuteen, mutta ole hyvä ja huomioi, että automaattiset käännökset saattavat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä on ensisijainen ja luotettava lähde. Tärkeissä tiedoissa suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä mahdollisesti aiheutuvista väärinymmärryksistä tai tulkinnoista.
Dit is een educatieve curriculumrepository voor het onderwijzen van de basisprincipes van webontwikkeling aan beginners. Het curriculum is een uitgebreide 12-weekse cursus ontwikkeld door Microsoft Cloud Advocates, met 24 praktische lessen over JavaScript, CSS en HTML.
Dit is een educatieve curriculumrepository voor het onderwijzen van webontwikkeling aan beginners. Het curriculum is een uitgebreide cursus van 12 weken ontwikkeld door Microsoft Cloud Advocates, met 24 hands-on lessen over JavaScript, CSS en HTML.
### Belangrijke onderdelen
### Belangrijkste Onderdelen
- **Educatieve inhoud**: 24 gestructureerde lessen georganiseerd in projectgebaseerde modules
- **Educatieve inhoud**: 24 gestructureerde lessen georganiseerd in projectgebaseerde modules
- `9-chat-project/README.md` - AI chat assistent project
### Monorepo-structuur
### Monorepo Structuur
Hoewel geen traditionele monorepo, bevat deze repository meerdere onafhankelijke projecten:
Hoewel dit geen traditionele monorepo is, bevat deze repository meerdere onafhankelijke projecten:
- Elke les is zelfstandig
- Elke les is op zichzelfstaand
- Projecten delen geen afhankelijkheden
- Projecten delen geen dependencies
- Werk aan individuele projecten zonder anderen te beïnvloeden
- Werk aan individuele projecten zonder anderen te beïnvloeden
- Clone de volledige repo voor de volledige curriculumervaring
- Clone de hele repo voor de volledige curriculumervaring
---
---
**Disclaimer**:
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
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 de 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.
**Disclaimer**:
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel wij streven naar nauwkeurigheid, dient u er rekening mee te houden dat automatische vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal wordt beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
Leer de basisprincipes van webontwikkeling met onze 12-weekse uitgebreide cursus van Microsoft Cloud Advocates. Elk van de 24 lessen duikt in JavaScript, CSS en HTML door middel van praktijkprojecten zoals terraria, browserextensies en spacegames. Doe mee met quizzen, discussies en praktische opdrachten. Verhoog je vaardigheden en optimaliseer je kennisbehoud met onze effectieve project-gebaseerde leerwijze. Begin vandaag nog met coderen!
Leer de basisprincipes van webontwikkeling met onze 12 weken durende uitgebreide cursus door Microsoft Cloud Advocates. Elke van de 24 lessen duikt in JavaScript, CSS en HTML via praktische projecten zoals terrariums, browserextensies en ruimtespellen. Doe mee met quizzen, discussies en praktische opdrachten. Versterk je vaardigheden en optimaliseer je kennisretentie met onze effectieve projectgerichte didactiek. Begin vandaag nog met coderen!
Word lid van de Azure AI Foundry Discord Community
Word lid van de Azure AI Foundry Discord Community
Volg deze stappen om aan de slag te gaan met deze bronnen:
1. **Fork de repository**: Klik [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone de repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Volg deze stappen om aan de slag te gaan met deze resources:
3. [**Word lid van de Azure AI Foundry Discord en ontmoet experts en mede-ontwikkelaars**](https://discord.com/invite/ByRwuEEgH4)
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 medeontwikkelaars**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Meertalige Ondersteuning
### 🌐 Meertalige Ondersteuning
#### Ondersteund via GitHub Action (geautomatiseerd & altijd up-to-date)
#### Ondersteund via GitHub Action (Geautomatiseerd & Altijd Up-to-date)
> Deze repository bevat meer dan 50 taalvertalingen die de downloadgrootte aanzienlijk vergroten. Om zonder vertalingen te clonen, gebruik sparse checkout:
> Deze repository bevat meer dan 50 taalvertalingen, wat de downloadgrootte aanzienlijk vergroot. Om zonder vertalingen te clonen, gebruik dan sparse checkout:
@ -27,160 +41,163 @@ Volg deze stappen om aan de slag te gaan met deze bronnen:
> Dit geeft je alles wat je nodig hebt om de cursus te voltooien met een veel snellere download.
> Dit geeft je alles wat je nodig hebt om de cursus te voltooien met een veel snellere download.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Als je graag extra vertalingen wilt, staan de ondersteunde talen hier [hier](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Als je wenst dat extra vertalingen ondersteund worden, zijn die hier te vinden [hier](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _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, studentenpakketten en zelfs manieren vindt om een gratis certificaatvoucher te krijgen. Dit is de pagina die je wilt bookmarken en af en toe wilt checken omdat we maandelijks content wisselen.
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 bemachtigen. Dit is de pagina die je wilt bookmarken en af en toe bezoeken, aangezien we maandelijks content wisselen.
### 📣 Aankondiging - Nieuwe GitHub Copilot Agentmodus uitdagingen om te voltooien!
### 📣 Aankondiging - Nieuwe GitHub Copilot Agent-modus uitdagingen om te voltooien!
Nieuwe uitdaging toegevoegd, zoek naar "GitHub Copilot Agent Challenge 🚀" in de meeste hoofdstukken. Dat 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.
Nieuwe uitdaging toegevoegd, zoek naar "GitHub Copilot Agent Challenge 🚀" in de meeste hoofdstukken. Dit is een nieuwe uitdaging om te voltooien met behulp van GitHub Copilot en Agent-modus. Als je Agent-modus nog niet hebt gebruikt: het kan niet alleen tekst genereren, maar ook bestanden creëren en bewerken, opdrachten uitvoeren en meer.
### 📣 Aankondiging - _Nieuw project om te bouwen met Generatieve AI_
### 📣 Aankondiging - _Nieuw Project te bouwen met Generatieve AI_
Nieuw AI Assistant project zojuist toegevoegd, bekijk het [project](./9-chat-project/README.md)
Nieuw AI-assistentproject toegevoegd, bekijk het [project](./9-chat-project/README.md)
### 📣 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 Generative AI curriculum niet!
Mis ons nieuwe Generatieve AI-curriculum 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 te beginnen!
Elke les omvat 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 kenniscontrole en een uitdaging die je begeleidt bij het leren van onderwerpen zoals:
- Prompting en promptengineering
- Prompting en prompt engineering
- Tekst- en afbeeldingsapp-generatie
- Tekst- en afbeeldingsapp-generatie
- Zoekapps
- Zoekapps
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 te beginnen!
## 🌱 Aan de slag
## 🌱 Aan de slag
> **Docenten**, we hebben [enkele suggesties opgenomen](for-teachers.md) over hoe dit curriculum te gebruiken. We horen graag jullie feedback [in ons discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Docenten**, we hebben [enkele suggesties opgenomen](for-teachers.md) over hoe je dit curriculum kunt gebruiken. We horen graag je feedback [in ons discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Leerlingen](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, begin bij elke les met een pre-lecture quiz en volg deze met het lezen van het lesmateriaal, het voltooien van de verschillende activiteiten en controleer je begrip met de post-lecture quiz.
**[Leerlingen](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, voor elke les begin je met een pre-lecture quiz en ga je door met het lezen van het lesmateriaal, het voltooien van de verschillende activiteiten en controleer je je begrip met de post-lecture quiz.
Om je leerervaring te verbeteren, maak verbinding met je medeleerlingen om samen aan de projecten te werken! 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, verbind je met je medestudenten om samen aan de projecten te werken! Discussies worden aangemoedigd in ons [discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) waar ons team van moderator beschikbaar zal zijn om je vragen te beantwoorden.
Voor verdere scholing raden wij sterk 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 educatie verder te bevorderen, raden we ten zeerste aan Microsoft Learn te verkennen voor aanvullende studiematerialen: [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon).
### 📋 Je omgeving instellen
### 📋 Je omgeving instellen
Dit curriculum heeft een ontwikkelomgeving klaar voor gebruik! Als je begint, kun je ervoor kiezen om het curriculum te draaien in een [Codespace](https://github.com/features/codespaces/) (_een browser-gebaseerde, geen installaties benodigde omgeving_), of lokaal op je computer met een teksteditor zoals [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Dit curriculum heeft een ontwikkelomgeving die klaar is om te gebruiken! Terwijl je begint, kun je ervoor kiezen de cursus uit te voeren in een [Codespace](https://github.com/features/codespaces/) (_een browsergebaseerde, geen installatie benodigde omgeving_), of lokaal op je computer met 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 gemakkelijk op te slaan, wordt aanbevolen om een eigen kopie van deze repository te maken. Dit kan je doen door op de knop **Use this template** bovenaan de pagina te klikken. Dit maakt een nieuwe repository aan in je GitHub-account met een kopie van het curriculum.
Om je werk makkelijk op te slaan, is het aanbevolen een eigen kopie van deze repository te maken. Dit kan je doen door op de knop **Use this template** bovenaan de pagina te klikken. Dit maakt een nieuwe repository aan in je GitHub-account met een kopie van het curriculum.
Volg deze stappen:
Volg deze stappen:
1. **Fork de repository**: Klik op de knop "Fork" rechtsboven op deze pagina.
1. **Fork de Repository**: Klik op de "Fork"-knop rechtsboven op deze pagina.
2. **Clone de repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
2. **Clone de Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Het curriculum draaien in een Codespace
#### De cursus draaien in een Codespace
In je eigen kopie van deze repository, klik op de **Code**-knop en selecteer **Open with Codespaces**. Dit maakt een nieuwe Codespace voor je aan om in te werken.
In je kopie van deze repository die je hebt aangemaakt, klik je de knop **Code** en selecteer je **Open with Codespaces**. Dit maakt een nieuwe Codespace aan waarin je kunt werken.
Om dit curriculum lokaal op je computer te draaien, heb je een teksteditor, een browser en een opdrachtregel-tool nodig. Onze eerste les, [Introductie tot programmeertalen en tools van het vak](../../1-getting-started-lessons/1-intro-to-programming-languages), leidt je door verschillende opties voor elk van deze tools, zodat je kunt kiezen wat het beste bij jou past.
Om deze cursus 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](../../1-getting-started-lessons/1-intro-to-programming-languages), zal je door verschillende opties voor elk van deze tools leiden zodat je kunt kiezen wat het beste bij jou past.
Wij raden aan om [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) als editor te gebruiken, 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).
We raden aan om [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) als editor te gebruiken, 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 kan je doen door op de knop **Code** te klikken en de URL te kopiëren:
1. Clone je repository naar je computer. Dit kan door op de knop **Code** te klikken en de URL te kopiëren:
[CodeSpace](./images/createcodespace.png)
[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 dan [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 u `<your-repository-url>` vervangt door de URL die u zojuist hebt gekopieerd:
```bash
```bash
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 **Bestand** > **Map openen** en de zojuist gekloonde map te selecteren.
2. Open de map in Visual Studio Code. Dit kan door te klikken op **File** > **Open Folder** en de map te selecteren die u zojuist hebt gekloond.
> Aanbevolen extensies voor Visual Studio Code:
> 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 binnen Visual Studio Code te bekijken
> * [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
> * [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 u te helpen sneller code te schrijven
## 📂 Elke les bevat:
## 📂 Elke les bevat:
- optionele schetsnotitie
- optionele sketchnote
- optionele aanvullende video
- optionele aanvullende video
- warming-up quiz voorafgaand aan de les
- warming-up quiz voor de les
- schriftelijke les
- geschreven les
- voor projectgebaseerde lessen, stapsgewijze handleidingen over hoe het project te bouwen
- voor projectgebaseerde lessen, stapsgewijze handleidingen over hoe het project te bouwen
- kenniscontroles
- kennistests
- een uitdaging
- een uitdaging
- aanvullende lectuur
- aanvullende lectuur
- een [quiz na de les](https://ff-quizzes.netlify.app/web/)
- opdracht
- [quiz na de les](https://ff-quizzes.netlify.app/web/)
> **Een opmerking over quizzes**: Alle quizzes bevinden zich in de Quiz-app map, in totaal 48 quizzes van elk drie vragen. Ze zijn beschikbaar [hier](https://ff-quizzes.netlify.app/web/), de quiz-app kan lokaal worden uitgevoerd of op Azure worden gedeployed; volg de instructies in de `quiz-app` map.
> **Een opmerking over quizzen**: Alle quizzen bevinden zich in de Quiz-app map, in totaal 48 quizzen van elk drie vragen. Ze zijn beschikbaar [hier](https://ff-quizzes.netlify.app/web/); 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 software die professionele ontwikkelaars helpt hun werk te doen | [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 in programmeren en tools van het vak | Leer de basisprincipes achter de meeste programmeertalen en over software die professionele ontwikkelaars helpt | [Introductie in programmeertalen en tools van het vak](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Aan de slag | Basiskennis van GitHub, inclusief samenwerken in een team | Hoe je GitHub gebruikt in je project, hoe je met anderen samenwerkt aan een codebase | [Introductie tot GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 02 | Aan de slag | Basiskennis van GitHub, inclusief samenwerken in een team | Hoe GitHub te gebruiken in jouw project, hoe samen te werken met anderen aan een codebase | [Introductie in GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Aan de slag | Toegankelijkheid | Leer de basis van webtoegankelijkheid | [Toegankelijkheidsfundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 03 | Aan de slag | Toegankelijkheid | Leer de basis van webtoegankelijkheid | [Fundamentals Toegankelijkheid](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScript-datatypes | De basis van JavaScript-datatypes | [Datatypes](./2-js-basics/1-data-types/README.md) | Jasmine |
| 04 | JS Grundlagen | JavaScript Datatypes | De basis van JavaScript datatypes | [Datatypes](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Functies en methoden | Leer over functies en methoden om de logica van een applicatie te beheren | [Functies en methoden](./2-js-basics/2-functions-methods/README.md) | Jasmine en Christopher |
| 05 | JS Grundlagen | Functies en Methoden | Leer over functies en methoden om de logica van een applicatie te beheren | [Functies en Methodes](./2-js-basics/2-functions-methods/README.md) | Jasmine en Christopher |
| 06 | JS Basics | Beslissingen nemen met JS | Leer hoe je voorwaarden maakt in je code met besluitvormingsmethoden | [Beslissingen maken](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 06 | JS Grundlagen | Beslissingen maken met JS | Leer hoe je voorwaarden maakt in je code met besluitvormingsmethoden | [Beslissingen maken](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Arrays en lussen | Werk met data met arrays en lussen in JavaScript | [Arrays en lussen](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 07 | JS Grundlagen | Arrays en Lussen | Werk met data via 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 voor een online terrarium, met focus op het maken van een layout | [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 focus op het bouwen van een layout | [Introductie in HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in de praktijk | Bouw de CSS voor de styling van het online terrarium, met de nadruk op basisbeginselen van CSS inclusief een responsive 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 basiskennis van CSS, inclusief het responsief maken van de pagina | [Introductie in 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 functioneel te maken als een drag/drop interface, met 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 als een sleep-en-zet-interface te laten functioneren, met focus op closures en DOM-manipulatie | [JavaScript Closures, DOM-manipulatie](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typen Spel](./4-typing-game/solution/README.md) | Bouw een Typen Spel | 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 | [Typwedstrijd](./4-typing-game/solution/README.md) | Bouw een Typwedstrijd | Leer hoe je toetsenbordgebeurtenissen gebruikt om de logica van je JavaScript-app aan te sturen | [Gebeurtenisgestuurd programmeren](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Groene Browser Extensie](./5-browser-extension/solution/README.md) | Werken met browsers | Leer hoe browsers werken, hun geschiedenis, en hoe je de eerste elementen van een browser extensie opzet | [Over browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 12 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Werken met browsers | Leer hoe browsers werken, hun geschiedenis, en hoe je de eerste elementen van een browserextensie bouwt | [Over Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Groene Browser Extensie](./5-browser-extension/solution/README.md) | Formulieren bouwen, een API aanroepen en variabelen lokaal opslaan | Bouw de JavaScript-elementen van je browser extensie om een API aan te roepen met variabelen die lokaal zijn opgeslagen | [API's, formulieren en lokale opslag](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 13 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Formulier bouwen, 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 | [Groene Browser Extensie](./5-browser-extension/solution/README.md) | Achtergrondprocessen in de browser, webprestaties | Gebruik de achtergrondprocessen van de browser om het icoon van de extensie te beheren; leer over webprestaties en optimalisaties | [Achtergrondtaken en prestaties](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 14 | [Groene Browserextensie](./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 | [Ruimte Spel](./6-space-game/solution/README.md) | Meer geavanceerde spelontwikkeling 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 spelontwikkeling](./6-space-game/1-introduction/README.md) | Chris |
| 15 | [Ruimte Spel](./6-space-game/solution/README.md) | Geavanceerde spelontwikkeling met JavaScript | Leer over overerving met zowel klassen als compositie en het Pub/Sub-patroon, ter voorbereiding op het bouwen van een spel | [Introductie in geavanceerde spelontwikkeling](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Ruimte Spel](./6-space-game/solution/README.md) | Tekenen op canvas | Leer over de Canvas-API, gebruikt om elementen op een scherm te tekenen | [Tekenen op canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 16 | [Ruimte Spel](./6-space-game/solution/README.md) | Tekenen op canvas | Leer over de Canvas API, gebruikt om elementen op een scherm te tekenen | [Tekenen op Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Ruimte Spel](./6-space-game/solution/README.md) | Elementen bewegen op het scherm | Ontdek hoe elementen beweging krijgen met behulp van de cartesiaanse coördinaten en de Canvas-API | [Elementen bewegen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 17 | [Ruimte Spel](./6-space-game/solution/README.md) | Elementen rond het scherm bewegen | Ontdek hoe elementen beweging krijgen met behulp van kartesische coördinaten en de Canvas API | [Elementen bewegen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Ruimte Spel](./6-space-game/solution/README.md) | Botsingdetectie | Laat elementen botsen en op elkaar reageren met keypresses en geef een cooldown-functie om de prestaties van het spel te waarborgen | [Botsingdetectie](./6-space-game/4-collision-detection/README.md) | Chris |
| 18 | [Ruimte Spel](./6-space-game/solution/README.md) | Detectie van botsingen | Laat elementen botsen en op elkaar reageren via toetsaanslagen en zorg voor een cooldown-functie om prestaties te waarborgen | [Botsingsdetectie](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Ruimte Spel](./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 | [Ruimte Spel](./6-space-game/solution/README.md) | Score bijhouden | Voer wiskundige berekeningen uit op basis van de status en prestaties van het spel | [Score bijhouden](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Ruimte Spel](./6-space-game/solution/README.md) | Het spel beëindigen en opnieuw starten | Leer over het beëindigen en opnieuw starten van het spel, inclusief het opruimen van assets en het resetten van variabelen | [De eindvoorwaarde](./6-space-game/6-end-condition/README.md) | Chris |
| 20 | [Ruimte Spel](./6-space-game/solution/README.md) | Het spel beëindigen en herstarten | Leer over het beëindigen en herstarten van het spel, inclusief opruimen van middelen en resetten van variabelen | [De eindvoorwaarde](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankieren App](./7-bank-project/solution/README.md) | HTML-sjablonen en routes in een webapp | Leer hoe je de basisstructuur van een multipagina-website creëert met routing en HTML-sjablonen | [HTML-Sjablonen en routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 21 | [Bankapp](./7-bank-project/solution/README.md) | HTML-sjablonen en routes in een webapp | Leer hoe je de opbouw van een meerpaginawebsite architectuur maakt met routing en HTML-sjablonen | [HTML-sjablonen en routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankieren App](./7-bank-project/solution/README.md) | Bouw een inlog- en registratieformulier | Leer over het bouwen van formulieren en het afhandelen van validatieroutines | [Formulieren](./7-bank-project/2-forms/README.md) | Yohan |
| 22 | [Bankapp](./7-bank-project/solution/README.md) | Bouw een inlog- en registratieformulier | Leer over het bouwen van formulieren en het afhandelen van validatieroutines | [Formulieren](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankieren App](./7-bank-project/solution/README.md) | Methoden voor 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 |
| 23 | [Bankapp](./7-bank-project/solution/README.md) | Methoden voor 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 | [Bankieren App](./7-bank-project/solution/README.md) | Concepten van state management | Leer hoe jouw app de status behoudt en hoe je die programmatisch beheert | [State management](./7-bank-project/4-state-management/README.md) | Yohan |
| 24 | [Bankapp](./7-bank-project/solution/README.md) | Concepten van State Management | Leer hoe je app state behoudt en hoe je die programmatisch beheert | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Werken met VScode | Leer hoe je een code-editor gebruikt | [Gebruik VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 25 | [Browser/VScode Code](../../8-code-editor) | Werken met VScode | Leer hoe je een code-editor gebruikt | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistenten](./9-chat-project/README.md) | Werken met AI | Leer hoe je je eigen AI-assistent bouwt | [AI Assistent project](./9-chat-project/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Werken met AI | Leer hoe je je eigen AI-assistent bouwt | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogiek
## 🏫 Pedagogiek
Ons curriculum is ontworpen met twee belangrijke pedagogische principes in gedachten:
Onze lesmethode is ontworpen met twee belangrijke pedagogische principes in gedachten:
* leren door projecten
* projectgebaseerd leren
* frequente quizzes
* frequente quizzen
Het programma leert de basisprincipes van JavaScript, HTML en CSS, evenals de nieuwste tools en technieken die tegenwoordig door webontwikkelaars worden gebruikt. Studenten krijgen de kans om praktische ervaring op te doen door het bouwen van een typenspel, een virtueel terrarium, een milieuvriendelijke browserextensie, een ruimte-invader-stijl spel en een bankapp voor bedrijven. Aan het einde van de serie zullen studenten een gedegen begrip van webontwikkeling hebben verworven.
Het programma onderwijst de basisprincipes van JavaScript, HTML en CSS, evenals de nieuwste tools en technieken die tegenwoordig door webontwikkelaars worden gebruikt. Studenten krijgen de kans om praktische ervaring op te doen door het bouwen van een typwedstrijd, virtueel terrarium, milieuvriendelijke browserextensie, space-invader-stijl spel en een bankapp voor bedrijven. Aan het einde van de serie hebben studenten een solide begrip van webontwikkeling opgebouwd.
> 🎓 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 deze cursus 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 leerzamer en boeiender voor de studenten en wordt het onthouden van concepten versterkt. We hebben ook verschillende startlessen geschreven in de basis 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 bijdroegen aan dit curriculum.
Doordat de inhoud aansluit bij projecten, wordt het proces voor studenten boeiender en wordt het onthouden van concepten vergroot. We hebben ook verschillende startlessen in JavaScript basics geschreven om de concepten te introduceren, gekoppeld aan 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 deze cursus.
Daarnaast zet een quiz met lage druk voor een les de intentie van de student voor het leren van een onderwerp, terwijl een tweede quiz na de les verdere retentie verzekert. Dit curriculum is ontworpen om flexibel en leuk te zijn en kan geheel of gedeeltelijk worden gevolgd. De projecten beginnen klein en worden steeds complexer aan het einde van de 12-weekse cyclus.
Daarnaast zet een quiz met weinig inzet voor een les de intentie van de student om een onderwerp te leren, terwijl een tweede quiz na de les zorgt voor verdere retentie. Deze cursus is ontworpen om flexibel en leuk te zijn en kan geheel of gedeeltelijk worden gevolgd. De projecten beginnen klein en worden steeds complexer aan het einde van de 12-weekse cyclus.
Hoewel we er bewust voor hebben gekozen om geen JavaScript-frameworks te introduceren om ons te concentreren op de basisvaardigheden die je als webontwikkelaar nodig hebt voordat je een framework adopteert, is een goede volgende stap na dit curriculum het 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 er bewust voor hebben gekozen om geen JavaScript-frameworks te introduceren, om ons te concentreren op de basisvaardigheden die nodig zijn als webontwikkelaar voordat je een framework adopteert, zou een goede vervolgstap na deze cursus het leren van Node.js zijn 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)".
> 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 gebruiken door [Docsify](https://docsify.js.org/#/) te gebruiken. 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 dan bediend op poort 3000 op je localhost: `localhost:3000`.
Je kunt deze documentatie offline gebruiken met [Docsify](https://docsify.js.org/#/). Fork deze repository, [installeer Docsify](https://docsify.js.org/#/quickstart) op je lokale machine, en typ vervolgens in de hoofdmap van deze repository `docsify serve`. De website wordt geserveerd op poort 3000 op je localhost: `localhost:3000`.
## 📘 PDF
## 📘 PDF
@ -192,51 +209,51 @@ Ons team maakt ook andere cursussen! Bekijk:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
---
### Azure / Edge / MCP / Agents
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
---
### Generatieve AI Serie
### Generatieve AI Serie
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
---
### Core Learning
### Kernleren
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
---
### Copilot Serie
### Copilot Serie
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Als je vastloopt of vragen hebt over het bouwen van AI-apps. Doe mee met andere leerlingen en ervaren ontwikkelaars in discussies over MCP. Het is een ondersteunende gemeenschap waar vragen welkom zijn en kennis vrij gedeeld wordt.
Als je vastloopt of vragen hebt over het bouwen van AI-apps. Doe mee aan discussies met mede-leerlingen en ervaren ontwikkelaars over MCP. Het is een ondersteunende gemeenschap waar vragen welkom zijn en kennis vrij wordt gedeeld.
@ -247,6 +264,6 @@ Deze repository is gelicentieerd onder de MIT-licentie. Zie het [LICENSE](../../
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
**Disclaimer**:
Dit document is vertaald met behulp van de AI-vertalingsdienst [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel wij streven naar nauwkeurigheid, dient u er rekening mee te houden dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal wordt beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerd geïnterpreteerde informatie voortkomend 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 wij streven naar nauwkeurigheid, dient u er rekening mee te houden dat automatische 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.
# Routekaart voor de Web-Dev-For-Beginners Repository van Microsoft
**Deze repository biedt een routekaart om de basisprincipes van webontwikkeling te leren met een focus op JavaScript, HTML en CSS. Het curriculum is flexibel en kan geheel of gedeeltelijk worden gevolgd, met 24 lessen verspreid over 12 weken.**
## Belangrijke mijlpalen
* **Weken 1-3:**
* Introductie tot programmeertalen en tools van het vak
* Basis van GitHub
* Toegankelijkheid
* JS basisprincipes: gegevenstypen, functies en methoden
* Beslissingen maken met JS
* **Weken 4-6:**
* Arrays en lussen
* Terrarium: HTML in de praktijk
* CSS in de praktijk
* JavaScript closures
* DOM-manipulatie
* **Weken 7-9:**
* Typing Game: Gebeurtenisgestuurde programmering
* Green Browser Extension: Werken met browsers
* Een formulier bouwen, een API aanroepen en variabelen opslaan in lokale opslag
* Achtergrondprocessen in de browser
* Webprestaties
* **Weken 10-12:**
* Space Game: Meer geavanceerde game-ontwikkeling met JavaScript
* Tekenen op canvas
* Elementen verplaatsen over het scherm
* Botsingsdetectie
* Score bijhouden, het spel beëindigen en opnieuw starten
* Banking App: HTML-sjablonen en routes in een web-app
* Een login- en registratieformulier bouwen
* Methoden om data op te halen en te gebruiken
* Concepten van State Management
## Leerresultaten
**Door deze routekaart te voltooien, krijgen studenten praktische ervaring met het bouwen van een typgame, een virtueel terrarium, een milieuvriendelijke browserextensie, een space-invader-stijl spel en een bankapp voor bedrijven. Ze ontwikkelen ook een solide begrip van de basisprincipes van webontwikkeling.**
## Aanvullende bronnen
* Deze repository biedt een schat aan bronnen voor verdere studie, inclusief tutorials, codevoorbeelden en uitdagingen.
* Het Microsoft Learn-platform biedt diverse webontwikkeling cursussen en leertrajecten.
* Online gemeenschappen zoals Stack Overflow en de MDN Web Docs bieden waardevolle ondersteuning en bronnen voor webontwikkelaars.
**Ik hoop dat deze routekaart je helpt op je webontwikkelingsreis!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Dit document is vertaald met behulp van de AI-vertalingsdienst [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u er rekening mee te houden dat geautomatiseerde vertalingen fouten of onjuistheden kunnen bevatten. Het oorspronkelijke document in de oorspronkelijke taal geldt 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.
Dette er et utdanningsrepository for å lære nybegynnere grunnleggende webutvikling. Pensumet er et omfattende 12-ukers kurs utviklet av Microsoft Cloud Advocates, med 24 praktiske leksjoner som dekker JavaScript, CSS og HTML.
Dette er et utdanningsrepository for å lære bort grunnleggende webutvikling til nybegynnere. Pensumet er et omfattende 12-ukers kurs utviklet av Microsoft Cloud Advocates, med 24 praktiske leksjoner som dekker JavaScript, CSS og HTML.
### Hovedkomponenter
### Nøkkelkomponenter
- **Utdanningsinnhold**: 24 strukturerte leksjoner organisert i prosjektbaserte moduler
- **Utdanningsinnhold**: 24 strukturerte leksjoner organisert i prosjektbaserte moduler
- `9-chat-project/README.md` - AI chat assistent prosjekt
### Monorepo-struktur
### Monorepo-struktur
Selv om det ikke er en tradisjonell monorepo, inneholder dette repositoryet flere uavhengige prosjekter:
Selv om det ikke er et tradisjonelt monorepo, inneholder dette repository flere uavhengige prosjekter:
- Hver leksjon er selvstendig
- Hver leksjon er selvstendig
- Prosjekter deler ikke avhengigheter
- Prosjektene deler ikke avhengigheter
- Arbeid med individuelle prosjekter uten å påvirke andre
- Jobb med individuelle prosjekter uten å påvirke andre
- Klon hele repoet for den fulle pensumopplevelsen
- Klon hele repo for full pensumopplevelse
---
---
**Ansvarsfraskrivelse**:
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi tilstreber nøyaktighet, vær oppmerksom på at automatiserte oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på sitt opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.
**Ansvarsfraskrivelse**:
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi streber etter nøyaktighet, vennligst vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på dets opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.
Lær det grunnleggende innen webutvikling med vårt 12-ukers omfattende kurs av Microsoft Cloud Advocates. Hver av de 24 leksjonene dykker ned i JavaScript, CSS og HTML gjennom praktiske prosjekter som terrarier, nettleserutvidelser og romspill. Engasjer deg med quizer, diskusjoner og praktiske oppgaver. Forbedre ferdighetene dine og optimaliser kunnskapsbevaringen med vår effektive prosjektbaserte pedagogikk. Start kodingsreisen din i dag!
Lær det grunnleggende om webutvikling med vårt 12-ukers omfattende kurs av Microsoft Cloud Advocates. Hver av de 24 leksjonene dykker ned i JavaScript, CSS og HTML gjennom praktiske prosjekter som terrarier, nettleserutvidelser og romspill. Delta i quizzer, diskusjoner og praktiske oppgaver. Forbedre ferdighetene dine og optimaliser kunnskapsbevaringen med vår effektive prosjektbaserte pedagogikk. Start din kodingreise i dag!
1. **Lag en gaffel av repositoriet**: Klikk [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
> Dette depotet inkluderer 50+ språkoversettelser som betydelig øker nedlastingsstørrelsen. For å klone uten oversettelser, bruk sparse checkout:
> Dette repositoriet inkluderer 50+ språkoversettelser som øker nedlastningsstørrelsen betydelig. For å klone uten oversettelser, bruk sparse checkout:
@ -41,89 +41,90 @@ Følg disse trinnene for å komme i gang med å bruke disse ressursene:
> Dette gir deg alt du trenger for å fullføre kurset med en mye raskere nedlasting.
> Dette gir deg alt du trenger for å fullføre kurset med en mye raskere nedlasting.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Hvis du ønsker at ytterligere oversettelsesspråk støttes, er de listet [her](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Hvis du ønsker at flere oversettelsesspråk skal støttes, er de oppført [her](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Er du student?_
#### 🧑🎓 _Er du student?_
Besøk [**Student Hub-siden**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) hvor du vil finne nybegynnerressurser, studentpakker og til og med måter å få et gratis sertifikatkupong på. Dette er siden du vil bokmerke og sjekke fra tid til annen, da vi bytter ut innhold månedlig.
Besøk [**Student Hub-side**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) hvor du finner nybegynnerressurser, studentpakker og til og med måter å få et gratis sertifikatkupong på. Dette er siden du vil bokmerke og sjekke fra tid til annen ettersom vi bytter ut innhold månedlig.
### 📣 Annonsering - Nye GitHub Copilot Agent-modus utfordringer å fullføre!
### 📣 Kunngjøring - Nye GitHub Copilot Agent modus utfordringer å fullføre!
Ny utfordring lagt til, se etter "GitHub Copilot Agent Challenge 🚀" i de fleste kapitlene. Det er en ny utfordring for deg å fullføre ved å bruke GitHub Copilot og Agent-modus. Hvis du ikke har brukt Agent-modus før, kan den ikke bare generere tekst, men også opprette og redigere filer, kjøre kommandoer og mer.
Ny utfordring lagt til, se etter "GitHub Copilot Agent Challenge 🚀" i de fleste kapitler. Det er en ny utfordring for deg å fullføre ved hjelp av GitHub Copilot og Agent-modus. Om du ikke har brukt Agent-modus før, kan den ikke bare generere tekst, men også lage og redigere filer, kjøre kommandoer og mer.
### 📣 Annonsering - _Nytt prosjekt å bygge med Generativ AI_
### 📣 Kunngjøring - _Nytt prosjekt å bygge med Generativ AI_
Nytt AI-assistentprosjekt nettopp lagt til, sjekk ut [prosjektet](./9-chat-project/README.md)
Nytt AI Assistant-prosjekt nettopp lagt til, sjekk det ut [prosjekt](./9-chat-project/README.md)
### 📣 Annonsering - _Ny læreplan_ om Generativ AI for JavaScript ble nettopp utgitt
### 📣 Kunngjøring - _Ny læreplan_ om Generativ AI for JavaScript er nettopp lansert
Ikke gå glipp av vår nye Generative AI læreplan!
Ikke gå glipp av vår nye Generativ AI læreplan!
Besøk [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for å komme i gang!
Besøk [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for å komme i gang!
Hver leksjon inkluderer en oppgave å fullføre, en kunnskapskontroll og en utfordring som guider deg i å lære emner som:
Hver leksjon inkluderer en oppgave å fullføre, en kunnskapstest og en utfordring for å veilede deg gjennom læringsemner som:
- Prompting og prompt-engineering
- Prompting og prompt-engineering
- Tekst- og bildeappgenerering
- Tekst- og bildeapp-generering
- Søkeapper
- Søkeapper
Besøk [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) for å komme i gang!
Besøk [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for å komme i gang!
## 🌱 Komme i gang
## 🌱 Komme i gang
> **Lærere**, vi har [inkludert noen forslag](for-teachers.md) til hvordan du kan bruke denne læreplanen. Vi vil gjerne ha tilbakemeldingen din [i vårt diskusjonsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Lærere**, vi har [inkludert noen forslag](for-teachers.md) til hvordan bruke denne læreplanen. Vi setter stor pris på din tilbakemelding [i vår diskusjonsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Elever](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for hver leksjon, start med en pre-forelesningsquiz og følg opp med å lese forelesningsmaterialet, fullføre de forskjellige aktivitetene og sjekk forståelsen din med post-forelesningsquizzen.
**[Lærende](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for hver leksjon, start med en pre-forelesningsquiz og følg deretter med å lese forelesningsmaterialet, fullføre de ulike aktivitetene og sjekk forståelsen din med post-forelesningsquizen.
For å forbedre læringsopplevelsen din, koble til med jevnaldrende for å jobbe med prosjektene sammen! Diskusjoner oppmuntres i vårt [diskusjonsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) hvor vårt team av moderatorer vil være tilgjengelig for å svare på dine spørsmål.
For å forbedre læringsopplevelsen din, koble deg sammen med dine jevnaldrende for å jobbe med prosjektene sammen! Diskusjoner oppfordres i vårt [diskusjonsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) hvor vårt team av moderatorer vil være tilgjengelig for å svare på dine spørsmål.
For å styrke utdannelsen din, anbefaler vi sterkt å utforske [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for flere studiematerialer.
For å videreutvikle utdannelsen din, anbefaler vi sterkt å utforske [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for tilleggsmateriell.
### 📋 Sette opp miljøet ditt
### 📋 Sette opp miljøet ditt
Denne læreplanen har et utviklingsmiljø klart til bruk! Når du kommer i gang kan du velge å kjøre læreplanen i en [Codespace](https://github.com/features/codespaces/) (_et nettleserbasert miljø uten installasjoner nødvendig_), eller lokalt på datamaskinen din ved å bruke en tekstredigerer som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Denne læreplanen har et utviklingsmiljø klart til bruk! Når du kommer i gang kan du velge å kjøre læreplanen i en [Codespace](https://github.com/features/codespaces/) (_et nettleserbasert miljø uten behov for installasjoner_), eller lokalt på din datamaskin ved bruk av en tekstredigerer som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Opprett depotet ditt
#### Opprett ditt eget repository
For at det skal være enkelt for deg å lagre arbeidet ditt, anbefales det at du oppretter din egen kopi av dette depotet. Du kan gjøre dette ved å klikke på knappen **Use this template** øverst på siden. Dette vil opprette et nytt depot i GitHub-kontoen din med en kopi av læreplanen.
For at du enkelt skal kunne lagre arbeidet ditt, anbefales det at du oppretter din egen kopi av dette repositoriet. Du kan gjøre dette ved å klikke på **Use this template** knappen øverst på siden. Dette vil opprette et nytt repository i din GitHub-konto med en kopi av læreplanen.
Følg disse trinnene:
Følg disse trinnene:
1. **Gaffel depotet**: Klikk på "Fork" knappen øverst til høyre på denne siden.
1. **Lag en gaffel av repositoriet**: Klikk på "Fork"-knappen øverst til høyre på denne siden.
I din kopi av dette depotet som du opprettet, klikk på **Code**knappen og velg **Open with Codespaces**. Dette vil opprette en ny Codespace for deg å jobbe i.
I din kopi av dette repositoriet du opprettet, klikk på **Code**-knappen og velg **Open with Codespaces**. Dette vil opprette en ny Codespace for deg å jobbe i.
For å kjøre denne læreplanen lokalt på datamaskinen din, trenger du en tekstredigerer, en nettleser og et kommandolinjeverktøy. Vår første leksjon, [Introduksjon til programmeringsspråk og verktøy](../../1-getting-started-lessons/1-intro-to-programming-languages), vil lede deg gjennom ulike alternativer for hvert av disse verktøyene slik at du kan velge det som passer best for deg.
For å kjøre denne læreplanen lokalt på datamaskinen din trenger du en tekstredigerer, en nettleser og et kommandolinjeverktøy. Vår første leksjon, [Introduksjon til programmeringsspråk og verktøy](../../1-getting-started-lessons/1-intro-to-programming-languages), vil guide deg gjennom ulike alternativer for hver av disse verktøyene slik at du kan velge det som passer best for deg.
Vår anbefaling er å bruke [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) som redigeringsprogram, som også har en innebygd [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Du kan laste ned Visual Studio Code [her](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Vår anbefaling er å bruke [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) som redigerer, som også har en innebygd [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Du kan laste ned Visual Studio Code [her](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klon depotet ditt til datamaskinen. Du kan gjøre dette ved å klikke på **Code**knappen og kopiere URL-en:
1. Klon ditt repository til din datamaskin. Du kan gjøre dette ved å klikke på **Code**-knappen og kopiere URL-en:
[CodeSpace](./images/createcodespace.png)
[CodeSpace](./images/createcodespace.png)
Åpne deretter [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) i [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) og kjør følgende kommando, og erstatt `<your-repository-url>` med URL-en du nettopp kopierte:
Deretter åpner du [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) i [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) og kjører følgende kommando, og erstatter`<your-repository-url>` med URL-en du nettopp kopierte:
```bash
```bash
git clone <your-repository-url>
git clone <your-repository-url>
```
```
2. Åpne mappen i Visual Studio Code. Du kan gjøre dette ved å klikke **File** > **Open Folder** og velge mappen du nettopp klonet.
2. Åpne mappen i Visual Studio Code. Du kan gjøre dette ved å klikke **Fil** > **Åpne mappe** og velge mappen du nettopp klonet.
> Anbefalte Visual Studio Code-utvidelser:
> Anbefalte Visual Studio Code-utvidelser:
@ -131,91 +132,91 @@ Vår anbefaling er å bruke [Visual Studio Code](https://code.visualstudio.com/?
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - for å forhåndsvise HTML-sider i Visual Studio Code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - for å forhåndsvise HTML-sider i Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - for å hjelpe deg å skrive kode raskere
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - for å hjelpe deg å skrive kode raskere
## 📂 Hver leksjon inkluderer:
## 📂 Hver leksjon inneholder:
- valgfri skissetegning
- valgfri skisse
- valgfri supplerende video
- valgfri supplerende video
- forprøve før leksjonen
- oppvarmingsquiz før leksjonen
- skriftlig leksjon
- skriftlig leksjon
- for prosjektbaserte leksjoner, steg-for-steg-veiledninger om hvordan bygge prosjektet
- for prosjektbaserte leksjoner, trinnvise guider for hvordan du bygger prosjektet
- [quiz etter leksjonen](https://ff-quizzes.netlify.app/web/)
> **En merknad om prøver**: Alle prøver ligger i Quiz-app-mappen, totalt 48 prøver med tre spørsmål hver. De er tilgjengelige [her](https://ff-quizzes.netlify.app/web/). Quiz-appen kan kjøres lokalt eller distribueres til Azure; følg instruksjonene i `quiz-app`-mappen.
> **En merknad om quizer**: Alle quizer er samlet i Quiz-app mappen, totalt 48 quizer med tre spørsmål hver. De er tilgjengelige [her](https://ff-quizzes.netlify.app/web/). quiz-appen kan kjøres lokalt eller deployeres til Azure; følg instruksjonene i `quiz-app`-mappen.
| 01 | Komme i gang | Introduksjon til programmering og verktøy | Lær det grunnleggende bak de fleste programmeringsspråk og om programvare som hjelper profesjonelle utviklere å gjøre jobben sin | [Introduksjon til programmeringsspråk og verktøy](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 01 | Komme i gang | Introduksjon til programmering og verktøy for faget | Lær det grunnleggende bak de fleste programmeringsspråk og om programvare som hjelper profesjonelle utviklere å gjøre jobben sin | [Introduksjon til programmeringsspråk og verktøy](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Komme i gang | Grunnleggende GitHub, inkludert samarbeid i team | Hvordan bruke GitHub i prosjektet ditt, hvordan samarbeide med andre på en kodebase | [Introduksjon til GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 02 | Komme i gang | Grunnleggende om GitHub, inkludert samarbeid i team | Hvordan bruke GitHub i prosjektet ditt, hvordan samarbeide med andre på en kodebase | [Introduksjon til GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Komme i gang | Tilgjengelighet | Lær det grunnleggende om tilgjengelighet på nettet | [Tilgjengelighetsgrunnlag](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 03 | Komme i gang | Tilgjengelighet | Lær det grunnleggende om nettside-tilgjengelighet | [Tilgjengelighet Grunnleggende](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 05 | JS Grunnleggende | Funksjoner og metoder | Lær om funksjoner og metoder for å styre applogikken | [Funksjoner og metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine og Christopher |
| 05 | JS Grunnleggende | Funksjoner og metoder | Lær om funksjoner og metoder for å håndtere et applikasjons logikkflyt | [Funksjoner og Metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine og Christopher |
| 06 | JS Grunnleggende | Beslutningstaking med JS | Lær hvordan du lager betingelser i koden din ved bruk av beslutningsmetoder | [Beslutningstaking](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 06 | JS Grunnleggende | Å ta beslutninger med JS | Lær hvordan du lager betingelser i koden din ved å bruke beslutningsmetoder | [Ta beslutninger](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Grunnleggende | Arrays og løkker | Arbeid med data ved hjelp av arrays og løkker i JavaScript | [Arrays og løkker](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 07 | JS Grunnleggende | Arrays og løkker | Arbeide med data ved bruk av arrays og løkker i JavaScript | [Arrays og løkker](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML i praksis | Bygg HTML for å lage et online terrarium med fokus på å bygge layout | [Introduksjon til HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML i praksis | Bygg HTML for å lage et virtuelt terrarium, med fokus på å bygge en layout | [Introduksjon til HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS i praksis | Bygg CSS for å style det online terrariet med fokus på det grunnleggende i CSS inkludert å gjøre siden responsiv | [Introduksjon til CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS i praksis | Bygg CSS for å style det virtuelle terrariet, med fokus på grunnleggende CSS inkludert making siden responsiv | [Introduksjon til CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-manipulasjon | Bygg JavaScript for å gjøre terrariet til en dra/slipp-grensesnitt, med fokus på closures og DOM-manipulasjon | [JavaScript Closures, DOM-manipulasjon](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript closures, DOM-manipulering | Bygg JavaScript for å gjøre terrariet funksjonelt som et dra/slipp-grensesnitt, med fokus på closures og DOM-manipulering | [JavaScript closures, DOM-manipulering](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Bygg et skrive-spill | Lær hvordan du bruker tastaturhendelser til å styre logikken i JavaScript-appen | [Hendelsesdrevet programmering](./4-typing-game/typing-game/README.md) | Christopher |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Lag et Skrivespill | Lær hvordan du bruker tastaturhendelser for å drive logikken i JavaScript-appen din | [Hendelsesdrevet Programmering](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Arbeide med nettlesere | Lær hvordan nettlesere fungerer, deres historie, og hvordan skissere de første elementene i en nettleserutvidelse | [Om nettlesere](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Arbeide med nettlesere | Lær hvordan nettlesere fungerer, deres historie, og hvordan du bygger opp de første elementene i en nettleserutvidelse | [Om nettlesere](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bygge et skjema, kalle et API og lagre variabler i lokal lagring | Bygg JavaScript-elementene i nettleserutvidelsen din for å kalle et API ved bruk av variabler lagret lokalt | [API-er, skjemaer og lokal lagring](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Lage et skjema, kalle et API og lagre variabler i lokal lagring | Bygg JavaScript-elementene til nettleserutvidelsen din for å kalle et API ved bruk av variabler lagret i lokal lagring | [APIer, skjemautfylling og lokal lagring](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bakgrunnsprosesser i nettleseren, webytelse | Bruk nettleserens bakgrunnsprosesser til å administrere utvidelsens ikon; lær om webytelse og noen optimaliseringer for å forbedre | [Bakgrunnsoppgaver og ytelse](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bakgrunnsprosesser i nettleseren, web-ytelse | Bruk nettleserens bakgrunnsprosesser for å administrere utvidelsens ikon; lær om web-ytelse og noen optimaliseringer for å gjøre | [Bakgrunnsoppgaver og ytelse](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Mer avansert spillutvikling med JavaScript | Lær om arv ved bruk av både klasser og komposisjon samt Pub/Sub-mønsteret, i forberedelse til å bygge et spill | [Introduksjon til avansert spillutvikling](./6-space-game/1-introduction/README.md) | Chris |
| 15 | [Space Game](./6-space-game/solution/README.md) | Mer avansert spillutvikling med JavaScript | Lær om arv ved å bruke både klasser og komposisjon og Pub/Sub-mønsteret, som en forberedelse til å lage et spill | [Introduksjon til avansert spillutvikling](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Tegning på canvas | Lær om Canvas API, brukt til å tegne elementer på skjerm | [Tegning på canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Tegning til lerret | Lær om Canvas API, som brukes til å tegne elementer på skjermen | [Tegning til lerret](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Flytte elementer rundt på skjermen | Oppdag hvordan elementer kan få bevegelse ved bruk av kartesiske koordinater og Canvas API | [Flytte elementer rundt](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Flytte elementer rundt på skjermen | Oppdag hvordan elementer kan få bevegelse ved hjelp av kartesiske koordinater og Canvas API | [Flytte elementer rundt](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Kollisjonsdeteksjon | Få elementer til å kollidere og reagere på hverandre ved hjelp av tastetrykk og tilby en avkjølingsfunksjon for å sikre ytelsen | [Kollisjonsdeteksjon](./6-space-game/4-collision-detection/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Kollisjonsdeteksjon | La elementer kollidere og reagere på hverandre ved hjelp av tastetrykk og implementer en cooldown-funksjon for å sikre spillytelse | [Kollisjonsdeteksjon](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Holde poengsum | Utfør matematiske beregninger basert på spillets status og ytelse | [Holde poengsum](./6-space-game/5-keeping-score/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Hold styr på poeng | Utfør matematiske beregninger basert på spillets status og ytelse | [Poengtelling](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Avslutte og starte spillet på nytt | Lær om å avslutte og starte spillet på nytt, inkludert å rydde opp ressurser og tilbakestille variabelverdier | [Avslutningstilstand](./6-space-game/6-end-condition/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Avslutte og starte spillet på nytt | Lær om å avslutte og restarte spillet, inkludert å rydde opp ressurser og tilbakestille variabelverdier | [Avslutningsbetingelsen](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-maler og ruter i en webapp | Lær hvordan du lager strukturen til en fler-siders nettsides arkitektur ved bruk av ruting og HTML-maler | [HTML-maler og ruter](./7-bank-project/1-template-route/README.md) | Yohan |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-maler og ruter i et webapp | Lær hvordan du lager grunnstrukturen til en flersidig nettsides arkitektur ved bruk av routing og HTML-maler | [HTML-maler og ruter](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Bygge et påloggings- og registreringsskjema | Lær om bygging av skjemaer og håndtering av valideringsrutiner | [Skjemaer](./7-bank-project/2-forms/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Lag en innloggings- og registreringsskjema | Lær om å lage skjemaer og håndtere valideringsrutiner | [Skjemaer](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metoder for innhenting og bruk av data | Hvordan data flyter inn og ut av appen din, hvordan hente, lagre og kvitte seg med den | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metoder for å hente og bruke data | Hvordan data flyter inn og ut av appen din, hvordan hente det, lagre det, og kvitte seg med det | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Konsepter for tilstandshåndtering | Lær hvordan appen din beholder tilstand og hvordan styre det programmessig | [Tilstandshåndtering](./7-bank-project/4-state-management/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Begreper om tilstandsadministrasjon | Lær hvordan appen din beholder tilstand og hvordan du kan styre den programmessig | [Tilstandsadministrasjon](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Arbeide med VScode | Lær hvordan du bruker en kodeeditor| [Bruke VScode-kodeeditor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 25 | [Browser/VScode Code](../../8-code-editor) | Arbeider med VScode | Lær hvordan du bruker en kode-editor| [Bruk VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Arbeide med AI | Lær hvordan du bygger din egen AI-assistent | [AI-assistentprosjekt](./9-chat-project/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Arbeider med AI | Lær hvordan du bygger din egen AI-assistent | [AI Assistent prosjekt](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogikk
## 🏫 Pedagogikk
Vårt pensum er utformet med to viktige pedagogiske prinsipper i tankene:
Vårt pensum er designet med to viktige pedagogiske prinsipper i tankene:
* prosjektbasert læring
* prosjektbasert læring
* hyppige prøver
* hyppige quizer
Programmet lærer ut det grunnleggende i JavaScript, HTML og CSS, samt de nyeste verktøyene og teknikkene som brukes av dagens webutviklere. Studentene vil få muligheten til å utvikle praktisk erfaring gjennom å bygge et skrive-spill, virtuelt terrarium, miljøvennlig nettleserutvidelse, space-invader-inspirert spill og en bankapp for bedrifter. Ved slutten av serien vil studentene ha oppnådd en solid forståelse av webutvikling.
Programmet lærer grunnleggende JavaScript, HTML og CSS, samt de nyeste verktøyene og teknikkene som dagens webutviklere bruker. Studentene vil få muligheten til å utvikle praktisk erfaring ved å bygge et skrivespill, virtuelt terrarium, miljøvennlig nettleserutvidelse, rom-invader-stil spill og en bankapp for bedrifter. Ved slutten av serien vil studentene ha oppnådd en solid forståelse av webutvikling.
> 🎓 Du kan ta de første leksjonene i dette pensumet som en [Læringssti](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn!
> 🎓 Du kan ta de første leksjonene i dette pensumet som en [Læringssti](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn!
Ved å sikre at innholdet er knyttet til prosjektene blir prosessen mer engasjerende for studentene og forståelsen av konsepter vil øke. Vi skrev også flere startleksjoner om JavaScript-grunnleggende for å introdusere konsepter, kombinert med en video fra "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"-samlingen av videotutorialer, hvor noen av forfatterne bidro til dette pensumet.
Ved å sikre at innholdet stemmer overens med prosjektene, gjøres prosessen mer engasjerende for studentene og lagring av konsepter vil bli forbedret. Vi skrev også flere startleksjoner i JavaScript-grunnleggende for å introdusere konsepter, koblet med en video fra "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" samlingen av videotutorials, noen av forfatterne bidro til dette pensumet.
I tillegg setter en lavterskelprøve før en klasse studentens intensjon mot læring av et tema, mens en andre prøve etter timen sikrer ytterligere opprettholdelse. Dette pensumet er designet for å være fleksibelt og morsomt og kan følges helt eller delvis. Prosjektene starter smått og blir stadig mer komplekse mot slutten av 12-ukers syklusen.
I tillegg setter en lavterskelquiz før en time intensjonen til studenten om å lære et tema, mens en andre quiz etter timen sikrer ytterligere lagring. Dette pensumet er designet for å være fleksibelt og morsomt og kan tas i sin helhet eller delvis. Prosjektene starter smått og blir stadig mer komplekse innen slutten av 12-ukers syklusen.
Selv om vi bevisst har unngått å introdusere JavaScript-rammeverk for å fokusere på de grunnleggende ferdighetene som trengs som webutvikler før man tar i bruk et rammeverk, vil et godt neste steg for å fullføre dette pensumet være å lære om Node.js via en annen samling videoer: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Selv om vi med vilje har unngått å introdusere JavaScript-rammeverk for å fokusere på grunnleggende ferdigheter som trengs som webutvikler før man tar i bruk et rammeverk, vil et godt neste steg etter å ha fullført dette pensumet være å lære om Node.js via en annen samling videoer: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Besøk våre retningslinjer for [oppførselskode](CODE_OF_CONDUCT.md) og [bidrag](CONTRIBUTING.md). Vi ønsker din konstruktive tilbakemelding velkommen!
> Besøk våre retningslinjer for [Atferdskodeks](CODE_OF_CONDUCT.md) og [Bidra](CONTRIBUTING.md). Vi ønsker din konstruktive tilbakemelding velkommen!
## 🧭 Offlinetilgang
## 🧭 Offline-tilgang
Du kan kjøre denne dokumentasjonen offline ved å bruke [Docsify](https://docsify.js.org/#/). Fork dette repoet, [installer Docsify](https://docsify.js.org/#/quickstart) på din lokale maskin, og deretter i rotmappen til dette repoet, skriv `docsify serve`. Nettstedet vil bli servert på port 3000 på din localhost: `localhost:3000`.
Du kan kjøre denne dokumentasjonen offline ved å bruke [Docsify](https://docsify.js.org/#/). Fork dette repoet, [installer Docsify](https://docsify.js.org/#/quickstart) på din lokale maskin, og deretter i rotmappen til dette repoet, skriv `docsify serve`. Nettstedet vil serveres på port 3000 på din localhost: `localhost:3000`.
## 📘 PDF
## 📘 PDF
En PDF med alle leksjonene kan finnes [her](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
En PDF av alle leksjonene kan finnes [her](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Andre kurs
## 🎒 Andre Kurs
Teamet vårt produserer andre kurs! Sjekk ut:
Teamet vårt produserer andre kurs! Sjekk ut:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
---
### Azure / Edge / MCP / Agents
### Azure / Edge / MCP / Agenter
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Hvis du sitter fast eller har spørsmål om å bygge AI-apper. Bli med medlærere og erfarne utviklere i diskusjoner om MCP. Det er et støttende fellesskap hvor spørsmål er velkomne og kunnskap deles fritt.
Hvis du sitter fast eller har noen spørsmål om å bygge AI-apper. Bli med andre lærende og erfarne utviklere i diskusjoner om MCP. Det er et støttende fellesskap hvor spørsmål er velkomne og kunnskap deles fritt.
@ -266,5 +267,5 @@ Dette depotet er lisensiert under MIT-lisensen. Se [LICENSE](../../LICENSE)-file
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfraskrivelse**:
**Ansvarsfraskrivelse**:
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi streber etter nøyaktighet, vennligst vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det opprinnelige dokumentet på originalspråket skal betraktes som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for noen misforståelser eller feiltolkninger som oppstår som følge av bruk av denne oversettelsen.
Dette dokumentet er oversatt ved bruk av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi streber etter nøyaktighet, vennligst vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på dets opprinnelige språk skal betraktes som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.
# Veikart for Microsofts Web-Dev-For-Beginners Repository
**Dette depotet gir et veikart for å lære grunnleggende webutvikling med fokus på JavaScript, HTML og CSS. Pensumet er fleksibelt og kan tas i sin helhet eller delvis, med 24 leksjoner fordelt på 12 uker.**
## Viktige milepæler
* **Uker 1-3:**
* Introduksjon til programmeringsspråk og verktøy for faget
* Grunnleggende om GitHub
* Tilgjengelighet
* JS grunnleggende: datatyper, funksjoner og metoder
* Å ta beslutninger med JS
* **Uker 4-6:**
* Arrayer og løkker
* Terrarium: HTML i praksis
* CSS i praksis
* JavaScript closures
* DOM-manipulering
* **Uker 7-9:**
* Typing Game: Hendelsesdrevet programmering
* Green Browser Extension: Arbeide med nettlesere
* Lage et skjema, kalle et API og lagre variabler i lokal lagring
* Bakgrunnsprosesser i nettleseren
* Nettleserytelse
* **Uker 10-12:**
* Space Game: Mer avansert spillutvikling med JavaScript
* Tegning på canvas
* Flytte elementer rundt på skjermen
* Kollisjonsdeteksjon
* Holde poengsum, avslutte og starte spillet på nytt
* Banking App: HTML-maler og ruter i en webapp
* Lage innloggings- og registreringsskjema
* Metoder for å hente og bruke data
* Konsepter innen tilstandsbehandling
## Læringsutbytte
**Ved å fullføre dette veikartet vil studentene få praktisk erfaring med å bygge et typing-spill, virtuelt terrarium, miljøvennlig nettleserutvidelse, space-invader-stil spill og en bankapp for bedrifter. De vil også utvikle en solid forståelse av grunnleggende webutvikling.**
## Ekstra ressurser
* Dette depotet tilbyr et vell av ressurser for videre læring, inkludert opplæringsmateriell, kodeeksempler og utfordringer.
* Microsoft Learn-plattformen tilbyr en rekke kurs og læringsstier innen webutvikling.
* Nettmiljøer som Stack Overflow og MDN Web Docs gir verdifull støtte og ressurser til webutviklere.
**Jeg håper dette veikartet hjelper deg på din webutviklingsreise!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfraskrivelse**:
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi streber etter nøyaktighet, vennligst vær oppmerksom på at automatiserte oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på dets opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi påtar oss ikke ansvar for misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.
localizeflow[bot]
7 months ago