msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

chore(i18n): sync translations with latest source changes (chunk 1/1, 9 changes)

Browse Source
pull/1690/head
localizeflow[bot] 3 weeks ago
parent c4814f046e
commit cd773d3e60
9 changed files with 812 additions and 785 deletions
Show Stats Download Patch File Download Diff File

6
translations/fi/.co-op-translator.json
Unescape View File

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:30:52+00:00",
"translation_date": "2026-02-06T09:08:06+00:00",
"source_file": "AGENTS.md",
"language_code": "fi"
},
@ -516,8 +516,8 @@
"language_code": "fi"
},
"README.md": {
"original_hash": "490c83786552d7fab6390991517bef09",
"translation_date": "2026-01-29T18:36:15+00:00",
"original_hash": "805cd399757df19e886e86f0891a1374",
"translation_date": "2026-02-06T09:01:41+00:00",
"source_file": "README.md",
"language_code": "fi"
},

348
translations/fi/AGENTS.md
Unescape View File

@ -1,28 +1,28 @@
# AGENTS.md
## Projektin yleiskatsaus
## Projektin yleiskuvaus
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 opetussisältöjen arkisto, joka on tarkoitettu web-kehityksen perusteiden opettamiseen aloittelijoille. Opetussuunnitelma on kattava 12 viikon kurssi, jonka ovat kehittäneet Microsoft Cloud Advocates -tiimi, ja se sisältää 24 käytännön oppituntia käsitellen JavaScriptiä, CSS:ää ja HTML:ää.
### Keskeiset osat
- **Opetussisältö**: 24 jäsenneltyä oppituntia, jotka on järjestetty projektipohjaisiin moduuleihin
- **Käytännön projektit**: Terrarium, kirjoituspeli, selainlaajennus, avaruuspeli, pankkisovellus, koodieditori ja tekoäly-chat-avustaja
- **Interaktiiviset visailut**: 48 visailua, joissa on 3 kysymystä (ennen/jälkeen oppituntien arvioinnit)
- **Monikielinen tuki**: Automaattiset käännökset yli 50 kielelle GitHub Actionsin avulla
- **Teknologiat**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (tekoälyprojekteihin)
- **Opetussisältö**: 24 rakenteellista oppituntia projektipohjaisissa moduuleissa
- **Käytännön projektit**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor ja AI Chat Assistant
- **Interaktiiviset visailut**: 48 visaa, joissa jokaisessa 3 kysymystä (ennakoivat/jälkeiset arvioinnit)
- **Monikielinen tuki**: Automaattiset käännökset yli 50 kielelle GitHub Actionsin kautta
- **Teknologiat**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI-projekteihin)
### Arkkitehtuuri
- Opetusarkisto, jossa oppituntipohjainen rakenne
- Jokainen oppituntikansio sisältää README-tiedoston, koodiesimerkkejä ja ratkaisuja
- Erilliset projektit omissa hakemistoissaan (quiz-app, eri oppituntiprojektit)
- Opetussisältöihin perustuva arkisto oppituntirakenteella
- Jokaisessa oppituntikansiossa README, koodiesimerkit ja ratkaisut
- Erilliset projektit omissa hakemistoissaan (quiz-app, erilaiset oppimisprojektit)
- Käännösjärjestelmä GitHub Actionsin avulla (co-op-translator)
- Dokumentaatio Docsifyn kautta ja saatavilla PDF-muodossa
- Dokumentaatio tarjolla Docsifyn kautta ja PDF-muodossa
## Asennuskomennot
Tämä arkisto on ensisijaisesti tarkoitettu opetussisällön käyttöön. Yksittäisten projektien kanssa työskentelyyn:
Tätä arkistoa käytetään pääasiassa opetussisällön kuluttamiseen. Työskenneltäessä tiettyjen projektien parissa:
### Pääarkiston asennus
@ -31,14 +31,14 @@ git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Visailusovelluksen asennus (Vue 3 + Vite)
### Quiz Appin asennus (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # Start development server
npm run build # Build for production
npm run lint # Run ESLint
npm run dev # Käynnistä kehityspalvelin
npm run build # Rakenna tuotantoon
npm run lint # Suorita ESLint
```
### Pankkiprojektin API (Node.js + Express)
@ -46,95 +46,95 @@ npm run lint # Run ESLint
```bash
cd 7-bank-project/api
npm install
npm start # Start API server
npm run lint # Run ESLint
npm run format # Format with Prettier
npm start # Käynnistä API-palvelin
npm run lint # Suorita ESLint
npm run format # Muotoile Prettierillä
```
### Selainlaajennusprojektit
### Selaimen laajennusprojektit
```bash
cd 5-browser-extension/solution
npm install
# Follow browser-specific extension loading instructions
# Noudata selaimen erityisiä laajennuksen latausohjeita
```
### Avaruuspeli-projektit
### Space Game -projektit
```bash
cd 6-space-game/solution
npm install
# Open index.html in browser or use Live Server
# Avaa index.html selaimessa tai käytä Live Serveriä
```
### Chat-projekti (Python-taustajärjestelmä)
### Chat-projekti (Python Backend)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Set GITHUB_TOKEN environment variable
# Aseta GITHUB_TOKEN-ympäristömuuttuja
python api.py
```
## Kehitystyönkulku
## Kehitysprosessi
### Sisällön tuottajille
### Sisällöntuottajille
1. **Forkkaa arkisto** GitHub-tilillesi
2. **Kloonaa forkattu arkisto** paikallisesti
1. **Tee oma fork** arkistosta GitHub-tilillesi
2. **Kloonaa fork paikallisesti**
3. **Luo uusi haara** muutoksillesi
4. Tee muutoksia oppituntisisältöön tai koodiesimerkkeihin
5. Testaa koodimuutokset asiaankuuluvissa projektihakemistoissa
6. Lähetä pull requestit noudattaen osallistumisohjeita
5. Testaa tekemäsi koodimuutokset asianmukaisissa projektihakemistoissa
6. Lähetä pull requesteja noudattaen kontribuutiokäytäntöjä
### Oppijoille
1. Forkkaa tai kloonaa arkisto
2. Siirry oppituntihakemistoihin järjestyksessä
3. Lue README-tiedostot jokaisesta oppitunnista
1. Tee fork tai kloonaa arkisto
2. Siirry oppituntikansioihin peräkkäin
3. Lue jokaisen oppitunnin README-tiedostot
4. Suorita ennakkovisailut osoitteessa https://ff-quizzes.netlify.app/web/
5. Työskentele oppituntihakemistojen koodiesimerkkien parissa
5. Työstä koodiesimerkkejä oppituntikansioissa
6. Suorita tehtävät ja haasteet
7. Tee jälkivisailut
7. Osallistu jälkeisiin visoihin
### Live-kehitys
- **Dokumentaatio**: Suorita `docsify serve` juurihakemistossa (portti 3000)
- **Visailusovellus**: Suorita `npm run dev` quiz-app-hakemistossa
- **Projektit**: Käytä VS Code Live Server -laajennusta HTML-projekteihin
- **API-projektit**: Suorita `npm start` asiaankuuluvissa API-hakemistoissa
- **Dokumentaatio**: Käynnistä `docsify serve` juurikansiossa (portti 3000)
- **Quiz App**: Käynnistä `npm run dev` quiz-app-hakemistossa
- **Projektit**: Käytä VS Code Live Server -laajennusta HTML-projekteille
- **API-projektit**: Käynnistä `npm start` vastaavissa API-hakemistoissa
## Testausohjeet
### Visailusovelluksen testaus
### Quiz Appin testaus
```bash
cd quiz-app
npm run lint # Check for code style issues
npm run build # Verify build succeeds
npm run lint # Tarkista koodityylivirheet
npm run build # Varmista, että käännös onnistuu
```
### Pankki-API:n testaus
### Bank API:n testaus
```bash
cd 7-bank-project/api
npm run lint # Check for code style issues
node server.js # Verify server starts without errors
npm run lint # Tarkista koodityyliongelmat
node server.js # Varmista, että palvelin käynnistyy ilman virheitä
```
### Yleinen testauslähestymistapa
- Tämä on opetusarkisto, jossa ei ole kattavia automatisoituja testejä
- Tämä on opetussisältöarkisto ilman kattavia automatisoituja testejä
- Manuaalinen testaus keskittyy:
- Koodiesimerkit toimivat ilman virheitä
- Dokumentaation linkit toimivat oikein
- Projektien rakennus onnistuu
- Esimerkit noudattavat parhaita käytäntöjä
- Koodiesimerkkien virheettömään suoritukseen
- Dokumentaation linkkien toimivuuteen
- Projektien onnistuneeseen kääntämiseen
- Esimerkkien oikeellisuuteen ja käytäntöjen noudattamiseen
### Ennen lähettämistä tarkistettavat asiat
### Tarkistukset ennen lähettämistä
- Suorita `npm run lint` hakemistoissa, joissa on package.json
- Varmista, että markdown-linkit ovat kelvollisia
- Varmista markdown-linkkien toimivuus
- Testaa koodiesimerkit selaimessa tai Node.js:ssä
- Tarkista, että käännökset säilyttävät oikean rakenteen
@ -142,141 +142,141 @@ node server.js # Verify server starts without errors
### JavaScript
- Käytä modernia ES6+ syntaksia
- Noudata projektien mukana tulevia ESLint-konfiguraatioita
- Käytä merkityksellisiä muuttuja- ja funktiotunnuksia opetuksen selkeyden vuoksi
- Lisää kommentteja, jotka selittävät käsitteitä oppijoille
- Muotoile Prettierillä, jos se on konfiguroitu
- Käytä modernia ES6+-syntaksia
- Noudata projektien ESLint-konfiguraatioita
- Käytä merkityksellisiä muuttuja- ja funktioiden nimiä opetuksellisuuden vuoksi
- Lisää kommentteja oppijan havainnollistamiseksi
- Muotoile Prettierillä, jos se on määritetty
### HTML/CSS
- Semanttiset HTML5-elementit
- Responsiivisen suunnittelun periaatteet
- Selkeät luokkanimikonventiot
- Kommentit, jotka selittävät CSS-tekniikoita oppijoille
- Selkeät luokkien nimikäytännöt
- Kommentit CSS-tekniikoiden selittämiseen oppijoille
### Python
- PEP 8 -tyyliohjeet
- Selkeät, opettavaiset koodiesimerkit
- Tyyppivihjeet, jos ne auttavat oppimisessa
- PEP 8 -tyylistandardit
- Selkeät, opetukselliset koodiesimerkit
- Tyyppivihjeet oppimisen tukemiseksi
### Markdown-dokumentaatio
- Selkeä otsikkohierarkia
- Koodilohkot, joissa on kielimääritys
- Koodilohkot kielimäärittelyllä
- Linkit lisäresursseihin
- Kuvakaappaukset ja kuvat `images/`-hakemistoissa
- Alt-teksti kuvien saavutettavuuden vuoksi
- Kuvankaappauksia ja kuvia `images/`-hakemistoissa
- Kuvien alt-tekstit saavutettavuuden vuoksi
### Tiedostojen organisointi
### Tiedostojen järjestely
- Oppitunnit numeroitu järjestyksessä (1-getting-started-lessons, 2-js-basics jne.)
- Jokaisessa projektissa on `solution/` ja usein `start/` tai `your-work/` hakemistot
- Kuvat tallennettu oppituntikohtaisiin `images/`-kansioihin
- Käännökset `translations/{language-code}/` rakenteessa
- Oppitunnit numeroitu peräkkäin (1-getting-started-lessons, 2-js-basics jne.)
- Jokaisella projektilla on `solution/` ja usein myös `start/` tai `your-work/`-hakemistot
- Kuvat tallennettuna oppituntikohtaisiin `images/`-kansioihin
- Käännökset `translations/{language-code}/` -rakenteessa
## Rakennus ja käyttöönotto
## Kääntäminen ja julkaisu
### Visailusovelluksen käyttöönotto (Azure Static Web Apps)
### Quiz Appin julkaisu (Azure Static Web Apps)
Visailusovellus on konfiguroitu Azure Static Web Apps -käyttöönottoa varten:
Quiz-app on konfiguroitu Azure Static Web Apps -julkaisua varten:
```bash
cd quiz-app
npm run build # Creates dist/ folder
# Deploys via GitHub Actions workflow on push to main
npm run build # Luo dist/ kansion
# Julkaisee GitHub Actions -työnkulun kautta, kun tehdään push mainiin
```
Azure Static Web Apps -konfiguraatio:
- **Sovelluksen sijainti**: `/quiz-app`
- **Tuotoksen sijainti**: `dist`
- **Työnkulku**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
- **Tulostuskansio**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Dokumentaation PDF-luonti
```bash
npm install # Install docsify-to-pdf
npm run convert # Generate PDF from docs
npm install # Asenna docsify-to-pdf
npm run convert # Luo PDF dokumentaatiosta
```
### Docsify-dokumentaatio
```bash
npm install -g docsify-cli # Install Docsify globally
docsify serve # Serve on localhost:3000
npm install -g docsify-cli # Asenna Docsify globaalisti
docsify serve # Palvele paikallisessa isännässä portissa 3000
```
### Projektikohtaiset rakennukset
### Projektikohtaiset käännökset
Jokaisella projektihakemistolla voi olla oma rakennusprosessi:
- Vue-projektit: `npm run build` luo tuotantopaketit
- Staattiset projektit: Ei rakennusvaihetta, palvele tiedostoja suoraan
Jokaisella projektihakemistolla voi olla oma build-prosessinsa:
- Vue-projekteilla: `npm run build` luo tuotantopakettit
- Staattisilla projekteilla: Ei erillistä käännöstä, tarjoillaan tiedostot suoraan
## Pull Request -ohjeet
## Pull request -ohjeet
### Otsikkomuoto
Käytä selkeitä, kuvaavia otsikoita, jotka kertovat muutoksen alueen:
- `[Quiz-app] Lisää uusi visailu oppitunnille X`
Käytä selkeitä ja kuvaavia otsikoita, jotka osoittavat muutoksen kohteen:
- `[Quiz-app] Lisää uusi visa oppitunnille X`
- `[Lesson-3] Korjaa kirjoitusvirhe terrarium-projektissa`
- `[Translation] Lisää espanjankielinen käännös oppitunnille 5`
- `[Translation] Lisää espanjan käännös oppitunnille 5`
- `[Docs] Päivitä asennusohjeet`
### Vaaditut tarkistukset
### Pakolliset tarkistukset
Ennen PR:n lähettämistä:
1. **Koodin laatu**:
- Suorita `npm run lint` asiaankuuluvissa projektihakemistoissa
- Korjaa kaikki lint-virheet ja -varoitukset
- Suorita `npm run lint` vaikuttavissa projektihakemistoissa
- Korjaa kaikki lint-virheet ja varoitukset
2. **Rakennuksen tarkistus**:
- Suorita `npm run build`, jos sovellettavissa
- Varmista, ettei rakennusvirheitä ole
2. **Käännösten varmistus**:
- Suorita `npm run build` tarvittaessa
- Varmista ettei käännösvirheitä esiinny
3. **Linkkien validointi**:
3. **Linkkien tarkistus**:
- Testaa kaikki markdown-linkit
- Varmista, että kuvaviittaukset toimivat
- Varmista kuvaviittausten toimivuus
4. **Sisällön tarkistus**:
- Oikolue oikeinkirjoitus ja kielioppi
- Varmista, että koodiesimerkit ovat oikein ja opettavaisia
- Tarkista, että käännökset säilyttävät alkuperäisen merkityksen
4. **Sisällön tarkastus**:
- Tarkista oikeinkirjoitus ja kielioppi
- Varmista koodiesimerkkien oikeellisuus ja opetuksellisuus
- Tarkista käännösten pysyvyys alkuperäisessä merkityksessä
### Osallistumisvaatimukset
### Kontribuution vaatimukset
- Hyväksy Microsoft CLA (automaattinen tarkistus ensimmäisessä PR:ssä)
- Noudata [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Katso [CONTRIBUTING.md](./CONTRIBUTING.md) yksityiskohtaisia ohjeita varten
- Viittaa ongelmanumeroihin PR-kuvauksessa, jos sovellettavissa
- Noudata [Microsoft Open Source Code of Conductia](https://opensource.microsoft.com/codeofconduct/)
- Katso [CONTRIBUTING.md](./CONTRIBUTING.md) yksityiskohtaiset ohjeet
- Viittaa issue-numeroihin PR-kuvauksessa, jos mahdollista
### Tarkistusprosessi
### Tarkastusprosessi
- PR:t tarkistetaan ylläpitäjien ja yhteisön toimesta
- Opetuksen selkeys on etusijalla
- Koodiesimerkkien tulee noudattaa nykyisiä parhaita käytäntöjä
- Käännökset tarkistetaan tarkkuuden ja kulttuurisen sopivuuden osalta
- PR:t tarkastetaan ylläpitäjien ja yhteisön toimesta
- Opetuksellisen selkeyden korostaminen
- Koodiesimerkkien noudattavan parhaimpia käytäntöjä
- Käännökset arvioidaan tarkkuuden ja kulttuurisen sopivuuden perusteella
## Käännösjärjestelmä
### Automaattinen käännös
- Käyttää GitHub Actionsia co-op-translator-työnkululla
- Kääntää automaattisesti yli 50 kielelle
- Lähdetiedostot päähakemistoissa
- Käännetyt tiedostot `translations/{language-code}/` hakemistoissa
- Käyttää GitHub Actionsin co-op-translator workflow’ta
- Kääntää yli 50 kielelle automaattisesti
- Lähdetiedostot pääkansioissa
- Käännetyt tiedostot `translations/{language-code}/` -hakemistoissa
### Manuaalisten käännösparannusten lisääminen
### Manuaalisten käännösten parannukset
1. Etsi tiedosto `translations/{language-code}/` hakemistosta
1. Etsi tiedosto `translations/{language-code}/` -hakemistosta
2. Tee parannuksia säilyttäen rakenne
3. Varmista, että koodiesimerkit toimivat edelleen
4. Testaa lokalisoitu visailusisältö
4. Testaa paikallistetut visasisällöt
### Käännöksen metadata
### Käännösten metadata
Käännetyt tiedostot sisältävät metadataotsikon:
Käännetyissä tiedostoissa on metadataotsikko:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,118 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Virheenkorjaus ja vianetsintä
## Virheenkorjaus ja ongelmanratkaisu
### Yleiset ongelmat
**Visailusovellus ei käynnisty**:
- Tarkista Node.js-versio (suositus: v14+)
**Quiz app ei käynnisty**:
- Tarkista Node.js:n versio (v14+ suositeltu)
- Poista `node_modules` ja `package-lock.json`, suorita `npm install` uudelleen
- Tarkista porttikonfliktit (oletus: Vite käyttää porttia 5173)
- Tarkista porttikonfliktit (Vite käyttää oletuksena porttia 5173)
**API-palvelin ei käynnisty**:
- Varmista, että Node.js-versio täyttää vähimmäisvaatimukset (node >=10)
- Varmista, että Node.js-versio on vähintään 10
- Tarkista, onko portti jo käytössä
- Varmista, että kaikki riippuvuudet on asennettu `npm install` -komennolla
**Selainlaajennus ei lataudu**:
**Selaimen laajennusta ei ladata**:
- Varmista, että manifest.json on oikein muotoiltu
- Tarkista selaimen konsolista virheet
- Noudata selaimen erityisiä laajennuksen asennusohjeita
- Tarkista selaimen konsoli virheiden varalta
- Seuraa selaimen laajennuksen asennusohjeita
**Python-chat-projektin ongelmat**:
- Varmista, että OpenAI-paketti on asennettu: `pip install openai`
- Tarkista, että GITHUB_TOKEN ympäristömuuttuja on asetettu
- Varmista OpenAI-paketin asennus: `pip install openai`
- Tarkista, että GITHUB_TOKEN-ympäristömuuttuja on asetettu
- Tarkista GitHub Models -käyttöoikeudet
**Docsify ei palvele dokumentaatiota**:
- Asenna docsify-cli globaalisti: `npm install -g docsify-cli`
- Suorita arkiston juurihakemistosta
- Käynnistä arkiston juuresta
- Tarkista, että `docs/_sidebar.md` on olemassa
### Kehitysympäristövinkit
### Kehitysympäristön vinkkejä
- Käytä VS Codea Live Server -laajennuksella HTML-projekteihin
- Asenna ESLint- ja Prettier-laajennukset yhtenäistä muotoilua varten
- Käytä VS Codea Live Server -laajennuksella HTML-projekteille
- Asenna ESLint ja Prettier yhdenmukaista muotoilua varten
- Käytä selaimen DevToolsia JavaScriptin virheenkorjaukseen
- Vue-projekteihin asenna Vue DevTools -selaimen laajennus
- Vue-projekteissa asenna Vue DevTools -selaimen lisäosa
### Suorituskykypohdinnat
### Suorituskyvyn huomioita
- Suuri määrä käännettyjä tiedostoja (yli 50 kieltä) tarkoittaa, että täydet kloonaukset ovat suuria
- Käytä matalaa kloonausta, jos työskentelet vain sisällön parissa: `git clone --depth 1`
- Sulje käännökset pois hauista, kun työskentelet englanninkielisen sisällön parissa
- Rakennusprosessit voivat olla hitaita ensimmäisellä kerralla (npm install, Vite build)
- Suuri määrä käännettyjä tiedostoja (50+) tekee koko kloonauksesta raskaan
- Käytä matalaa kloonausta sisällön muokkaamiseen: `git clone --depth 1`
- Poista käännökset haun kohteista työskennellessäsi englanninkielisen sisällön kanssa
- Käännösprosessit voivat olla hitaita ensimmäisellä suorituksella (npm install, Vite build)
## Tietoturvapohdinnat
## Turvallisuusnäkökulmat
### Ympäristömuuttujat
- API-avaimia ei koskaan saa sitouttaa arkistoon
- Käytä `.env`-tiedostoja (jo `.gitignore`-tiedostossa)
- Dokumentoi vaaditut ympäristömuuttujat projektien README-tiedostoissa
- API-avaimia ei tule koskaan sitoa arkistoon
- Käytä `.env`-tiedostoja (jo sisältyy `.gitignoreen`)
- Dokumentoi tarvittavat ympäristömuuttujat projektin README-tiedostoissa
### Python-projektit
- Käytä virtuaaliympäristöjä: `python -m venv venv`
- Pidä riippuvuudet ajan tasalla
- GitHub-tunnuksilla tulisi olla vain vähimmäisvaaditut käyttöoikeudet
- GitHub-tunnuksilla tulee olla vain tarvittavat oikeudet
### GitHub Models -käyttöoikeudet
### GitHub Models -käyttö
- Henkilökohtaiset käyttöoikeustunnukset (PAT) vaaditaan GitHub Models -käyttöön
- Tunnukset tulisi tallentaa ympäristömuuttujiin
- Älä koskaan sitouta tunnuksia tai tunnistetietoja
- Henkilökohtaiset access tokenit (PAT) vaaditaan GitHub Models -käyttöön
- Tokenit tulee tallentaa ympäristömuuttujiin
- Älä koskaan lähetä tokeneita tai tunnisteita arkistoon
## Lisähuomautuksia
## Lisähuomiot
### Kohderyhmä
### Kohdeyleisö
- Täysin aloittelijat verkkokehityksessä
- Täysin web-kehityksen aloittelijat
- Opiskelijat ja itseopiskelijat
- Opettajat, jotka käyttävät opetusohjelmaa luokissaan
- Sisältö on suunniteltu saavutettavaksi ja taitojen asteittaiseen kehittämiseen
- Opettajat, jotka käyttävät opetussuunnitelmaa luokkahuoneissa
- Sisältö on suunniteltu saavutettavaksi ja taidot rakentavaksi
### Opetuksellinen filosofia
- Projektipohjainen oppiminen
- Usein toistuvat tietotestit (visailut)
- Säännölliset tietojen tarkastukset (visat)
- Käytännön koodausharjoitukset
- Esimerkkejä tosielämän sovelluksista
- Keskittyminen perusteisiin ennen kehyksiä
- Todelliset sovellus-esimerkit
- Painotus perusteissa ennen frameworkkeja
### Arkiston ylläpito
- Aktiivinen oppijoiden ja osallistujien yhteisö
- Aktiivinen yhteisö oppijoita ja kontribuoijia
- Säännölliset päivitykset riippuvuuksiin ja sisältöön
- Ylläpitäjät seuraavat ongelmia ja keskusteluja
- Käännöspäivitykset automatisoitu GitHub Actionsin avulla
- Issueiden ja keskustelujen valvonta ylläpitäjien toimesta
- Käännösten päivitykset automatisoitu GitHub Actionsilla
### Liittyvät resurssit
- [Microsoft Learn -moduulit](https://docs.microsoft.com/learn/)
- [Student Hub -resurssit](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) suositellaan oppijoille
- Lisäkurssit: Generatiivinen tekoäly, data-analytiikka, ML, IoT-opetusohjelmat saatavilla
- Lisäkurssit: Generatiivinen AI, Data Science, ML, IoT opetussuunnitelmat saatavilla
### Työskentely yksittäisten projektien kanssa
### Työskentely tietyissä projekteissa
Yksityiskohtaiset ohjeet yksittäisistä projekteista löytyvät README-tiedostoista:
- `quiz-app/README.md` - Vue 3 visailusovellus
- `7-bank-project/README.md` - Pankkisovellus, jossa on autentikointi
- `5-browser-extension/README.md` - Selainlaajennuksen kehitys
- `6-space-game/README.md` - Canvas-pohjainen pelikehitys
- `9-chat-project/README.md` - Tekoäly-chat-avustajaprojekti
Yksityiskohtaiset ohjeet löytyvät projektien README-tiedostoista:
- `quiz-app/README.md` - Vue 3 visasovellus
- `7-bank-project/README.md` - Pankkisovellus autentikoinnilla
- `5-browser-extension/README.md` - Selaimen laajennuskehitys
- `6-space-game/README.md` - Canvas-pohjainen peli
- `9-chat-project/README.md` - AI-chat-avustajan projekti
### Monorepo-rakenne
Vaikka tämä ei ole perinteinen monorepo, arkisto sisältää useita itsenäisiä projekteja:
- Jokainen oppitunti on itsenäinen
Tämä ei ole perinteinen monorepo, mutta sisältää useita itsenäisiä projekteja:
- Jokainen oppitunti on itsenäinen kokonaisuus
- Projektit eivät jaa riippuvuuksia
- Työskentele yksittäisten projektien parissa vaikuttamatta muihin
- Kloonaa koko arkisto saadaksesi täyden opetusohjelmakokemuksen
- Kloonaa koko arkisto saadaksesi täydellisen opetussuunnitelman kokemuksen
---
**Vastuuvapauslauseke**:
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperä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ä.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Vastuuvapauslauseke**:
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Pyrimme tarkkuuteen, mutta ota huomioon, että automaattikäännöksissä saattaa esiintyä virheitä tai epätarkkuuksia. Alkuperäinen asiakirja omalla kielellään on virallinen lähde. Tärkeissä asioissa suosittelemme ammattimaista ihmiskäännöstä. Emme ole vastuussa mahdollisista väärinymmärryksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

194
translations/fi/README.md
Unescape View File

@ -12,16 +12,16 @@
# Verkkokehitys aloittelijoille - Opetussuunnitelma
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 Microsoft Cloud Advocatesin kattavalla 12 viikon kurssilla. Jokainen 24 oppitunnista sukeltaa JavaScriptiin, CSS:ään ja HTML:ään käytännön projektien kautta, kuten terrarioihin, selaimen laajennuksiin ja avaruuspeliin. Osallistu tietovisoihin, keskusteluihin ja käytännön tehtäviin. Kehitä taitojasi ja optimoi tiedon omaksumisesi tehokkaalla projektilähtöisellä opetuksellamme. Aloita koodausmatkasi tänään!
Liity Azure AI Foundry Discord -yhteisöön
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Noudata näitä vaiheita päästäksesi alkuun näiden resurssien kanssa:
1. **Haarauta repositorio**: Klikkaa [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
Seuraa näitä vaiheita aloittaaksesi näiden resurssien käytön:
1. **Forkkaa repositorio**: Klikkaa [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Kloonaa repositorio**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Liity Azure AI Foundry Discordiin ja tapaa asiantuntijoita ja muita kehittäjiä**](https://discord.com/invite/ByRwuEEgH4)
3. [**Liity Azure AI Foundry Discordiin ja tapaa asiantuntijoita sekä muita kehittäjiä**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Monikielinen tuki
@ -32,175 +32,177 @@ Noudata näitä vaiheita päästäksesi alkuun näiden resurssien kanssa:
> **Haluatko kloonata paikallisesti?**
> 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ä repositorio sisältää yli 50 käännöskieltä, jotka kasvattavat merkittävästi latauskokoa. Jos haluat kloonata ilman käännöksiä, käytä sparse checkout -ominaisuutta:
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> 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 nopeammalla latauksella.
<!-- 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ää käännöskieliä, tuetut kielet ovat listattu [tässä](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Avaa Visual Studio Codessa](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Avaa%20Visual%20Studio%20Codessa&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _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 aloittelijoille suunnattuja resursseja, opiskelijapakkauksia ja jopa tapoja saada ilmainen sertifikaattikuponki. Tämä sivu kannattaa lisätä kirjanmerkkeihin ja tarkistaa aika ajoin, koska päivitämme sisältöä kuukausittain.
### 📣 Ilmoitus – Uusia GitHub Copilot Agent -tilan haasteita suoritettavaksi!
### 📣 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, joka sinun tulee suorittaa käyttäen GitHub Copilotia ja Agent-tilaa. Jos et ole aiemmin käyttänyt Agent-tilaa, se kykenee paitsi luomaan tekstiä myös luomaan ja muokkaamaan tiedostoja, suorittamaan komentoja ja muuta.
### 📣 Ilmoitus – _Uusi generatiiviseen tekoälyyn perustuva projekti rakennettavaksi_
### 📣 Ilmoitus - _Uusi projekti generatiivisella tekoälyllä rakennettavaksi_
Uusi AI-avustajaprojekti juuri lisätty, tutustu [projektiin](./9-chat-project/README.md)
Uusi tekoälyavustajaprojekti juuri lisätty, katso [projekti](./9-chat-project/README.md)
### 📣 Ilmoitus – _Uusi Generative AI -opetussuunnitelma JavaScriptille julkaistu_
### 📣 Ilmoitus - _Uusi opetussuunnitelma_ generatiivisesta tekoälystä JavaScriptille on julkaistu
Älä jää paitsi uudesta Generative AI -opetussuunnitelmastamme!
Älä missaa uutta generatiivisen tekoälyn opetussuunnitelmaamme!
Aloita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)
Käy osoitteessa [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) aloittaaksesi!
![Tausta](../../translated_images/fi/background.148a8d43afde5730.webp)
![Background](../../translated_images/fi/background.148a8d43afde5730.webp)
- Oppitunteja perusteista RAG-malliin asti.
- Oppitunnit kattavat kaiken perusteista RAG-menetelmään.
- Keskustele historiallisten hahmojen kanssa GenAI:n ja kumppanisovelluksemme avulla.
- Hauska ja mukaansatempaava tarinankerronta, matkustat ajassa!
- Hauska ja mukaansatempaava tarina, matkustat ajassa!
![hahmo](../../translated_images/fi/character.5c0dd8e067ffd693.webp)
![character](../../translated_images/fi/character.5c0dd8e067ffd693.webp)
Jokainen oppitunti sisältää tehtävän suoritettavaksi, tietokokeen ja haasteen, jotka ohjaavat sinua oppimaan aiheita, kuten:
- Promptauksen ja promptinsuunnittelun perusteet
- Teksti- ja kuvapohjaiset sovellukset
Jokaisen oppitunnin yhteydessä on tehtävä suoritettavaksi, tietotarkistus ja haaste, jotka ohjaavat oppimista aiheissa kuten:
- Kehottaminen ja kehotteiden suunnittelu
- Teksti- ja kuvasovellusten generointi
- Hakusovellukset
Aloita täällä: [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course)
Käy sivulla [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) ryhtyäksesi toimeen!
## 🌱 Aloittaminen
> **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äyttöön. Haluamme mielellämme palautettanne [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Oppijat](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, aloita jokainen oppitunti 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)**, jokaiselle oppitunnille aloita ennakkotietovisalla ja seuraa luentoaineiston lukemista, erilaisten aktiviteettien suorittamista ja tarkista ymmärryksesi jälkitietovisalla.
Paranna oppimiskokemustasi liittymällä vertaistesi seuraan projekteissa! Keskustelut ovat tervetulleita [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), jossa moderaattoritiimimme vastaa kysymyksiisi.
Paranna oppimiskokemustasi yhdistämällä vertaistesi kanssa projektien parissa työskentelyä varten! Kannustamme keskusteluihin [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), missä moderaattoritiimimme vastaa 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.
Jatka opiskeluasi vahvasti suositellen tutustumista [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) -palveluun lisäopiskelumateriaalien saamiseksi.
### 📋 Ympäristön asennus
### 📋 Ympäristön asetukset
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 valmiina kehitysympäristö! Aloittaessasi voit valita kurssin ajamisen [Codespacessa](https://github.com/features/codespaces/) (_selainpohjainen, ei asennuksia vaativa ympäristö_) tai paikallisesti tietokoneellasi tekstieditoria, kuten [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon), käyttäen.
#### 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.
Työsi tallentamisen helpottamiseksi suosittelemme luomaan oman kopion tästä repositoriosta. Voit tehdä tämän klikkaamalla sivun yläreunasta **Use this template** -painiketta. Tämä luo uuden repositorion GitHub-tilillesi kopiona tästä opetussuunnitelmasta.
Noudata näitä ohjeita:
1. **Haarauta repositorio**: Klikkaa tämän sivun oikeassa yläkulmassa olevaa "Fork"-painiketta.
1. **Forkkaa repositorio**: Klikkaa tämän sivun oikean yläkulman "Fork" -painiketta.
2. **Kloonaa repositorio**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Opetussuunnitelman suorittaminen Codespacessa
#### Kurssin ajaminen Codespacessa
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 kopsisi repositoriosta, jonka loit, klikkaa **Code** -painiketta ja valitse **Open with Codespaces**. Tämä luo sinulle uuden Codespace-ympäristön työtä varten.
![Codespace](../../translated_images/fi/createcodespace.0238bbf4d7a8d955.webp)
#### Opetussuunnitelman suorittaminen paikallisesti tietokoneellasi
#### Kurssin ajaminen paikallisesti tietokoneellasi
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.
Jotta voit suorittaa opetussuunnitelman paikallisesti tietokoneellasi, tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, [Ohjelmointikielten ja työkalujen esittely](../../1-getting-started-lessons/1-intro-to-programming-languages), opastaa sinua eri vaihtoehtojen kanssa, jotta voit valita sinulle sopivimmat työkalut.
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).
Suosittelemme käyttämään editorina [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 klikkaamalla **Code** -painiketta ja kopioimalla URL-osoitteen:
[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 [Terminal](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:
```bash
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 valitsemalla **File** > **Open Folder** ja valitsemalla kansio, jonka juuri kloonasit.
> 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
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - auttaaksesi sinua kirjoittamaan koodia nopeammin
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - esikatsele HTML-sivuja Visual Studio Codessa
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - auttaaksesi koodin kirjoittamisessa nopeammin
## 📂 Jokainen oppitunti sisältää:
- valinnaisen luonnosmuistion
- valinnaisen muistion
- valinnaisen lisävideon
- ennakkolämmittelykyselyn ennen oppituntia
- ennakkoon tehtävän lämmittelykyselyn
- kirjallisen oppitunnin
- projektilähtöisissä oppitunneissa vaiheittaiset ohjeet projektin rakentamiseen
- tietotestin
- projektipohjaisissa oppitunneissa vaiheittaiset ohjeet projektin rakentamiseen
- tietovisat
- haasteen
- lisälukemista
- tehtävän
- [oppitunnin jälkeisen kyselyn](https://ff-quizzes.netlify.app/web/)
- [oppitunnin jälkeinen tietovisa](https://ff-quizzes.netlify.app/web/)
> **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 tietovisoista**: Kaikki tietovisat löytyvät Quiz-app-kansiosta, yhteensä 48 tietovisaa, joissa jokaisessa on kolme kysymystä. Ne ovat saatavilla [täältä](https://ff-quizzes.netlify.app/web/). Kyseistä quiz-sovellusta voi ajaa paikallisesti tai julkaista Azureen; seuraa ohjeita `quiz-app`-kansiossa.
## 🗃️ Oppitunnit
| | 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 |
| 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 |
| 03 | Aloittaminen | Esteettömyys | Opi verkkosivujen esteettömyyden perusteet | [Esteettömyyden perusteet](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScriptin tietotyypit | JavaScriptin tietotyyppien perusteet | [Tietotyypit](./2-js-basics/1-data-types/README.md) | Jasmine |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| | Projektin nimi | Opitut käsitteet | Oppimistavoitteet | Linkitetty oppitunti | Tekijä |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Aloittaminen | Johdatus ohjelmointiin ja ammattityökaluihin | Opi ohjelmointikielten perusperiaatteet ja ohjelmistot, jotka auttavat ammattilaisia 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 | Kuinka käyttää GitHubia projektissasi, miten tehdä yhteistyötä koodin parissa | [Johdatus GitHubiin](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Aloittaminen | Saavutettavuus | Opi verkkosivujen saavutettavuuden perusteet | [Saavutettavuuden perusteet](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScriptin tietotyypit | JavaScriptin tietotyyppien perusteet | [Tietotyypit](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Funktiot ja metodit | Opi funktioista ja metodeista sovelluksen logiikan hallinnassa | [Funktiot ja metodit](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | Päätöksenteko JS:n avulla | Opi luomaan ehdotuksia koodissasi käyttäen päätöksentekometodeja | [Päätöksenteko](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Taulukot ja silmukat | Työskentele tietojen kanssa käyttämällä taulukoita ja silmukoita 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 luodaksesi verkkoterraariumin, keskittyen asettelun rakentamiseen | [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 tyylitelläksesi verkkoterraariumia, keskittyen CSS:n perusteisiin ja sivun responsiivisuuteen | [Johdatus CSS:ään](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScriptin sulkeet, DOM:n käsittely | Rakenna JavaScript, joka mahdollistaa terraariumin käytön drag/drop-käyttöliittymänä, keskittyen sulkeisiin ja DOM:n käsittelyyn | [JavaScriptin sulkeet, DOM:n käsittely](./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 JavaScript-sovelluksesi logiikan ohjaamiseen | [Tapahtumapohjainen ohjelmointi](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Työskentely selainten kanssa | Opi miten selaimet toimivat, niiden historia, ja miten rakennetaan selaimen lisäosan ensimmäiset elementit | [Tietoa selaimista](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Lomakkeen rakentaminen, API-kutsut ja muuttujien tallennus paikalliseen tallennustilaan | Rakenna selaimen laajennuksen JavaScript-elementit API-kutsuihin käyttäen paikalliseen tallennustilaan tallennettuja muuttujia | [APIt, lomakkeet ja paikallinen tallennustila](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Taustaprosessit selaimessa, verkkosuorituskyky | Käytä selaimen taustaprosesseja hallitsemaan lisäosan kuvaketta; opi verkkosuorituskyvystä ja optimointikeinoista suorituskyvyn parantamiseksi | [Taustatehtävät ja suorituskyky](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Edistyneempi pelinkehitys JavaScriptillä | Opi perinnöstä käyttäen sekä luokkia että koostetta sekä Pub/Sub-kuviota, valmistautuaksesi pelin rakentamiseen | [Johdatus edistyneeseen pelinkehitykseen](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Piirtäminen canvasille | Opi Canvas API:sta, jota käytetään elementtien piirtämiseen näytölle | [Piirtäminen canvasille](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Elementtien liikuttaminen näytöllä | Löydä, miten elementit voivat liikkua käyttäen karteesisia koordinaatteja ja Canvas API:a | [Elementtien liikuttaminen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Törmäystunnistus | Tee elementtien törmäys ja reagointi toisiinsa näppäinten avulla, ja tarjoa jäähdytysfunktio pelin suorituskyvyn varmistamiseksi | [Törmäystunnistus](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Pisteiden hallinta | Suorita matemaattisia laskelmia pelin tilan ja suorituksen perusteella | [Pisteiden hallinta](./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 nollaaminen | [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 verkkosivuston arkkitehtuurin runko käyttäen reititystä ja HTML-pohjia | [HTML-pohjat ja reitit](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Kirjautumis- ja rekisteröitymislomakkeen rakentaminen | Opi lomakkeiden rakentamisesta ja validointirutiinien käsittelystä | [Lomakkeet](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Datan hakemisen ja käytön menetelmät | Kuinka data virtaa sovelluksesi sisään ja ulos, miten hakea sitä, tallentaa ja poistaa | [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 miten hallita tilaa ohjelmallisesti | [Tilanhallinta](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Työskentely VScoden kanssa | Opi käyttämään koodieditoria | [Käytä VScode Code Editoria](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Työskentely tekoälyn kanssa | Opi rakentamaan oma tekoälyavustajasi | [AI Assistant -projekti](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogiikka
Oppimäärämme on suunniteltu kahden keskeisen pedagogisen periaatteen mukaisesti:
* projektipohjainen oppiminen
* säännölliset kyselyt
Opintosuunnitelmamme on suunniteltu kahden keskeisen pedagogisen periaatteen mukaisesti:
* projektiperustainen oppiminen
* tiheät tietovisat
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ä uusimmat työkalut ja tekniikat, joita nykypäivän web-kehittäjät käyttävät. Opiskelijat saavat mahdollisuuden kehittää käytännön kokemusta rakentamalla kirjoituspelin, virtuaaliterraariumin, ympäristöystävällisen selainlaajennuksen, avaruushyökkääjätyylisen pelin ja pankkisovelluksen yrityksille. Sarjan lopussa opiskelijoilla on vankka ymmärrys verkkokehityksestä.
> 🎓 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 opetussuunnitelman ensimmäiset oppitunnit myös Microsoft Learnin [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) -kautta!
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.
Sisällön yhdistäminen projekteihin tekee oppimisprosessista opiskelijoille innostavamman ja käsitteiden omaksuminen paranee. Kirjoitimme myös useita aloittelevia oppitunteja JavaScriptin perusteista esittelemään käsitteitä, parina videon kanssa kokoelmasta "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", joiden jotkut tekijöistä osallistuivat tämän opetussuunnitelman laatimiseen.
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 matalan panoksen tietovisa ennen luentoa asettaa opiskelijan oppimistavoitteet, kun taas toinen tietovisa tunnin jälkeen varmistaa käsitteiden paremman muistamisen. Tämä opetussuunnitelma on suunniteltu joustavaksi ja hauskaksi, ja sen voi suorittaa kokonaan tai osittain. Projektit alkavat pieninä ja monimutkaistuvat vähitellen 12 viikon jakson aikana.
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 tarkoituksella välttäneet JavaScript-kehysten esittelyä keskittyäksemme verkkokehittäjän perustaitoihin ennen kehysten käyttöönottoa, hyvä seuraava askel tämän opetussuunnitelman jälkeen olisi Node.js:n opiskelu 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!
> Käy myös tutustumassa [käyttäytymissääntöihimme](CODE_OF_CONDUCT.md) ja [osallistumisohjeisiimme](CONTRIBUTING.md). Otamme mielellämme vastaan rakentavaa palautettasi!
## 🧭 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äen [Docsify](https://docsify.js.org/#/). Haarauta tämä repositorio, asenna [Docsify](https://docsify.js.org/#/quickstart) paikalliselle koneellesi ja kirjoita sitten tämän repositorion juurikansiossa `docsify serve`. Verkkosivusto on saatavilla portissa 3000 osoitteessa `localhost:3000`.
## 📘 PDF
Kaikkien oppituntien PDF löytyy [täältä](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Kaikista oppitunneista löytyy PDF-versio [täältä](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Muut kurssit
@ -210,10 +212,10 @@ Tiimimme tuottaa myös muita kursseja! Tutustu:
### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agentit
### Azure / Edge / MCP / Agents
[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](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
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-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
### Perusopetus
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -246,23 +248,23 @@ Tiimimme tuottaa myös muita kursseja! Tutustu:
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Apua saamaan
## Apua
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 kysymyksiä tekoälysovellusten rakentamisesta, liity oppijoiden ja kokeneiden kehittäjien keskusteluihin MCP:stä. Se on tukevainen yhteisö, jossa kysymykset ovat tervetulleita ja tieto jaetaan vapaasti.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Jos sinulla on tuotepalautetta tai rakentaessa ilmenee virheitä, käy:
Jos sinulla on palautetta tuotteesta tai kohtaat virheitä rakentamisen aikana, käy osoitteessa:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## Lisenssi
Tämä arkisto on lisensoitu MIT-lisenssillä. Lisätietoja on tiedostossa [LICENSE](../../LICENSE).
Tämä arkisto on lisensoitu MIT-lisenssillä. Katso lisätietoja tiedostosta [LICENSE](../../LICENSE).
---
<!-- 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). 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). Pyrimme tarkkuuteen, mutta huomioithan, että automaattiset käännökset saattavat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäiskielellä tulisi katsoa auktoritatiiviseksi lähteeksi. Tärkeissä tietoasemissa suosittelemme ammattimaista ihmiskäännöstä. Emme ota vastuuta mahdollisista väärinymmärryksistä tai virhetulkintaista, jotka johtuvat tämän käännöksen käytöstä.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

6
translations/nl/.co-op-translator.json
Unescape View File

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:31:33+00:00",
"translation_date": "2026-02-06T09:09:14+00:00",
"source_file": "AGENTS.md",
"language_code": "nl"
},
@ -516,8 +516,8 @@
"language_code": "nl"
},
"README.md": {
"original_hash": "490c83786552d7fab6390991517bef09",
"translation_date": "2026-01-29T18:37:58+00:00",
"original_hash": "805cd399757df19e886e86f0891a1374",
"translation_date": "2026-02-06T09:05:35+00:00",
"source_file": "README.md",
"language_code": "nl"
},

336
translations/nl/AGENTS.md
Unescape View File

@ -2,53 +2,53 @@
## Projectoverzicht
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 educatief curriculumrepository voor het onderwijzen van webontwikkelingsbasisprincipes aan beginners. Het curriculum is een uitgebreide cursus van 12 weken ontwikkeld door Microsoft Cloud Advocates, met 24 praktische lessen over JavaScript, CSS en HTML.
### Belangrijke onderdelen
### Belangrijkste Onderdelen
- **Educatieve inhoud**: 24 gestructureerde lessen georganiseerd in projectgebaseerde modules
- **Praktische projecten**: Terrarium, Typingspel, Browserextensie, Ruimtespel, Bankapp, Code-editor en AI-chatassistent
- **Interactieve quizzen**: 48 quizzen met elk 3 vragen (voorafgaande/naderhandse lesbeoordelingen)
- **Meertalige ondersteuning**: Geautomatiseerde vertalingen in meer dan 50 talen via GitHub Actions
- **Educatieve Inhoud**: 24 gestructureerde lessen georganiseerd in projectgebaseerde modules
- **Praktische Projecten**: Terrarium, Typvaardigheidspel, Browserextensie, Ruimtespel, Bankapp, Code-editor en AI-chatassistent
- **Interactieve Quizzen**: 48 quizzen met elk 3 vragen (voor- en na-les beoordelingen)
- **Meertalige Ondersteuning**: Geautomatiseerde vertalingen voor 50+ talen via GitHub Actions
- **Technologieën**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (voor AI-projecten)
### Architectuur
- Educatieve repository met lesgebaseerde structuur
- Elke lesmap bevat een README, codevoorbeelden en oplossingen
- Zelfstandige projecten in aparte mappen (quiz-app, diverse lesprojecten)
- Vertalingssysteem met GitHub Actions (co-op-translator)
- Documentatie beschikbaar via Docsify en als PDF
- Elke lesmap bevat README, codevoorbeelden en oplossingen
- Op zichzelf staande projecten in aparte mappen (quiz-app, diverse lesprojecten)
- Vertalingssysteem via GitHub Actions (co-op-translator)
- Documentatie geserveerd via Docsify en beschikbaar als PDF
## Setup-commando's
Deze repository is primair bedoeld voor het consumeren van educatieve inhoud. Voor het werken met specifieke projecten:
Deze repository is voornamelijk bedoeld voor het consumeren van educatieve inhoud. Voor werken met specifieke projecten:
### Hoofdrepository instellen
### Hoofdrepository Setup
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Quiz-app instellen (Vue 3 + Vite)
### Quiz-app Setup (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # Start development server
npm run build # Build for production
npm run lint # Run ESLint
npm run dev # Start ontwikkelserver
npm run build # Bouw voor productie
npm run lint # Voer ESLint uit
```
### Bankproject-API (Node.js + Express)
### Bankproject API (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # Start API server
npm run lint # Run ESLint
npm run format # Format with Prettier
npm start # Start API-server
npm run lint # Voer ESLint uit
npm run format # Formatteren met Prettier
```
### Browserextensieprojecten
@ -56,7 +56,7 @@ npm run format # Format with Prettier
```bash
cd 5-browser-extension/solution
npm install
# Follow browser-specific extension loading instructions
# Volg browser-specifieke instructies voor het laden van extensies
```
### Ruimtespelprojecten
@ -64,219 +64,219 @@ npm install
```bash
cd 6-space-game/solution
npm install
# Open index.html in browser or use Live Server
# Open index.html in de browser of gebruik Live Server
```
### Chatproject (Python-backend)
### Chatproject (Python Backend)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Set GITHUB_TOKEN environment variable
# Stel de omgevingsvariabele GITHUB_TOKEN in
python api.py
```
## Ontwikkelworkflow
### Voor inhoudsbijdraaiers
### Voor Inhoudbijdragers
1. **Fork de repository** naar je GitHub-account
2. **Clone je fork** lokaal
3. **Maak een nieuwe branch** voor je wijzigingen
4. Breng wijzigingen aan in lesinhoud of codevoorbeelden
4. Maak wijzigingen aan lesinhoud of codevoorbeelden
5. Test eventuele codewijzigingen in relevante projectmappen
6. Dien pull requests in volgens de richtlijnen voor bijdragen
6. Dien pull requests in volgens de bijdrage-richtlijnen
### Voor leerlingen
### Voor Leerlingen
1. Fork of clone de repository
2. Navigeer naar lesmappen in volgorde
3. Lees README-bestanden voor elke les
4. Maak voorafgaande quizzen op https://ff-quizzes.netlify.app/web/
5. Werk door codevoorbeelden in lesmappen
6. Voltooi opdrachten en uitdagingen
7. Maak naderhandse quizzen
2. Navigeer sequentieel door de lesmappen
3. Lees de README-bestanden van elke les
4. Maak pre-les quizzen op https://ff-quizzes.netlify.app/web/ af
5. Werk codevoorbeelden in lesmappen door
6. Maak opdrachten en uitdagingen af
7. Maak post-les quizzen
### Live ontwikkeling
### Live Ontwikkeling
- **Documentatie**: Voer `docsify serve` uit in de root (poort 3000)
- **Quiz-app**: Voer `npm run dev` uit in de quiz-app-map
- **Projecten**: Gebruik de Live Server-extensie van VS Code voor HTML-projecten
- **API-projecten**: Voer `npm start` uit in de respectieve API-mappen
- **Documentatie**: Voer `docsify serve` uit in de hoofdmap (poort 3000)
- **Quiz-app**: Voer `npm run dev` uit in de quiz-app map
- **Projecten**: Gebruik VS Code Live Server extensie voor HTML-projecten
- **API-projecten**: Voer `npm start` uit in respectievelijke API-mappen
## Testinstructies
### Quiz-app testen
### Quiz-app Testing
```bash
cd quiz-app
npm run lint # Check for code style issues
npm run build # Verify build succeeds
npm run lint # Controleer op problemen met de code-stijl
npm run build # Verifieer dat de build slaagt
```
### Bank-API testen
### Bank API Testing
```bash
cd 7-bank-project/api
npm run lint # Check for code style issues
node server.js # Verify server starts without errors
npm run lint # Controleer op code stijlproblemen
node server.js # Verifieer dat de server zonder fouten start
```
### Algemene testaanpak
### Algemene Testaanpak
- Dit is een educatieve repository zonder uitgebreide geautomatiseerde tests
- Handmatige tests richten zich op:
- Codevoorbeelden draaien zonder fouten
- Handmatig testen richt zich op:
- Codevoorbeelden zonder fouten uitvoeren
- Links in documentatie werken correct
- Projecten bouwen succesvol
- Project builds worden succesvol voltooid
- Voorbeelden volgen best practices
### Controle vóór indiening
### Pre-submissie Controles
- Voer `npm run lint` uit in mappen met package.json
- Controleer of markdown-links geldig zijn
- Test codevoorbeelden in de browser of Node.js
- Controleer of vertalingen de juiste structuur behouden
- Controleer of Markdown-links geldig zijn
- Test codevoorbeelden in browser of Node.js
- Controleer dat vertalingen de juiste structuur behouden
## Richtlijnen voor codestijl
## Code Stijlrichtlijnen
### JavaScript
- Gebruik moderne ES6+ syntax
- Volg standaard ESLint-configuraties die in projecten worden geleverd
- Volg standaard ESLint-configuraties in projecten
- Gebruik betekenisvolle variabele- en functienamen voor educatieve duidelijkheid
- Voeg opmerkingen toe die concepten uitleggen voor leerlingen
- Formatteer met Prettier waar geconfigureerd
- Format met Prettier waar geconfigureerd
### HTML/CSS
- Semantische HTML5-elementen
- Responsieve ontwerpprincipes
- Duidelijke klassennaamgeving
- Responsive designprincipes
- Duidelijke classnaamconventies
- Opmerkingen die CSS-technieken uitleggen voor leerlingen
### Python
- PEP 8-stijlrichtlijnen
- Duidelijke, educatieve codevoorbeelden
- Type hints waar nuttig voor leren
- Type hints waar nuttig voor het leren
### Markdown-documentatie
### Markdown Documentatie
- Duidelijke koppenhiërarchie
- Codeblokken met taalspecificatie
- Links naar aanvullende bronnen
- Screenshots en afbeeldingen in `images/`-mappen
- Screenshots en afbeeldingen in `images/` mappen
- Alt-tekst voor afbeeldingen voor toegankelijkheid
### Bestandsorganisatie
- Lessen genummerd in volgorde (1-getting-started-lessons, 2-js-basics, enz.)
- Elk project heeft `solution/` en vaak `start/` of `your-work/`-mappen
- Afbeeldingen opgeslagen in les-specifieke `images/`-mappen
- Vertalingen in `translations/{language-code}/`-structuur
- Lessen genummerd in volgorde (1-getting-started-lessons, 2-js-basics, etc.)
- Elk project heeft `solution/` en vaak `start/` of `your-work/` mappen
- Afbeeldingen opgeslagen in les-specifieke `images/` mappen
- Vertalingen in `translations/{language-code}/` structuur
## Build en deployment
## Build en Deployment
### Quiz-app deployment (Azure Static Web Apps)
### Quiz-app Deployment (Azure Static Web Apps)
De quiz-app is geconfigureerd voor Azure Static Web Apps deployment:
```bash
cd quiz-app
npm run build # Creates dist/ folder
# Deploys via GitHub Actions workflow on push to main
npm run build # Maakt dist/ map aan
# Zet uit via GitHub Actions workflow bij push naar main
```
Azure Static Web Apps-configuratie:
Azure Static Web Apps configuratie:
- **App-locatie**: `/quiz-app`
- **Output-locatie**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Documentatie PDF-generatie
### Documentatie PDF Generatie
```bash
npm install # Install docsify-to-pdf
npm run convert # Generate PDF from docs
npm install # Installeer docsify-to-pdf
npm run convert # Genereer PDF van docs
```
### Docsify-documentatie
### Docsify Documentatie
```bash
npm install -g docsify-cli # Install Docsify globally
docsify serve # Serve on localhost:3000
npm install -g docsify-cli # Installeer Docsify wereldwijd
docsify serve # Serveren op localhost:3000
```
### Projectspecifieke builds
### Project-specifieke Builds
Elke projectmap kan zijn eigen buildproces hebben:
- Vue-projecten: `npm run build` maakt productie-bundels
- Vue-projecten: `npm run build` maakt productie-bundels aan
- Statische projecten: Geen buildstap, bestanden direct serveren
## Richtlijnen voor pull requests
## Pull Request Richtlijnen
### Titelindeling
Gebruik duidelijke, beschrijvende titels die het gebied van wijziging aangeven:
- `[Quiz-app] Nieuwe quiz toevoegen voor les X`
- `[Les-3] Typfout corrigeren in terrariumproject`
- `[Vertaling] Spaanse vertaling toevoegen voor les 5`
- `[Docs] Setup-instructies bijwerken`
Gebruik duidelijke, beschrijvende titels die het wijzigingsgebied aangeven:
- `[Quiz-app] Voeg nieuwe quiz toe voor les X`
- `[Lesson-3] Corrigeer typefout in terrarium project`
- `[Translation] Voeg Spaanse vertaling toe voor les 5`
- `[Docs] Update setupinstructies`
### Vereiste controles
### Vereiste Controles
Voordat je een PR indient:
Voor het indienen van een PR:
1. **Codekwaliteit**:
- Voer `npm run lint` uit in de getroffen projectmappen
- Los alle lintingfouten en -waarschuwingen op
- Voer `npm run lint` uit in betrokken projectmappen
- Los alle lintfouten en waarschuwingen op
2. **Buildverificatie**:
2. **Build Verificatie**:
- Voer `npm run build` uit indien van toepassing
- Zorg ervoor dat er geen buildfouten zijn
- Zorg dat er geen buildfouten zijn
3. **Linkvalidatie**:
- Test alle markdown-links
- Controleer of afbeeldingsverwijzingen werken
- Controleer of afbeeldingsreferenties werken
4. **Inhoudscontrole**:
- Controleer op spelling en grammatica
- Zorg ervoor dat codevoorbeelden correct en educatief zijn
- Controleer of vertalingen de oorspronkelijke betekenis behouden
4. **Inhoud Review**:
- Controleer spelling en grammatica
- Zorg dat codevoorbeelden correct en educatief zijn
- Verifieer dat vertalingen de oorspronkelijke betekenis behouden
### Bijdragevereisten
### Bijdragereisen
- Ga akkoord met Microsoft CLA (automatische controle bij eerste PR)
- Volg de [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Volg de [Microsoft Open Source Gedragscode](https://opensource.microsoft.com/codeofconduct/)
- Zie [CONTRIBUTING.md](./CONTRIBUTING.md) voor gedetailleerde richtlijnen
- Verwijs naar issuetickets in de PR-beschrijving indien van toepassing
- Verwijs indien van toepassing naar issuetitels in PR-beschrijving
### Reviewproces
- PR's worden beoordeeld door maintainers en de community
- Educatieve duidelijkheid heeft prioriteit
- Codevoorbeelden moeten huidige best practices volgen
- Educatieve duidelijkheid staat voorop
- Codevoorbeelden dienen de huidige best practices te volgen
- Vertalingen worden beoordeeld op nauwkeurigheid en culturele geschiktheid
## Vertalingssysteem
### Geautomatiseerde vertaling
### Geautomatiseerde Vertaling
- Gebruikt GitHub Actions met co-op-translator workflow
- Vertaalt automatisch naar meer dan 50 talen
- Bronbestanden in hoofdmap
- Vertaalde bestanden in `translations/{language-code}/`-mappen
- Vertaalt automatisch naar 50+ talen
- Bronbestanden in hoofddirectories
- Vertaalde bestanden in `translations/{language-code}/` mappen
### Handmatige verbeteringen aan vertalingen toevoegen
### Handmatige Verbeteringen Toevoegen
1. Zoek bestand in `translations/{language-code}/`
2. Breng verbeteringen aan terwijl je de structuur behoudt
3. Zorg ervoor dat codevoorbeelden functioneel blijven
4. Test eventuele gelokaliseerde quizinhoud
1. Zoek het bestand in `translations/{language-code}/`
2. Breng verbeteringen aan terwijl de structuur behouden blijft
3. Zorg dat codevoorbeelden blijven werken
4. Test eventuele gelokaliseerde quiz-inhoud
### Metadata van vertalingen
### Vertaalmetadata
Vertaalde bestanden bevatten een metadata-header:
Vertaalde bestanden bevatten metadatakoppen:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,56 +289,56 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Debugging en probleemoplossing
## Debuggen en Probleemoplossing
### Veelvoorkomende problemen
### Veelvoorkomende Problemen
**Quiz-app start niet**:
- Controleer Node.js-versie (v14+ aanbevolen)
- Verwijder `node_modules` en `package-lock.json`, voer `npm install` opnieuw uit
- Verwijder `node_modules` en `package-lock.json`, voer opnieuw `npm install` uit
- Controleer op poortconflicten (standaard: Vite gebruikt poort 5173)
**API-server start niet**:
- Controleer of Node.js-versie voldoet aan minimumvereisten (node >=10)
- Controleer of Node.js-versie minimaal is (node >=10)
- Controleer of poort al in gebruik is
- Zorg ervoor dat alle afhankelijkheden zijn geïnstalleerd met `npm install`
- Zorg dat alle afhankelijkheden zijn geïnstalleerd met `npm install`
**Browserextensie laadt niet**:
- Controleer of manifest.json correct is geformatteerd
- Controleer browserconsole op fouten
- Volg browser-specifieke installatie-instructies voor extensies
- Controleer de browserconsole op fouten
- Volg browser-specifieke instructies voor het installeren van extensies
**Python-chatprojectproblemen**:
- Zorg ervoor dat OpenAI-pakket is geïnstalleerd: `pip install openai`
- Controleer of GITHUB_TOKEN-omgevingsvariabele is ingesteld
- Controleer toegangsmachtigingen voor GitHub Models
**Python chatprojectproblemen**:
- Zorg dat het OpenAI pakket is geïnstalleerd: `pip install openai`
- Controleer of de GITHUB_TOKEN omgevingsvariabele is ingesteld
- Controleer GitHub Models toegangsrechten
**Docsify serveert geen docs**:
**Docsify serveert geen documentatie**:
- Installeer docsify-cli globaal: `npm install -g docsify-cli`
- Voer uit vanuit de rootmap van de repository
- Controleer of `docs/_sidebar.md` bestaat
- Start vanuit de rootmap van de repository
- Controleer dat `docs/_sidebar.md` bestaat
### Tips voor ontwikkelomgeving
### Tips voor Ontwikkelomgeving
- Gebruik VS Code met Live Server-extensie voor HTML-projecten
- Installeer ESLint- en Prettier-extensies voor consistente opmaak
- Gebruik VS Code met de Live Server extensie voor HTML-projecten
- Installeer ESLint en Prettier extensies voor consistente formattering
- Gebruik browser DevTools voor het debuggen van JavaScript
- Voor Vue-projecten, installeer Vue DevTools-browserextensie
- Voor Vue-projecten, installeer Vue DevTools browser extensie
### Prestatieoverwegingen
- Groot aantal vertaalde bestanden (50+ talen) betekent dat volledige clones groot zijn
- Gebruik een shallow clone als je alleen aan inhoud werkt: `git clone --depth 1`
- Sluit vertalingen uit van zoekopdrachten bij het werken aan Engelse inhoud
- Buildprocessen kunnen traag zijn bij de eerste run (npm install, Vite build)
- Groot aantal vertaalde bestanden (50+ talen) betekent grote volledige clones
- Gebruik shallow clone als je alleen aan inhoud werkt: `git clone --depth 1`
- Sluit vertalingen uit van zoekacties bij werken in Engelse inhoud
- Buildprocessen kunnen traag zijn bij eerste run (npm install, Vite build)
## Veiligheidsoverwegingen
### Omgevingsvariabelen
- API-sleutels mogen nooit in de repository worden opgenomen
- Gebruik `.env`-bestanden (al in `.gitignore`)
- Documenteer vereiste omgevingsvariabelen in project-README's
- API-sleutels mogen nooit in de repository worden gecommit
- Gebruik `.env` bestanden (staan al in `.gitignore`)
- Documenteer vereiste omgevingsvariabelen in project-READMEs
### Python-projecten
@ -346,61 +346,63 @@ CO_OP_TRANSLATOR_METADATA:
- Houd afhankelijkheden up-to-date
- GitHub-tokens moeten minimale vereiste machtigingen hebben
### Toegang tot GitHub Models
### GitHub Models Toegang
- Persoonlijke toegangstokens (PAT) vereist voor GitHub Models
- Tokens moeten worden opgeslagen als omgevingsvariabelen
- Nooit tokens of inloggegevens opnemen in de repository
- Persoonlijke toegangstokens (PAT) zijn vereist voor GitHub Models
- Tokens moeten als omgevingsvariabele worden opgeslagen
- Tokens of inloggegevens nooit commiten
## Aanvullende opmerkingen
## Aanvullende Aantekeningen
### Doelgroep
- Volledige beginners in webontwikkeling
- Studenten en zelflerenden
- Docenten die het curriculum in klaslokalen gebruiken
- Complete beginners in webontwikkeling
- Studenten en zelfstudie-lezers
- Docenten die het curriculum in klassen gebruiken
- Inhoud is ontworpen voor toegankelijkheid en geleidelijke vaardigheidsopbouw
### Educatieve filosofie
### Educatieve Filosofie
- Projectgebaseerde leerbenadering
- Regelmatige kenniscontroles (quizzen)
- Praktische codeoefeningen
- Voorbeelden van toepassingen in de echte wereld
- Regelmatige kennistoetsen (quizzen)
- Praktische codeeropdrachten
- Voorbeelden van toepassingen in de praktijk
- Focus op basisprincipes vóór frameworks
### Onderhoud van de repository
### Repository Onderhoud
- Actieve community van leerlingen en bijdragers
- Regelmatige updates van afhankelijkheden en inhoud
- Reguliere updates van dependencies en inhoud
- Issues en discussies worden gemonitord door maintainers
- Vertalingsupdates geautomatiseerd via GitHub Actions
- Vertaalupdates geautomatiseerd via GitHub Actions
### Gerelateerde bronnen
### Gerelateerde Bronnen
- [Microsoft Learn-modules](https://docs.microsoft.com/learn/)
- [Student Hub-bronnen](https://docs.microsoft.com/learn/student-hub/)
- [Microsoft Learn modules](https://docs.microsoft.com/learn/)
- [Student Hub bronnen](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) aanbevolen voor leerlingen
- Aanvullende cursussen: Generatieve AI, Data Science, ML, IoT-curricula beschikbaar
- Aanvullende cursussen: Generative AI, Data Science, ML, IoT curricula beschikbaar
### Werken met specifieke projecten
### Werken met Specifieke Projecten
Voor gedetailleerde instructies over individuele projecten, raadpleeg de README-bestanden in:
- `quiz-app/README.md` - Vue 3 quiz-applicatie
- `quiz-app/README.md` - Vue 3 quizapplicatie
- `7-bank-project/README.md` - Bankapplicatie met authenticatie
- `5-browser-extension/README.md` - Ontwikkeling van browserextensies
- `6-space-game/README.md` - Canvas-gebaseerde spelontwikkeling
- `9-chat-project/README.md` - AI-chatassistentproject
- `5-browser-extension/README.md` - Browserextensie ontwikkeling
- `6-space-game/README.md` - Canvas-gebaseerd spel
- `9-chat-project/README.md` - AI chatassistent 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
- Projecten delen geen afhankelijkheden
- Werk aan individuele projecten zonder anderen te beïnvloeden
- Clone de volledige repo voor de volledige curriculumervaring
- Projecten delen geen dependencies
- Werk aan individuele projecten zonder de anderen te beïnvloeden
- Clone de gehele repo voor de volledige curriculumervaring
---
**Disclaimer**:
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in 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.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**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 geautomatiseerde vertalingen fouten of onjuistheden kunnen bevatten. Het oorspronkelijke document in de oorspronkelijke taal dient als de gezaghebbende bron te worden beschouwd. 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.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

234
translations/nl/README.md
Unescape View File

@ -1,24 +1,38 @@
[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Webontwikkeling voor Beginners - Een Curriculum
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 uitgebreide cursus van 12 weken door Microsoft Cloud Advocates. Elk van de 24 lessen duikt in JavaScript, CSS en HTML aan de hand van praktijkprojecten zoals terrariums, browserextensies en ruimtespellen. Doe mee met quizzen, discussies en praktische opdrachten. Versterk je vaardigheden en optimaliseer je kennisbehoud met onze effectieve projectgerichte didactiek. Begin vandaag nog met coderen!
Word lid van de Azure AI Foundry Discord Community
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Volg deze stappen om aan de slag te gaan met deze bronnen:
1. **Fork de repository**: Klik [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone de repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
1. **Fork de Repository**: Klik [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone de Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Word lid van de Azure AI Foundry Discord en ontmoet experts en mede-ontwikkelaars**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Meertalige Ondersteuning
#### Ondersteund via GitHub Action (geautomatiseerd & altijd up-to-date)
#### Ondersteund via GitHub Action (Geautomatiseerd & Altijd Up-to-Date)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](./README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
[Arabisch](../ar/README.md) | [Bengaals](../bn/README.md) | [Bulgaars](../bg/README.md) | [Birmaans (Myanmar)](../my/README.md) | [Chinees (Vereenvoudigd)](../zh-CN/README.md) | [Chinees (Traditioneel, Hong Kong)](../zh-HK/README.md) | [Chinees (Traditioneel, Macau)](../zh-MO/README.md) | [Chinees (Traditioneel, Taiwan)](../zh-TW/README.md) | [Kroatisch](../hr/README.md) | [Tsjechisch](../cs/README.md) | [Deens](../da/README.md) | [Nederlands](./README.md) | [Ests](../et/README.md) | [Fins](../fi/README.md) | [Frans](../fr/README.md) | [Duits](../de/README.md) | [Grieks](../el/README.md) | [Hebreeuws](../he/README.md) | [Hindi](../hi/README.md) | [Hongaars](../hu/README.md) | [Indonesisch](../id/README.md) | [Italiaans](../it/README.md) | [Japans](../ja/README.md) | [Kannada](../kn/README.md) | [Koreaans](../ko/README.md) | [Litouws](../lt/README.md) | [Maleis](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepalees](../ne/README.md) | [Nigeriaans Pidgin](../pcm/README.md) | [Noors](../no/README.md) | [Perzisch (Farsi)](../fa/README.md) | [Pools](../pl/README.md) | [Portugees (Brazilië)](../pt-BR/README.md) | [Portugees (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Roemeens](../ro/README.md) | [Russisch](../ru/README.md) | [Servisch (Cyrillisch)](../sr/README.md) | [Slowaaks](../sk/README.md) | [Sloveens](../sl/README.md) | [Spaans](../es/README.md) | [Swahili](../sw/README.md) | [Zweeds](../sv/README.md) | [Tagalog (Filipijns)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thais](../th/README.md) | [Turks](../tr/README.md) | [Oekraïens](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamees](../vi/README.md)
> **Lievere lokaal clonen?**
> **Liever lokaal klonen?**
> 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 vertalingen wat de downloadgrootte aanzienlijk vergroot. Om zonder vertalingen te klonen, gebruik sparse checkout:
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
@ -27,226 +41,230 @@ 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.
<!-- 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 extra vertaaltalen wilt laten ondersteunen, zijn deze hier te vinden [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _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, studentenpakketten en zelfs manieren vindt om een gratis certificaatvoucher te krijgen. Dit is de pagina die je wilt bookmarken en af en toe wilt bekijken omdat wij maandelijks content wisselen.
### 📣 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. Dat is een nieuwe uitdaging die je kunt voltooien met behulp van GitHub Copilot en Agent modus. Als je Agent modus nog niet hebt gebruikt, kan deze niet alleen tekst genereren maar ook bestanden maken en bewerken, opdrachten uitvoeren en meer.
### 📣 Aankondiging - _Nieuw project om te bouwen met Generatieve AI_
Nieuw AI Assistant project zojuist toegevoegd, bekijk het [project](./9-chat-project/README.md)
Nieuw AI-assistent project zojuist 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 net 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 aan de slag te gaan!
![Background](../../translated_images/nl/background.148a8d43afde5730.webp)
![Achtergrond](../../translated_images/nl/background.148a8d43afde5730.webp)
- Lessen die alles behandelen, van basis tot RAG.
- Interacteer met historische personages met behulp van GenAI en onze begeleidende app.
- Leuke en boeiende verhaallijn, je reist door de tijd!
- Lessen die alles behandelen van basis tot RAG.
- Interactie met historische personages via GenAI en onze begeleidende app.
- Leuk en boeiend verhaal, je reist door de tijd!
![character](../../translated_images/nl/character.5c0dd8e067ffd693.webp)
Elke les bevat een opdracht om te voltooien, een kenniscontrole en een uitdaging die je begeleidt 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 over onderwerpen zoals:
- Prompting en prompt engineering
- Tekst- en afbeeldingsapp-generatie
- Tekst- en beeldapp generatie
- Zoekapps
Bezoek [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) om te beginnen!
## 🌱 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 toegevoegd](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)**, begin voor elke les met een pre-lecture quiz en ga vervolgens door met het lezen van het lesmateriaal, het afronden van de verschillende activiteiten en controleer 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, kun je samenwerken met je medeleerlingen aan de projecten! Discussies worden aangemoedigd in ons [discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) waar ons team van moderators beschikbaar zal zijn om je vragen te beantwoorden.
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.
Voor verdere verdieping raden we sterk aan om [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) te verkennen voor aanvullende studiematerialen.
### 📋 Je omgeving instellen
Dit curriculum heeft een ontwikkelomgeving 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 voor gebruik! Terwijl je begint, kun je ervoor kiezen het curriculum te draaien in een [Codespace](https://github.com/features/codespaces/) (_een browsergebaseerde omgeving zonder installatie_), 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
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 eenvoudig je werk op te slaan, wordt aanbevolen je eigen kopie van deze repository te maken. Dit kun je doen door te klikken op de knop **Use this template** bovenaan de pagina. Dit maakt een nieuwe repository aan in je GitHub-account met een kopie van het curriculum.
Volg deze stappen:
1. **Fork de repository**: Klik op de knop "Fork" rechtsboven op deze pagina.
2. **Clone de repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
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`
#### Het curriculum 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 gemaakt, klik je op de **Code** knop en selecteer je **Open with Codespaces**. Dit maakt een nieuwe Codespace aan waarin je kunt werken.
![Codespace](../../translated_images/nl/createcodespace.0238bbf4d7a8d955.webp)
#### Het curriculum lokaal draaien op je computer
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 dit curriculum lokaal op je computer te draaien, heb je een teksteditor, een browser en een opdrachtregeltool nodig. Onze eerste les, [Introductie tot programmeertalen en tools van het vak](../../1-getting-started-lessons/1-intro-to-programming-languages), laat je verschillende opties voor elk van deze tools zien 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).
Onze aanbeveling is om [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) te gebruiken als editor, die ook een ingebouwde [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) heeft. Je kunt Visual Studio Code [hier downloaden](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clone je repository naar je computer. Dit 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 te klikken op de **Code** knop en de URL te kopiëren:
[CodeSpace](./images/createcodespace.png)
Open vervolgens [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) binnen [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) en voer het volgende commando uit, waarbij je `<your-repository-url>` vervangt door de URL die je zojuist hebt gekopieerd:
Open vervolgens de [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:
```bash
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 kun je doen door te klikken op **Bestand** > **Map openen** en de map te selecteren die je zojuist hebt gecloned.
> 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
## 📂 Elke les bevat:
- optionele schetsnotitie
- optionele aanvullende video
- warming-up quiz voorafgaand aan de les
- schriftelijke les
- voor projectgebaseerde lessen, stapsgewijze handleidingen over hoe het project te bouwen
- opwarmquiz voor de les
- geschreven les
- voor projectgebaseerde lessen, stapsgewijze handleidingen over hoe je het project bouwt
- kenniscontroles
- een uitdaging
- aanvullende lectuur
- een [quiz na de les](https://ff-quizzes.netlify.app/web/)
- aanvullende leesstof
- 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 noot over quizzen**: Alle quizzen bevinden zich in de Quiz-app map, in totaal 48 quizzen met 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.
## 🗃️ Lessen
| | Projectnaam | Geleerde Concepten | Leerdoelen | Gelinkte Les | Auteur |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Aan de slag | Introductie tot programmeren en tools van het vak | Leer de basisprincipes achter de meeste programmeertalen en 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 |
| 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 |
| 03 | Aan de slag | Toegankelijkheid | Leer de basis van webtoegankelijkheid | [Toegankelijkheidsfundamentals](./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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| | Projectnaam | Concepten | Leerdoelen | Gelinkte les | Auteur |
| :-: | :------------------------------------------------------: | :------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Aan de slag | Introductie tot programmeren en gebruikte tools | Leer de basisprincipes achter de meeste programmeertalen en over software die professionele ontwikkelaars helpt in hun werk | [Inleiding tot programmeertalen en gebruikte tools](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Aan de slag | Basisprincipes van GitHub, inclusief samenwerken | Hoe je GitHub gebruikt in je project, en hoe je samenwerkt aan een codebase | [Intro tot GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Aan de slag | Toegankelijkheid | Leer de basis van webtoegankelijkheid | [Basisprincipes toegankelijkheid](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScript datatype | 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 and Christopher |
| 06 | JS Basics | 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 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 praktijk | Bouw de HTML om een online terrarium te creëren, met focus op het bouwen van een layout | [Introductie tot HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in praktijk | Bouw de CSS om het online terrarium te stijlen, met basiskennis van CSS inclusief responsiviteit | [Introductie tot CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript closures, DOM-manipulatie | Bouw de JavaScript om het terrarium te laten functioneren als 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 |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Bouw een typgame | Leer hoe je keyboard events gebruikt om de logica van je JavaScript app aan te sturen | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Werken met browsers | Leer hoe browsers werken, hun geschiedenis en hoe je de eerste elementen van een browserextensie opzet | [Over browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Formulier bouwen, aanroepen API en lokale opslag | Bouw de JavaScript-elementen van je browserextensie om een API aan te roepen met variabelen opgeslagen in lokale opslag | [API's, formulieren en lokale opslag](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Achtergrondprocessen in de browser, webprestaties | Gebruik 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 |
| 15 | [Space Game](./6-space-game/solution/README.md) | Geavanceerde game-ontwikkeling met JavaScript | Leer over overerving met Classes en Compositie en het Pub/Sub patroon, als voorbereiding op het bouwen van een game | [Introductie tot geavanceerde game-ontwikkeling](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Tekenen op canvas | Leer over de Canvas API, gebruikt om elementen op een scherm te tekenen | [Tekenen op canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Elementen bewegen op het scherm | Ontdek hoe elementen beweging krijgen met de cartesische coördinaten en de Canvas API | [Elementen verplaatsen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Botsingsdetectie | Laat elementen botsen en op elkaar reageren via toetsaanslagen en zorg voor een cooldown-functie om prestaties te waarborgen | [Botsingsdetectie](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Score bijhouden | Voer wiskundige berekeningen uit gebaseerd op de status en prestaties van het spel | [Score bijhouden](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Eindigen en herstarten van het spel | Leer over het beëindigen en herstarten van het spel inclusief het opruimen van assets en resetten van variabelen | [De eindvoorwaarde](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-sjablonen en routes in een webapp | Leer hoe je de basisstructuur van een multipage website maakt met routing en HTML-sjablonen | [HTML-sjablonen en routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Bouw een login- en registratieformulier | Leer over het bouwen van formulieren en het afhandelen van validatieroutines | [Formulieren](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Methoden voor het ophalen en gebruiken van data | Hoe data in en uit je app stroomt, hoe je het ophaalt, opslaat en verwijdert | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Concepten van state management | Leer hoe je app staat vasthoudt en hoe je die staat 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 |
| 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 Assistent project](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogiek
Ons curriculum is ontworpen met twee belangrijke pedagogische principes in gedachten:
* leren door projecten
* frequente quizzes
Ons curriculum is ontworpen met twee belangrijke didactische principes in gedachten:
* leren via projecten
* 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 leert de basis van JavaScript, HTML en CSS, evenals de nieuwste tools en technieken die hedendaagse webontwikkelaars gebruiken. Studenten krijgen de kans om praktische ervaring op te doen door het bouwen van een typgame, virtueel terrarium, milieuvriendelijke browserextensie, space-invader-stijl game, en een bankapp voor bedrijven. Aan het eind van de reeks hebben studenten een degelijke kennis van webontwikkeling opgedaan.
> 🎓 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 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!
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.
Door ervoor te zorgen dat de inhoud aansluit bij projecten, wordt het proces boeiender voor studenten en wordt het vasthouden van concepten vergroot. We schreven ook enkele starterslessen in basis JavaScript om concepten uit te leggen, 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.
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 lage druk voor een les de intentie van de student om een onderwerp te leren, terwijl een tweede quiz na de les verdere retentie verzekert. Dit curriculum is ontworpen om flexibel en leuk te zijn en kan geheel of deels worden gevolgd. De projecten beginnen klein en worden steeds complexer aan het eind 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)".
We hebben er bewust voor gekozen om geen JavaScript-frameworks te introduceren, zodat de basisvaardigheden die nodig zijn als webontwikkelaar eerst goed worden beheerst alvorens een framework te leren. Een goede vervolgstap na dit curriculum is het leren over Node.js via een andere videoreeks: "[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 waarderen je constructieve feedback!
## 🧭 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 behulp van [Docsify](https://docsify.js.org/#/). Fork deze repo, [installeer Docsify](https://docsify.js.org/#/quickstart) op je lokale machine, en typ dan in de rootmap van deze repo `docsify serve`. De website wordt geserveerd op poort 3000 op je localhost: `localhost:3000`.
## 📘 PDF
Een PDF van alle lessen is te vinden [hier](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Andere Cursussen
Ons team maakt ook andere cursussen! Bekijk:
## 🎒 Andere cursussen
Ons team produceert ook andere cursussen! Bekijk:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j voor Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js voor Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
[![AZD voor Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI voor Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP voor Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Agents voor Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Generatieve AI Serie
[![Generatieve AI voor Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generatieve AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generatieve AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Generatieve AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-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
[![ML voor Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science voor Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI voor Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Cybersecurity voor Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Web Dev voor Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT voor Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR Ontwikkeling voor Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Kernleren
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Copilot Serie
[![Copilot voor AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot voor C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Avontuur](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Hulp krijgen
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 met medeleerlingen en ervaren ontwikkelaars in discussies over MCP. Het is een ondersteunende gemeenschap waar vragen welkom zijn en kennis vrij gedeeld wordt.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Als je productfeedback hebt of fouten tegenkomt tijdens het bouwen, bezoek:
Als je productfeedback hebt of fouten tegenkomt tijdens het bouwen, bezoek dan:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## Licentie
Deze repository is gelicentieerd onder de MIT-licentie. Zie het [LICENSE](../../LICENSE) bestand voor meer informatie.
Deze repository is gelicenseerd onder de MIT-licentie. Zie het [LICENSE](../../LICENSE) bestand voor meer informatie.
---
<!-- 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 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 we streven naar nauwkeurigheid, dient u ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het oorspronkelijke document in de oorspronkelijke taal moet als de gezaghebbende bron worden beschouwd. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortkomen uit het gebruik van deze vertaling.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

6
translations/no/.co-op-translator.json
Unescape View File

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:30:17+00:00",
"translation_date": "2026-02-06T09:06:53+00:00",
"source_file": "AGENTS.md",
"language_code": "no"
},
@ -516,8 +516,8 @@
"language_code": "no"
},
"README.md": {
"original_hash": "490c83786552d7fab6390991517bef09",
"translation_date": "2026-01-29T18:34:07+00:00",
"original_hash": "805cd399757df19e886e86f0891a1374",
"translation_date": "2026-02-06T08:59:07+00:00",
"source_file": "README.md",
"language_code": "no"
},

296
translations/no/AGENTS.md
Unescape View File

@ -2,53 +2,53 @@
## Prosjektoversikt
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 utdanningskurslager for å lære webutviklingsgrunnlag 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
### Viktige komponenter
- **Utdanningsinnhold**: 24 strukturerte leksjoner organisert i prosjektbaserte moduler
- **Praktiske prosjekter**: Terrarium, Skrivespill, Nettleserutvidelse, Romspill, Bankapp, Kodeeditor og AI-chatassistent
- **Interaktive quizer**: 48 quizer med 3 spørsmål hver (før/etter leksjon)
- **Praktiske prosjekter**: Terrarium, Typing Game, Nettleserutvidelse, Space Game, Bank-app, Kodeeditor og AI Chat Assistant
- **Interaktive quizer**: 48 quizer med 3 spørsmål hver (før/etter-leksjon vurderinger)
- **Flerspråklig støtte**: Automatiserte oversettelser til 50+ språk via GitHub Actions
- **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (for AI-prosjekter)
### Arkitektur
- Utdanningsrepository med leksjonsbasert struktur
- Utdanningslager med leksjonsbasert struktur
- Hver leksjonsmappe inneholder README, kodeeksempler og løsninger
- Frittstående prosjekter i separate kataloger (quiz-app, ulike leksjonsprosjekter)
- Oversettelsessystem ved bruk av GitHub Actions (co-op-translator)
- Selvstendige prosjekter i separate kataloger (quiz-app, diverse leksjonsprosjekter)
- Oversettelsessystem med GitHub Actions (co-op-translator)
- Dokumentasjon levert via Docsify og tilgjengelig som PDF
## Oppsettskommandoer
Dette repositoryet er primært for konsumering av utdanningsinnhold. For å jobbe med spesifikke prosjekter:
Dette repositoriet er primært for konsumering av utdanningsinnhold. For arbeid med spesifikke prosjekter:
### Hovedrepository-oppsett
### Hovedrepositorieoppsett
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Oppsett av Quiz-app (Vue 3 + Vite)
### Quiz App Oppsett (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # Start development server
npm run build # Build for production
npm run lint # Run ESLint
npm run dev # Start utviklingsserver
npm run build # Bygg for produksjon
npm run lint # Kjør ESLint
```
### Bankprosjekt-API (Node.js + Express)
### Bankprosjekt API (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # Start API server
npm run lint # Run ESLint
npm run format # Format with Prettier
npm start # Start API-server
npm run lint # Kjør ESLint
npm run format # Formater med Prettier
```
### Nettleserutvidelsesprosjekter
@ -56,23 +56,23 @@ npm run format # Format with Prettier
```bash
cd 5-browser-extension/solution
npm install
# Follow browser-specific extension loading instructions
# Følg nettleserspesifikke instruksjoner for lasting av utvidelser
```
### Romspillprosjekter
### Space Game Prosjekter
```bash
cd 6-space-game/solution
npm install
# Open index.html in browser or use Live Server
# Åpne index.html i nettleser eller bruk Live Server
```
### Chat-prosjekt (Python-backend)
### Chat-prosjekt (Python Backend)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Set GITHUB_TOKEN environment variable
# Sett miljøvariabelen GITHUB_TOKEN
python api.py
```
@ -80,55 +80,55 @@ python api.py
### For innholdsbidragsytere
1. **Fork repositoryet** til din GitHub-konto
2. **Klon din fork** lokalt
3. **Opprett en ny gren** for endringene dine
1. **Fork repositoriet** til din GitHub-konto
2. **Klone ditt fork** lokalt
3. **Opprett en ny branch** for dine endringer
4. Gjør endringer i leksjonsinnhold eller kodeeksempler
5. Test eventuelle kodeendringer i relevante prosjektkataloger
6. Send inn pull requests i henhold til retningslinjene for bidrag
6. Send pull requests i henhold til bidragsretningslinjer
### For lærende
1. Fork eller klon repositoryet
2. Naviger til leksjonskatalogene i rekkefølge
3. Les README-filene for hver leksjon
4. Fullfør før-leksjonsquizer på https://ff-quizzes.netlify.app/web/
5. Jobb gjennom kodeeksempler i leksjonsmapper
1. Fork eller klone repositoriet
2. Naviger sekvensielt gjennom leksjonskataloger
3. Les README-filer for hver leksjon
4. Fullfør pre-leksjonsquizer på https://ff-quizzes.netlify.app/web/
5. Arbeid med kodeeksempler i leksjonsmapper
6. Fullfør oppgaver og utfordringer
7. Ta etter-leksjonsquizer
7. Ta post-leksjonsquizer
### Live utvikling
- **Dokumentasjon**: Kjør `docsify serve` i rotkatalogen (port 3000)
- **Quiz-app**: Kjør `npm run dev` i quiz-app-katalogen
- **Prosjekter**: Bruk VS Code Live Server-utvidelsen for HTML-prosjekter
- **API-prosjekter**: Kjør `npm start` i respektive API-kataloger
- **Dokumentasjon**: Kjør `docsify serve` i rot (port 3000)
- **Quiz App**: Kjør `npm run dev` i quiz-app katalog
- **Prosjekter**: Bruk VS Code Live Server extension for HTML-prosjekter
- **API Prosjekter**: Kjør `npm start` i aktuelle API-kataloger
## Testinstruksjoner
### Testing av Quiz-app
### Quiz App testing
```bash
cd quiz-app
npm run lint # Check for code style issues
npm run build # Verify build succeeds
npm run lint # Sjekk for kode stilproblemer
npm run build # Bekreft at byggingen lykkes
```
### Testing av Bank-API
### Bank API testing
```bash
cd 7-bank-project/api
npm run lint # Check for code style issues
node server.js # Verify server starts without errors
npm run lint # Sjekk for kode stilproblemer
node server.js # Verifiser at serveren starter uten feil
```
### Generell testtilnærming
- Dette er et utdanningsrepository uten omfattende automatiserte tester
- Dette er et utdanningslager uten omfattende automatiserte tester
- Manuell testing fokuserer på:
- Kodeeksempler kjører uten feil
- Lenker i dokumentasjonen fungerer korrekt
- Prosjektbygg fullføres vellykket
- Lenker i dokumentasjon fungerer korrekt
- Prosjektbygg fullføres uten feil
- Eksempler følger beste praksis
### Sjekk før innsending
@ -138,125 +138,125 @@ node server.js # Verify server starts without errors
- Test kodeeksempler i nettleser eller Node.js
- Sjekk at oversettelser opprettholder riktig struktur
## Retningslinjer for kodestil
## Kodestil retningslinjer
### JavaScript
- Bruk moderne ES6+ syntaks
- Følg standard ESLint-konfigurasjoner som er gitt i prosjektene
- Bruk meningsfulle variabel- og funksjonsnavn for pedagogisk klarhet
- Følg standard ESLint-konfigurasjoner gitt i prosjektene
- Bruk meningsfulle variabel- og funksjonsnavn for pedagogisk tydelighet
- Legg til kommentarer som forklarer konsepter for lærende
- Formater med Prettier der det er konfigurert
### HTML/CSS
- Semantiske HTML5-elementer
- Prinsipper for responsivt design
- Klare klassenavnkonvensjoner
- Kommentarer som forklarer CSS-teknikker for lærende
- Responsive designprinsipper
- Klare klassifikasjonsnavnkonvensjoner
- Kommenterer CSS-teknikker for lærende
### Python
- PEP 8-stilretningslinjer
- PEP 8 stilretningslinjer
- Klare, pedagogiske kodeeksempler
- Type hints der det er nyttig for læring
- Typehinting der det er hjelpsomt for læring
### Markdown-dokumentasjon
### Markdown dokumentasjon
- Klar overskriftsstruktur
- Klar overskriftshierarki
- Kodeblokker med språkspecifikasjon
- Lenker til tilleggsmateriell
- Skjermbilder og bilder i `images/`-kataloger
- Lenker til tilleggsressurser
- Skjermbilder og bilder i `images/` kataloger
- Alt-tekst for bilder for tilgjengelighet
### Filorganisering
- Leksjoner nummerert sekvensielt (1-getting-started-lessons, 2-js-basics, osv.)
- Hvert prosjekt har `solution/` og ofte `start/` eller `your-work/`-kataloger
- Bilder lagret i leksjonsspesifikke `images/`-mapper
- Oversettelser i `translations/{language-code}/`-struktur
- Hvert prosjekt har `solution/` og ofte `start/` eller `your-work/` kataloger
- Bilder lagret i leksjonsspesifikke `images/` mapper
- Oversettelser i `translations/{language-code}/` struktur
## Bygging og distribusjon
### Distribusjon av Quiz-app (Azure Static Web Apps)
### Quiz App distribusjon (Azure Static Web Apps)
Quiz-appen er konfigurert for distribusjon via Azure Static Web Apps:
Quiz-app er konfigurert for Azure Static Web Apps distribusjon:
```bash
cd quiz-app
npm run build # Creates dist/ folder
# Deploys via GitHub Actions workflow on push to main
npm run build # Oppretter dist/-mappe
# Distribuerer via GitHub Actions workflow ved push til main
```
Konfigurasjon for Azure Static Web Apps:
- **App-plassering**: `/quiz-app`
- **Output-plassering**: `dist`
Azure Static Web Apps konfigurasjon:
- **App-lokasjon**: `/quiz-app`
- **Output-lokasjon**: `dist`
- **Arbeidsflyt**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Generering av dokumentasjon som PDF
### Generering av PDF-dokumentasjon
```bash
npm install # Install docsify-to-pdf
npm run convert # Generate PDF from docs
npm install # Installer docsify-to-pdf
npm run convert # Generer PDF fra docs
```
### Docsify-dokumentasjon
### Docsify dokumentasjon
```bash
npm install -g docsify-cli # Install Docsify globally
docsify serve # Serve on localhost:3000
npm install -g docsify-cli # Installer Docsify globalt
docsify serve # Server på localhost:3000
```
### Prosjektspesifikke bygg
Hver prosjektkatalog kan ha sin egen byggeprosess:
- Vue-prosjekter: `npm run build` lager produksjonsbundler
- Statisk prosjekter: Ingen byggeprosess, server filene direkte
Hver prosjektkatalog kan ha egen byggprosess:
- Vue prosjekter: `npm run build` lager produksjonspakker
- Statisk prosjekter: Ingen byggesteg, server filer direkte
## Retningslinjer for pull requests
### Tittelformat
Bruk klare, beskrivende titler som indikerer endringsområdet:
Bruk klare, beskrivende titler som angir endringsområde:
- `[Quiz-app] Legg til ny quiz for leksjon X`
- `[Lesson-3] Rett skrivefeil i terrarium-prosjekt`
- `[Translation] Legg til spansk oversettelse for leksjon 5`
- `[Docs] Oppdater oppsettsinstruksjoner`
- `[Docs] Oppdater oppsettinstruksjoner`
### Nødvendige sjekker
### Påkrevde sjekker
Før du sender inn en PR:
Før innsending av PR:
1. **Kodekvalitet**:
- Kjør `npm run lint` i berørte prosjektkataloger
- Rett alle linting-feil og advarsler
- Fiks alle linting-feil og advarsler
2. **Byggverifisering**:
- Kjør `npm run build` hvis aktuelt
- Sørg for at det ikke er byggefeil
- Sørg for ingen byggefeil
3. **Lenkevalidering**:
- Test alle markdown-lenker
- Verifiser at bildereferanser fungerer
- Verifiser bildehenvisninger fungerer
4. **Innholdsrevisjon**:
- Korrekturles for stave- og grammatikkfeil
- Korrekturles for rettskrivning og grammatikk
- Sørg for at kodeeksempler er korrekte og pedagogiske
- Verifiser at oversettelser opprettholder original mening
- Verifiser at oversettelser bevarer original betydning
### Krav til bidrag
### Bidragskrav
- Godta Microsoft CLA (automatisk sjekk ved første PR)
- Følg [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Se [CONTRIBUTING.md](./CONTRIBUTING.md) for detaljerte retningslinjer
- Referer til issuenumre i PR-beskrivelsen hvis aktuelt
- Referer til issues i PR-beskrivelsen hvis aktuelt
### Gjennomgangsprosess
- PR-er gjennomgås av vedlikeholdere og fellesskapet
- PR-er vurderes av vedlikeholdere og fellesskap
- Pedagogisk klarhet prioriteres
- Kodeeksempler bør følge gjeldende beste praksis
- Oversettelser gjennomgås for nøyaktighet og kulturell tilpasning
- Oversettelser vurderes for nøyaktighet og kulturtilpasning
## Oversettelsessystem
@ -265,16 +265,16 @@ Før du sender inn en PR:
- Bruker GitHub Actions med co-op-translator arbeidsflyt
- Oversetter automatisk til 50+ språk
- Kildefiler i hovedkataloger
- Oversatte filer i `translations/{language-code}/`-kataloger
- Oversatte filer i `translations/{language-code}/` kataloger
### Legge til manuelle forbedringer i oversettelser
### Legge til manuelle oversettelsesforbedringer
1. Finn filen i `translations/{language-code}/`
2. Gjør forbedringer mens du opprettholder strukturen
3. Sørg for at kodeeksempler forblir funksjonelle
4. Test eventuelt lokaliserte quizinnhold
1. Finn fil i `translations/{language-code}/`
2. Gjør forbedringer med strukturintakt
3. Sørg for at kodeeksempler fortsatt fungerer
4. Test eventuelt lokalisert quiz-innhold
### Metadata for oversettelser
### Oversettelsesmetadata
Oversatte filer inkluderer metadata-header:
```markdown
@ -289,87 +289,87 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Feilsøking og problemløsning
## Feilsøking og problemløsing
### Vanlige problemer
**Quiz-appen starter ikke**:
- Sjekk Node.js-versjon (v14+ anbefalt)
**Quiz app starter ikke**:
- Sjekk Node.js versjon (v14+ anbefalt)
- Slett `node_modules` og `package-lock.json`, kjør `npm install` på nytt
- Sjekk for portkonflikter (standard: Vite bruker port 5173)
- Sjekk portkonflikter (standard: Vite bruker port 5173)
**API-serveren starter ikke**:
- Verifiser at Node.js-versjonen oppfyller minimumskravene (node >=10)
- Sjekk om porten allerede er i bruk
**API-server starter ikke**:
- Verifiser Node.js versjon oppfyller minimum (node >=10)
- Sjekk om port allerede er i bruk
- Sørg for at alle avhengigheter er installert med `npm install`
**Nettleserutvidelsen laster ikke**:
- Verifiser at manifest.json er riktig formatert
- Sjekk nettleserkonsollen for feil
- Følg nettleserspesifikke instruksjoner for installasjon av utvidelser
**Nettleserutvidelse lastes ikke**:
- Sjekk at manifest.json er korrekt formatert
- Se etter feil i nettleserkonsoll
- Følg nettleserspesifikke installasjonsinstruksjoner
**Problemer med Python-chatprosjekt**:
- Sørg for at OpenAI-pakken er installert: `pip install openai`
- Verifiser at GITHUB_TOKEN miljøvariabelen er satt
- Sjekk tilgangstillatelser for GitHub Models
**Python chat-prosjekt problemer**:
- Kontroller at OpenAI-pakken er installert: `pip install openai`
- Verifiser at GITHUB_TOKEN miljøvariabel er satt
- Sjekk GitHub Models tilgangstillatelser
**Docsify serverer ikke dokumentasjon**:
- Installer docsify-cli globalt: `npm install -g docsify-cli`
- Kjør fra repositoryets rotkatalog
- Kjør fra repositories rotkatalog
- Sjekk at `docs/_sidebar.md` eksisterer
### Tips for utviklingsmiljø
- Bruk VS Code med Live Server-utvidelsen for HTML-prosjekter
- Installer ESLint og Prettier-utvidelser for konsistent formatering
- Bruk nettleserens utviklerverktøy for feilsøking av JavaScript
- For Vue-prosjekter, installer Vue DevTools nettleserutvidelse
- Bruk VS Code med Live Server-extension for HTML-prosjekter
- Installer ESLint og Prettier extensions for jevn formatering
- Bruk nettleserens utviklerverktøy til å feilsøke JavaScript
- For Vue prosjekter, installer Vue DevTools nettleserutvidelse
### Ytelseshensyn
### Ytelsesmessige hensyn
- Et stort antall oversatte filer (50+ språk) betyr at full kloning er stor
- Bruk grunnleggende kloning hvis du kun jobber med innhold: `git clone --depth 1`
- Ekskluder oversettelser fra søk når du jobber med engelsk innhold
- Byggeprosesser kan være trege ved første kjøring (npm install, Vite build)
- Stort antall oversatte filer (50+ språk) gjør hele kloner store
- Bruk grunne kloner hvis du kun skal jobbe med innhold: `git clone --depth 1`
- Ekskluder oversettelser fra søk når du arbeider med engelsk innhold
- Byggeprosesser kan være trege første gang (npm install, Vite build)
## Sikkerhetshensyn
### Miljøvariabler
- API-nøkler skal aldri committes til repositoryet
- Bruk `.env`-filer (allerede i `.gitignore`)
- Dokumenter nødvendige miljøvariabler i prosjekt-README-er
- API-nøkler skal aldri legges i repositoriet
- Bruk `.env` filer (allereie i `.gitignore`)
- Dokumenter nødvendige miljøvariabler i prosjektets README-filer
### Python-prosjekter
- Bruk virtuelle miljøer: `python -m venv venv`
- Hold avhengigheter oppdatert
- GitHub-tokens bør ha minimale nødvendige tillatelser
- GitHub-tokens skal ha minimale nødvendige tillatelser
### Tilgang til GitHub Models
### GitHub Models tilgang
- Personlige tilgangstokens (PAT) kreves for GitHub Models
- Tokens bør lagres som miljøvariabler
- Aldri committ tokens eller legitimasjon
- Personlige tilgangstokener (PAT) kreves for GitHub Models
- Tokens skal lagres som miljøvariabler
- Aldri legg tokens eller legitimasjon inn i repositoriet
## Tilleggsnotater
### Målgruppe
- Helt nybegynnere innen webutvikling
- Studenter og selvstudenter
- Lærere som bruker pensumet i klasserommet
- Innholdet er designet for tilgjengelighet og gradvis ferdighetsbygging
- Fullstendige nybegynnere i webutvikling
- Studenter og selvlærende
- Lærere som bruker pensum i klasserommet
- Innhold designet for tilgjengelighet og gradvis ferdighetsbygging
### Pedagogisk filosofi
### Utdanningsfilosofi
- Prosjektbasert læringsmetode
- Prosjektbasert læringstilnærming
- Hyppige kunnskapssjekker (quizer)
- Praktiske kodeøvelser
- Eksempler med reell anvendelse
- Fokus på grunnleggende før rammeverk
- Eksempler på virkelige bruksområder
- Fokuser på grunnleggende før rammeverk
### Vedlikehold av repository
### Vedlikehold av repositoriet
- Aktivt fellesskap av lærende og bidragsytere
- Regelmessige oppdateringer av avhengigheter og innhold
@ -380,27 +380,29 @@ CO_OP_TRANSLATOR_METADATA:
- [Microsoft Learn-moduler](https://docs.microsoft.com/learn/)
- [Student Hub-ressurser](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) anbefales for lærende
- Tilleggskurs: Generativ AI, Data Science, ML, IoT-pensum tilgjengelig
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) anbefalt for lærende
- Tilleggs kurs: Generativ AI, Data Science, ML, IoT pensum tilgjengelig
### Arbeid med spesifikke prosjekter
### Arbeide med spesifikke prosjekter
For detaljerte instruksjoner om individuelle prosjekter, se README-filene i:
- `quiz-app/README.md` - Vue 3 quiz-applikasjon
- `7-bank-project/README.md` - Bankapplikasjon med autentisering
- `5-browser-extension/README.md` - Utvikling av nettleserutvidelse
- `5-browser-extension/README.md` - Nettleserutvidelsesutvikling
- `6-space-game/README.md` - Canvas-basert spillutvikling
- `9-chat-project/README.md` - AI-chatassistentprosjekt
- `9-chat-project/README.md` - AI chatteassistent-prosjekt
### 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 repositoriet flere uavhengige prosjekter:
- Hver leksjon er selvstendig
- Prosjekter deler ikke avhengigheter
- Arbeid med individuelle prosjekter uten å påvirke andre
- Klon hele repoet for den fulle pensumopplevelsen
- Klon hele repo for full pensumopplevelse
---
**Ansvarsfraskrivelse**:
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.
<!-- 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 automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det opprinnelige dokumentet på originalsproget bør betraktes 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.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

171
translations/no/README.md
Unescape View File

@ -12,16 +12,16 @@
# Webutvikling for nybegynnere - Et læreplan
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 innen webutvikling med vårt 12-ukers omfattende kurs av Microsoft Cloud Advocates. Hvert av de 24 leksjonene dykker inn i JavaScript, CSS og HTML gjennom praktiske prosjekter som terrarier, nettleserutvidelser og romspill. Engasjer deg med quizzer, diskusjoner og praktiske oppgaver. Forbedre ferdighetene dine og optimaliser kunnskapsbevaringen med vår effektive prosjektbaserte pedagogikk. Start din koding reise i dag!
Bli med i Azure AI Foundry Discord Community
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Følg disse trinnene for å komme i gang med å bruke disse ressursene:
1. **Gaffel depotet**: Klikk [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Klon depotet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Bli med i Azure AI Foundry Discord og møte eksperter og andre utviklere**](https://discord.com/invite/ByRwuEEgH4)
1. **Fork depotet**: Klikk [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Klone depotet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Bli med i Azure AI Foundry Discord og møt eksperter og medutviklere**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Flerspråklig støtte
@ -41,23 +41,23 @@ 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.
<!-- 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 listet opp [her](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _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-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å en gratis sertifikatkupong på. Dette er siden du ønsker å bokmerke og sjekke fra tid til annen da 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 bruk av 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.
### 📣 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-assistentprosjekt 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 ble nettopp lansert
Ikke gå glipp av vår nye Generative AI læreplan!
@ -66,14 +66,15 @@ Besøk [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for å k
![Background](../../translated_images/no/background.148a8d43afde5730.webp)
- Leksjoner som dekker alt fra grunnleggende til RAG.
- Samhandle med historiske karakterer ved hjelp av GenAI og vår følgesvenn-app.
- Moro og engasjerende fortelling, du vil tidsreise!
- Samhandle med historiske karakterer ved bruk av GenAI og vår følgesvenn-app.
- Morsom og engasjerende fortelling, du vil reise i tid!
![character](../../translated_images/no/character.5c0dd8e067ffd693.webp)
Hver leksjon inkluderer en oppgave å fullføre, en kunnskapskontroll og en utfordring som guider deg i å lære emner som:
- Prompting og prompt-engineering
- Tekst- og bildeappgenerering
Hver leksjon inkluderer en oppgave som skal fullføres, en kunnskapssjekk og en utfordring som veileder deg i læring av emner som:
- Prompting og prompt-ingeniørkunst
- Tekst- og bildeapp-generering
- Søkeapper
Besøk [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) for å komme i gang!
@ -82,42 +83,42 @@ Besøk [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) fo
## 🌱 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) om hvordan bruke denne læreplanen. Vi vil gjerne ha tilbakemeldinger [i vårt 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 opp med å lese forelesningsmaterialet, fullføre de forskjellige aktivitetene og sjekk forståelsen din med post-forelesningsquiz.
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 opp med medelever for å jobbe sammen på prosjektene! Diskusjoner oppfordres i vårt [diskusjonsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) hvor vårt team av moderatorer vil være tilgjengelige for å svare på spørsmålene dine.
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 anbefaler vi sterkt å utforske [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for tilleggsstudie-materialer.
### 📋 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, uten behov for installasjoner, miljø_), eller lokalt på datamaskinen din ved bruk av en teksteditor som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Opprett depotet ditt
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.
#### Lag ditt eget depot
For at du enkelt skal kunne lagre arbeidet ditt, anbefales det at du lager din egen kopi av dette depotet. Du kan gjøre dette ved å klikke på **Use this template**-knappen øverst på siden. Dette vil lage et nytt depot i din GitHub-konto med en kopi av læreplanen.
Følg disse trinnene:
1. **Gaffel depotet**: Klikk på "Fork" knappen øverst til høyre på denne siden.
2. **Klon depotet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
1. **Fork depotet**: Klikk på "Fork"-knappen øverst til høyre på denne siden.
2. **Klone depotet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Kjøre læreplanen i en Codespace
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 depotet som du har laget, klikk på **Code**-knappen og velg **Open with Codespaces**. Dette vil lage en ny Codespace for deg å jobbe i.
![Codespace](../../translated_images/no/createcodespace.0238bbf4d7a8d955.webp)
#### Kjøre læreplanen lokalt på datamaskinen din
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 teksteditor, 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 veilede deg gjennom forskjellige alternativer for hvert 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 editor, 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 depotet ditt til datamaskinen. Du kan gjøre dette ved å klikke på **Code**-knappen og kopiere URL-en:
[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
git clone <your-repository-url>
@ -129,80 +130,80 @@ Vår anbefaling er å bruke [Visual Studio Code](https://code.visualstudio.com/?
> Anbefalte Visual Studio Code-utvidelser:
>
> * [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:
- valgfri skissetegning
- valgfri sketchnote
- valgfri supplerende video
- forprøve før leksjonen
- quiz som oppvarming før leksjonen
- skriftlig leksjon
- for prosjektbaserte leksjoner, steg-for-steg-veiledninger om hvordan bygge prosjektet
- kunnskapstester
- for prosjektbaserte leksjoner, trinn-for-trinn guider for hvordan bygge prosjektet
- kunnskapssjekker
- en utfordring
- supplerende lesing
- supplerende lesning
- oppgave
- [etterprøve](https://ff-quizzes.netlify.app/web/)
- [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 finnes 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.
## 🗃️ Leksjoner
| | Prosjektnavn | Undervisningskonsepter | Læringsmål | Tilknyttet leksjon | Forfatter |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 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 |
| 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 |
| 03 | Komme i gang | Tilgjengelighet | Lær det grunnleggende om tilgjengelighet på nettet | [Tilgjengelighetsgrunnlag](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Grunnleggende | JavaScript-datatyper | Grunnleggende om JavaScript-datatyper | [Datatyper](./2-js-basics/1-data-types/README.md) | Jasmine |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| | Prosjektnavn | Konsepter som læres | Læringsmål | Lenket leksjon | Forfatter |
| :-: | :-------------------------------------------------------: | :------------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------: | :-----------------------: |
| 01 | Komme i gang | Introduksjon til programmering og verktøyene i faget | Lær det grunnleggende bak de fleste programmeringsspråk og programvare som hjelper profesjonelle utviklere å gjøre jobben sin | [Intro til programmeringsspråk og verktøy](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Komme i gang | Grunnleggende om GitHub, inkludert arbeid i team | Hvordan bruke GitHub i prosjektet, og hvordan samarbeide med andre om en kodebase | [Intro til GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Komme i gang | Tilgjengelighet | Lær det grunnleggende om webtilgjengelighet | [Tilgjengelighet Grunnprinsipper](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Grunnleggende | JavaScript Datatyper | Det grunnleggende om JavaScript-datatyper | [Datatyper](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Grunnleggende | Funksjoner og metoder | Lær om funksjoner og metoder for å styre programmets logikk | [Funksjoner og metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine og Christopher |
| 06 | JS Grunnleggende | Å ta beslutninger med JS | Lær hvordan lage betingelser i koden din ved bruk av beslutningstakningsmetoder | [Å ta beslutninger](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Grunnleggende | Arrays og løkker | Arbeid med data ved bruk av arrayer 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å 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å CSS-grunnprinsipper inklusiv responsiv side | [Introduksjon til CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-manipulering | Bygg JavaScript for å gjøre terrariet funksjonelt som drag/drop-grensesnitt, 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 bruke tastaturhendelser til å 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, historien deres og hvordan lage grunnstruktur for en nettleserutvidelse | [Om nettlesere](./5-browser-extension/1-about-browsers/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 for nettleserutvidelsen din for å kalle et API ved bruk av variabler lagret i lokal lagring | [APIer, skjemaer 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, nettleserytelse | Bruk nettleserens bakgrunnsprosesser for å styre ikonet til utvidelsen; lær om nettleserytelse og noen optimaliseringer | [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 og Pub/Sub-mønsteret, som forberedelse til spillutvikling | [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 for å tegne elementer på en skjerm | [Tegning på Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Flytting av elementer rundt 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 |
| 18 | [Space Game](./6-space-game/solution/README.md) | Kollisjonsdeteksjon | Få elementer til å kollidere og reagere på hverandre ved hjelp av knappetrykk og tilby en nedkjølingsfunksjon for å sikre ytelse | [Kollisjonsdeteksjon](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Poengtelling | Utfør matematiske beregninger basert på spillstatus 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 eiendeler og tilbakestille variabelverdier | [Sluttbetingelsen](./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 lage grunnstrukturen til en fler-sides nettsides arkitektur ved bruk av ruting 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) | Bygg et innloggings- og registreringsskjema | Lær om å bygge 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 å hente og bruke data | Hvordan data flyter inn og ut av appen din, hvordan hente, lagre og kaste data | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Konsepter for tilstandsadministrasjon | Lær hvordan appen din beholder tilstand og hvordan å styre det programmert | [Tilstandsadministrasjon](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Arbeide med VScode | Lær hvordan bruke en kodeeditor | [Bruke 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 bygge din egen AI-assistent | [AI Assistant prosjekt](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogikk
Vårt pensum er utformet med to viktige pedagogiske prinsipper i tankene:
Vårt pensum er designet med to nøkkelprinsipper for pedagogikk i tankene:
* 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 om JavaScript, HTML og CSS, samt de nyeste verktøyene og teknikkene som brukes av dagens webutviklere. Studentene vil få mulighet til å utvikle praktisk erfaring ved å bygge et skrive-spill, et virtuelt terrarium, en miljøvennlig nettleserutvidelse, et space-invader-stil spill og en bankapp for bedrifter. Ved slutten av serien vil studentene ha fått 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 pensum 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 samsvarer med prosjektene, gjøres prosessen mer engasjerende for studentene, og forståelsen av konseptene vil bli forbedret. Vi skrev også flere startleksjoner i 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 videotutorials, hvor 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 undervisning hensikten til studenten mot å lære et tema, mens en heldagsquiz etter undervisning sikrer videre forståelse. Dette pensum 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 ved 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 bevisst har unngått å introdusere JavaScript-rammeverk for å konsentrere oss om 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 [bidrag](CONTRIBUTING.md). Vi ønsker dine konstruktive tilbakemeldinger velkommen!
## 🧭 Offline tilgang
## 🧭 Tilgang offline
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 skriver du `docsify serve`. Nettstedet vil bli servert på port 3000 på din localhost: `localhost:3000`.
## 📘 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 finnes [her](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Andre kurs
@ -212,10 +213,10 @@ Teamet vårt produserer andre kurs! Sjekk ut:
### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
### Azure / Edge / MCP / Agenter
[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -223,7 +224,7 @@ Teamet vårt produserer andre kurs! Sjekk ut:
---
### Generative AI Series
### Generativ AI-serie
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -231,7 +232,7 @@ Teamet vårt produserer andre kurs! Sjekk ut:
---
### Core Learning
### Grunnleggende læring
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -242,7 +243,7 @@ Teamet vårt produserer andre kurs! Sjekk ut:
---
### Copilot Series
### Copilot-serie
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
@ -250,11 +251,11 @@ Teamet vårt produserer andre kurs! Sjekk ut:
## Få hjelp
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 spørsmål om å bygge AI-apper. Bli med andre elever og erfarne utviklere i diskusjoner om MCP. Det er et støttende fellesskap hvor spørsmål er velkomne og kunnskap deles fritt.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Hvis du har produktfeedback eller feil under bygging, besøk:
Hvis du har produktfeedback eller opplever feil under bygging, besøk:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
@ -266,5 +267,5 @@ Dette depotet er lisensiert under MIT-lisensen. Se [LICENSE](../../LICENSE)-file
<!-- 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 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 hjelp av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi streber etter nøyaktighet, vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på originalsproget skal 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.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Write Preview
Loading…
Cancel
Save