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

pull/1690/head
localizeflow[bot] 3 weeks ago
parent b58da518b5
commit bfacd83eb0

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-02-06T11:38:37+00:00",
"translation_date": "2026-02-06T13:05:03+00:00",
"source_file": "AGENTS.md",
"language_code": "fi"
},

@ -2,36 +2,36 @@
## Projektin yleiskatsaus
Tämä on opetusohjelmakokoelma verkkokehityksen perusteiden opettamiseen aloittelijoille. Opetusohjelma on kattava 12 viikon kurssi, jonka on kehittänyt Microsoft Cloud Advocates, ja se sisältää 24 käytännönläheistä oppituntia, jotka kattavat JavaScriptin, CSS:n ja HTML:n.
Tämä on opetuskokonaisuus, joka toimii verkkokehityksen perusteiden opetuksen opetusmateriaalivarastona aloittelijoille. Opetussuunnitelma on kattava 12 viikon kurssi, jonka ovat kehittäneet Microsoft Cloud Advocates -tiimin jäsenet. Kurssi sisältää 24 käytännönläheistä oppituntia, jotka kattavat JavaScriptin, CSS:n ja HTML:n.
### Keskeiset osat
- **Opetussisältö**: 24 rakenteellista oppituntia projektipohjaisissa moduuleissa
- **Käytännön projektit**: Terrarium, Typing Game, Selainlaajennus, Space Game, Pankkisovellus, Koodieditori ja AI Chat Assistant
- **Interaktiiviset tietovisat**: 48 tietovisaa, joissa kussakin 3 kysymystä (ennen ja jälkeen oppitunnin arvioinnit)
- **Monikielinen tuki**: Automaattiset käännökset yli 50 kielelle GitHub Actionsilla
- **Teknologiat**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI-projekteihin)
- **Opetussisältö**: 24 rakenteellista oppituntia, jotka on organisoitu projektipohjaisiksi moduuleiksi
- **Käytännön projektit**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor ja AI Chat Assistant
- **Interaktiiviset testit**: 48 testiä, joissa jokaisessa 3 kysymystä (ennakko- ja jälkitestit)
- **Monikielinen tuki**: Automaattiset käännökset yli 50 kielelle GitHub Actionsin avulla
- **Teknologiat**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI-projekteissa)
### Arkkitehtuuri
- Opetusrepo oppituntirakenteella
- Jokaisessa oppituntikansiossa README, koodiesimerkit ja ratkaisut
- Itsenäiset projektit omissa hakemistoissaan (quiz-app, eri oppituntiprojektit)
- Käännösjärjestelmä GitHub Actionsia käyttäen (co-op-translator)
- Dokumentaatio Docsifyllä ja PDF-muodossa saatavana
- Opetussisältöinen arkisto oppituntirakenteella
- Jokaisessa oppituntikansiossa on README-tiedosto, koodiesimerkit ja ratkaisut
- Erilliset projektit omissa kansioissaan (quiz-app, erilaiset oppituntiprojektit)
- Käännösjärjestelmä GitHub Actionsilla (co-op-translator)
- Dokumentaatio tarjotaan Docsifyn kautta ja se on saatavilla PDF-muodossa
## Asennuskomennot
## Asennuskäskyt
mä repo on pääasiassa opetussisällön kulutukseen. Työskennellessäsi tiettyjen projektien parissa:
tä arkistoa käytetään pääasiassa opetussisällön kuluttamiseen. Työskennellessäsi tiettyjen projektien parissa:
### Päänäilon asetukset
### Pääarkistoasennus
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Quiz-sovelluksen asennus (Vue 3 + Vite)
### Quiz App -asennus (Vue 3 + Vite)
```bash
cd quiz-app
@ -41,7 +41,7 @@ npm run build # Rakenna tuotantoon
npm run lint # Suorita ESLint
```
### Pankkiprojektin API (Node.js + Express)
### Bank Project API (Node.js + Express)
```bash
cd 7-bank-project/api
@ -56,7 +56,7 @@ npm run format # Muotoile Prettierillä
```bash
cd 5-browser-extension/solution
npm install
# Noudata selainkohtaisia lisäosien latausohjeita
# Noudata selainkohtaisia laajennuksen latausohjeita
```
### Space Game -projektit
@ -67,7 +67,7 @@ npm install
# Avaa index.html selaimessa tai käytä Live Serveriä
```
### Chat-projekti (Python-palvelin)
### Chat-projekti (Python Backend)
```bash
cd 9-chat-project/solution/backend/python
@ -76,45 +76,45 @@ pip install openai
python api.py
```
## Kehitystyön kulku
## Kehitysprosessi
### Sisällöntuottajille
1. **Haarauta repositorio** GitHub-tilillesi
2. **Kloonaa haarasi** paikallisesti
1. **Forkkaa arkisto** GitHub-tilillesi
2. **Kloonaa oma fork** paikallisesti
3. **Luo uusi haara** muutoksillesi
4. Tee muutoksia oppituntisisältöön tai koodiesimerkkeihin
5. Testaa koodimuutoksia asianmukaisissa projektikansioissa
6. Lähetä pull requesteja seuraamalla ohjeita
4. Tee muutoksia oppituntien sisältöön tai koodiesimerkkeihin
5. Testaa koodimuutokset asianmukaisissa projektihakemistoissa
6. Lähetä pull requestit noudattaen kontribuutio-ohjeita
### Oppijoille
1. Haarauta tai kloonaa repo
2. Siirry oppituntikansioihin peräkkäin
1. Forkkaa tai kloonaa arkisto
2. Siirry oppituntikansioihin järjestyksessä
3. Lue jokaisen oppitunnin README-tiedostot
4. Tee oppituntien esikyselyt osoitteessa https://ff-quizzes.netlify.app/web/
5. Työstä koodiesimerkkejä oppituntikansioissa
4. Suorita ennakkotestit osoitteessa https://ff-quizzes.netlify.app/web/
5. Käy läpi oppituntien koodiesimerkit
6. Suorita tehtävät ja haasteet
7. Tee oppituntien jälkikyselyt
7. Tee jälkitestit
### Live-kehitys
### Live-kehitykseen
- **Dokumentaatio**: Suorita `docsify serve` juurikansiossa (portti 3000)
- **Quiz-sovellus**: Suorita `npm run dev` quiz-app-kansiossa
- **Projektit**: Käytä VS Coden Live Server -laajennusta HTML-projekteissa
- **API-projektit**: Suorita `npm start` vastaavissa API-kansioissa
- **Dokumentaatio**: Aja `docsify serve` juurikansiossa (portti 3000)
- **Quiz App**: Aja `npm run dev` quiz-app-hakemistossa
- **Projektit**: Käytä VS Coden Live Server -laajennusta HTML-projekteihin
- **API-projektit**: Aja `npm start` kyseisissä API-hakemistoissa
## Testausohjeet
### Quiz-sovelluksen testaus
### Quiz App -testaus
```bash
cd quiz-app
npm run lint # Tarkista koodityylivirheet
npm run build # Varmista, että kokoaminen onnistuu
npm run lint # Tarkista koodityylin ongelmat
npm run build # Varmista, että käännös onnistuu
```
### Pankin API-testauksen ohjeet
### Bank API -testaus
```bash
cd 7-bank-project/api
@ -124,71 +124,71 @@ node server.js # Varmista, että palvelin käynnistyy ilman virheitä
### Yleinen testausmenetelmä
- Tämä on opetusrepo ilman kattavia automaattisia testejä
- Käsin tehtävä testaus keskittyy:
- Koodiesimerkkien virheettömään suoritukseen
- Tämä on opetussisältöarkisto ilman kattavia automatisoituja testejä
- Manuaalinen testaus keskittyy:
- Koodiesimerkkien virheettömään ajamiseen
- Dokumentaation linkkien toimivuuteen
- Projektien onnistuneeseen käännökseen
- Projektien käännösten onnistumiseen
- Esimerkkien parhaiden käytäntöjen noudattamiseen
### Esittäminen ennen tarkistusta
### Ennen lähettämistä tehtävät tarkistukset
- Suorita `npm run lint` kansioissa, joissa on package.json
- Aja `npm run lint` hakemistoissa, joissa on package.json
- Varmista markdown-linkkien toimivuus
- Testaa koodiesimerkit selaimessa tai Node.js:ssä
- Tarkista, että käännökset säilyttävät rakenteensa
- Testaa koodiesimerkit selaimella tai Node.js:llä
- Tarkista, että käännökset säilyttävät rakenteen
## Koodityyliohjeet
### JavaScript
- Käytä modernia ES6+ syntaksia
- Noudata projektien mukana tulevia ESLint-asetuksia
- Käytä merkityksellisiä muuttuja- ja funktioiden nimiä opetusmukavuuden parantamiseksi
- Lisää kommentteja käsitteiden selittämiseksi oppijoille
- Muotoile Prettierillä, jos konfiguroitu
- Käytä nykyaikaista ES6+ syntaksia
- Noudata projektien ESLint-konfiguraatioita
- Käytä merkityksellisiä muuttuja- ja funktioiden nimiä opetuksen selkeyttämiseksi
- Lisää kommentteja, jotka selittävät konsepteja oppijoille
- Muotoile Prettierillä, jos määritelty
### HTML/CSS
- Semanttiset HTML5-elementit
- Responsiivisen suunnittelun periaatteet
- Selkeät luokkanimikkeet
- Kommentit CSS-tekniikoiden selittämiseksi oppijoille
- Selkeät luokkien nimeämiskäytännöt
- CSS-tekniikoiden selitykset kommentteina oppijoille
### Python
- PEP 8 -tyyliohjeet
- Selkeät, opetukselliset koodiesimerkit
- Tyyppivihjeet oppimista tukemaan
- PEP 8 -tyyliohjeiden noudattaminen
- Selkeät ja opetukselliset koodiesimerkit
- Tyyppivihjeet, jos hyödyllisiä oppimisessa
### Markdown-dokumentaatio
- Selkeä otsikkorakenne
- Koodilohkot kielimääritteellä
- Selkeä otsikkohierarkia
- Koodilohkot kielimäärittelyllä
- Linkit lisäresursseihin
- Kuvakaappaukset ja kuvat `images/`-kansioissa
- Kuvien tekstit saavutettavuuden vuoksi
- Kuvakaappaukset ja kuvat `images/` -kansioissa
- Kuvien vaihtoehtoinen teksti saavutettavuuden vuoksi
### Tiedostojen järjestäminen
### Tiedostojen organisointi
- Oppitunnit numeroin sequentialisesti (1-getting-started-lessons, 2-js-basics jne.)
- Jokaisella projektilla on `solution/` ja usein `start/` tai `your-work/` kansiot
- Kuvat säilytetään oppituntikohtaisissa `images/`-kansioissa
- Käännökset `translations/{language-code}/` rakenteessa
- Oppitunnit numeroituna peräkkäin (1-getting-started-lessons, 2-js-basics jne.)
- Jokaisessa projektissa on `solution/` ja usein `start/` tai `your-work/` -kansiot
- Kuvat oppituntikohtaisissa `images/` -kansioissa
- Käännökset kansiorakenteessa `translations/{language-code}/`
## Käännös ja julkaisuprosessi
## Rakennus ja käyttöönotto
### Quiz-sovelluksen julkaisuprosessi (Azure Static Web Apps)
### Quiz App -käyttöönotto (Azure Static Web Apps)
Quiz-app on konfiguroitu Azure Static Web Apps -julkaisua varten:
Quiz-app on konfiguroitu Azure Static Web Apps -käyttöönottoa varten:
```bash
cd quiz-app
npm run build # Luo dist/-kansion
# Julkaisee GitHub Actions -työnkulun kautta, kun main-haaraan tehdään pushaus
# Julkaisee GitHub Actions -työnkulun avulla, kun tehdään push main-haaraan
```
Azure Static Web Apps -konfiguraatio:
Azure Static Web Apps -asetukset:
- **Sovelluksen sijainti**: `/quiz-app`
- **Tulostuskansio**: `dist`
- **Työnkulku**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
@ -204,80 +204,77 @@ npm run convert # Luo PDF docsista
```bash
npm install -g docsify-cli # Asenna Docsify globaalisti
docsify serve # Palvele osoitteessa localhost:3000
docsify serve # Palvele paikallisesti osoitteessa localhost:3000
```
### Projektikohtaiset käännökset
### Projektikohtaiset rakennusprosessit
Jokaisessa projektihakemistossa voi olla oma käännösprosessi:
- Vue-projekteissa: `npm run build` tuottaa tuotantopaketteja
- Staattisissa projekteissa: Ei käännösvaihetta, tarjoillaan tiedostot suoraan
Jokaisella projektille on mahdollisesti oma rakennusprosessi:
- Vue-projekteissa: `npm run build` luo tuotantopaketteja
- Staattisissa projekteissa: Ei rakennusvaihetta, tiedostot palvelimelle suoraan
## Pull request -ohjeet
## Pull requestin ohjeet
### Otsikkomuoto
Käytä selkeitä, kuvailevia otsikoita ilmoittaen muutoksen alue:
- `[Quiz-app] Lisää uusi tietovisa oppitunnille X`
Käytä selkeitä, kuvaavia otsikoita muutettavalta alueelta:
- `[Quiz-app] Lisää uusi testi oppitunnille X`
- `[Lesson-3] Korjaa kirjoitusvirhe terrarium-projektissa`
- `[Translation] Lisää espanjankielinen käännös oppitunnille 5`
- `[Docs] Päivitä asennusohjeet`
### Vaatimukset tarkistuksille
Ennen PR:n lähettämistä:
### Vaatimukset ennen PR:n lähettämistä
1. **Koodin laatu**:
- Suorita `npm run lint` vaikuttavissa projektikansioissa
- Aja `npm run lint` vaikuttavissa projektikansioissa
- Korjaa kaikki lint-virheet ja -varoitukset
2. **Käännöksen varmentaminen**:
- Suorita `npm run build` tarvittaessa
- Varmista, ettei käännöksessä ole virheitä
2. **Rakennuksen tarkastus**:
- Aja `npm run build` jos tarpeen
- Varmista ettei rakennuksessa ole virheitä
3. **Linkkien tarkastus**:
3. **Linkkien validointi**:
- Testaa kaikki markdown-linkit
- Varmista, että kuvat toimivat
- Varmista kuvaviitteiden toimivuus
4. **Sisältöarviointi**:
- Tarkista oikeinkirjoitus ja kielioppi
- Varmista koodiesimerkkien oikeellisuus ja opettavuus
- Tarkista käännösten säilyttäneen alkuperäisen merkityksen
4. **Sisällön tarkistus**:
- Oikolue oikeinkirjoitus ja kielioppi
- Varmista, että koodiesimerkit ovat oikein ja opettavaisia
- Varmista, että käännökset säilyttävät alkuperäisen merkityksen
### Osallistumisvaatimukset
### Kontribuutiovaatimukset
- Hyväksy Microsoftin CLA (automaattinen tarkastus ensimmäisellä PR:llä)
- Noudata [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) -käyttäytymissääntöä
- Katso yksityiskohdat [CONTRIBUTING.md](./CONTRIBUTING.md) -tiedostosta
- Viittaa issue-numeroihin PR-kuvauksessa tarvittaessa
- Hyväksy Microsoftin CLA (automaattinen tarkistus ensimmäisessä PR:ssä)
- Noudata [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) -käyttäytymisohjeita
- Katso [CONTRIBUTING.md](./CONTRIBUTING.md) yksityiskohtaiset ohjeet
- Viittaa mahdollisiin issue-numeroihin PR-kuvauksessa
### Tarkastusprosessi
### Tarkistusprosessi
- PR:t tarkistetaan ylläpitäjien ja yhteisön toimesta
- PR:t tarkistaa ylläpitäjät ja yhteisö
- Opetuksellinen selkeys on etusijalla
- Koodiesimerkkien tulee noudattaa parhaita käytäntöjä
- Käännökset tarkistetaan tarkkuuden ja kulttuurin sopivuuden osalta
- Koodiesimerkkien tulee noudattaa nykyisiä parhaita käytäntöjä
- Käännökset tarkistetaan tarkkuuden ja kulttuurisen sopivuuden varmistamiseksi
## Käännösjärjestelmä
### Automaattinen käännös
- Käyttää GitHub Actionsia ja co-op-translator-työnkulkua
- Kääntää automaattisesti yli 50 kielelle
- Käyttää GitHub Actions -työnkulkua co-op-translator
- Kääntää yli 50 kielelle automaattisesti
- Lähdetiedostot pääkansioissa
- Käännetyt tiedostot `translations/{language-code}/` hakemistoissa
- Käännetyt tiedostot kansioissa `translations/{language-code}/`
### Manuaalisten käännösten parannukset
### Manuaaliset käännösten parannukset
1. Etsi tiedosto `translations/{language-code}/` kansiosta
2. Tee parannukset säilyttäen rakenne
2. Tee parannuksia säilyttäen rakenne
3. Varmista, että koodiesimerkit toimivat edelleen
4. Testaa mahdollinen paikallinen tietovisa sisältö
### Käännöksen metatiedot
4. Testaa mahdollinen paikallinen testisisältö
Käännetyt tiedostot sisältävät metatietopään:
### Käännöstiedostojen metatiedot
Käännetyt tiedostot sisältävät metatietojen otsikon:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -290,68 +287,68 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Virheenkorjaus ja vianratkaisu
## Virheenkorjaus ja ongelmanratkaisu
### Yleiset ongelmat
**Quiz-sovellus ei käynnisty**:
- Tarkista Node.js-versio (v14+ suositeltu)
- Poista `node_modules` ja `package-lock.json`, suorita `npm install` uudelleen
- Tarkista porttien ristiriidat (oletus: Vite käyttää porttia 5173)
- Tarkista Node.js -versio (v14+ suositeltu)
- Poista `node_modules` ja `package-lock.json`, aja `npm install` uudelleen
- Tarkista porttien yhteentörmäykset (Vite käyttää oletuksena porttia 5173)
**API-palvelin ei käynnisty**:
- Varmista Node.js-version vaatimukset (node >=10)
- Varmista, että Node.js on vähintään versio 10
- Tarkista, onko portti jo käytössä
- Varmista, että kaikki riippuvuudet on asennettu komennolla `npm install`
- Varmista, että riippuvuudet ovat asennettu `npm install` komennolla
**Selainlaajennus ei lataudu**:
- Tarkista manifest.json on oikein muotoiltu
- Tarkista selaimen konsolin virheet
- Noudata selaimeen liittyviä laajennuksen asennusohjeita
- Tarkista, että manifest.json on oikein muotoiltu
- Katso selaimen konsolista virheilmoituksia
- Noudata selainkohtaisia asennusohjeita
**Python-chat-projektin ongelmat**:
- Varmista, että OpenAI-paketti on asennettu: `pip install openai`
- Tarkista GITHUB_TOKEN-ympäristömuuttujan asetus
**Python chat-projektin ongelmat**:
- Asenna OpenAI-paketti: `pip install openai`
- Varmista, että GITHUB_TOKEN -ympäristömuuttuja on asetettu
- Tarkista GitHub Models -käyttöoikeudet
**Docsify ei tarjoa dokumentaatiota**:
- Asenna docsify-cli globaaliin käyttöön: `npm install -g docsify-cli`
- Suorita repovaraston juuresta
**Docsifyn dokumentaatio ei palvele**:
- Asenna docsify-cli globaalisti: `npm install -g docsify-cli`
- Aja arkiston juurihakemistosta
- Tarkista, että `docs/_sidebar.md` on olemassa
### Kehitysympäristön vinkit
### Kehitysympäristövinkit
- Käytä VS Codea Live Server -laajennuksella HTML-projekteissa
- Asenna ESLint ja Prettier -laajennukset yhtenäiseen muotoiluun
- Käytä selaimen DevToolsia JavaScriptin virheenkorjaukseen
- Vue-projekteille asenna Vue DevTools -laajennus selaimeen
- Asenna ESLint ja Prettier laajennukset yhtenäiseen muotoiluun
- Käytä selainten DevToolsia JavaScriptin virheenkorjaukseen
- Vue-projekteissa asenna Vue DevTools -selainlaajennus
### Suorituskyvyn huomioita
### Suorituskykymuutokset
- Suuri määrä käännettyjä tiedostoja (50+ kieliä) tekee täydellisestä kloonista raskaan
- Käytä kevyttä kloonausta, jos työskentelet vain sisällön parissa: `git clone --depth 1`
- Sulje käännökset hausta pois työskentelyssä englannin kanssa
- Käännösprosessit voivat olla hitaita ensimmäisellä ajolla (npm install, Vite build)
- Suuret määrät käännettyjä tiedostoja (50+ kieltä) tekevät täyden kloonauksen raskaaksi
- Käytä matalan syvyyden kloonausta vain, jos työskentelet sisällön parissa: `git clone --depth 1`
- Poissulje käännökset hauta, kun työskentelet englanninkielisen sisällön kanssa
- Rakennusprosessit saattavat olla hitaita ensimmäisillä kerroilla (npm install, Vite build)
## Turvallisuusohjeet
## Turvallisuusnäkökohdat
### Ympäristömuuttujat
- API-avaimia ei koskaan saa sitoa repositorioon
- Käytä `.env`-tiedostoja (jo .gitignore:ssa)
- Dokumentoi tarvittavat ympäristömuuttujat projektin README-tiedostoihin
- API-avaimia ei saa koskaan sitoa arkistoon
- Käytä `.env`-tiedostoja (jo mukana .gitignore)
- Dokumentoi tarvittavat ympäristömuuttujat projektin READMEissä
### Python-projektit
- Käytä virtuaaliympäristöjä: `python -m venv venv`
- Pidä riippuvuudet ajan tasalla
- GitHub-tokenien tulee olla mahdollisimman rajatuin oikeuksin
- Pidä riippuvuudet päivitettyinä
- GitHub-tokenien tulee olla minimioikeuksilla
### GitHub Models -käyttöoikeudet
- Henkilökohtaiset Access Tokenit (PAT) vaaditaan GitHub Models -käyttöön
- Tokenit säilytettävä ympäristömuuttujina
- Älä koskaan sitoudu tokenia tai tunnistetietoja repositorioon
- Henkilökohtaiset käyttöoikeusavaimet (PAT) vaaditaan GitHub Models -käyttöön
- Avaimet tulee tallentaa ympäristömuuttujiin
- Älä koskaan tallenna avaimia tai tunnuksia arkistoon
## Lisätiedot
@ -359,51 +356,51 @@ CO_OP_TRANSLATOR_METADATA:
- Täysin aloittelijat verkkokehityksessä
- Opiskelijat ja itseopiskelijat
- Opettajat, jotka käyttävät opetussuunnitelmaa luokissa
- Sisältö on suunniteltu saavutettavaksi ja taitojen asteittaiseksi kehittämiseksi
- Opettajat, jotka käyttävät opetussuunnitelmaa luokkahuoneissa
- Sisältö suunniteltu saavutettavuuden ja taitojen asteittaisen kartuttamisen mukaisesti
### Opetuksellinen filosofia
- Projektiin perustuva oppiminen
- Usein toteutettavat tietovisat
- Käytännön koodiharjoitukset
- Todellisten sovellusesimerkkien käyttö
- Painotus perusteissa ennen kehysten käyttöä
- Projektipohjainen oppiminen
- Tiheät tietämyksen tarkistukset (testit)
- Käytännön koodausharjoitukset
- Todellisia esimerkkisovelluksia
- Perusteet ensin, kehykset myöhemmin
### Kokoelman ylläpito
### Arkiston ylläpito
- Aktiivinen oppijoiden ja osallistujien yhteisö
- Riippuvuuksien ja sisällön säännöllinen päivitys
- Issues ja keskustelut ylläpitäjien valvonnassa
- Käännösten päivitykset automatisoitu GitHub Actionsilla
- Aktiivinen yhteisö oppijoista ja kontribuoijista
- Riittävä päivitys riippuvuuksiin ja sisältöön
- Issueiden ja keskustelujen seuranta ylläpitäjiltä
- Käännösten päivitys automatisoitu GitHub Actionsilla
### Aiheeseen liittyvät resurssit
### 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ää kursseja: Generatiivinen AI, Data Science, ML, IoT-kurssit saatavilla
- Lisäkursseja: Generatiivinen AI, Data Science, ML, IoT -opetussuunnitelmat saatavilla
### Työskentely erityisten projektien parissa
### Työskentely tietyissä projekteissa
Yksityiskohtaiset ohjeet yksittäisiin projekteihin löytyvät README-tiedostoista:
- `quiz-app/README.md` - Vue 3 -tietovisasovellus
Yksityiskohtaiset ohjeet löytyvät kunkin projektin README-tiedostoista:
- `quiz-app/README.md` - Vue 3:n testi-sovellus
- `7-bank-project/README.md` - Pankkisovellus autentikoinnilla
- `5-browser-extension/README.md` - Selainlaajennuskehitys
- `5-browser-extension/README.md` - Selainlaajennuksen kehitys
- `6-space-game/README.md` - Canvas-pohjainen peli
- `9-chat-project/README.md` - AI chat assistant -projekti
- `9-chat-project/README.md` - AI-chat-avustajaprojekti
### Monorepo-rakenne
Vaikka tämä ei ole perinteinen monorepo, se sisältää useita itsenäisiä projekteja:
- Jokainen oppitunti on itsenäinen kokonaisuus
Vaikka ei ole tyypillinen monorepo, tämä arkisto sisältää useita itsenäisiä projekteja:
- Jokainen oppitunti on itsenäinen
- Projektit eivät jaa riippuvuuksia
- Työskentele yksittäisten projektien kanssa vaikuttamatta muihin
- Kloonaa koko repo saadaksesi täydellisen opetusohjelman kokemuksen
- Työskentele yksittäisten projektien parissa ilman vaikutusta muihin
- Kloonaa koko arkisto saadaksesi täyden opetussuunnitelmakokemuksen
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Vastuuvapauslauseke**:
Tämä asiakirja on käännetty käyttäen tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, otathan huomioon, että automaattikäännöksissä voi esiintyä virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäiskielellä on aina virallinen lähde. Tärkeiden tietojen osalta suositellaan ammattilaisen tekemää ihmiskäännöstä. Emme ole vastuussa mahdollisista väärinymmärryksistä tai virhetulkintojen seurauksista, jotka johtuvat tästä käännöksestä.
**Vastuuvapauslauseke**:
Tämä asiakirja on käännetty käyttämällä tekoälykäännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, automaattiset käännökset saattavat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäiskielellä tulee pitää auktoritatiivisena lähteenä. Tärkeissä tiedoissa suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä aiheutuvista väärinkäsityksistä tai tulkinnoista.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-02-06T11:39:37+00:00",
"translation_date": "2026-02-06T13:06:03+00:00",
"source_file": "AGENTS.md",
"language_code": "nl"
},

@ -2,27 +2,27 @@
## Projectoverzicht
Dit is een educatieve curriculumrepository voor het onderwijzen van webontwikkeling fundamentals aan beginners. Het curriculum is een uitgebreide 12-weekse cursus ontwikkeld door Microsoft Cloud Advocates, met 24 praktische lessen over JavaScript, CSS en HTML.
Dit is een educatieve curriculumrepository voor het onderwijzen van de basisprincipes van webontwikkeling 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
### Belangrijke componenten
- **Educatieve Inhoud**: 24 gestructureerde lessen georganiseerd in projectgebaseerde modules
- **Praktische Projecten**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor en AI Chat Assistant
- **Interactieve Quizzen**: 48 quizzen met elk 3 vragen (voor- en na-les assessments)
- **Meertalige Ondersteuning**: Geautomatiseerde vertalingen voor 50+ talen via GitHub Actions
- **Educatieve inhoud**: 24 gestructureerde lessen georganiseerd in projectgebaseerde modules
- **Praktische projecten**: Terrarium, Typing Game, Browser Extensie, Space Game, Banking App, Code Editor en AI Chat Assistent
- **Interactieve quizzes**: 48 quizzes met elk 3 vragen (pre/post-les beoordelingen)
- **Meertalige ondersteuning**: Geautomatiseerde vertalingen voor meer dan 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
- Educatieve repository met les-gebaseerde structuur
- Elke lesmap bevat README, codevoorbeelden en oplossingen
- Losstaande projecten in aparte directories (quiz-app, diverse lesprojecten)
- Op zichzelf staande projecten in aparte mappen (quiz-app, diverse lesprojecten)
- Vertalingssysteem met GitHub Actions (co-op-translator)
- Documentatie geserveerd via Docsify en beschikbaar als PDF
- Documentatie wordt geserveerd via Docsify en is beschikbaar als PDF
## Setup Commando's
Deze repository is voornamelijk bedoeld voor consumptie van educatieve inhoud. Voor het werken met specifieke projecten:
Deze repository is primair bedoeld voor het consumeren van educatieve inhoud. Voor het werken met specifieke projecten:
### Hoofdrepository Setup
@ -36,7 +36,7 @@ cd Web-Dev-For-Beginners
```bash
cd quiz-app
npm install
npm run dev # Start ontwikkelserver
npm run dev # Start de ontwikkelserver
npm run build # Bouw voor productie
npm run lint # Voer ESLint uit
```
@ -51,7 +51,7 @@ npm run lint # Voer ESLint uit
npm run format # Opmaak met Prettier
```
### Browser Extension Projecten
### Browser Extensie Projecten
```bash
cd 5-browser-extension/solution
@ -64,7 +64,7 @@ npm install
```bash
cd 6-space-game/solution
npm install
# Open index.html in browser of gebruik Live Server
# Open index.html in de browser of gebruik Live Server
```
### Chat Project (Python Backend)
@ -76,14 +76,14 @@ pip install openai
python api.py
```
## Ontwikkelworkflow
## Ontwikkelingsworkflow
### Voor Inhoud Bijdragers
1. **Fork de repository** naar je GitHub-account
2. **Clone je fork** lokaal
3. **Maak een nieuwe branch** aan voor je wijzigingen
4. Breng wijzigingen aan in lesinhoud of codevoorbeelden
3. **Maak een nieuwe branch** voor je wijzigingen
4. Maak wijzigingen aan lesinhoud of codevoorbeelden
5. Test eventuele codewijzigingen in relevante projectmappen
6. Dien pull requests in volgens de bijdrage richtlijnen
@ -91,18 +91,18 @@ python api.py
1. Fork of clone de repository
2. Navigeer sequentieel door de lesmappen
3. Lees README-bestanden van elke les
4. Maak de voor-les quizzen op https://ff-quizzes.netlify.app/web/
5. Werk codevoorbeelden door in lesmappen
6. Voltooi opdrachten en uitdagingen
7. Maak de na-les quizzen
3. Lees README-bestanden voor elke les
4. Maak pre-les quizzes bij https://ff-quizzes.netlify.app/web/
5. Werk door codevoorbeelden in lesmappen
6. Maak opdrachten en uitdagingen
7. Maak post-les quizzes
### Live Ontwikkeling
- **Documentatie**: Voer `docsify serve` uit in de root (poort 3000)
- **Quiz App**: Voer `npm run dev` uit in quiz-app map
- **Documentatie**: Run `docsify serve` in root (poort 3000)
- **Quiz App**: Run `npm run dev` in quiz-app map
- **Projecten**: Gebruik VS Code Live Server extensie voor HTML-projecten
- **API Projecten**: Voer `npm start` uit in respectievelijke API-mappen
- **API Projecten**: Run `npm start` in respectievelijke API mappen
## Testinstructies
@ -110,8 +110,8 @@ python api.py
```bash
cd quiz-app
npm run lint # Controleer op problemen met de code-stijl
npm run build # Verifieer dat de build slaagt
npm run lint # Controleer op code stijlproblemen
npm run build # Controleer of de build slaagt
```
### Bank API Testen
@ -119,10 +119,10 @@ npm run build # Verifieer dat de build slaagt
```bash
cd 7-bank-project/api
npm run lint # Controleer op code stijlproblemen
node server.js # Controleer of de server zonder fouten start
node server.js # Controleren of de server zonder fouten start
```
### Algemene Testbenadering
### Algemene Testaanpak
- Dit is een educatieve repository zonder uitgebreide geautomatiseerde tests
- Handmatig testen richt zich op:
@ -131,21 +131,21 @@ node server.js # Controleer of de server zonder fouten start
- Project builds voltooien succesvol
- Voorbeelden volgen best practices
### Checks Voor Submitten
### Pre-submissie Checks
- Voer `npm run lint` uit in mappen met package.json
- Controleer of markdown links geldig zijn
- Run `npm run lint` in mappen met package.json
- Verifieer of markdown links geldig zijn
- Test codevoorbeelden in browser of Node.js
- Controleer dat vertalingen juiste structuur behouden
- Controleer of vertalingen juiste structuur behouden
## Code Stijl Richtlijnen
### JavaScript
- Gebruik moderne ES6+ syntax
- Volg standaard ESLint configuraties in projecten
- Volg standaard ESLint configuraties binnen projecten
- Gebruik betekenisvolle variabele- en functienamen voor educatieve duidelijkheid
- Voeg commentaar toe dat concepten uitlegt voor leerlingen
- Voeg commentaar toe om concepten voor leerlingen uit te leggen
- Format met Prettier waar geconfigureerd
### HTML/CSS
@ -163,9 +163,9 @@ node server.js # Controleer of de server zonder fouten start
### Markdown Documentatie
- Duidelijke kophiërarchie
- Codeblokken met taalspecificatie
- Links naar extra bronnen
- Duidelijke koppenhiërarchie
- Codeblokken met taal specificatie
- Links naar aanvullende bronnen
- Screenshots en afbeeldingen in `images/` mappen
- Alt-tekst voor afbeeldingen voor toegankelijkheid
@ -176,15 +176,15 @@ node server.js # Controleer of de server zonder fouten start
- Afbeeldingen opgeslagen in les-specifieke `images/` mappen
- Vertalingen in `translations/{language-code}/` structuur
## Build en Deployment
## Build en Deploy
### Quiz App Deployment (Azure Static Web Apps)
### Quiz App Deploy (Azure Static Web Apps)
De quiz-app is geconfigureerd voor Azure Static Web Apps deployment:
```bash
cd quiz-app
npm run build # Maakt de map dist/ aan
npm run build # Maakt map dist/ aan
# Zet uit via GitHub Actions workflow bij push naar main
```
@ -203,80 +203,80 @@ npm run convert # Genereer PDF van docs
### Docsify Documentatie
```bash
npm install -g docsify-cli # Installeer Docsify wereldwijd
npm install -g docsify-cli # Installeer Docsify globaal
docsify serve # Serveer op localhost:3000
```
### Project-specifieke Builds
Elke projectmap kan een eigen buildproces hebben:
- Vue projecten: `npm run build` maakt productiebundels
- Statische projecten: Geen buildstap, serveer bestanden direct
- Vue-projecten: `npm run build` maakt productie-bundels
- Statische projecten: Geen build stap, bestanden direct serveren
## Pull Request Richtlijnen
### Titel Formaat
Gebruik duidelijke, beschrijvende titels die het wijzigingsgebied aangeven:
- `[Quiz-app] Nieuwe quiz toevoegen voor les X`
- `[Les-3] Typfout in terrarium project corrigeren`
- `[Vertaling] Spaanse vertaling toevoegen voor les 5`
- `[Docs] Setup instructies bijwerken`
- `[Quiz-app] Voeg nieuwe quiz toe voor les X`
- `[Les-3] Corrigeer typefout in terrarium project`
- `[Vertaling] Voeg Spaanse vertaling toe voor les 5`
- `[Docs] Update setup instructies`
### Vereiste Checks
Voor het indienen van een PR:
1. **Code Kwaliteit**:
- Voer `npm run lint` uit in getroffen projectmappen
- Los alle linting fouten en waarschuwingen op
1. **Codekwaliteit**:
- Run `npm run lint` in getroffen projectmappen
- Los alle lintfouten en waarschuwingen op
2. **Build Verificatie**:
- Voer `npm run build` uit indien toepasbaar
- Zorg voor geen buildfouten
- Run `npm run build` indien van toepassing
- Zorg dat er geen build fouten zijn
3. **Link Validatie**:
- Test alle markdown links
- Controleer of afbeeldingreferenties werken
- Controleer afbeeldingreferenties
4. **Inhoud Review**:
- Proeflees op spelling en grammatica
- Zorg dat codevoorbeelden correct en educatief zijn
- Controleer dat vertalingen originele betekenis behouden
- Verifieer vertalingen behouden originele betekenis
### Bijdrageregels
### Bijdragevereisten
- Ga akkoord met Microsoft CLA (automatische check bij eerste PR)
- Volg de [Microsoft Open Source Gedragscode](https://opensource.microsoft.com/codeofconduct/)
- Instemmen met Microsoft CLA (automatische check bij eerste PR)
- Volg de [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Zie [CONTRIBUTING.md](./CONTRIBUTING.md) voor gedetailleerde richtlijnen
- Verwijs naar issue nummers in PR beschrijving indien relevant
- Verwijs naar issuennummers in PR-beschrijving indien van toepassing
### Review Proces
### Reviewproces
- PR's worden beoordeeld door maintainers en community
- Educatieve duidelijkheid heeft prioriteit
- Educatieve duidelijkheid staat voorop
- Codevoorbeelden moeten huidige best practices volgen
- Vertalingen worden gecontroleerd op nauwkeurigheid en culturele juistheid
- Vertalingen worden gecontroleerd op nauwkeurigheid en culturele passendheid
## Vertalingssysteem
### Geautomatiseerde Vertaling
- Gebruikt GitHub Actions met co-op-translator workflow
- Vertaal naar 50+ talen automatisch
- Bronbestanden in hoofddirectories
- Vertaalde bestanden in `translations/{language-code}/` directories
- Vertaal automatisch naar meer dan 50 talen
- Bronbestanden in hoofdmappen
- Vertaalde bestanden in `translations/{language-code}/` mappen
### Handmatige Vertaalverbeteringen Toevoegen
### Handmatige Vertalingsverbeteringen Toevoegen
1. Zoek bestand in `translations/{language-code}/`
2. Breng verbeteringen aan met behoud van structuur
3. Zorg dat codevoorbeelden functioneel blijven
4. Test eventueel gelokaliseerde quizinhoud
4. Test eventuele gelokaliseerde quizinhoud
### Vertaal Metadata
### Vertalingsmetadata
Vertaalde bestanden bevatten metadata header:
Vertaalde bestanden bevatten metadata-header:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,113 +289,113 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Debuggen en Problemen Oplossen
## Debuggen en Probleemoplossing
### Veelvoorkomende Problemen
**Quiz app start niet**:
**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`, run opnieuw `npm install`
- Controleer op poortconflicten (standaard: Vite gebruikt poort 5173)
**API server start niet**:
- Controleer Node.js versie voldoet aan minimum (node >=10)
**API-server start niet**:
- Verifieer Node.js versie voldoet aan minimum (node >=10)
- Controleer of poort al in gebruik is
- Zorg dat alle dependencies geïnstalleerd zijn met `npm install`
**Browser extensie laadt niet**:
- Controleer of manifest.json correct geformatteerd is
**Browserextensie laadt niet**:
- Controleer of manifest.json correct is geformatteerd
- Bekijk browserconsole op fouten
- Volg browserspecifieke installatie-instructies voor extensies
- Volg browser-specifieke installatie-instructies voor extensies
**Python chat project problemen**:
- Zorg dat OpenAI package geïnstalleerd is: `pip install openai`
- Controleer dat GITHUB_TOKEN omgevingsvariabele is ingesteld
- Zorg dat OpenAI pakket geïnstalleerd is: `pip install openai`
- Verifieer dat GITHUB_TOKEN omgevingsvariabele is ingesteld
- Controleer GitHub Models toegangsrechten
**Docsify serveert geen docs**:
- Installeer docsify-cli globaal: `npm install -g docsify-cli`
- Start in root directory van repository
- Run vanuit root directory van repository
- Controleer dat `docs/_sidebar.md` bestaat
### Ontwikkelomgeving Tips
### Tips voor Ontwikkelomgeving
- Gebruik VS Code met Live Server extensie voor HTML-projecten
- Installeer ESLint en Prettier extensies voor consistente formatting
- Gebruik browser DevTools voor debuggen van JavaScript
- Voor Vue projecten, installeer Vue DevTools browser extensie
- Gebruik browser DevTools voor JavaScript debugging
- Voor Vue projecten, installeer Vue DevTools browserextensie
### Prestatie Overwegingen
### Prestatieoverwegingen
- Groot aantal vertaalde bestanden (50+ talen) maakt volledige klonen groot
- Gebruik shallow clone als je alleen aan inhoud werkt: `git clone --depth 1`
- Sluit vertalingen uit van zoekopdrachten wanneer je aan Engels werkt
- Groot aantal vertaalde bestanden (50+ talen) maakt volledige clones groot
- Gebruik shallow clone als je enkel inhoud bewerkt: `git clone --depth 1`
- Sluit vertalingen uit zoekopdrachten uit bij werken aan Engelse inhoud
- Build processen kunnen traag zijn bij eerste run (npm install, Vite build)
## Beveiligingsoverwegingen
### Omgevingsvariabelen
- API sleutels nooit in repository committen
- API-sleutels mogen nooit in repository worden gecommit
- Gebruik `.env` bestanden (staan al in `.gitignore`)
- Documenteer vereiste omgevingsvariabelen in project READMEs
### Python Projecten
### Python-projecten
- Gebruik virtuele omgevingen: `python -m venv venv`
- Houd dependencies up-to-date
- GitHub tokens moeten minimaal vereiste permissies hebben
- GitHub tokens dienen minimale benodigde rechten te hebben
### GitHub Models Toegang
- Personal Access Tokens (PAT) vereist voor GitHub Models
- Tokens moeten als omgevingsvariabelen opgeslagen worden
- Tokens of credentials nooit committen
- Tokens moeten als omgevingsvariabelen worden opgeslagen
- Tokens of inloggegevens nooit committen
## Aanvullende Notities
### Doelgroep
- Complete beginners in webontwikkeling
- Volledige beginners in webontwikkeling
- Studenten en zelflerenden
- Docenten die het curriculum in klaslokalen gebruiken
- Docenten die curriculum in klaslokalen gebruiken
- Inhoud ontworpen voor toegankelijkheid en geleidelijke vaardigheidsopbouw
### Educatieve Filosofie
- Projectgebaseerde leerbenadering
- Regelmatige kennistests (quizzen)
- Praktische codeeroefeningen
- Praktijkvoorbeelden
- Focus op fundamentals vóór frameworks
- Frequente kennischecks (quizzes)
- Praktische codeer oefeningen
- Voorbeelden van echte toepassingen
- Focus op basisprincipes vóór frameworks
### Repository Onderhoud
- Actieve community van leerlingen en bijdragers
- Actieve gemeenschap van leerlingen en bijdragers
- Regelmatige updates van dependencies en inhoud
- Issues en discussies worden gemonitord door maintainers
- Vertaalupdates geautomatiseerd met GitHub Actions
- Issues en discussies worden bewaakt door maintainers
- Vertalingsupdates geautomatiseerd via GitHub Actions
### Gerelateerde Bronnen
- [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 lerenden
- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) aanbevolen voor leerlingen
- Extra cursussen: Generative AI, Data Science, ML, IoT curricula beschikbaar
### Werken met Specifieke Projecten
Voor gedetailleerde instructies per project, zie de README-bestanden in:
Voor gedetailleerde instructies over individuele projecten, raadpleeg de README-bestanden in:
- `quiz-app/README.md` - Vue 3 quizapplicatie
- `7-bank-project/README.md` - Bankapplicatie met authenticatie
- `7-bank-project/README.md` - Banking applicatie met authenticatie
- `5-browser-extension/README.md` - Browser extensie ontwikkeling
- `6-space-game/README.md` - Canvas-gebaseerd spelontwikkeling
- `9-chat-project/README.md` - AI chat assistant project
- `9-chat-project/README.md` - AI chat assistent project
### Monorepo Structuur
Hoewel geen traditionele monorepo, bevat deze repository meerdere onafhankelijke projecten:
- Elke les is zelfstandig
Hoewel het geen traditionele monorepo is, bevat deze repository meerdere onafhankelijke projecten:
- Elke les is op zichzelf staand
- Projecten delen geen dependencies
- Werk aan individuele projecten zonder anderen te beïnvloeden
- Clone de volledige repo voor de volledige curriculumervaring
@ -403,6 +403,6 @@ Hoewel geen traditionele monorepo, bevat deze repository meerdere onafhankelijke
---
<!-- 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 we streven naar nauwkeurigheid, dient u er rekening mee te houden dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het oorspronkelijke document in de oorspronkelijke taal moet als de gezaghebbende bron 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.
**Disclaimer**:
Dit document is vertaald met behulp van de AI-vertalingsdienst [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u er rekening mee te houden dat automatische vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele 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 misverstanden of onjuiste interpretaties die voortvloeien uit het gebruik van deze vertaling.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-02-06T11:37:20+00:00",
"translation_date": "2026-02-06T13:03:38+00:00",
"source_file": "AGENTS.md",
"language_code": "no"
},

@ -2,36 +2,36 @@
## Prosjektoversikt
Dette er et undervisningspensum-repositorium for å lære webutviklingsgrunnleggende til nybegynnere. 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 utdanningspensum-repositorium for å lære grunnleggende webutvikling til nybegynnere. Pensumet er et omfattende 12-ukers kurs utviklet av Microsoft Cloud Advocates, med 24 praktiske leksjoner som dekker JavaScript, CSS og HTML.
### Nøkkelkomponenter
- **Undervisningsinnhold**: 24 strukturerte leksjoner organisert i prosjektbaserte moduler
- **Praktiske Prosjekter**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor og AI Chat Assistant
- **Interaktive Quizer**: 48 quizer med 3 spørsmål hver (før-/etter-leksjonsvurderinger)
- **Flerspråklig Støtte**: Automatiske oversettelser til 50+ språk via GitHub Actions
- **Utdanningsinnhold**: 24 strukturerte leksjoner organisert i prosjektbaserte moduler
- **Praktiske prosjekter**: Terrarium, Typing Game, Nettleserutvidelse, Space Game, Bankapp, Kodeeditor og AI Chat Assistant
- **Interaktive quizzer**: 48 quizzer 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
- Undervisningsrepo med leksjonsbasert struktur
- Hver leksjonsmappe inneholder README, kodeeksempler og løsninger
- Selvstendige prosjekter i egne kataloger (quiz-app, ulike leksjonsprosjekter)
- Oversettelsessystem ved bruk av GitHub Actions (co-op-translator)
- Utdannings-repositorium med leksebasert struktur
- Hver lekse-mappe inneholder README, kodeeksempler og løsninger
- Frittstående prosjekter i separate kataloger (quiz-app, ulike leksjonsprosjekter)
- Oversettelsessystem som bruker GitHub Actions (co-op-translator)
- Dokumentasjon levert via Docsify og tilgjengelig som PDF
## Oppsettkommandoer
## Oppsettskommandoer
Dette repositoriet er primært for konsumering av undervisningsinnhold. For arbeid med spesifikke prosjekter:
Dette repositoriet er hovedsakelig for konsumering av utdanningsinnhold. For arbeid med spesifikke prosjekter:
### Hovedrepositorioppsett
### Hovedrepositorie-Setup
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Quiz App Oppsett (Vue 3 + Vite)
### Quiz App Setup (Vue 3 + Vite)
```bash
cd quiz-app
@ -41,7 +41,7 @@ npm run build # Bygg for produksjon
npm run lint # Kjør ESLint
```
### Bankprosjekt API (Node.js + Express)
### Bank Prosjekt API (Node.js + Express)
```bash
cd 7-bank-project/api
@ -51,7 +51,7 @@ npm run lint # Kjør ESLint
npm run format # Formater med Prettier
```
### Browser Extension Prosjekter
### Nettleserutvidelsesprosjekter
```bash
cd 5-browser-extension/solution
@ -67,7 +67,7 @@ npm install
# Å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
@ -76,82 +76,82 @@ pip install openai
python api.py
```
## Utviklingsflyt
## Utviklingsarbeidsflyt
### For Innholdsbidragsytere
### For Innholds-bidragsytere
1. **Gaffel repositoriet** til din GitHub-konto
2. **Klon din gaffel** lokalt
3. **Opprett en ny gren** 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
1. **Fork repositoriet** til din GitHub-konto
2. **Klon forken din** lokalt
3. **Lag en ny gren** for endringene dine
4. Gjør endringer i lekseinnhold eller kodeeksempler
5. Test kodeendringer i relevante prosjektmapper
6. Send pull requests i henhold til bidragsretningslinjer
### For Lærende
1. Gaffel eller klon repositoriet
2. Naviger til leksjonskataloger i rekkefølge
3. Les README-filer for hver leksjon
4. Fullfør pre-leksjonquizer på https://ff-quizzes.netlify.app/web/
5. Arbeid gjennom kodeeksempler i leksjonsmapper
1. Fork eller klon repositoriet
2. Naviger sekvensielt gjennom leksemappene
3. Les README-filer for hver lekse
4. Fullfør forhånds-quizzer på https://ff-quizzes.netlify.app/web/
5. Jobb gjennom kodeeksempler i leksesidene
6. Fullfør oppgaver og utfordringer
7. Ta post-leksjonquizer
7. Ta etter-quizzer
### Live Utvikling
- **Dokumentasjon**: Kjør `docsify serve` i rotmappen (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
- **API-prosjekter**: Kjør `npm start` i respektive API-kataloger
## Testinstruksjoner
### Quiz App Testing
### Testing av Quiz App
```bash
cd quiz-app
npm run lint # Sjekk etter problemer med kodeformat
npm run lint # Sjekk for kode stil problemer
npm run build # Verifiser at byggingen lykkes
```
### Bank API Testing
### Testing av Bank API
```bash
cd 7-bank-project/api
npm run lint # Sjekk for problemer med kodesstil
node server.js # Verifiser at serveren starter uten feil
npm run lint # Sjekk for kode stil problemer
node server.js # Bekreft at serveren starter uten feil
```
### Generell Testtilnærming
### Generell testtilnærming
- Dette er et undervisningsrepo uten omfattende automatiserte tester
- Dette er et utdanningsrepo uten omfattende automatiske tester
- Manuell testing fokuserer på:
- Kodeeksempler kjører uten feil
- Lenker i dokumentasjon fungerer korrekt
- Prosjektbuilds fullføres vellykket
- Eksempler følger beste praksis
- At kodeeksempler kjører uten feil
- At lenker i dokumentasjonen fungerer korrekt
- At prosjekter bygges fullstendig uten feil
- At eksempler følger beste praksis
### Sjekkliste før innsending
### Sjekker før innsending
- Kjør `npm run lint` i kataloger med package.json
- Bekreft at markdown-lenker er gyldige
- Verifiser at markdown-lenker er gyldige
- Test kodeeksempler i nettleser eller Node.js
- Sjekk at oversettelser beholder riktig struktur
- Sjekk at oversettelser opprettholder riktig struktur
## Retningslinjer for Kodestil
## Retningslinjer for kodestil
### JavaScript
- Bruk moderne ES6+ syntaks
- Følg standard ESLint-konfigurasjoner gitt i prosjektene
- Bruk meningsfulle variabel- og funksjonsnavn for undervisningsklarhet
- Legg til kommentarer som forklarer konsepter for lærende
- Bruk meningsfulle variabel- og funksjonsnavn for pedagogisk klarhet
- Legg til kommentarer som forklarer konsepter for elever
- Formater med Prettier der det er konfigurert
### HTML/CSS
- Semantiske HTML5-elementer
- Responsivt design-prinsipper
- Responsivt design
- Klare navnekonvensjoner for klasser
- Kommentarer som forklarer CSS-teknikker for lærende
@ -159,122 +159,122 @@ node server.js # Verifiser at serveren starter uten feil
- PEP 8 stilretningslinjer
- Klare, pedagogiske kodeeksempler
- Typehint der det er nyttig for læring
- Typehinting hvor det er nyttig for læring
### Markdown Dokumentasjon
### Markdown-dokumentasjon
- Klar overskriftsstruktur
- Kodeblokker med språkspecificering
- Lenker til tilleggsmateriale
- Klar overskriftshierarki
- Kodeblokker med språkspesifikasjon
- Lenker til tilleggsressurser
- Skjermbilder og bilder i `images/`-mapper
- Alternativ tekst for bilder for tilgjengelighet
- 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
- Hvert prosjekt har `solution/` og ofte `start/` eller `your-work/` mapper
- Bilder lagret i leksjonssp spesifikke `images/`-mapper
- Oversettelser i `translations/{language-code}/` struktur
## Bygg og Distribusjon
## Building og distribusjon
### Quiz App Distribusjon (Azure Static Web Apps)
### Quiz App-distribusjon (Azure Static Web Apps)
Quiz-appen er konfigurert for Azure Static Web Apps distribusjon:
quiz-app er konfigurert for distribusjon på Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Oppretter dist/-mappe
npm run build # Oppretter dist/ mappe
# Distribuerer via GitHub Actions arbeidsflyt ved push til main
```
Azure Static Web Apps konfigurasjon:
Azure Static Web Apps-konfigurasjon:
- **App-lokasjon**: `/quiz-app`
- **Output-lokasjon**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Dokumentasjons-PDF Generering
### PDF-generering av dokumentasjon
```bash
npm install # Installer docsify-to-pdf
npm run convert # Generer PDF fra docs
```
### Docsify Dokumentasjon
### Docsify-dokumentasjon
```bash
npm install -g docsify-cli # Installer Docsify globalt
docsify serve # Server på localhost:3000
```
### Prosjektspesifikke Builds
### Prosjektspesifikke byggetrinn
Hver prosjektmappe kan ha sin egen byggeprosess:
Hver prosjektmappe kan ha egen byggeprosess:
- Vue-prosjekter: `npm run build` lager produksjonspakker
- Statisk prosjekter: Ingen bygge-steg, filene serveres direkte
- Statisk prosjekter: Ingen byggeprosess, server filer direkte
## Retningslinjer for Pull Requests
## Retningslinjer for pull requests
### Tittelformat
### Tittel Format
Bruk klare, beskrivende titler som indikerer endringsområdet:
Bruk klare, beskrivende titler som angir endringsområdet:
- `[Quiz-app] Legg til ny quiz for leksjon X`
- `[Lesson-3] Rett skrivefeil i terrarium-prosjektet`
- `[Lesson-3] Rett skrivefeil i terrarium-prosjekt`
- `[Translation] Legg til spansk oversettelse for leksjon 5`
- `[Docs] Oppdater oppsettinstruksjoner`
- `[Docs] Oppdater oppsettsinstruksjoner`
### Obligatoriske Sjekker
### Påkrevde sjekker
Før innsending av PR:
1. **Kodekvalitet**:
- Kjør `npm run lint` i berørte prosjektkataloger
- Rett opp alle linting-feil og advarsler
- Kjør `npm run lint` i berørte prosjektmapper
- Rett alle lint-feil og advarsler
2. **Byggeverifisering**:
2. **Build-verifisering**:
- Kjør `npm run build` om relevant
- Sørg for ingen byggefeil
3. **Lenkevalidering**:
- Test alle markdown-lenker
- Sjekk at bildehenvisninger fungerer
- Sjekk at bildereferanser fungerer
4. **Innholdsgjennomgang**:
4. **Innholdsrevisjon**:
- Korrekturles for stave- og grammatikkfeil
- Bekreft at kodeeksempler er korrekte og pedagogiske
- Verifiser at oversettelser bevarer original betydning
- Sørg for at kodeeksempler er korrekte og pedagogiske
- Verifiser at oversettelser bevarer opprinnelig betydning
### Bidragskrav
- Aksepter Microsoft CLA (automatisk sjekk ved første PR)
- Følg [Microsofts Offentlige Kodeks for Oppførsel](https://opensource.microsoft.com/codeofconduct/)
- 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 issues i PR-beskrivelse om relevant
- Referer til sakernummer i PR-beskrivelse om relevant
### Gjennomgangsprosess
- PRer gjennomgås av vedlikeholdere og community
- PRer vurderes av vedlikeholdere og fellesskapet
- Pedagogisk klarhet prioriteres
- Kodeeksempler bør følge gjeldende beste praksis
- Oversettelser gjennomgås for nøyaktighet og kulturell hensiktsmessighet
- Kodeeksempler skal følge gjeldende beste praksis
- Oversettelser vurderes for nøyaktighet og kulturell tilpasning
## Oversettelsessystem
### Automatisk Oversettelse
### Automatisert oversettelse
- Bruker GitHub Actions med co-op-translator workflow
- Oversetter til 50+ språk automatisk
- Oversetter automatisk til 50+ språk
- Kildefiler i hovedkataloger
- Oversatte filer i `translations/{language-code}/` kataloger
### Legge til Manuelle Oversettelsesforbedringer
### Legge til manuelle forbedringer
1. Finn fil i `translations/{language-code}/`
2. Gjør forbedringer mens strukturen beholdes
2. Gjør forbedringer mens du bevarer struktur
3. Sørg for at kodeeksempler fortsatt fungerer
4. Test eventuelt lokaliserte quiz-innhold
4. Test lokaliserte quiz-innhold
### Oversettelsesmetadata
### Oversettelsesmetainformasjon
Oversatte filer inkluderer metadata-header:
```markdown
@ -289,120 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Feilsøking og Problemløsning
## Feilsøking og problemløsning
### Vanlige Problemer
### Vanlige problemer
**Quiz-appen starter ikke**:
- Sjekk Node.js versjon (v14+ anbefalt)
- 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)
**API-server starter ikke**:
- Verifiser at Node.js-versjonen er tilstrekkelig (node >=10)
- Bekreft at Node.js-versjon er minimum (node >=10)
- Sjekk om port allerede er i bruk
- Sørg for at alle avhengigheter er installert med `npm install`
**Browser extension lastes ikke**:
- Sjekk at manifest.json er riktig formatert
- Se etter feil i nettleserens konsoll
- Følg nettleserspesifikke instruksjoner for installasjon av utvidelsen
**Nettleserutvidelse lastes ikke**:
- Bekreft at manifest.json er korrekt formatert
- Sjekk nettleserkonsollen for feil
- Følg nettleserspesifikke installasjonsinstruksjoner
**Problemer med Python chat-prosjektet**:
**Problemer med Python chat-prosjekt**:
- Sørg for at OpenAI-pakken er installert: `pip install openai`
- Verifiser at GITHUB_TOKEN miljøvariabel er satt
- Bekreft at GITHUB_TOKEN miljøvariabel er satt
- Sjekk GitHub Models tilgangstillatelser
**Docsify server ikke dokumentasjonen**:
**Docsify serverer ikke dokumentasjon**:
- Installer docsify-cli globalt: `npm install -g docsify-cli`
- Kjør fra repoets rotkatalog
- Sjekk at `docs/_sidebar.md` finnes
- Kjør fra rotmappen til repositoriet
- Sjekk at `docs/_sidebar.md` eksisterer
### Utviklingsmiljøtips
### Tips for utviklingsmiljø
- Bruk VS Code med Live Server-utvidelsen for HTML-prosjekter
- Bruk VS Code med Live Server-utvidelse for HTML-prosjekter
- Installer ESLint og Prettier-utvidelser for konsistent formatering
- Bruk nettleserens DevTools for JavaScript-feilsøking
- For Vue-prosjekter, installer Vue DevTools nettleserutvidelse
### Ytelseshensyn
### Ytelsesbetraktninger
- Mange oversatte filer (50+ språk) gjør fullstendige kloner store
- Bruk shallow clone hvis du bare jobber med innhold: `git clone --depth 1`
- Ekskluder oversettelser fra søk når du jobber med engelsk innhold
- Byggeprosesser kan være langsomme første gang (npm install, Vite build)
- Stort antall oversatte filer (50+ språk) gjør fullstendige kloner store
- Bruk shallow clone om du kun jobber med innhold: `git clone --depth 1`
- Ekskluder oversettelser fra søk ved arbeid på engelsk innhold
- Byggeprosesser kan være treg ved første kjøring (npm install, Vite build)
## Sikkerhetshensyn
## Sikkerhetsbetraktninger
### Miljøvariabler
- API-nøkler skal aldri legges i repositoriet
- Bruk `.env`-filer (allerede i `.gitignore`)
- Dokumenter nødvendige miljøvariabler i prosjektets README
- API-nøkler bør aldri legges i repositoriet
- Bruk `.env` filer (allerede i `.gitignore`)
- Dokumenter nødvendige miljøvariabler i prosjekt-READMEer
### Python Prosjekter
- Bruk virtuelle miljøer: `python -m venv venv`
- Hold avhengigheter oppdatert
- GitHub-tokens bør ha minimale nødvendige tillatelser
- GitHub-tokener bør ha minimale nødvendige tillatelser
### GitHub Models Tilgang
### GitHub Models tilgang
- Personlige tilgangstokener (PAT) kreves for GitHub Models
- Tokens bør lagres som miljøvariabler
- Aldri legg inn tokens eller påloggingsinformasjon i repoet
- Personal Access Tokens (PAT) kreves for GitHub Models
- Tokens skal lagres som miljøvariabler
- Aldri commit tokens eller påloggingsinformasjon
## Tilleggsnotater
## Ytterligere merknader
### Målgruppe
- Komplett nybegynnere innen webutvikling
- Fullstendige nybegynnere i webutvikling
- Studenter og selvstudenter
- Lærere som bruker pensum i klasserommet
- Innholdet er designet for tilgjengelighet og gradvis ferdighetsbygging
- Lærere som bruker pensum i klasserom
- Innholdet er designet for tilgjengelighet og gradvis ferdighetsoppbygging
### Pedagogisk Filosofi
### Pedagogisk filosofi
- Prosjektbasert læringstilnærming
- Hyppige kunnskapssjekker (quizer)
- Praktiske kodingøvelser
- Hyppige kunnskapssjekker (quizzer)
- Praktisk koding
- Virkelige eksempler på anvendelse
- Fokus på grunnleggende før rammeverk
### Vedlikehold av Repositoriet
### Vedlikehold av repositoriet
- Aktivt samfunn av lærende og bidragsytere
- Aktivt fellesskap av lærende og bidragsytere
- Regelmessige oppdateringer av avhengigheter og innhold
- Issues og diskusjoner overvåkes av vedlikeholdere
- Saker og diskusjoner overvåkes av vedlikeholdere
- Oversettelsesoppdateringer automatisert via GitHub Actions
### Relaterte Ressurser
### Relaterte ressurser
- [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) anbefalt for lærende
- Ytterligere kurs: Generative AI, Data Science, ML, IoT pensum tilgjengelig
- Ytterligere kurs: Generativ AI, Data Science, ML, IoT pensum tilgjengelig
### Arbeide 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 chat-assistentprosjekt
- `9-chat-project/README.md` - AI chat-assistent prosjekt
### Monorepo Struktur
### Monorepo-struktur
Selv om dette ikke er et tradisjonelt monorepo, inneholder dette repositoriet flere uavhengige prosjekter:
- Hver leksjon er selvstendig
Selv om det ikke er et tradisjonelt monorepo, inneholder dette repositoriet flere uavhengige prosjekter:
- Hver lekse er selvstendig
- Prosjektene deler ikke avhengigheter
- Arbeid med individuelle prosjekter uten å påvirke andre
- Arbeid individuelle prosjekter uten å påvirke andre
- Klon hele repoet for full pensumopplevelse
---
<!-- 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å morsmålet skal anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger 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, vennligst vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på dets opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Loading…
Cancel
Save