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

pull/1756/head
localizeflow[bot] 6 months ago
parent fa714421a9
commit 73c8257c3e

@ -1,7 +1,7 @@
{ {
"1-getting-started-lessons/1-intro-to-programming-languages/README.md": { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": {
"original_hash": "d45ddcc54eb9232a76d08328b09d792e", "original_hash": "bec5e35642176d9e483552bfc82996d8",
"translation_date": "2026-01-07T00:03:59+00:00", "translation_date": "2026-03-06T18:16:38+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "da" "language_code": "da"
}, },
@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-02-06T17:25:00+00:00", "translation_date": "2026-03-06T18:29:53+00:00",
"source_file": "AGENTS.md", "source_file": "AGENTS.md",
"language_code": "da" "language_code": "da"
}, },
@ -516,8 +516,8 @@
"language_code": "da" "language_code": "da"
}, },
"README.md": { "README.md": {
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", "original_hash": "a2c9eed480687319517c08a6319e5536",
"translation_date": "2026-02-06T17:20:19+00:00", "translation_date": "2026-03-06T18:12:27+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "da" "language_code": "da"
}, },

@ -2,36 +2,36 @@
## Projektoversigt ## Projektoversigt
Dette er et uddannelseslæremiddelforestilling til undervisning i grundlæggende webudvikling for begyndere. Læremidlet er et omfattende 12-ugers kursus udviklet af Microsoft Cloud Advocates, med 24 praktiske lektioner, der dækker JavaScript, CSS og HTML. Dette er et uddannelsesforløb-lager til undervisning i webudviklingsgrundlag for begyndere. Forløbet er et omfattende 12-ugers kursus udviklet af Microsoft Cloud Advocates, med 24 praktiske lektioner, der dækker JavaScript, CSS og HTML.
### Nøglekomponenter ### Hovedkomponenter
- **Uddannelsesindhold**: 24 strukturerede lektioner organiseret i projektbaserede moduler - **Uddannelsesindhold**: 24 strukturerede lektioner organiseret i projektbaserede moduler
- **Praktiske projekter**: Terrarium, Typingspil, Browserudvidelse, Rumspil, Bankapp, Kodeeditor og AI Chat-assistent - **Praktiske Projekter**: Terrarium, Typing Game, Browserudvidelse, Space Game, Banking App, Code Editor, og AI Chat Assistant
- **Interaktive quizzer**: 48 quizzer med 3 spørgsmål hver (før/efter lektion vurderinger) - **Interaktive Quizzer**: 48 quizzer med 3 spørgsmål hver (før/efter-lesson vurderinger)
- **Flersproget support**: Automatiserede oversættelser til 50+ sprog via GitHub Actions - **Flersprogssupport**: Automatiske oversættelser til 50+ sprog via GitHub Actions
- **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (til AI-projekter) - **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (til AI-projekter)
### Arkitektur ### Arkitektur
- Uddannelsesrepository med lektionbaseret struktur - Uddannelseslager med lektion-baseret struktur
- Hver lektionsmappe indeholder README, kodeeksempler og løsninger - Hver lektionsmappe indeholder README, kodeeksempler og løsninger
- Selvstændige projekter i separate mapper (quiz-app, diverse lektionsprojekter) - Selvstændige projekter i separate mapper (quiz-app, forskellige lektionsprojekter)
- Oversættelsessystem ved brug af GitHub Actions (co-op-translator) - Oversættelsessystem ved brug af GitHub Actions (co-op-translator)
- Dokumentation serveres via Docsify og findes som PDF - Dokumentation serveret via Docsify og tilgængelig som PDF
## Opsætningskommandoer ## Opsætningskommandoer
Dette repository er primært til konsumering af uddannelsesindhold. For arbejde med specifikke projekter: Dette lager er primært til forbrug af uddannelsesindhold. For arbejde med specifikke projekter:
### Hovedrepository opsætning ### Hovedlageropsætning
```bash ```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners cd Web-Dev-For-Beginners
``` ```
### Quiz App opsætning (Vue 3 + Vite) ### Quiz App Opsætning (Vue 3 + Vite)
```bash ```bash
cd quiz-app cd quiz-app
@ -40,7 +40,7 @@ npm run dev # Start udviklingsserver
npm run build # Byg til produktion npm run build # Byg til produktion
npm run lint # Kør ESLint npm run lint # Kør ESLint
``` ```
### Bankprojekt API (Node.js + Express) ### Bankprojekt API (Node.js + Express)
```bash ```bash
@ -50,7 +50,7 @@ npm start # Start API-server
npm run lint # Kør ESLint npm run lint # Kør ESLint
npm run format # Formater med Prettier npm run format # Formater med Prettier
``` ```
### Browserudvidelsesprojekter ### Browserudvidelsesprojekter
```bash ```bash
@ -58,16 +58,16 @@ cd 5-browser-extension/solution
npm install npm install
# Følg browser-specifikke instruktioner til indlæsning af udvidelser # Følg browser-specifikke instruktioner til indlæsning af udvidelser
``` ```
### Rumspilsprojekter ### Space Game Projekter
```bash ```bash
cd 6-space-game/solution cd 6-space-game/solution
npm install npm install
# Åbn index.html i browseren eller brug Live Server # Åbn index.html i browseren eller brug Live Server
``` ```
### Chatprojekt (Python Backend) ### Chat Projekt (Python Backend)
```bash ```bash
cd 9-chat-project/solution/backend/python cd 9-chat-project/solution/backend/python
@ -75,208 +75,208 @@ pip install openai
# Indstil miljøvariablen GITHUB_TOKEN # Indstil miljøvariablen GITHUB_TOKEN
python api.py python api.py
``` ```
## Udviklingsworkflow
### For indholdsleverandører ## Udviklingsarbejdsgang
### For Indholdsbidragydere
1. **Fork repository** til din GitHub-konto 1. **Fork lageret** til din GitHub-konto
2. **Clone din fork** lokalt 2. **Klon din fork** lokalt
3. **Opret en ny branch** til dine ændringer 3. **Opret en ny gren** til dine ændringer
4. Foretag ændringer til lektionsindhold eller kodeeksempler 4. Foretag ændringer til lektionsindhold eller kodeeksempler
5. Test eventuelle kodeændringer i relevante projektmapper 5. Test eventuelle kodeændringer i relevante projektmapper
6. Indsend pull requests i henhold til bidragsretningslinjer 6. Indsend pull requests i henhold til bidragsretningslinjerne
### For lærende ### For Lærende
1. Fork eller klon repository 1. Fork eller klon lageret
2. Naviger sekventielt i lektionsmapper 2. Naviger til lektionsmapper i rækkefølge
3. Læs README-filer for hver lektion 3. Læs README-filer for hver lektion
4. Tag pre-lesson quizzer på https://ff-quizzes.netlify.app/web/ 4. Gennemfør før-lektion quizzer på https://ff-quizzes.netlify.app/web/
5. Arbejd gennem kodeeksempler i lektionsmapper 5. Arbejd med kodeeksempler i lektionsmapper
6. Fuldfør opgaver og udfordringer 6. Fuldfør opgaver og udfordringer
7. Tag post-lesson quizzer 7. Tag efter-lektion quizzer
### Liveudvikling ### Live Udvikling
- **Dokumentation**: Kør `docsify serve` i rodmappen (port 3000) - **Dokumentation**: Kør `docsify serve` i rodmappen (port 3000)
- **Quiz App**: Kør `npm run dev` i quiz-app mappen - **Quiz App**: Kør `npm run dev` i quiz-app mappen
- **Projekter**: Brug VS Code Live Server extension til HTML-projekter - **Projekter**: Brug VS Code Live Server-udvidelsen til HTML-projekter
- **API-projekter**: Kør `npm start` i respektive API-mapper - **API Projekter**: Kør `npm start` i respektive API-mapper
## Testinstruktioner ## Testinstruktioner
### Quiz App test ### Quiz App Test
```bash ```bash
cd quiz-app cd quiz-app
npm run lint # Tjek for problemer med kodestil npm run lint # Tjek for kode stil problemer
npm run build # Bekræft at build lykkes npm run build # Bekræft at build lykkes
``` ```
### Bank API test ### Bank API Test
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm run lint # Tjek for kode stil problemer npm run lint # Tjek for kode stil problemer
node server.js # Bekræft at serveren starter uden fejl node server.js # Bekræft, at serveren starter uden fejl
``` ```
### Generel testtilgang
- Dette er et uddannelsesrepository uden omfattende automatiserede tests ### Generel Testtilgang
- Manuel test fokuserer på:
- Kodeeksempler kører fejlfrit - Dette er et uddannelseslager uden omfattende automatiserede tests
- Links i dokumentation fungerer korrekt - Manuel test fokuserer på:
- Projektbygninger gennemføres succesfuldt - Kodeeksempler kører uden fejl
- Eksempler følger bedste praksis - Links i dokumentationen fungerer korrekt
- Projekt builds gennemføres succesfuldt
- Eksempler følger bedste praksis
### Pre-indsendelsescheck ### Tjek Før Indsendelse
- Kør `npm run lint` i mapper med package.json - Kør `npm run lint` i mapper med package.json
- Bekræft at markdown-links er gyldige - Bekræft at markdown-links er valide
- Test kodeeksempler i browser eller Node.js - Test kodeeksempler i browser eller Node.js
- Tjek at oversættelser bevarer korrekt struktur - Kontrollér at oversættelser bevarer korrekt struktur
## Kode-stil retningslinjer ## Kodeformateringsretningslinjer
### JavaScript ### JavaScript
- Brug moderne ES6+ syntaks - Brug moderne ES6+ syntaks
- Følg standard ESLint konfigurationer leveret i projekterne - Følg standard ESLint konfigurationer i projekterne
- Brug meningsfulde variabel- og funktionsnavne for uddannelsesmæssig klarhed - Brug meningsfulde variabel- og funktionsnavne for pædagogisk klarhed
- Tilføj kommentarer der forklarer koncepter for lærende - Tilføj kommentarer der forklarer koncepter for lærende
- Formater med Prettier hvor konfigureret - Formater med Prettier hvor konfigureret
### HTML/CSS ### HTML/CSS
- Semantiske HTML5 elementer - Semantiske HTML5-elementer
- Responsive designprincipper - Responsive designprincipper
- Klare klasse-navnekonventioner - Klare klassenavnekonventioner
- Kommentarer der forklarer CSS-teknikker for lærende - Kommentarer der forklarer CSS-teknikker for lærende
### Python ### Python
- PEP 8 stil retningslinjer - PEP 8 stilretningslinjer
- Klare, uddannelsesmæssige kodeeksempler - Tydelige, pædagogiske kodeeksempler
- Type hints hvor hjælpsomt for læring - Type hints hvor hjælpsomt for læring
### Markdown dokumentation ### Markdown Dokumentation
- Klar overskriftshierarki - Klar overskriftshierarki
- Kodeblokke med sprogspecifikation - Kodeblokke med sprogspecifikation
- Links til yderligere ressourcer - Links til yderligere ressourcer
- Skærmbilleder og billeder i `images/` mapper - Skærmbilleder og billeder i `images/` mapper
- Alt-tekst for billeder for tilgængelighed - Alt-tekst for billeder for tilgængelighed
### Filorganisation ### Filorganisation
- Lektioner nummereret sekventielt (1-getting-started-lessons, 2-js-basics, osv.) - Lektioner nummeret sekventielt (1-getting-started-lessons, 2-js-basics, osv.)
- Hvert projekt har `solution/` og ofte `start/` eller `your-work/` mapper - Hvert projekt har `solution/` og ofte `start/` eller `your-work/` mapper
- Billeder opbevaret i lektionsspecifikke `images/` mapper - Billeder gemt i lektion-specifikke `images/` mapper
- Oversættelser i `translations/{language-code}/` struktur - Oversættelser i `translations/{language-code}/` struktur
## Build og udrulning ## Byg og Udrul
### Quiz App udrulning (Azure Static Web Apps) ### Quiz App Udrulning (Azure Static Web Apps)
quiz-app er konfigureret til Azure Static Web Apps udrulning: Quiz-app'en er konfigureret til Azure Static Web Apps udrulning:
```bash ```bash
cd quiz-app cd quiz-app
npm run build # Opretter dist/-mappe npm run build # Opretter dist/-mappe
# Udruller via GitHub Actions-arbejdsgang ved push til main # Udruller via GitHub Actions workflow ved push til main
``` ```
Azure Static Web Apps konfiguration:
- **App placering**: `/quiz-app`
- **Output placering**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Dokumentations PDF generering Azure Static Web Apps konfiguration:
- **App placering**: `/quiz-app`
- **Output placering**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Dokumentations PDF Generering
```bash ```bash
npm install # Installer docsify-to-pdf npm install # Installer docsify-to-pdf
npm run convert # Generer PDF fra docs npm run convert # Generer PDF fra docs
``` ```
### Docsify dokumentation ### Docsify Dokumentation
```bash ```bash
npm install -g docsify-cli # Installer Docsify globalt npm install -g docsify-cli # Installer Docsify globalt
docsify serve # Server på localhost:3000 docsify serve # Server på localhost:3000
``` ```
### Projekt-specifikke builds
Hver projektmappe kan have sin egen build-proces: ### Projekt-specifikke Builds
- Vue projekter: `npm run build` skaber produktionspakker
- Statisk projekter: Ingen build-step, filer serveres direkte Hver projektmappe kan have sin egen byggeproces:
- Vue-projekter: `npm run build` skaber produktionspakker
- Statiske projekter: Ingen build-step, server filer direkte
## Pull Request retningslinjer ## Pull Request Retningslinjer
### Titelformat ### Titel Format
Brug klare, beskrivende titler der angiver ændringsområdet: Brug klare, beskrivende titler der angiver ændringsområdet:
- `[Quiz-app] Tilføj ny quiz til lektion X` - `[Quiz-app] Tilføj ny quiz til lektion X`
- `[Lesson-3] Ret stavefejl i terrarium projekt` - `[Lesson-3] Ret stavefejl i terrarium projekt`
- `[Translation] Tilføj spansk oversættelse til lektion 5` - `[Translation] Tilføj spansk oversættelse til lektion 5`
- `[Docs] Opdater opsætningsinstruktioner` - `[Docs] Opdater opsætningsinstruktioner`
### Nødvendige checks ### Krævede Tjek
Før indsendelse af PR: Før indsendelse af PR:
1. **Kodekvalitet**: 1. **Kodekvalitet**:
- Kør `npm run lint` i berørte projektmapper - Kør `npm run lint` i berørte projektmapper
- Ret alle lintfejl og advarsler - Ret alle linting fejl og advarsler
2. **Build verifikation**: 2. **Build Verifikation**:
- Kør `npm run build` hvis relevant - Kør `npm run build` hvis relevant
- Sikr at der ikke er build-fejl - Sikr at der ikke er build-fejl
3. **Linkvalidering**: 3. **Link Validering**:
- Test alle markdown links - Test alle markdown links
- Bekræft at billedreferencer virker - Bekræft billedreferencer fungerer
4. **Indholdsrevision**: 4. **Indholdsgennemgang**:
- Korrekturlæs stavning og grammatik - Korrekturlæs for stave- og grammatikfejl
- Sikr at kodeeksempler er korrekte og uddannelsesmæssige - Sikr at kodeeksempler er korrekte og pædagogiske
- Bekræft at oversættelser bevarer oprindelig betydning - Bekræft at oversættelser bevarer original betydning
### Bidragskrav ### Bidragskrav
- Accepter Microsoft CLA (automatisk check ved første PR) - Accepter Microsoft CLA (automatisk check ved første PR)
- Følg [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) - Følg [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Se [CONTRIBUTING.md](./CONTRIBUTING.md) for detaljerede retningslinjer - Se [CONTRIBUTING.md](./CONTRIBUTING.md) for detaljerede retningslinjer
- Referer issues i PR-beskrivelse hvis relevant - Referer til issue-numre i PR-beskrivelse hvis relevant
### Review proces ### Gennemgangsproces
- PRs gennemgås af vedligeholdere og community - PRer gennemgås af vedligeholdere og community
- Uddannelsesklarhed prioriteres - Pædagogisk klarhed prioriteres
- Kodeeksempler skal følge gældende bedste praksis - Kodeeksempler skal følge aktuelle bedste praksisser
- Oversættelser gennemgås for nøjagtighed og kulturel egnethed - Oversættelser vurderes for nøjagtighed og kulturel tilpasning
## Oversættelsessystem ## Oversættelsessystem
### Automatisk oversættelse ### Automatisk Oversættelse
- Bruger GitHub Actions med co-op-translator workflow - Bruger GitHub Actions med co-op-translator workflow
- Oversætter automatisk til 50+ sprog - Oversætter til 50+ sprog automatisk
- Kildefiler i hovedmapper - Kildefiler i hovedmapper
- Oversatte filer i `translations/{language-code}/` mapper - Oversatte filer i `translations/{language-code}/` mapper
### Tilføjelse af manuelle oversættelsesforbedringer ### Tilføjelse af Manuelle Oversættelsesforbedringer
1. Find fil i `translations/{language-code}/` 1. Find fil i `translations/{language-code}/`
2. Foretag forbedringer samtidig med at struktur bevares 2. Foretag forbedringer med bevaret struktur
3. Sørg for at kodeeksempler forbliver funktionelle 3. Sikr at kodeeksempler forbliver funktionelle
4. Test evt. lokaliseret quizindhold 4. Test eventuelt lokaliseret quiz-indhold
### Oversættelses metadata ### Oversættelses Metadata
Oversatte filer inkluderer metadata header: Oversatte filer indeholder metadata header:
```markdown ```markdown
<!-- <!--
CO_OP_TRANSLATOR_METADATA: CO_OP_TRANSLATOR_METADATA:
@ -288,121 +288,121 @@ CO_OP_TRANSLATOR_METADATA:
} }
--> -->
``` ```
## Fejlfinding og problemløsning
### Almindelige problemer ## Fejlfinding og Problemløsning
### Almindelige Problemer
**Quiz app starter ikke**: **Quiz app starter ikke**:
- Tjek Node.js version (v14+ anbefales) - Tjek Node.js version (v14+ anbefalet)
- Slet `node_modules` og `package-lock.json`, kør `npm install` igen - Slet `node_modules` og `package-lock.json`, kør `npm install` igen
- Tjek for portkonflikter (standard: Vite bruger port 5173) - Tjek for portkonflikter (standard: Vite bruger port 5173)
**API serveren starter ikke**: **API server starter ikke**:
- Bekræft at Node.js version opfylder minimum (node >=10) - Bekræft Node.js version minimum (node >=10)
- Tjek om port allerede er i brug - Tjek om port allerede er i brug
- Sørg for alle afhængigheder er installeret med `npm install` - Sikr at alle afhængigheder er installeret med `npm install`
**Browserudvidelse indlæses ikke**: **Browserudvidelse loader ikke**:
- Bekræft at manifest.json er korrekt formateret - Bekræft at manifest.json er korrekt formateret
- Tjek browserens konsol for fejl - Tjek browserkonsol for fejl
- Følg browser-specifikke installationsinstruktioner for udvidelser - Følg browser-specifikke installationsinstruktioner til udvidelser
**Python chat projekt problemer**: **Python chat projekt problemer**:
- Sørg for OpenAI pakken er installeret: `pip install openai` - Sikr at OpenAI-pakken er installeret: `pip install openai`
- Bekræft at GITHUB_TOKEN miljøvariablen er sat - Bekræft at miljøvariablen GITHUB_TOKEN er sat
- Check GitHub Models adgangstilladelser - Tjek GitHub Models adgangstilladelser
**Docsify serverer ikke dokumenter**: **Docsify serverer ikke docs**:
- Installer docsify-cli globalt: `npm install -g docsify-cli` - Installer docsify-cli globalt: `npm install -g docsify-cli`
- Kør fra repository rodmappe - Kør fra lagerets rodmappe
- Tjek at `docs/_sidebar.md` eksisterer - Tjek at `docs/_sidebar.md` findes
### Udviklingsmiljøtips ### Udviklingsmiljø Tips
- Brug VS Code med Live Server extension til HTML projekter - Brug VS Code med Live Server-udvidelsen til HTML-projekter
- Installer ESLint og Prettier extensions for konsistent formattering - Installer ESLint og Prettier-udvidelser for ensartet formatering
- Brug browserens DevTools til debugging af JavaScript - Brug browser DevTools til fejlfinding af JavaScript
- Til Vue projekter, installer Vue DevTools browser extension - For Vue projekter, installer Vue DevTools browserudvidelsen
### Ydeevne overvejelser ### Ydelsesbetragtninger
- Stort antal oversatte filer (50+ sprog) betyder at fulde clones er store - Stort antal oversatte filer (50+ sprog) betyder at komplette kloner er store
- Brug shallow clone hvis kun indhold arbejdes på: `git clone --depth 1` - Brug shallow clone hvis du kun arbejder med indhold: `git clone --depth 1`
- Ekskluder oversættelser fra søgninger når der arbejdes på engelsk indhold - Udeluk oversættelser fra søgninger ved arbejde med engelsk indhold
- Buildprocesser kan være langsomme ved første kørsel (npm install, Vite build) - Byggeprocesser kan være langsomme ved første kørsel (npm install, Vite build)
## Sikkerhedsovervejelser ## Sikkerhedsbetragtninger
### Miljøvariabler ### Miljøvariable
- API nøgler må aldrig committes til repository - API nøgler må aldrig committes til lager
- Brug `.env` filer (allerede i `.gitignore`) - Brug `.env` filer (allerede i `.gitignore`)
- Dokumenter nødvendige miljøvariabler i projektets README - Dokumenter nødvendige miljøvariable i projekt-READMEs
### Python projekter ### Python Projekter
- Brug virtuelle miljøer: `python -m venv venv` - Brug virtuelle miljøer: `python -m venv venv`
- Hold afhængigheder opdaterede - Hold afhængigheder opdaterede
- GitHub tokens skal have minimal nødvendige tilladelser - GitHub tokens skal have minimale nødvendige rettigheder
### GitHub Models adgang ### GitHub Models Adgang
- Personlige Access Tokens (PAT) kræves for GitHub Models - Personlige adgangstokens (PAT) kræves til GitHub Models
- Tokens skal gemmes som miljøvariabler - Tokens skal gemmes som miljøvariable
- Commit aldrig tokens eller credentials - Committ aldrig tokens eller login-oplysninger
## Yderligere noter ## Yderligere Bemærkninger
### Målgruppe ### Målgruppe
- Fuldstændige begyndere til webudvikling - Fulde begyndere til webudvikling
- Studerende og selvstuderende - Studerende og selv-studerende
- Lærere der bruger curriculum i klasseværelser - Lærere der bruger forløbet i klasseværelser
- Indhold designet for tilgængelighed og gradvis færdighedsopbygning - Indhold designet til tilgængelighed og gradvis færdighedsopbygning
### Uddannelsesfilosofi ### Uddannelsesfilosofi
- Projektbaseret læringstilgang - Projektbaseret læringstilgang
- Hyppige videnschecks (quizzer) - Hyppige videnschecks (quizzer)
- Praktiske kodningsøvelser - Praktiske kodningsøvelser
- Eksempler på virkelige anvendelser - Eksempler på virkelige anvendelser
- Fokus på grundlæggende før frameworks - Fokus på grundlæggende før frameworks
### Repository vedligeholdelse ### Lager Vedligeholdelse
- Aktivt community af lærende og bidragydere - Aktivt community af lærende og bidragydere
- Regelmæssige opdateringer af afhængigheder og indhold - Regelmæssige opdateringer til afhængigheder og indhold
- Issues og diskussioner overvåges af vedligeholdere - Issues og diskussioner overvåget af vedligeholdere
- Oversættelsesopdateringer automatiseret via GitHub Actions - Oversættelsesopdateringer automatiseret via GitHub Actions
### Relaterede ressourcer ### Relaterede Ressourcer
- [Microsoft Learn moduler](https://docs.microsoft.com/learn/) - [Microsoft Learn moduler](https://docs.microsoft.com/learn/)
- [Student Hub ressourcer](https://docs.microsoft.com/learn/student-hub/) - [Student Hub ressourcer](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) anbefales til lærende - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) anbefalet til lærende
- Yderligere kurser: Generativ AI, Data Science, ML, IoT curriculum tilgængelige - Yderligere kurser: Generativ AI, Data Science, ML, IoT forløb tilgængelige
### Arbejde med specifikke projekter ### Arbejde med Specifikke Projekter
For detaljerede instruktioner om individuelle projekter, se README-filer i: For detaljerede instruktioner om enkelte projekter, se README-filerne i:
- `quiz-app/README.md` - Vue 3 quiz applikation - `quiz-app/README.md` - Vue 3 quiz applikation
- `7-bank-project/README.md` - Bankapplikation med autentifikation - `7-bank-project/README.md` - Banking app med autentificering
- `5-browser-extension/README.md` - Udvikling af browserudvidelse - `5-browser-extension/README.md` - Browserudvidelsesudvikling
- `6-space-game/README.md` - Canvas-baseret spiludvikling - `6-space-game/README.md` - Canvas-baseret spiludvikling
- `9-chat-project/README.md` - AI chat assistent projekt - `9-chat-project/README.md` - AI chatassistent projekt
### Monorepo struktur ### Monorepo Struktur
Selvom det ikke er et traditionelt monorepo, indeholder dette repository flere uafhængige projekter: Selvom det ikke er et traditionelt monorepo, indeholder dette lager flere uafhængige projekter:
- Hver lektion er selvstændig - Hver lektion er selvstændig
- Projekter deler ikke afhængigheder - Projekterne deler ikke afhængigheder
- Arbejd på individuelle projekter uden at påvirke andre - Arbejd på individuelle projekter uden at påvirke andre
- Klon hele repo for fuld curriculum oplevelse - Klon hele repo for fuldt forløbsoplevelse
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfraskrivelse**: **Ansvarsfraskrivelse**:
Dette dokument er oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det oprindelige dokument på dets modersmål bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse. Dette dokument er oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, bedes du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det oprindelige dokument på dets modersmål bør betragtes som den autoritative kilde. Ved kritiske informationer anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for eventuelle misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -10,71 +10,81 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Webudvikling for begyndere - Et pensum # Webudvikling for begyndere - en læseplan
Lær grundlæggende webudvikling med vores 12-ugers omfattende kursus fra Microsoft Cloud Advocates. Hver af de 24 lektioner dykker ned i JavaScript, CSS og HTML gennem praktiske projekter som terrarier, browserudvidelser og rumspil. Deltag i quizzer, diskussioner og praktiske opgaver. Forbedr dine færdigheder og optimer din viden med vores effektive projektbaserede pædagogik. Start din kodningsrejse i dag! Lær grundlæggende webudvikling med vores 12-ugers omfattende kursus af Microsoft Cloud Advocates. Hver af de 24 lektioner dykker ned i JavaScript, CSS og HTML gennem praktiske projekter som terrarier, browserudvidelser og rumspil. Deltag i quizzer, diskussioner og praktiske opgaver. Forbedr dine færdigheder og optimer din vidensfastholdelse med vores effektive projektbaserede pædagogik. Start din kodningsrejse i dag!
Deltag i Azure AI Foundry Discord-fællesskabet Deltag i Azure AI Foundry Discord-fællesskabet
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Følg disse trin for at komme i gang med at bruge disse ressourcer: Følg disse trin for at komme i gang med at bruge disse ressourcer:
1. **Fork depotet**: Klik på [![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) 1. **Fork Repositoryet**: 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. **Klon depotet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **Klon Repositoryet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Deltag i Azure AI Foundry Discord og mød eksperter og andre udviklere**](https://discord.com/invite/ByRwuEEgH4) 3. [**Deltag i Azure AI Foundry Discord og mød eksperter og medudviklere**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Flersproget support ### 🌐 Flersproget support
#### Understøttet via GitHub Action (Automatiseret & Altid Opdateret) #### Understøttet via GitHub Action (Automatiseret og altid opdateret)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START --> <!-- 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](./README.md) | [Dutch](../nl/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) [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](./README.md) | [Dutch](../nl/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)
> **Foretrækker du at klone lokalt?** > **Foretrækker du at klone lokalt?**
>
> Dette repository indeholder 50+ sprogoversættelser, som betydeligt øger downloadstørrelsen. For at klone uden oversættelser, brug sparsomet udtjekning: > Dette repository indeholder 50+ sprogoversættelser, hvilket øger downloadstørrelsen betydeligt. For at klone uden oversættelser skal du bruge spars checkout:
>
> **Bash / macOS / Linux:**
> ```bash > ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners > cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ``` > ```
>
> **CMD (Windows):**
> ```cmd
> 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"
> ```
>
> Dette giver dig alt, hvad du behøver for at gennemføre kurset med en meget hurtigere download. > Dette giver dig alt, hvad du behøver for at gennemføre kurset med en meget hurtigere download.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END --> <!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Hvis du ønsker at få tilføjet yderligere oversættelsessprog, findes de understøttede sprog [her](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** **Hvis du ønsker at få understøttelse af yderligere oversættelsessprog, er de listet [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) [![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 studerende?_ #### 🧑‍🎓 _Er du studerende?_
Besøg [**Student Hub siden**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), hvor du finder begynderressourcer, studentpakker og endda måder at få en gratis certifikatkupon på. Dette er siden, du vil bogmærke og tjekke fra tid til anden, da vi månedligt udskifter indhold. Besøg [**Student Hub siden**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), hvor du finder begynderressourcer, studenterpakker og endda muligheder for at få et gratis certifikatkupon. Dette er siden, du vil bogmærke og tjekke indimellem, da vi skifter indhold månedligt.
### 📣 Meddelelse - Nye GitHub Copilot Agent mode udfordringer at gennemføre! ### 📣 Meddelelse - Nye GitHub Copilot Agent mode udfordringer at gennemføre!
Ny udfordring tilføjet, kig efter "GitHub Copilot Agent Challenge 🚀" i de fleste kapitler. Det er en ny udfordring for dig at fuldføre ved at bruge GitHub Copilot og Agent mode. Hvis du ikke har brugt Agent mode før, kan den ikke bare generere tekst, men også skabe og redigere filer, køre kommandoer med mere. Ny udfordring tilføjet, kig efter "GitHub Copilot Agent Challenge 🚀" i de fleste kapitler. Det er en ny udfordring, som du skal gennemføre ved hjælp af GitHub Copilot og Agent mode. Hvis du ikke har brugt Agent mode før, kan den ikke kun generere tekst, men også oprette og redigere filer, køre kommandoer og mere.
### 📣 Meddelelse - _Nyt projekt at bygge med Generativ AI_ ### 📣 Meddelelse - _Nyt projekt at bygge ved hjælp af Generativ AI_
Nyt AI-assistent projekt lige tilføjet, tjek det ud [projekt](./9-chat-project/README.md) Nyt AI Assistant projekt er netop tilføjet, tjek det ud [projekt](./9-chat-project/README.md)
### 📣 Meddelelse - _Nyt pensum_ om Generativ AI for JavaScript er netop udgivet ### 📣 Meddelelse - _Ny læseplan_ om Generativ AI for JavaScript er netop udgivet
Gå ikke glip af vores nye pensum om Generativ AI! Gå ikke glip af vores nye læseplan for Generativ AI!
Besøg [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for at komme i gang! Besøg [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for at komme i gang!
![Background](../../translated_images/da/background.148a8d43afde5730.webp) ![Background](../../translated_images/da/background.148a8d43afde5730.webp)
- Lektioner, der dækker alt fra det grundlæggende til RAG. - Lektioner, der dækker alt fra det grundlæggende til RAG.
- Interager med historiske karakterer ved hjælp af GenAI og vores følgesvend app. - Interagér med historiske figurer ved hjælp af GenAI og vores følgesvend-app.
- Sjov og engagerende fortælling, du vil rejse i tiden! - Sjov og engagerende fortælling, du vil rejse i tiden!
![character](../../translated_images/da/character.5c0dd8e067ffd693.webp) ![character](../../translated_images/da/character.5c0dd8e067ffd693.webp)
Hver lektion inkluderer en opgave, en videnstest og en udfordring for at guide dig i læringsemner som: Hver lektion inkluderer en opgave, en videnscheck og en udfordring, der guider dig i at lære emner som:
- Prompting og prompt engineering - Prompting og prompt engineering
- Tekst- og billedapp generation - Tekst- og billedappgenerering
- Søgeapps - Søgeapps
Besøg [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for at komme i gang! Besøg [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for at komme i gang!
@ -83,130 +93,129 @@ Besøg [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for at k
## 🌱 Kom godt i gang ## 🌱 Kom godt i gang
> **Lærere**, vi har [inkluderet nogle forslag](for-teachers.md) til, hvordan I kan bruge dette pensum. Vi modtager meget gerne jeres feedback [i vores diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! > **Lærere**, vi har [inkluderet nogle forslag](for-teachers.md) til, hvordan I kan bruge denne læseplan. Vi vil meget gerne have jeres feedback [i vores diskussionsforum](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 lektion, start med en quiz før lektion og følg op med at læse lektionens materiale, fuldføre de forskellige aktiviteter og tjek din forståelse med quiz efter lektionen. **[Lærende](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for hver lektion, start med en pre-lecture quiz og følg op med at læse forelæsningsmaterialet, gennemføre de forskellige aktiviteter og tjek din forståelse med post-lecture quizzen.
For at forbedre din læringsoplevelse, forbind med dine kammerater og arbejd sammen om projekterne! Diskussioner opfordres i vores [diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), hvor vores moderatorhold vil være tilgængelige for at svare på dine spørgsmål. For at forbedre din læringsoplevelse, forbind med dine jævnbyrdige for at arbejde på projekterne sammen! Diskussioner opfordres i vores [diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), hvor vores team af moderatorer vil være tilgængelige for at besvare dine spørgsmål.
For at udvikle din uddannelse yderligere anbefaler vi stærkt at udforske [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for yderligere studiematerialer. For at fremme din uddannelse, anbefaler vi kraftigt at udforske [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for yderligere studiematerialer.
### 📋 Opsætning af dit miljø ### 📋 Opsætning af dit miljø
Dette pensum har et udviklingsmiljø klar til brug! Når du går i gang, kan du vælge at køre pensum i en [Codespace](https://github.com/features/codespaces/) (_et browserbaseret miljø uden installation_), eller lokalt på din computer ved hjælp af en teksteditor som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). Denne læseplan har et udviklingsmiljø klar til brug! Når du kommer i gang, kan du vælge at køre læseplanen i en [Codespace](https://github.com/features/codespaces/) (_et browser-baseret miljø, hvor ingen installation er nødvendig_), eller lokalt på din computer ved hjælp af en teksteditor som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Opret dit repository #### Opret dit repository
For at du nemt kan gemme dit arbejde anbefales det, at du opretter din egen kopi af dette repository. Det kan du gøre ved at klikke på knappen **Use this template** øverst på siden. Dette vil oprette et nyt repository på din GitHub-konto med en kopi af pensum. For at du nemt kan gemme dit arbejde anbefales det, at du opretter din egen kopi af dette repository. Det kan du gøre ved at klikke på **Use this template** knappen øverst på siden. Dette vil oprette et nyt repository i din GitHub-konto med en kopi af læseplanen.
Følg disse trin: Følg disse trin:
1. **Fork depotet**: Klik på knappen "Fork" øverst til højre på denne side. 1. **Fork Repositoryet**: Klik på "Fork" knappen øverst til højre på denne side.
2. **Klon depotet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **Klon Repositoryet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Kør pensum i en Codespace #### Køre læseplanen i en Codespace
I din kopi af dette repository, som du har oprettet, klik på knappen **Code** og vælg **Open with Codespaces**. Dette vil oprette en ny Codespace, som du kan arbejde i. I din kopi af dette repository, som du har oprettet, klik på **Code** knappen og vælg **Open with Codespaces**. Dette opretter en ny Codespace til dig at arbejde i.
![Codespace](../../translated_images/da/createcodespace.0238bbf4d7a8d955.webp) ![Codespace](../../translated_images/da/createcodespace.0238bbf4d7a8d955.webp)
#### Kør pensum lokalt på din computer #### Køre læseplanen lokalt på din computer
For at køre dette pensum lokalt på din computer, skal du bruge en teksteditor, en browser og et kommandolinjeværktøj. Vores første lektion, [Introduktion til programmeringssprog og værktøjer](../../1-getting-started-lessons/1-intro-to-programming-languages), vil guide dig gennem forskellige muligheder for hver af disse værktøjer, så du kan vælge det, der passer bedst til dig.
Vi anbefaler at bruge [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) som din editor, som også har en indbygget [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Du kan downloade Visual Studio Code [her](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). For at køre denne læseplan lokalt på din computer, skal du bruge en teksteditor, en browser og et kommandolinjeværktøj. Vores første lektion, [Introduktion til programmeringssprog og handelsværktøjer](../../1-getting-started-lessons/1-intro-to-programming-languages), vil guide dig gennem forskellige valgmuligheder for hvert af disse værktøjer, så du kan vælge, hvad der passer bedst til dig.
Vi anbefaler at bruge [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) som din editor, som også har et indbygget [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Du kan downloade Visual Studio Code [her](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klon dit repository til din computer. Det kan du gøre ved at klikke på knappen **Code** og kopiere URLen: 1. Klon dit repository til din computer. Det kan du gøre ved at klikke på **Code**-knappen og kopiere URL'en:
[CodeSpace](./images/createcodespace.png) [CodeSpace](./images/createcodespace.png)
Åbn derefter [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 kør følgende kommando, hvor du erstatter `<your-repository-url>` med den URL, du lige har kopieret:
Åbn derefter [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 kør følgende kommando, hvor du erstatter `<your-repository-url>` med den URL, du lige har kopieret:
```bash ```bash
git clone <your-repository-url> git clone <your-repository-url>
``` ```
2. Åbn mappen i Visual Studio Code. Det kan du gøre ved at klikke på **File** > **Open Folder** og vælge den mappe, du lige har klonet. 2. Åbn mappen i Visual Studio Code. Det kan du gøre ved at klikke på **File** > **Open Folder** og vælge den mappe, du netop har klonet.
> Anbefalede Visual Studio Code-udvidelser: > Anbefalede Visual Studio Code-udvidelser:
> >
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - for at forhåndsvise HTML-sider i Visual Studio Code > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - for at kunne forhåndsvise HTML-sider i Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - for at hjælpe dig med at skrive kode hurtigere > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - for at hjælpe dig med at skrive kode hurtigere
## 📂 Hver lektion inkluderer: ## 📂 Hver lektion inkluderer:
- valgfri sketchnote - valgfri skitsetegning
- valgfri supplerende video - valgfri supplerende video
- forudgående opvarmningsquiz før lektion - opvarmningsquiz før lektionen
- skriftlig lektion - skreven lektion
- for projektbaserede lektioner, trin-for-trin vejledninger til, hvordan man bygger projektet - for projektbaserede lektioner, trin-for-trin vejledninger om, hvordan man bygger projektet
- vidensprøver - videnschecks
- en udfordring - en udfordring
- supplerende læsning - supplerende læsning
- opgave - opgave
- [quiz efter lektionen](https://ff-quizzes.netlify.app/web/) - [quiz efter lektion](https://ff-quizzes.netlify.app/web/)
> **En note om quizzer**: Alle quizzer findes i Quiz-app mappen, i alt 48 quizzer med tre spørgsmål hver. De er tilgængelige [her](https://ff-quizzes.netlify.app/web/). Quiz-appen kan køres lokalt eller implementeres til Azure; følg instruktionerne i `quiz-app` mappen. > **En note om quizzes**: Alle quizzes findes i Quiz-app mappen, i alt 48 quizzes med tre spørgsmål hver. De er tilgængelige [her](https://ff-quizzes.netlify.app/web/); quiz-appen kan køres lokalt eller implementeres til Azure; følg instruktionerne i `quiz-app` mappen.
## 🗃️ Lektioner ## 🗃️ Lektioner
| | Projekt Navn | Koncepter undervist | Læringsmål | Linket Lektion | Forfatter | | | Projektnavn | Gennemgåede Begreber | Læringsmål | Linket Lektion | Forfatter |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :-----------------------: | | :-: | :------------------------------------------------------: | :------------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Kom godt i gang | Introduktion til programmering og værktøjer | Lær de grundlæggende principper bag de fleste programmeringssprog og om software, der hjælper professionelle udviklere | [Introduktion til programmeringssprog og værktøjer](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | | 01 | Kom I Gang | Introduktion til programmering og værktøjer | Lær de grundlæggende elementer bag de fleste programmeringssprog og om software, der hjælper professionelle udviklere med deres arbejde | [Intro til programmeringssprog og værktøjer](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Kom godt i gang | Grundlæggende om GitHub, inklusiv samarbejde i teams | Hvordan man bruger GitHub i sit projekt, hvordan man samarbejder med andre om en kodebase | [Introduktion til GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | | 02 | Kom I Gang | Grundlæggende GitHub, inkl. samarbejde i team | Hvordan man bruger GitHub i sit projekt, og hvordan man samarbejder med andre om en kodebase | [Intro til GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Kom godt i gang | Tilgængelighed | Lær det grundlæggende om webtilgængelighed | [Grundlæggende om Tilgængelighed](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 03 | Kom I Gang | Tilgængelighed | Lær det grundlæggende om webtilgængelighed | [Tilgængelighedsgrundlag](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Grundlæggende | JavaScript datatyper | Grundlæggende om JavaScript-datatyper | [Datatyper](./2-js-basics/1-data-types/README.md) | Jasmine | | 04 | JS Grundlæggende | JavaScript Datatyper | Grundlæggende JavaScript-datatyper | [Datatyper](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Grundlæggende | Funktioner og metoder | Lær om funktioner og metoder til at styre en applikations logik | [Funktioner og metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine og Christopher | | 05 | JS Grundlæggende | Funktioner og Metoder | Lær om funktioner og metoder til at styre et programs logik | [Funktioner og Metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine og Christopher |
| 06 | JS Grundlæggende | Beslutninger med JS | Lær hvordan man laver betingelser i din kode ved hjælp af beslutningstagning | [Beslutningstagning](./2-js-basics/3-making-decisions/README.md) | Jasmine | | 06 | JS Grundlæggende | Beslutningstagning med JS | Lær at skabe betingelser i din kode ved hjælp af beslutningsmetoder | [Beslutningstagning](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Grundlæggende | Arrays og loops | Arbejd med data ved hjælp af arrays og loops i JavaScript | [Arrays og loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | | 07 | JS Grundlæggende | Arrays og Løkker | Arbejd med data ved brug af 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 | Byg HTML for at skabe et online terrarium med fokus på layout | [Introduktion til HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | | 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML i praksis | Byg HTML'en til at skabe et online terrarium med fokus på opbygning af layout | [Introduktion til HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS i praksis | Byg CSS for at style det online terrarium, med fokus på CSS-grundlæggende funktioner inklusiv at gøre siden responsiv | [Introduktion til CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | | 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS i praksis | Byg CSS'en til at style det online terrarium med fokus på det grundlæggende i CSS, inkl. responsivt design | [Introduktion til CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-manipulation | Byg JavaScript for at få terrariet til at fungere som en drag/drop interface, med fokus på closures og DOM-manipulation | [JavaScript Closures, DOM-manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | | 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-manipulation | Byg JavaScript til at få terrariet til at fungere som en drag/drop-grænseflade med fokus på closures og DOM-manipulation | [JavaScript Closures, DOM-manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Byg et skrive-spil | Lær hvordan du bruger tastaturhændelser til at styre logikken i din JavaScript-app | [Begivenhedsdrevet programmering](./4-typing-game/typing-game/README.md) | Christopher | | 11 | [Typing Game](./4-typing-game/solution/README.md) | Byg et Typingspil | Lær at bruge tastaturbegivenheder til at styre logikken i din JavaScript-app | [Eventdrevet programmering](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Arbejde med browsere | Lær hvordan browsere fungerer, deres historie, og hvordan man scaffolder de første elementer i en browserudvidelse | [Om browsere](./5-browser-extension/1-about-browsers/README.md) | Jen | | 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Arbejde med browsere | Lær hvordan browsere fungerer, deres historie og hvordan man laver de første elementer i en browser-udvidelse | [Om browsere](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bygge en form, kalde API og gemme variabler i lokal lagring | Byg JavaScript-elementerne i din browserudvidelse for at kalde en API ved hjælp af variabler gemt i lokal lagring | [API'er, formularer og lokal lagring](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | | 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Byg et formular, kald et API og gem variabler i lokal lagring | Byg JavaScript-elementerne til din browserudvidelse for at kalde et API ved brug af variabler gemt i lokal lagring | [API'er, formularer og lokal lagring](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Baggrundsprocesser i browseren, web performance | Brug browserens baggrundsprocesser til at håndtere udvidelsens ikon; lær om webperformance og nogle optimeringer | [Baggrundsopgaver og ydeevne](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | | 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Baggrundsprocesser i browseren, webperformance | Brug browserens baggrundsprocesser til at styre udvidelsens ikon; lær om webperformance og nogle optimeringer for at forbedre | [Baggrundsopgaver og performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Mere avanceret spiludvikling med JavaScript | Lær om arv ved hjælp af både klasser og sammensætning samt Pub/Sub-mønsteret, som forberedelse til at bygge et spil | [Introduktion til avanceret spiludvikling](./6-space-game/1-introduction/README.md) | Chris | | 15 | [Space Game](./6-space-game/solution/README.md) | Mere avanceret spiludvikling med JavaScript | Lær om arv via både klasser og komposition samt Pub/Sub-mønsteret som forberedelse til et spil | [Introduktion til avanceret spiludvikling](./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, der bruges til at tegne elementer på en skærm | [Tegning på Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | | 16 | [Space Game](./6-space-game/solution/README.md) | Tegning til canvas | Lær om Canvas API, som bruges til at tegne elementer på en skærm | [Tegning til canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Flytte elementer rundt på skærmen | Opdag, hvordan elementer kan få bevægelse ved hjælp af kartesiske koordinater og Canvas API | [Flytning af elementer](./6-space-game/3-moving-elements-around/README.md) | Chris | | 17 | [Space Game](./6-space-game/solution/README.md) | Flyt elementer rundt på skærmen | Opdag hvordan elementer kan bevæge sig vha. kartesiske koordinater og Canvas API | [Flyt elementer rundt](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Kollisiondetektion | Få elementer til at kollidere og reagere på hinanden ved tastetryk og lav en cooldown-funktion for at sikre spillets ydeevne | [Kollisiondetektion](./6-space-game/4-collision-detection/README.md) | Chris | | 18 | [Space Game](./6-space-game/solution/README.md) | Kollisionregistrering | Få elementer til at kollidere og reagere på hinanden ved tastetryk og tilføj en cooldown-funktion for at sikre spillets ydeevne | [Kollisionregistrering](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Holde styr på point | Udfør matematiske beregninger baseret på spillets status og præstation | [Pointoptælling](./6-space-game/5-keeping-score/README.md) | Chris | | 19 | [Space Game](./6-space-game/solution/README.md) | Hold styr på point | Udfør matematiske beregninger baseret på spillets status og præstation | [Hold styr på point](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Afslutte og genstarte spillet | Lær om hvordan man afslutter og genstarter spillet, inklusiv oprydning af assets og nulstilling af variable | [Afslutningsbetingelsen](./6-space-game/6-end-condition/README.md) | Chris | | 20 | [Space Game](./6-space-game/solution/README.md) | Afslutning og genstart af spillet | Lær om at afslutte og genstarte spillet, inkl. oprydning af ressourcer og nulstilling af variabler | [Afslutningsbetingelsen](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-skabeloner og ruter i en webapp | Lær hvordan man skaber fundamentet for en multipages website-arkitektur med routing og HTML-skabeloner | [HTML-skabeloner og ruter](./7-bank-project/1-template-route/README.md) | Yohan | | 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-skabeloner og routes i en webapp | Lær hvordan man skaber arkitekturen for et multipages website ved hjælp af routing og HTML-skabeloner | [HTML-skabeloner og routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Byg en Login og Registreringsformular | Lær om at bygge formularer og håndtere valideringsrutiner | [Formularer](./7-bank-project/2-forms/README.md) | Yohan | | 22 | [Banking App](./7-bank-project/solution/README.md) | Byg en login- og registreringsformular | Lær om hvordan man laver formularer og håndterer valideringsrutiner | [Formularer](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metoder til at hente og bruge data | Hvordan data flyder ind og ud af din app, hvordan man henter, gemmer og bortskaffer det | [Data](./7-bank-project/3-data/README.md) | Yohan | | 23 | [Banking App](./7-bank-project/solution/README.md) | Metoder til hentning og brug af data | Hvordan data flyder ind og ud af din app, hvordan man henter, gemmer og bortskaffer det | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Koncepter om state management | Lær hvordan din app bevarer state og hvordan man styrer den programmatisk | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | | 24 | [Banking App](./7-bank-project/solution/README.md) | Koncepter for tilstandsadministration | Lær hvordan din app bevarer tilstand og hvordan man programmerer styring af denne | [Tilstandsadministration](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Arbejde med VScode | Lær hvordan man bruger en kodeeditor | [Brug VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | | 25 | [Browser/VScode Code](../../8-code-editor) | Arbejde med VScode | Lær hvordan man bruger en kodeeditor | [Brug af VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Arbejde med AI | Lær hvordan man bygger sin egen AI-assistent | [AI Assistant projekt](./9-chat-project/README.md) | Chris | | 26 | [AI Assistants](./9-chat-project/README.md) | Arbejde med AI | Lær hvordan du bygger din egen AI-assistent | [AI Assistent projekt](./9-chat-project/README.md) | Chris |
## 🏫 Pædagogik ## 🏫 Pædagogik
Vores pensum er designet med to nøgleprincipper i pædagogik: Vores læreplan er designet med to centrale pædagogiske principper for øje:
* projektbaseret læring * projektbaseret læring
* hyppige quizzer * hyppige quizzes
Programmet underviser i grundlæggende JavaScript, HTML og CSS samt de nyeste værktøjer og teknikker, som nutidens webudviklere bruger. Studerende får mulighed for at udvikle praktisk erfaring ved at bygge et skrive-spil, et virtuelt terrarium, en miljøvenlig browserudvidelse, et rum-invader stil-spil og en bank-app til virksomheder. Ved slutningen af serien vil eleverne have opnået en solid forståelse for webudvikling. Programmet underviser i grundlæggende JavaScript, HTML og CSS samt de nyeste værktøjer og teknikker, som nutidens webudviklere bruger. Studerende vil få mulighed for at opnå praktisk erfaring ved at bygge et typing-spil, virtuelt terrarium, miljøvenligt browser-udvidelse, rum-invader-stil spil og en bankapp til virksomheder. Ved slutningen af serien vil studerende have opnået en solid forståelse af webudvikling.
> 🎓 Du kan tage de første par lektioner i dette pensum som en [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn! > 🎓 Du kan tage de første lektioner i denne læreplan som en [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn!
Ved at sikre, at indholdet stemmer overens med projekterne, bliver processen mere engagerende for eleverne, og fastholdelsen af koncepterne forbedres. Vi har også skrevet flere introduktionslektioner i JavaScript grundlæggende for at introducere begreber, kombineret med en video fra "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" samlingen af videotutorials, hvor nogle af forfatterne har bidraget til dette pensum. Ved at sikre, at indholdet er knyttet til projekter, bliver processen mere engagerende for studerende, og fastholdelsen af begreber styrkes. Vi har desuden skrevet flere introducerende lektioner i JavaScript grundlæggende for at introducere begreber, suppleret med en video fra "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" samlingen af videotutorials, hvoraf nogle forfattere bidrog til denne læreplan.
Derudover sætter en quiz med lav risiko før en klasse intentionen hos eleven mod at lære et emne, mens en anden quiz efter klassen sikrer yderligere fastholdelse. Dette pensum er designet til at være fleksibelt og sjovt og kan tages som helhed eller delvist. Projekterne starter småt og bliver gradvist mere komplekse ved slutningen af 12-ugers cyklussen. Derudover sætter en lavrisiko quiz før en klasse målrettet elevens intention om at lære et emne, mens en anden quiz efter klasse sikrer yderligere fastholdelse. Denne læreplan er designet til at være fleksibel og sjov og kan tages helt eller delvist. Projekterne starter småt og bliver gradvist mere komplekse hen imod slutningen af den 12-ugers cyklus.
Selvom vi bevidst har undgået at introducere JavaScript-rammer for at koncentrere os om de grundlæggende færdigheder, der er nødvendige som webudvikler, før man tager en ramme i brug, kunne et godt næste skridt efter at have gennemført dette pensum være at lære om Node.js via en anden samling videoer: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". Selvom vi har undgået at introducere JavaScript-rammeværk for at fokusere på de grundlæggende færdigheder, der kræves som webudvikler, før man tager et rammeværk i brug, vil et godt næste skridt i denne læreplans afslutning være at lære om Node.js via en anden samling videoer: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Besøg vores [Code of Conduct](CODE_OF_CONDUCT.md) og [Contributing](CONTRIBUTING.md) retningslinjer. Vi byder konstruktiv feedback velkommen! > Besøg vores [Adfærdskodeks](CODE_OF_CONDUCT.md) og [Bidrag](CONTRIBUTING.md) retningslinjer. Vi ser frem til din konstruktive feedback!
## 🧭 Offline adgang ## 🧭 Offline adgang
Du kan køre denne dokumentation offline ved at bruge [Docsify](https://docsify.js.org/#/). Fork dette repo, [installer Docsify](https://docsify.js.org/#/quickstart) på din lokale maskine, og i rodmappen for dette repo, skriv `docsify serve`. Hjemmesiden vil blive serveret på port 3000 på din localhost: `localhost:3000`. Du kan køre denne dokumentation offline ved at bruge [Docsify](https://docsify.js.org/#/). Fork dette repo, [installer Docsify](https://docsify.js.org/#/quickstart) på din lokale maskine, og skriv derefter i rodmappen af dette repo `docsify serve`. Websitet vil blive serveret på port 3000 på din localhost: `localhost:3000`.
## 📘 PDF ## 📘 PDF
En PDF med alle lektionerne kan findes [her](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
En PDF af alle lektionerne kan findes [her](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Andre Kurser
## 🎒 Andre kurser
Vores team producerer andre kurser! Tjek dem ud: Vores team producerer andre kurser! Tjek dem ud:
<!-- CO-OP TRANSLATOR OTHER COURSES START --> <!-- CO-OP TRANSLATOR OTHER COURSES START -->
@ -216,7 +225,7 @@ Vores team producerer andre kurser! Tjek dem ud:
[![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) [![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 / Agenter ### 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) [![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) [![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) [![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)
@ -224,7 +233,7 @@ Vores team producerer andre kurser! Tjek dem ud:
--- ---
### Generativ AI Serie ### Generative AI Series
[![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 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 (.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 (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)
@ -232,7 +241,7 @@ Vores team producerer andre kurser! Tjek dem ud:
--- ---
### Grundlæggende Læring ### Core Learning
[![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) [![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) [![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) [![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)
@ -243,7 +252,7 @@ Vores team producerer andre kurser! Tjek dem ud:
--- ---
### Copilot Serie ### Copilot Series
[![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 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 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) [![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)
@ -251,21 +260,21 @@ Vores team producerer andre kurser! Tjek dem ud:
## Få Hjælp ## Få Hjælp
Hvis du går i stå eller har spørgsmål om at bygge AI-apps. Deltag sammen med andre elever og erfarne udviklere i diskussioner om MCP. Det er et støttende fællesskab, hvor spørgsmål er velkomne, og viden deles frit. Hvis du sidder fast eller har spørgsmål om at bygge AI-apps. Deltag sammen med andre lærende og erfarne udviklere i diskussioner om MCP. Det er et støttende fællesskab, hvor spørgsmål er velkomne, og viden deles frit.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Hvis du har produktfeedback eller oplever fejl under byggeriet, besøg: Hvis du har produktfeedback eller oplever fejl under udvikling, besøg:
[![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) [![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)
## Licens ## Licens
Dette repository er licenseret under MIT-licensen. Se filen [LICENSE](../../LICENSE) for mere information. Dette arkiv er licenseret under MIT-licensen. Se [LICENSE](../../LICENSE)-filen for mere information.
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfraskrivelse**: **Ansvarsfraskrivelse**:
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse. Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det oprindelige dokument på dets modersmål bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for eventuelle misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -1,7 +1,7 @@
{ {
"1-getting-started-lessons/1-intro-to-programming-languages/README.md": { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": {
"original_hash": "d45ddcc54eb9232a76d08328b09d792e", "original_hash": "bec5e35642176d9e483552bfc82996d8",
"translation_date": "2025-11-04T01:14:39+00:00", "translation_date": "2026-03-06T18:28:51+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "fi" "language_code": "fi"
}, },
@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-02-06T17:37:08+00:00", "translation_date": "2026-03-06T18:32:27+00:00",
"source_file": "AGENTS.md", "source_file": "AGENTS.md",
"language_code": "fi" "language_code": "fi"
}, },
@ -516,8 +516,8 @@
"language_code": "fi" "language_code": "fi"
}, },
"README.md": { "README.md": {
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", "original_hash": "a2c9eed480687319517c08a6319e5536",
"translation_date": "2026-02-06T17:32:01+00:00", "translation_date": "2026-03-06T18:24:56+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "fi" "language_code": "fi"
}, },

@ -2,36 +2,36 @@
## Projektin yleiskuvaus ## Projektin yleiskuvaus
Tämä on opetuksellinen opetussuunnitelmarepositorio, joka on tarkoitettu web-kehityksen perusteiden opettamiseen aloittelijoille. Opetussuunnitelma on kattava 12 viikon kurssi, jonka ovat kehittäneet Microsoft Cloud Advocates, ja se sisältää 24 käytännön oppituntia, jotka kattavat JavaScriptin, CSS:n ja HTML:n. Tämä on opetussisältöjen arkisto, joka on tarkoitettu aloittelijoiden web-kehityksen perusteiden opettamiseen. Opetussuunnitelma on kattava 12 viikon kurssi, jonka ovat kehittäneet Microsoft Cloud Advocates, ja se sisältää 24 käytännönläheistä oppituntia JavaScriptin, CSS:n ja HTML:n parissa.
### Keskeiset osat ### Keskeiset osat
- **Opetussisältö**: 24 rakenteellista oppituntia projektipohjaisissa moduuleissa - **Opetussisältö**: 24 rakenteellista oppituntia, jotka on organisoitu projektiperusteisiin moduuleihin
- **Käytännön projektit**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor ja AI Chat Assistant - **Käytännön projektit**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor ja AI Chat Assistant
- **Interaktiiviset tietovisat**: 48 tietovisaa, joissa on 3 kysymystä (ennen ja jälkeen oppitunnin arvioinnit) - **Interaktiiviset kyselyt**: 48 kyselyä, joissa on 3 kysymystä jokaisessa (ennen ja jälkeen oppituntiarvioinnit)
- **Monikielinen tuki**: Automaattiset käännökset yli 50 kielelle GitHub Actionsin kautta - **Monikielinen tuki**: Automaattiset käännökset yli 50 kielelle GitHub Actionsilla
- **Teknologiat**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (tekoälyprojekteissa) - **Teknologiat**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI-projekteissa)
### Arkkitehtuuri ### Arkkitehtuuri
- Opetuksellinen arkisto oppituntipohjaisella rakenteella - Opetussisältöarkisto oppituntirakenteella
- Jokainen oppituntikansio sisältää README-tiedoston, koodiesimerkkejä ja ratkaisuja - Jokaisessa oppituntikansiossa README, koodiesimerkit ja ratkaisut
- Itsenäiset projektit omissa hakemistoissaan (quiz-app, eri oppituntiprojektit) - Itsenäiset projektit omissa hakemistoissaan (quiz-app, erilaiset oppituntiprojektit)
- Käännösjärjestelmä GitHub Actionsin (co-op-translator) avulla - Käännösjärjestelmä GitHub Actionsin avulla (co-op-translator)
- Dokumentaatio tarjotaan Docsifylla ja se on saatavilla myös PDF:nä - Dokumentaatio tarjotaan Docsifyllä ja saatavilla PDF-muodossa
## Asennuskomennot ## Asennuskäskyt
Tämä arkisto on ensisijaisesti tarkoitettu opetussisällön kulutukseen. Työskennellessäsi tiettyjen projektien kanssa: Tämä arkisto on ensisijaisesti tarkoitettu opetussisällön kuluttamiseen. Jos työskentelet tiettyjen projektien kanssa:
### Pääarkiston asennus ### Pääarkiston pystytys
```bash ```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners cd Web-Dev-For-Beginners
``` ```
### Quiz-sovelluksen asennus (Vue 3 + Vite) ### Quiz Appin asennus (Vue 3 + Vite)
```bash ```bash
cd quiz-app cd quiz-app
@ -40,25 +40,25 @@ npm run dev # Käynnistä kehityspalvelin
npm run build # Rakenna tuotantoon npm run build # Rakenna tuotantoon
npm run lint # Suorita ESLint npm run lint # Suorita ESLint
``` ```
### Pankkiprojektin API (Node.js + Express) ### Bank Project API (Node.js + Express)
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm install npm install
npm start # Käynnistä API-palvelin npm start # Käynnistä API-palvelin
npm run lint # Suorita ESLint npm run lint # Aja ESLint
npm run format # Muotoile Prettierilla npm run format # Muotoile Prettierillä
``` ```
### Selaimen laajennusprojektit ### Selainlaajennusprojektit
```bash ```bash
cd 5-browser-extension/solution cd 5-browser-extension/solution
npm install npm install
# Noudata selaimen erityisiä laajennuksen latausohjeita # Noudata selaimen erityisiä laajennusten latausohjeita
``` ```
### Space Game -projektit ### Space Game -projektit
```bash ```bash
@ -66,8 +66,8 @@ cd 6-space-game/solution
npm install npm install
# Avaa index.html selaimessa tai käytä Live Serveriä # Avaa index.html selaimessa tai käytä Live Serveriä
``` ```
### Chat-projekti (Python backend) ### Chat-projekti (Python Backend)
```bash ```bash
cd 9-chat-project/solution/backend/python cd 9-chat-project/solution/backend/python
@ -75,208 +75,208 @@ pip install openai
# Aseta GITHUB_TOKEN-ympäristömuuttuja # Aseta GITHUB_TOKEN-ympäristömuuttuja
python api.py python api.py
``` ```
## Kehitystyönkulku
## Kehitysprosessi ### Sisällöntuottajille
### Sisällön tekijöille
1. **Forkkaa arkisto** GitHub-tilillesi 1. **Haarauta arkisto** GitHub-tilillesi
2. **Kloonaa forkki** paikallisesti 2. **Kloonaa oma haarukkasi** paikallisesti
3. **Luo uusi haara** muutoksillesi 3. **Luo uusi haara** muutoksille
4. Tee muutoksia oppituntisisältöön tai koodiesimerkkeihin 4. Tee muutoksia oppituntisisältöön tai koodiesimerkkeihin
5. Testaa koodimuutokset asiaankuuluvissa projektihakemistoissa 5. Testaa koodimuutokset sopivissa projektihakemistoissa
6. Lähetä pull requestit ohjeiden mukaisesti 6. Lähetä vetopyynnöt ohjeiden mukaisesti
### Oppijoille ### Oppijoille
1. Forkkaa tai kloonaa arkisto 1. Haarauta tai kloonaa arkisto
2. Siirry oppituntihakemistoihin peräkkäin 2. Siirry oppituntihakemistoihin peräkkäin
3. Lue jokaisen oppitunnin README-tiedostot 3. Lue kunkin oppitunnin README-tiedostot
4. Täytä oppituntia edeltävät tietovisat osoitteessa https://ff-quizzes.netlify.app/web/ 4. Tee ennen oppituntia olevat kyselyt osoitteessa https://ff-quizzes.netlify.app/web/
5. Työskentele koodiesimerkkien parissa oppituntikansioissa 5. Työstä oppituntien koodiesimerkkejä kansioissa
6. Suorita tehtävät ja haasteet 6. Suorita tehtävät ja haasteet
7. Tee oppituntia seuraavat tietovisat 7. Tee oppitunnin jälkeiset kyselyt
### Live-kehitys ### Live-kehitys
- **Dokumentaatio**: Suorita `docsify serve` juurihakemistossa (portti 3000) - **Dokumentaatio**: Aja `docsify serve` juurikansiossa (portti 3000)
- **Quiz-sovellus**: Suorita `npm run dev` quiz-app-hakemistossa - **Quiz App**: Aja `npm run dev` quiz-app-hakemistossa
- **Projektit**: Käytä VS Code Live Server -laajennusta HTML-projekteissa - **Projektit**: Käytä VS Coden Live Server -laajennusta HTML-projekteille
- **API-projektit**: Suorita `npm start` vastaavissa API-hakemistoissa - **API-projektit**: Aja `npm start` vastaavissa API-hakemistoissa
## Testausohjeet ## Testausohjeet
### Quiz-sovelluksen testaus ### Quiz Appin testaus
```bash ```bash
cd quiz-app cd quiz-app
npm run lint # Tarkista koodityyliongelmat npm run lint # Tarkista koodityylin ongelmat
npm run build # Varmista, että käännös onnistuu npm run build # Varmista, että käännös onnistuu
``` ```
### Pankki-API:n testaus ### Bank API:n testaus
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm run lint # Tarkista koodityyliongelmat npm run lint # Tarkista koodityylin ongelmat
node server.js # Varmista, että palvelin käynnistyy virheit node server.js # Varmista, että palvelin käynnistyy ilman virheitä
``` ```
### Yleinen testausmenetelmä ### Yleinen testausmenetelmä
- Tämä on opetuksellinen arkisto ilman kattavia automatisoituja testejä - Tämä on opetussisältöarkisto ilman kattavia automaattisia testejä
- Manuaalinen testaus keskittyy: - Manuaalisen testauksen painopisteet:
- Koodiesimerkkien virheettömään suorittamiseen - Koodiesimerkkien suorittaminen ilman virheitä
- Dokumentaation linkkien toimivuuteen - Dokumentaation linkkien toimivuus
- Projektikäännösten onnistumiseen - Projektien rakentamiset onnistuvat
- Esimerkkien noudattavan parhaita käytäntöjä - Esimerkit noudattavat parhaita käytäntöjä
### Ennen lähettämistä tehtävät tarkistukset ### Ennen lähettämistä tarkistukset
- Suorita `npm run lint` hakemistoissa, joissa on package.json - Aja `npm run lint` saataville hakemistoissa, joissa on package.json
- Varmista markdown-linkkien pätevyys - Varmista markdown-linkkien toimivuus
- Testaa koodiesimerkit selaimessa tai Node.js:ssä - Testaa koodiesimerkkejä selaimessa tai Node.js:ssä
- Tarkista, että käännökset säilyttävät rakenteen - Tarkista, että käännökset säilyttävät oikean rakenteen
## Koodityyliohjeet ## Koodityyliohjeet
### JavaScript ### JavaScript
- Käytä modernia ES6+ syntaksia - Käytä nykyaikaista ES6+-syntaksia
- Noudata projektien antamia ESLint-asetuksia - Seuraa projektien tarjoamia ESLint-määrityksiä
- Käytä merkityksellisiä muuttuja- ja funktioiden nimiä opetuksen selkeyden vuoksi - Käytä merkityksellisiä muuttuja- ja funktioiden nimiä opetuksen selkeyden vuoksi
- Lisää kommentteja, jotka selittävät käsitteitä oppijoille - Lisää kommentteja käsitteiden selityksiin oppijoille
- Muotoile Prettierillä, missä konfiguroitu - Muotoile koodi Prettierillä missä se on konfiguroitu
### HTML/CSS ### HTML/CSS
- Semanttiset HTML5-elementit - Semanttiset HTML5-elementit
- Responsiivisen suunnittelun periaatteet - Responsiivisen suunnittelun periaatteet
- Selkeät luokkien nimikäytännöt - Selkeät luokkien nimeämiskäytännöt
- Kommentit, jotka selittävät CSS-tekniikoita oppijoille - Kommentit CSS-tekniikoiden selittämiseksi oppijoille
### Python ### Python
- PEP 8 -tyyliohjeet - PEP 8 -tyyliohjeiden seuraaminen
- Selkeät, opetukselliset koodiesimerkit - Selkeät, opettavaiset koodiesimerkit
- Tyyppivihjeet, jos hyödyllisiä oppimisen kannalta - Tyyppivihjeet, kun se tukee oppimista
### Markdown-dokumentaatio ### Markdown-dokumentaatio
- Selkeä otsikkohierarkia - Selkeä otsikkohierarkia
- Koodilohkot kielimäärittelyillä - Koodilohkot kielimäärittelyillä
- Linkit lisäresursseihin - Linkit lisäresursseihin
- Kuvakaappaukset ja kuvat `images/` hakemistoissa - Kuvakaappaukset ja kuvat `images/`-hakemistoissa
- Kuvien alt-tekstit saavutettavuutta varten - Kuville alt-tekstit saavutettavuutta varten
### Tiedostojen järjestely ### Tiedostojen organisointi
- Oppitunnit numeroitu peräkkäin (1-getting-started-lessons, 2-js-basics jne.) - Oppitunnit numeroitu peräkkäin (1-getting-started-lessons, 2-js-basics jne.)
- Jokaisella projektilla on `solution/` ja usein `start/` tai `your-work/` hakemistot - Jokaisessa projektissa on `solution/` ja usein `start/` tai `your-work/` -kansiot
- Kuvat tallennettu oppituntikohtaisiin `images/` kansioihin - Kuvat ovat oppituntikohtaisissa `images/`-kansioissa
- Käännökset sijaitsevat `translations/{language-code}/` rakenteessa - Käännökset sijaitsevat `translations/{language-code}/` -rakenteessa
## Kokoaminen ja julkaisu ## Kokoaminen ja käyttöönotto
### Quiz-sovelluksen julkaisu (Azure Static Web Apps) ### Quiz Appin 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 ```bash
cd quiz-app cd quiz-app
npm run build # Luo dist/-kansion npm run build # Luo dist/ kansion
# Ottaa käyttöön GitHub Actions -työnkulun kautta siirron yhteydessä main-haaraan # Julkaisee GitHub Actions -työnkulun kautta push-toiminnolla main-haaraan
``` ```
Azure Static Web Apps -konfigurointi:
- **Sovelluksen sijainti**: `/quiz-app`
- **Tulostussijainti**: `dist`
- **Työnkulku**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
Azure Static Web Apps -konfiguraatio: ### Dokumentaation PDF:n generointi
- **Sovelluksen sijainti**: `/quiz-app`
- **Tulosteen sijainti**: `dist`
- **Työnkulku**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Dokumentaation PDF:n luonti
```bash ```bash
npm install # Asenna docsify-to-pdf npm install # Asenna docsify-to-pdf
npm run convert # Luo PDF docsista npm run convert # Luo PDF docs-sisällöstä
``` ```
### Docsify-dokumentaatio ### Docsify-dokumentaatio
```bash ```bash
npm install -g docsify-cli # Asenna Docsify globaalisti npm install -g docsify-cli # Asenna Docsify globaalisti
docsify serve # Tarjoa palvelu localhost:3000:ssa docsify serve # Palvele localhost:3000:ssa
``` ```
### Projektikohtaiset kokoamiset
### Projektikohtaiset rakentamiset Jokaisella projektihakemistolla voi olla oma build-prosessinsa:
- Vue-projektit: `npm run build` luo tuotantopaketteja
Jokaisella projektihakemistolla voi olla oma rakennusprosessi: - Staattiset projektit: Ei build-vaihetta, tiedostot palvellaan suoraan
- Vue-projektit: `npm run build` luo tuotantopaketteja
- Staattiset projektit: Ei rakennusvaihetta, palvele tiedostot suoraan
## Pull request -ohjeet ## Vetopyyntöohjeet
### Otsikkomuoto ### Otsikon muotoilu
Käytä selkeitä, kuvaavia otsikoita, jotka kertovat muutoksen alueen: Käytä selkeitä, kuvaavia otsikoita, jotka osoittavat muutoksen alueen:
- `[Quiz-app] Lisää uusi tietovisa oppitunnille X` - `[Quiz-app] Lisää uusi kysely oppitunnille X`
- `[Lesson-3] Korjaa kirjoitusvirhe terrarium-projektissa` - `[Lesson-3] Korjaa kirjoitusvirhe terrarium-projektissa`
- `[Translation] Lisää espanjankielinen käännös oppitunnille 5` - `[Translation] Lisää espanjankielinen käännös oppitunnille 5`
- `[Docs] Päivitä asennusohjeet` - `[Docs] Päivitä asennusohjeet`
### Vaadittavat tarkistukset ### Pakolliset tarkistukset
Ennen PR:n lähettämistä: Ennen vetopyynnön lähettämistä:
1. **Koodin laatu**: 1. **Koodin laatu**:
- Suorita `npm run lint` vaikutuksille joutuvissa hakemistoissa - Aja `npm run lint` kyseisissä projektihakemistoissa
- Korjaa kaikki lint-virheet ja -varoitukset - Korjaa kaikki lint-virheet ja varoitukset
2. **Rakennuksen varmistus**: 2. **Buildin varmistus**:
- Suorita `npm run build` jos sovellettavissa - Aja `npm run build` tarvittaessa
- Varmista ettei rakennusvirheitä ilmene - Varmista, ettei build-virheitä ilmene
3. **Linkkien tarkistus**: 3. **Linkkien validointi**:
- Testaa kaikki markdown-linkit - Testaa kaikki markdown-linkit
- Varmista kuvaviitteiden toimivuus - Varmista kuvaviitteiden toimivuus
4. **Sisällön tarkastus**: 4. **Sisältötarkastus**:
- Tarkista oikeinkirjoitus ja kielioppi - Oikolue oikeinkirjoitus ja kielioppi
- Varmista koodiesimerkkien oikeellisuus ja opetuksellisuus - Varmista, että koodiesimerkit ovat oikein ja opetuksellisia
- Tarkista, että käännökset säilyttävät alkuperäisen merkityksen - Varmista, että käännökset säilyttävät alkuperäisen merkityksen
### Osallistumisvaatimukset ### Osallistumisen vaatimukset
- Hyväksy Microsoft CLA (automaattinen tarkistus ensimmäisessä PR:ssa) - Hyväksy Microsoftin CLA (automaattinen tarkistus ensimmäisellä PR:llä)
- Noudata [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) - Noudata [Microsoft Open Source Code of Conductia](https://opensource.microsoft.com/codeofconduct/)
- Katso yksityiskohtaiset ohjeet [CONTRIBUTING.md](./CONTRIBUTING.md) tiedostosta - Katso [CONTRIBUTING.md](./CONTRIBUTING.md) yksityiskohtaiset ohjeet
- Viittaa issue-numeroihin PR-kuvauksessa, jos sovellettavissa - Viittaa ongelmanumeroihin PR-kuvauksessa tarvittaessa
### Tarkastusprosessi ### Arviointiprosessi
- PR:t tarkastetaan ylläpitäjien ja yhteisön toimesta - Vetopyynnöt arvioivat ylläpitäjät ja yhteisö
- Opetuksellinen selkeys on prioriteetti - Opetuksellisuus on prioriteetti
- Koodiesimerkkien tulee noudattaa nykyisiä parhaita käytäntöjä - Koodiesimerkkien on noudatettava nykyisiä parhaita käytäntöjä
- Käännökset tarkastetaan tarkkuudesta ja kulttuurillisesta sopivuudesta - Käännökset tarkastetaan tarkkuuden ja kulttuurisopivuuden varmistamiseksi
## Käännösjärjestelmä ## Käännösjärjestelmä
### Automaattinen käännös ### Automaattinen käännös
- Käyttää GitHub Actionsia co-op-translator -työnkulun kanssa - Käyttää GitHub Actionseja co-op-translator-työnkululla
- Kääntää automaattisesti yli 50 kielelle - Kääntää yli 50 kielelle automaattisesti
- Lähdetiedostot ovat pääkansioissa - Lähdetiedostot pääkansioissa
- Käännetyt tiedostot ovat `translations/{language-code}/` hakemistoissa - Käännetyt tiedostot kansioissa `translations/{language-code}/`
### Käsin tehtävät käännösten parannukset ### Manuaalisten käännösten parannusten lisääminen
1. Etsi tiedosto `translations/{language-code}/` hakemistosta 1. Etsi tiedosto kansiosta `translations/{language-code}/`
2. Tee parannuksia säilyttäen rakenne 2. Tee parannuksia rakenteen säilyttämiseksi
3. Varmista, että koodiesimerkit toimivat edelleen 3. Varmista, että koodiesimerkit toimivat edelleen
4. Testaa mahdolliset lokalisoidut tietovisasisällöt 4. Testaa mahdolliset lokalisoidut kyselysisällöt
### Käännösten metatiedot ### Käännösten metatiedot
Käännetyt tiedostot sisältävät metatietojen otsikon: Käännetyissä tiedostoissa on metatietopääte:
```markdown ```markdown
<!-- <!--
CO_OP_TRANSLATOR_METADATA: CO_OP_TRANSLATOR_METADATA:
@ -288,121 +288,121 @@ CO_OP_TRANSLATOR_METADATA:
} }
--> -->
``` ```
## Virheiden etsintä ja vianmääritys
## Virheenkorjaus ja vianetsintä ### Yleiset ongelmat
### Yleisimmät ongelmat
**Quiz-sovellus ei käynnisty**: **Quiz app ei käynnisty**:
- Tarkista Node.js:n versio (v14+ suositeltava) - Tarkista Node.js-versio (v14+ suositeltu)
- Poista `node_modules` ja `package-lock.json`, suorita `npm install` uudelleen - Poista `node_modules` ja `package-lock.json`, aja `npm install` uudelleen
- Tarkista, etteivät portit ole varattu (oletus: Vite käyttää porttia 5173) - Tarkista porttikonfliktit (oletus: Vite käyttää porttia 5173)
**API-palvelin ei käynnisty**: **API-palvelin ei käynnisty**:
- Varmista, että Node.js versio on vähintään (node >=10) - Varmista, että Node.js-versio on vähintään 10 tai uudempi
- Tarkista, onko portti jo käytössä - Tarkista, onko portti jo käytössä
- Varmista, että kaikki riippuvuudet on asennettu `npm install` komennolla - Varmista, että kaikki riippuvuudet on asennettu komennolla `npm install`
**Selaimen laajennus ei lataudu**: **Selainlaajennus ei lataudu**:
- Varmista, että manifest.json on oikein muotoiltu - Varmista manifest.json:n oikea muotoilu
- Tarkista selaimen konsolista virheet - Tarkista selaimen konsolivirheet
- Noudata selaimesta riippuvia asennusohjeita laajennukselle - Noudata selainkohtaisia laajennuksen asennusohjeita
**Python chat-projektin ongelmat**: **Pythonin chat-projektin ongelmat**:
- Varmista, että OpenAI-paketti on asennettu: `pip install openai` - Varmista, että OpenAI-paketti on asennettu: `pip install openai`
- Varmista, että GITHUB_TOKEN -ympäristömuuttuja on asetettu - Varmista, että GITHUB_TOKEN-ympäristömuuttuja on asetettu
- Tarkista GitHub Models -käyttöoikeudet - Tarkista GitHub Models -käyttöoikeudet
**Docsify ei tarjoa dokumentaatiota**: **Docsify ei palvele dokumentaatiota**:
- Asenna docsify-cli globaalisti: `npm install -g docsify-cli` - Asenna docsify-cli globaalisti: `npm install -g docsify-cli`
- Suorita reposta juurihakemistosta - Aja arkiston juurikansiosta
- Varmista, että `docs/_sidebar.md` tiedosto on olemassa - Tarkista, että `docs/_sidebar.md` on olemassa
### Kehitysympäristön vinkit ### Kehitysympäristön vinkkejä
- Käytä VS Codea Live Server -laajennuksella HTML-projekteissa - Käytä VS Codea Live Server -laajennuksella HTML-projekteille
- Asenna ESLint ja Prettier -laajennukset yhdenmukaiseen muotoiluun - Asenna ESLint- ja Prettier-laajennukset yhtenäiseen muotoiluun
- Käytä selaimen DevToolsia JavaScriptin virheenkorjaukseen - Käytä selaimen DevToolsia JavaScriptin virheenkorjaukseen
- Vue-projekteissa asenna Vue DevTools -selaimen laajennus - Vue-projekteissa asenna Vue DevTools -selaimien laajennus
### Suorituskyvyn huomioita ### Suorituskyvyn huomioita
- Suuri määrä käännettyjä tiedostoja (yli 50 kieltä) tekee kokonaishakkereista suuria - Suuri määrä käännettyjä tiedostoja (yli 50 kieltä) tekee täydellisistä klooneista suuria
- Käytä kevyttä kloonausta, jos työskentelet vain sisällön kanssa: `git clone --depth 1` - Käytä matalaa kloonausta, jos työskentelet vain sisällön parissa: `git clone --depth 1`
- Poissulje käännökset hauista, kun työskentelet englanninkielisen sisällön parissa - Sulje käännökset haut pois haettaessa englanninkielistä sisältöä
- Rakennusprosessit voivat olla hitaita ensimmäisellä kerralla (npm install, Vite build) - Build-prosessit voivat olla hitaita ensimmäisellä kerralla (npm install, Vite build)
## Turvallisuusnäkökohdat ## Turvallisuusnäkökohdat
### Ympäristömuuttujat ### Ympäristömuuttujat
- API-avaimia ei tulisi koskaan sitoa arkistoon - API-avaimia ei koskaan tule tallentaa arkistoon
- Käytä `.env`-tiedostoja (jo sisällytetty `.gitignore`-tiedostoon) - Käytä `.env`-tiedostoja (jo sisällytetty `.gitignoreen`)
- Dokumentoi tarvittavat ympäristömuuttujat projektien READMEihin - Dokumentoi tarvittavat ympäristömuuttujat projektien READMEissä
### Python-projektit ### Python-projektit
- Käytä virtuaaliympäristöjä: `python -m venv venv` - Käytä virtuaaliympäristöjä: `python -m venv venv`
- Pidä riippuvuudet ajan tasalla - Pidä riippuvuudet ajan tasalla
- GitHub-tokeneilla tulisi olla vain tarvittavat vähimmäisoikeudet - GitHub-tokenien käyttöoikeuksien tulisi olla mahdollisimman rajatut
### GitHub Models -käyttö ### GitHub Models -käyttöoikeudet
- Henkilökohtaiset käyttöoikeustokenit (PAT) vaaditaan GitHub Models -käyttöön - Henkilökohtaiset käyttöoikeustunnukset (PAT) vaaditaan GitHub Modelsille
- Tokeneita tulee säilyttää ympäristömuuttujina - Tunnukset tulee tallentaa ympäristömuuttujiin
- Älä koskaan sido tokeneita tai tunnuksia arkistoon - Älä koskaan tallenna tunnuksia tai tunnistetietoja arkistoon
## Lisätiedot ## Lisähuomiot
### Kohdeyleisö ### Kohdeyleisö
- Täysin aloittelijat web-kehityksessä - Täysin aloittelijat web-kehityksessä
- Opiskelijat ja itseopiskelijat - Opiskelijat ja itseopiskelijat
- Opettajat, jotka käyttävät opetussuunnitelmaa luokkahuoneissa - Opettajat, jotka käyttävät opetussuunnitelmaa luokkahuoneissa
- Sisältö on suunniteltu saavutettavaksi ja taitojen asteittaiseen kehittämiseen - Sisältö on suunniteltu saavutettavuus ja taitojen asteittaista kehittämistä varten
### Opetuksellinen filosofia ### Opetuksellinen filosofia
- Projektipohjainen oppimisen lähestymistapa - Projektipohjainen oppimismenetelmä
- Säännölliset tietovisat tiedon tarkistamiseksi - Usein toistuvat tietämyksen tarkistukset (kyselyt)
- Käytännön koodausharjoitukset - Käytännön koodausharjoitukset
- Todellisen maailman sovellusesimerkit - Todelliset sovellusesimerkit
- Perusteiden painotus ennen kehyksiä - Painotus perusteissa ennen kehyskirjastoja
### Arkiston ylläpito ### Arkiston ylläpito
- Aktiivinen oppijoiden ja osallistujien yhteisö - Aktiivinen oppijoiden ja sisällöntuottajien yhteisö
- Säännölliset päivitykset riippuvuuksiin ja sisältöön - Riittävä päivitys riippuvuuksiin ja sisältöihin
- Ongelmatilanteet ja keskustelut ylläpitäjien valvonnassa - Ongelmia ja keskusteluita valvovat ylläpitäjät
- Käännöspäivitykset automatisoitu GitHub Actionsin avulla - Käännöspäivitykset automatisoitu GitHub Actionsien avulla
### Aiheeseen liittyvät resurssit ### Aiheeseen liittyvät resurssit
- [Microsoft Learn -moduulit](https://docs.microsoft.com/learn/) - [Microsoft Learn -moduulit](https://docs.microsoft.com/learn/)
- [Student Hubin resurssit](https://docs.microsoft.com/learn/student-hub/) - [Student Hub -resurssit](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) suositellaan oppijoille - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) suositellaan oppijoille
- Lisäkursseja: Generative AI, Data Science, ML, IoT -opetussuunnitelmia saatavilla - Lisäkursseja: Generative 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: Yksityiskohtaiset ohjeet yksittäisille projekteille löytyvät näistä README-tiedostoista:
- `quiz-app/README.md` - Vue 3 tietovisasovellus - `quiz-app/README.md` - Vue 3 -kyselysovellus
- `7-bank-project/README.md` - Pankkisovellus autentikoinnilla - `7-bank-project/README.md` - Pankkisovellus todennuksella
- `5-browser-extension/README.md` - Selaimen laajennuksen kehitys - `5-browser-extension/README.md` - Selainlaajennuskehitys
- `6-space-game/README.md` - Canvas-pohjainen peli - `6-space-game/README.md` - Canvas-pohjainen pelikehitys
- `9-chat-project/README.md` - Tekoälyllä toimivan chat-avustajan projekti - `9-chat-project/README.md` - AI-chat-avustajaprojekti
### Monorepo-rakenne ### Monorepokoko
Vaikka tämä ei ole perinteinen monorepo, tämä arkisto sisältää useita itsenäisiä projekteja: Vaikka kyseessä ei ole perinteinen monorepo, tämä arkisto sisältää useita riippumattomia projekteja:
- Jokainen oppitunti on itsenäinen - Jokainen oppitunti on itsenäinen
- Projektit eivät jaa riippuvuuksia - Projektit eivät jaa riippuvuuksia
- Työskentele yksittäisten projektien parissa vaikuttamatta muihin - Työskentele yksittäisten projektien parissa ilman vaikutusta muihin
- Kloonaa koko arkisto saadaksesi koko opetussuunnitelman kokemuksen - Kloonaa koko arkisto saadaksesi koko opetussuunnitelman kokemuksen
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Vastuuvapauslauseke**: **Vastuuvapauslauseke**:
Tämä asiakirja on käännetty käyttäen tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, on hyvä huomioida, että automaattiset käännökset saattavat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäiskielellä tulee pitää auktoritatiivisena lähteenä. Tärkeissä asioissa suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa mistään väärinymmärryksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä. 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, ota huomioon, että automaattiset käännökset saattavat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäiskielellä tulee pitää virallisena lähteenä. Tärkeiden tietojen osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa mahdollisista väärinymmärryksistä tai tulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -10,203 +10,213 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Verkkokehitys aloittelijoille - Opetussuunnitelma # Verkkokehitys aloittelijoille opetussuunnitelma
Opi verkkokehityksen perusteet kattavassa 12 viikon kurssissamme, jonka järjestävät Microsoft Cloud Advocates -tiimin jäsenet. Jokainen 24 oppitunnista sukeltaa JavaScriptiin, CSS:ään ja HTML:ään käytännön projektien, kuten terrarion, selaimen laajennusten ja avaruuspeliin, kautta. Osallistu tietokilpailuihin, keskusteluihin ja käytännön tehtäviin. Paranna taitojasi ja optimoi oppimisesi tehokkaalla projektipohjaisella opetuksellamme. Aloita koodausmatkasi tänään! Opi verkkokehityksen perusteet Microsoft Cloud Advocatesin 12 viikon kattavan kurssin avulla. Jokaisessa 24 oppitunnissa perehdytään JavaScriptiin, CSS:ään ja HTML:ään käytännön projekteilla, kuten terrarioilla, selainlaajennuksilla ja avaruuspeleillä. Osallistu tietovisoihin, keskusteluihin ja käytännön tehtäviin. Kehitä taitojasi ja optimoi tiedon omaksumisesi tehokkaan projektipohjaisen opetustapamme avulla. Aloita koodausmatkasi tänään!
Liity Azure AI Foundry Discord -yhteisöön Liity Azure AI Foundry Discord -yhteisöön
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Noudata näitä ohjeita aloittaaksesi näiden resurssien käytön: Seuraa näitä vaiheita aloittaaksesi näiden resurssien käytön:
1. **Forkkaa Repository**: 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) 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 Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 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 ### 🌐 Monikielinen tuki
#### Tuettu GitHub Actionin kautta (Automaattinen & Aina ajan tasalla) #### Tuettu GitHub Actionin kautta (automaattinen ja aina ajan tasalla)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START --> <!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabia](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgaria](../bg/README.md) | [Burma (Myanmar)](../my/README.md) | [Kiina (yksinkertaistettu)](../zh-CN/README.md) | [Kiina (perinteinen, Hongkong)](../zh-HK/README.md) | [Kiina (perinteinen, Macao)](../zh-MO/README.md) | [Kiina (perinteinen, Taiwan)](../zh-TW/README.md) | [Kroatia](../hr/README.md) | [Tsekki](../cs/README.md) | [Tanska](../da/README.md) | [Hollanti](../nl/README.md) | [Viro](../et/README.md) | [Suomi](./README.md) | [Ranska](../fr/README.md) | [Saksa](../de/README.md) | [Kreikka](../el/README.md) | [Heprea](../he/README.md) | [Hindi](../hi/README.md) | [Unkari](../hu/README.md) | [Indonesia](../id/README.md) | [Italia](../it/README.md) | [Japani](../ja/README.md) | [Kannada](../kn/README.md) | [Korea](../ko/README.md) | [Liettua](../lt/README.md) | [Malaiji](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norja](../no/README.md) | [Persia (Farsi)](../fa/README.md) | [Puola](../pl/README.md) | [Portugali (Brasilia)](../pt-BR/README.md) | [Portugali (Portugali)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romania](../ro/README.md) | [Venäjä](../ru/README.md) | [Serbia (kyrillinen)](../sr/README.md) | [Slovakki](../sk/README.md) | [Sloveeni](../sl/README.md) | [Espanja](../es/README.md) | [Swahili](../sw/README.md) | [Ruotsi](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkki](../tr/README.md) | [Ukraina](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnam](../vi/README.md) [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](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](./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)
> **Haluatko Kloonaa Paikallisesti?** > **Haluatko kloonata paikallisesti?**
>
> Tämä arkisto sisältää yli 50 kielen käännöksiä, jotka lisäävät huomattavasti lataustiedoston kokoa. Jos haluat kloonata ilman käännöksiä, käytä sparse checkout:a: > Tämä repositorio sisältää yli 50 kielen käännökset, mikä lisää merkittävästi latauskokoa. Jos haluat kloonata ilman käännöksiä, käytä sparse checkoutia:
>
> **Bash / macOS / Linux:**
> ```bash > ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners > cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ``` > ```
> Tämä antaa sinulle kaiken tarvittavan kurssin suorittamiseen paljon nopeammalla latauksella. >
> **CMD (Windows):**
> ```cmd
> 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"
> ```
>
> Näin saat kaiken tarvitsemasi kurssin suorittamiseen nopeammalla latauksella.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END --> <!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Jos haluat lisätä lisää käännettyjä kieliä, tuetut kielet löytyvät [täältä](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** **Jos haluat, että muita kieliä tuetaan, ne löytyvät listattuna [täältä](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=Open%20in%20Visual%20Studio%20Code&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=Avaa%20Visual%20Studio%20Codessa&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _Oletko opiskelija?_ #### 🧑‍🎓 _Oletko opiskelija?_
Vieraile [**Student Hub -sivulla**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), josta löydät aloittelijan resurssit, opiskelijapaketit ja jopa tapoja saada ilmainen sertifikaattivoucher. Tämä on sivu, jonka haluat tallentaa kirjanmerkkeihin ja tarkistaa silloin tällöin, sillä sisältömme vaihtuu kuukausittain. Vieraile [**Opiskelijakeskussivulla**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), josta löydät aloittelijoille tarkoitettuja materiaaleja, opiskelijapaketteja ja jopa tapoja saada ilmainen todistusvakuuttaja. Tämä sivu kannattaa lisätä kirjanmerkkeihin ja tarkistaa säännöllisesti, sillä päivitätämme sisältöä kuukausittain.
### 📣 Ilmoitus - Uudet GitHub Copilot Agent -tilahaasteet suoritettavaksi! ### 📣 Ilmoitus Uudet GitHub Copilot Agent -tilahaasteet suoritettavaksi!
Uusi haaste lisätty, etsi "GitHub Copilot Agent Challenge 🚀" useimmista luvuista. Tämä on uusi haaste sinulle, joka suoritetaan käyttämällä GitHub Copilotia ja Agent-tilaa. Jos et ole käyttänyt Agent-tilaa aiemmin, se pystyy paitsi tuottamaan tekstiä, myös luomaan ja muokkaamaan tiedostoja, suorittamaan komentoja ja muuta. Uusi haaste lisätty, etsi "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 käyttänyt Agent-tilaa aiemmin, se ei vain luo tekstiä, vaan voi myös luoda ja muokata tiedostoja, suorittaa komentoja ja muuta.
### 📣 Ilmoitus - _Uusi Generatiivisen tekoälyn projekti rakennettavaksi_ ### 📣 Ilmoitus _Uusi Generatiivisen tekoälyn projekti_
Uusi tekoälyavustajaprojekti juuri lisätty, tutustu [projektiin](./9-chat-project/README.md) Uusi tekoälyavustajaprojekti lisätty, tutustu projektiin [tästä](./9-chat-project/README.md)
### 📣 Ilmoitus - _Uusi opetussuunnitelma_ Generatiivisesta tekoälystä JavaScriptille juuri julkaistu ### 📣 Ilmoitus _Uusi Generatiivisen tekoälyn opetussuunnitelma JavaScriptille julkaistu_
Älä jää paitsi uudesta Generative AI -opetussuunnitelmastamme! Älä missaa uutta Generatiivisen tekoälyn opetussuunnitelmaamme!
Aloita osoitteessa [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)! Aloita osoitteessa [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)!
![Tausta](../../translated_images/fi/background.148a8d43afde5730.webp) ![Background](../../translated_images/fi/background.148a8d43afde5730.webp)
- Oppitunteja kaikesta alkeista RAG:iin asti. - Oppitunnit kattavat kaiken perusasioista RAG:iin.
- Ole vuorovaikutuksessa historiallisten hahmojen kanssa GenAI:n ja kumppanisovelluksemme avulla. - Keskustele historiallisten hahmojen kanssa GenAI:n ja sovelluksemme avulla.
- Hauska ja mukaansatempaava kertomus, matkustat ajassa! - Hauska ja mukaansatempaava kertomus, jossa matkustat ajassa!
![hahmo](../../translated_images/fi/character.5c0dd8e067ffd693.webp) ![character](../../translated_images/fi/character.5c0dd8e067ffd693.webp)
Jokaisessa oppitunnissa on suoritettava tehtävä, tietotarkistus ja haaste, jotka ohjaavat sinua oppimaan aiheista kuten: Jokaisessa oppitunnissa on suoritettava tehtävä, tiedon tarkistus ja haaste, jotka ohjaavat sinua oppimaan mm.:
- Kehote ja kehotteen suunnittelu - Käskyttäminen ja kehotteiden suunnittelu
- Tekstin ja kuvan sovellustuotanto - Tekstin ja kuvan sovellusgenerointi
- Hakusovellukset - Hakusovellukset
Aloita osoitteessa [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)! Aloita osoitteessa [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)
## 🌱 Aloittaminen ## 🌱 Aloita
> **Opettajat**, olemme [sisällyttäneet joitain ehdotuksia](for-teachers.md) tämän opetussuunnitelman käytöstä. Haluaisimme saada palautettanne [keskustelufoorumissamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! > **Opettajat**, olemme [sisällyttäneet joitain ehdotuksia](for-teachers.md) opetussuunnitelman käyttöön. Haluaisimme kuulla palautettanne [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Oppijat](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, aloita jokainen oppitunti ennakkotietovisalla ja jatka sitten luentomateriaalin lukemiseen, erilaisten aktiviteettien suorittamiseen ja ymmärryksesi tarkistamiseen luennon jälkeisellä visalla. **[Oppijat](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, aloita jokainen oppitunti esiluennon tietovisalla ja jatka lukemalla luentomateriaali, suorittamalla erilaisia aktiviteetteja ja testaa ymmärryksesi jälkiluennon tietovisalla.
Parantaaksesi oppimiskokemustasi, ota yhteyttä muihin oppijoihin työskennelläksesi projekteissa yhdessä! Keskusteluja kannustetaan [keskustelufoorumissamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), jossa moderaattoritiimimme on valmiina vastaamaan kysymyksiisi. Paranna oppimiskokemustasi tekemällä projekteja yhdessä muiden kanssa! Keskustelua suositellaan [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), jossa moderaattoritiimimme on käytettävissä vastaamaan kysymyksiisi.
Jatka opiskelua tutustumalla suositelloimme [Microsoft Learning -materiaaleihin](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon). Koulutuksesi tueksi suosittelemme tutustumaan [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) -sivustoon lisämateriaalien saamiseksi.
### 📋 Ympäristön asettaminen ### 📋 Ympäristön käyttöönotto
Tässä opetussuunnitelmassa on kehitysympäristö valmiina käyttöön! Alkaessasi voit valita suorittaa opetussuunnitelman [Codespacessa](https://github.com/features/codespaces/) (selainsovellus, johon ei tarvitse asentaa mitään) tai paikallisesti tietokoneella tekstieditorilla, kuten [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). Tässä opetussuunnitelmassa on valmis kehitysympäristö! Voit aloittaa käyttämällä kurssia [Codespacessa](https://github.com/features/codespaces/) (_selaimessa toimiva, ilman asennuksia toimiva ympäristö_) tai paikallisesti tietokoneellasi tekstieditorilla, kuten [Visual Studio Codella](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Luo oma repositoriosi #### Luo oma repositoriosi
Jotta voit helposti tallentaa työsi, on suositeltavaa luoda oma kopiosi tästä repositoriosta. Voit tehdä tämän napsauttamalla sivun yläreunassa olevaa **Use this template** -painiketta. Tämä luo uuden repositorion GitHub-tilillesi opetussuunnitelman kopion kera. Jotta voit helposti tallentaa työsi, suosittelemme, että luot oman kopion tästä repositoriosta. Voit tehdä tämän klikkaamalla sivun yläosassa olevaa **Use this template** -painiketta. Tämä luo uuden repositorion GitHub-tilillesi kopiona opetussuunnitelmasta.
Noudata näitä ohjeita: Noudata näitä ohjeita:
1. **Forkkaa Repository**: Klikkaa "Fork" -painiketta tämän sivun oikeassa yläkulmassa. 1. **Forkkaa repositorio**: Klikkaa sivun oikeassa yläkulmassa "Fork" -painiketta.
2. **Kloonaa Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **Kloonaa repositorio**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Suorita opetussuunnitelma Codespacessa #### Opetussuunnitelman suorittaminen Codespacessa
Oman kopiosi repositoriosta, jonka loit, klikkaa **Code** -painiketta ja valitse **Open with Codespaces**. Tämä luo uuden Codespacen, jossa voit työskennellä. Omaasi luodussa kopiossa klikkaa **Code** -painiketta ja valitse **Open with Codespaces**. Tämä luo sinulle uuden Codespace-ympäristön työskentelyä varten.
![Codespace](../../translated_images/fi/createcodespace.0238bbf4d7a8d955.webp) ![Codespace](../../translated_images/fi/createcodespace.0238bbf4d7a8d955.webp)
#### Suorita opetussuunnitelma paikallisesti tietokoneellasi #### Opetussuunnitelman suorittaminen paikallisesti tietokoneellasi
Suorittaaksesi opetussuunnitelman paikallisesti tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, [Ohjelmointikielien ja työkalujen perusasioiden esittely](../../1-getting-started-lessons/1-intro-to-programming-languages), opastaa sinua erilaisten näiden työkalujen vaihtoehtojen valinnassa.
Suosituksemme on käyttää tekstieditorina [Visual Studio Codea](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon), jossa on myös sisäänrakennettu [Komentorivi](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Voit ladata Visual Studio Coden [tästä](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). Kurssin ajamiseen 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), esittelee eri vaihtoehtoja näille työkaluilla, jotta voit valita sinulle parhaiten sopivat.
1. Kloonaa oma repositoriosi tietokoneellesi. Voit tehdä tämän napsauttamalla **Code** -painiketta ja kopioimalla URL-osoitteen: Suosittelemme käyttämään tekstieditorina [Visual Studio Codea](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon), jossa on myös sisäänrakennettu [Pääte](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 varastosi tietokoneellesi. Voit tehdä tämän napsauttamalla **Code**-painiketta ja kopioimalla URL-osoitteen:
[CodeSpace](./images/createcodespace.png) [CodeSpace](./images/createcodespace.png)
Avaa sitten [Terminaali](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Codessa](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ja suorita seuraava komento korvaten `<your-repository-url>` juuri kopioimallasi URL-osoitteella:
Sitten avaa [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Codessa](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ja suorita seuraava komento, korvaten `<your-repository-url>` juuri kopioimallasi URL-osoitteella:
```bash ```bash
git clone <your-repository-url> git clone <your-repository-url>
``` ```
2. Avaa kansio Visual Studio Codessa. Voit tehdä tämän napsauttamalla **Tiedosto** > **Avaa kansio** ja valitsemalla juuri kloonaamasi kansion. 2. Avaa kansio Visual Studio Codessa. Voit tehdä tämän napsauttamalla **File** > **Open Folder** ja valitsemalla juuri kloonaamasi kansion.
> Suositellut Visual Studio Code -laajennukset: > Suositellut Visual Studio Code -laajennukset:
> >
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML-sivujen esikatseluun Visual Studio Codessa > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - esikatsella HTML-sivuja Visual Studio Codessa
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - koodin kirjoittamisen nopeuttamiseen > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - auttaa sinua kirjoittamaan koodia nopeammin
## 📂 Jokainen oppitunti sisältää: ## 📂 Jokainen oppitunti sisältää:
- valinnaisen luonnosmuistiinpanon - valinnaisen luonnosmuistiinpanon
- valinnaisen lisävideon - valinnaisen lisävideon
- ennakkolämmittelykyselyn - lämmittelykyselyn ennen oppituntia
- kirjoitetun oppitunnin - kirjallisen oppitunnin
- projektipohjaisissa oppitunneissa vaiheittaiset ohjeet projektin rakentamiseen - projektipohjaisissa oppitunneissa vaiheittaiset ohjeet projektin rakentamiseen
- tietovarmistukset - tietovisakokeet
- haasteen - haasteen
- lisälukemista - lisälukemista
- tehtävän - tehtävän
- [oppitunnin jälkeisen kyselyn](https://ff-quizzes.netlify.app/web/) - [oppitunnin jälkeisen tietovisan](https://ff-quizzes.netlify.app/web/)
> **Huomautus kyselyistä**: Kaikki kyselyt on koottu Quiz-app-kansioon, yhteensä 48 kyselyä, joissa kullakin on kolme kysymystä. Ne ovat saatavilla [tässä](https://ff-quizzes.netlify.app/web/). Kyselysovelluksen voi suorittaa paikallisesti tai ottaa käyttöön Azureen; noudata `quiz-app`-kansion ohjeita. > **Muistutus tietovisoista**: Kaikki tietovisat löytyvät Quiz-app-kansiosta, yhteensä 48 tietovisaa, joissa jokaisessa on kolme kysymystä. Ne ovat saatavilla [tässä](https://ff-quizzes.netlify.app/web/). Tietovisasovellus voidaan suorittaa paikallisesti tai ottaa käyttöön Azureen; seuraa ohjeita `quiz-app`-kansiossa.
## 🗃️ Oppitunnit ## 🗃️ Oppitunnit
| | Projektin nimi | Opitut käsitteet | Oppimistavoitteet | Linkitetty oppitunti | Tekijä | | | Projektin nimi | Opitut käsitteet | Oppimistavoitteet | Linkitetty oppitunti | Tekijä |
| :-: | :--------------------------------------------------------: | :--------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | | :-: | :-------------------------------------------------------: | :--------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Aloittaminen | Johdatus ohjelmointiin ja työkaluihin | Opit ohjelmointikielten perustan ja ohjelmistot, jotka auttavat ammattilaiskehittäjiä työssään | [Johdatus ohjelmointikieliin ja työkaluihin](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | | 01 | Aloittaminen | Johdatus ohjelmointiin ja työkaluihin | Opit useimpien ohjelmointikielten perusteet ja ohjelmistot, jotka auttavat ammattilaiskehittäjiä työssään | [Johdatus ohjelmointikieliin ja työkaluihin](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Aloittaminen | GitHubin perusteet, tiimityöskentely | Kuinka käyttää GitHubia projektissasi ja tehdä yhteistyötä muiden kanssa koodipohjassa | [Johdatus GitHubiin](./1-getting-started-lessons/2-github-basics/README.md) | Floor | | 02 | Aloittaminen | GitHubin perusteet, mukaan lukien tiimityö | Kuinka käyttää GitHubia projektissasi, miten tehdä yhteistyötä muiden kanssa koodipohjassa | [Johdatus GitHubiin](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Aloittaminen | Saavutettavuus | Opit verkkosaavutettavuuden perusteet | [Saavutettavuuden perusteet](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 03 | Aloittaminen | Saavutettavuus | Opit verkkosaavutettavuuden perusteet | [Saavutettavuuden perusteet](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Perusteet | JavaScriptin tietotyypit | JavaScriptin tietotyyppien perusteet | [Tietotyypit](./2-js-basics/1-data-types/README.md) | Jasmine | | 04 | JS Perusteet | JavaScriptin tietotyypit | JavaScriptin tietotyyppien perusteet | [Tietotyypit](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Perusteet | Funktiot ja metodit | Opit funktioista ja metodeista sovelluksen logiikan hallinnassa | [Funktiot ja metodit](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher | | 05 | JS Perusteet | Funktiot ja metodit | Opit funktioista ja metodeista sovelluksen loogisen virran hallintaan | [Funktiot ja metodit](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher |
| 06 | JS Perusteet | Päätöksenteko JS:llä | Opit luomaan olosuhteita koodissasi päätöksentekomenetelmien avulla | [Päätöksenteko](./2-js-basics/3-making-decisions/README.md) | Jasmine | | 06 | JS Perusteet | Päätöksenteko JavaScriptillä | Opit luomaan ehtoja koodissasi päätöksentekomenetelminä | [Päätöksenteko](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Perusteet | Taulukot ja silmukat | Työskentele tietojen kanssa taulukoiden ja silmukoiden avulla JavaScriptissä | [Taulukot ja silmukat](./2-js-basics/4-arrays-loops/README.md) | Jasmine | | 07 | JS Perusteet | Taulukot ja silmukat | Työskentele tietojen kanssa taulukoiden ja silmukoiden avulla JavaScriptissä | [Taulukot ja silmukat](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML käytännössä | Rakenna HTML luodaksesi online-terraariumin, keskittyen asettelun tekemiseen | [Johdatus HTML:ään](./3-terrarium/1-intro-to-html/README.md) | Jen | | 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML käytännössä | Rakenna HTML verkossa toimivan terrariumin luomiseen 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 tietoystävän terraariumin tyylittelyä varten, keskittyen CSS:n perusteisiin mukaan lukien responsiivisuus | [Johdatus CSS:ään](./3-terrarium/2-intro-to-css/README.md) | Jen | | 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS käytännössä | Rakenna CSS tyylitämään verkossa olevaa terrariumia, keskittyen CSS:n perusteisiin ja sivun responsiivisuuden tekemiseen | [Johdatus CSS:ään](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript sulkeet, DOM-manipulointi | Rakenna JavaScript, joka mahdollistaa terraariumin toiminnan drag/drop-käyttöliittymänä, keskittyen sulkeisiin ja DOM-manipulointiin | [JavaScript sulkeet ja DOM-manipulointi](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | | 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript-sulkeet, DOM-manipulointi | Rakenna JavaScript, joka mahdollistaa terrariumin toiminnan drag & drop -käyttöliittymänä, keskittyen sulkeisiin ja DOM-manipulointiin | [JavaScript-sulkeet, DOM-manipulointi](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Kirjoituspelin rakentaminen | Opit käyttämään näppäimistötapahtumia JavaScript-sovelluksesi logiikan ohjaamiseen | [Tapahtumapohjainen ohjelmointi](./4-typing-game/typing-game/README.md) | Christopher | | 11 | [Typing Game](./4-typing-game/solution/README.md) | Rakennetaan kirjoituspeli | Opit käyttämään näppäimistötapahtumia JavaScript-sovelluksesi logiikan ohjaamiseen | [Tapahtumapohjainen ohjelmointi](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Selainten toiminta | Opit miten selaimet toimivat, niiden historian ja miten rakentaa ensimmäiset elementit selainlaajennukseen | [Tietoa selaimista](./5-browser-extension/1-about-browsers/README.md) | Jen | | 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Työskentely selainten kanssa | Opi miten selaimet toimivat, niiden historiasta ja miten rakennetaan selaimen laajennuksen ensimmäiset osat | [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 | Rakenna selainlaajennukseesi JavaScript-elementit API-kutsuihin paikallisesti tallennettujen muuttujien avulla | [APIt, lomakkeet ja paikallinen tallennus](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | | 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Lomakkeen rakentaminen, API-kutsu ja muuttujien tallennus paikalliseen tallennustilaan | Rakenna JavaScript-selaimen laajennuksen osat, jotka käyttävät API-kutsua paikalliseen tallennustilaan tallennettujen muuttujien avulla | [API:t, 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) | Selaintaustaprosessit, verkkosuorituskyky | Käytä selaimen taustaprosesseja hallitsemaan laajennuksen kuvaketta; opi verkkosuorituskyvystä ja optimointikeinoista | [Taustatehtävät ja suorituskyky](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | | 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Taustaprosessit selaimessa, web-suorituskyky | Käytä selaimen taustaprosesseja laajennuksen kuvakkeen hallintaan; opi web-suorituskyvystä ja joistakin optimoinneista | [Taustatehtävät ja suorituskyky](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Edistyneempi pelinkehitys JavaScriptillä | Opit periytymisestä luokkien ja komposition avulla sekä Pub/Sub-kuvioista valmistautuessasi pelin rakentamiseen | [Johdatus edistyneeseen pelinkehitykseen](./6-space-game/1-introduction/README.md) | Chris | | 15 | [Space Game](./6-space-game/solution/README.md) | Edistyneempi pelikehitys JavaScriptillä | Opit perinnöstä käyttäen sekä luokkia että koostetta sekä julkaisija-tilaaja-mallia pelin rakentamisen valmisteluna | [Johdatus edistyneeseen pelikehitykseen](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Piirtäminen kankaalle | Opit Canvas API:stä, jota käytetään elementtien piirtämiseen näytölle | [Piirtäminen kankaalle](./6-space-game/2-drawing-to-canvas/README.md) | Chris | | 16 | [Space Game](./6-space-game/solution/README.md) | Piirtäminen canvas-elementtiin | Opit Canvas API:n, jota käytetään elementtien piirtämiseen näyttöön | [Piirtäminen canvas-elementtiin](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Elementtien liikuttaminen näytöllä | Tutustu, miten elementit saavat liikkeen käyttäen karteesisia koordinaatteja ja Canvas API:ta | [Elementtien liikuttaminen](./6-space-game/3-moving-elements-around/README.md) | Chris | | 17 | [Space Game](./6-space-game/solution/README.md) | Elementtien liikuttaminen näytöllä | Tutustu miten elementeille saadaan liikettä kartesiakkoordinaattien ja Canvas API:n 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, että elementit törmäävät ja reagoivat toisiinsa näppäinyhdistelmillä ja tarjoavat jäähdytystoiminnon pelin suorituskyvyn turvaamiseksi | [Törmäyksentunnistus](./6-space-game/4-collision-detection/README.md) | Chris | | 18 | [Space Game](./6-space-game/solution/README.md) | Törmäyksentunnistus | Tee elementtien törmäyksiä ja reagoi niihin käyttämällä näppäimistön painalluksia ja tarjoa cooldown-toiminto pelin suorituskyvyn turvaamiseksi | [Törmäyksentunnistus](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Pisteiden laskeminen | Tee matemaattisia laskelmia pelin tilan ja suorituksen perusteella | [Pisteiden laskeminen](./6-space-game/5-keeping-score/README.md) | Chris | | 19 | [Space Game](./6-space-game/solution/README.md) | Pisteiden laskeminen | Suorita laskelmia pelin tilan ja suorituskyvyn pohjalta | [Pisteiden laskeminen](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Pelin lopettaminen ja uudelleenkäynnistys | Opit pelin lopettamisesta ja uudelleenkäynnistämisestä, mukaan lukien resurssien siivous ja muuttujien arvojen nollaus | [Lopetusehto](./6-space-game/6-end-condition/README.md) | Chris | | 20 | [Space Game](./6-space-game/solution/README.md) | Pelin lopettaminen ja uudelleenkäynnistäminen | Opit pelin lopettamisesta ja uudelleenkäynnistämisestä, mukaan lukien resurssien siivous ja muuttujien arvon nollaaminen | [Lopetusehto](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Pankkisovellus](./7-bank-project/solution/README.md) | HTML-mallit ja reitit web-sovelluksessa | Opit luomaan monisivuisen verkkosivuston arkkitehtuurin runkoa reitityksen ja HTML-mallien avulla | [HTML-mallit ja reitit](./7-bank-project/1-template-route/README.md) | Yohan | | 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-mallipohjat ja reitit web-sovelluksessa | Opit luomaan monisivuisen verkkosivuston arkkitehtuurin rungon reitityksen ja HTML-mallipohjien avulla | [HTML-mallipohjat ja reitit](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Pankkisovellus](./7-bank-project/solution/README.md) | Kirjautumis- ja rekisteröitymislomakkeen rakentaminen | Opit lomakkeiden rakentamisesta ja validointirutiinien käsittelystä | [Lomakkeet](./7-bank-project/2-forms/README.md) | Yohan | | 22 | [Banking App](./7-bank-project/solution/README.md) | Kirjautumis- ja rekisteröintilomakkeen rakentaminen | Opit lomakkeiden rakentamisesta ja validointirutiinien käsittelystä | [Lomakkeet](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Pankkisovellus](./7-bank-project/solution/README.md) | Datan hakeminen ja käyttö | Kuinka data virtaa sovellukseesi, miten hakea, tallentaa ja poistaa sitä | [Data](./7-bank-project/3-data/README.md) | Yohan | | 23 | [Banking App](./7-bank-project/solution/README.md) | Tietojen hakemisen ja käyttämisen menetelmät | Miten tiedot virtaavat sovellukseesi ja siitä ulos, miten hakea, tallentaa ja poistaa niitä | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Pankkisovellus](./7-bank-project/solution/README.md) | Tilanhallinnan käsitteet | Opit, miten sovelluksesi säilyttää tilan ja miten hallita sitä ohjelmallisesti | [Tilanhallinta](./7-bank-project/4-state-management/README.md) | Yohan | | 24 | [Banking App](./7-bank-project/solution/README.md) | Tilanhallinnan käsitteet | Opit miten sovelluksesi säilyttää tilan ja miten hallita sitä ohjelmallisesti | [Tilanhallinta](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Selain/VScode-koodi](../../8-code-editor) | Työskentely VScoden kanssa | Opit käyttämään koodieditoria | [Käytä VScode-koodieditoria](./8-code-editor/1-using-a-code-editor/README.md) | Chris | | 25 | [Browser/VScode Code](../../8-code-editor) | Työskentely VScoden kanssa | Opit käyttämään koodieditoria | [Käytä VScode-koodieditoria](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Työskentely tekoälyn kanssa | Opit rakentamaan oman tekoälyavustajan | [AI-avustajaprojekti](./9-chat-project/README.md) | Chris | | 26 | [AI Assistants](./9-chat-project/README.md) | Työskentely tekoälyn kanssa | Opit rakentamaan oman tekoälyavustajan | [Tekoälyavustajan projekti](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogiikka ## 🏫 Pedagogiikka
Oppimateriaalimme on suunniteltu kahden keskeisen pedagogisen periaatteen pohjalta: Opetussuunnitelmamme on suunniteltu kahden keskeisen pedagogisen periaatteen mukaisesti:
* projektioppiminen * projektipohjainen oppiminen
* usein toistuvat kyselyt * usein toistuvat tietovisat
Ohjelma opettaa JavaScriptin, HTML:n ja CSS:n perusteet sekä nykyaikaisten web-kehittäjien käyttämiä työkaluja ja tekniikoita. Oppilailla on mahdollisuus kehittää käytännön taitoja rakentamalla kirjoituspeli, virtuaaliterraario, ympäristöystävällinen selainlaajennus, avaruustyyppinen peli ja liiketoiminta-pankkisovellus. Sarjan lopussa opiskelijoilla on vankka ymmärrys web-kehityksestä. Ohjelma opettaa JavaScriptin, HTML:n ja CSS:n perusasiat sekä viimeisimmät työkalut ja tekniikat, joita nykypäivän web-kehittäjät käyttävät. Opiskelijat saavat käytännön kokemusta rakentamalla kirjoituspelin, virtuaalisen terrariumin, ympäristöystävällisen selainlaajennuksen, avaruustyyppisen pelin ja yrityksille tarkoitetun pankkisovelluksen. Sarjan lopussa opiskelijat ovat saaneet vahvan ymmärryksen web-kehityksestä.
> 🎓 Voit suorittaa tämän oppilaitoksen ensimmäiset oppitunnit [Oppimispolku](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)-muodossa Microsoft Learnissa! > 🎓 Voit suorittaa tämän opetussuunnitelman ensimmäiset oppitunnit Microsoft Learnin [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) -kurssina!
Varmistamalla sisällön yhteensopivuuden projektien kanssa prosessi tulee opiskelijoille mielekkäämmäksi ja käsitteiden omaksuminen tehostuu. Kirjoitimme myös useita aloitusoppitunteja JavaScript-perusteista käynnistämään kokonaisuuden, jotka on yhdistetty videosarjaan "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", joiden tekijät osallistuivat tähän oppimateriaalin kokoamiseen. Varmistamalla, että sisältö vastaa projekteja, prosessi on opiskelijoille kiinnostavampi ja käsitteiden oppiminen parantuu. Kirjoitimme myös useita JavaScriptin perusteiden aloitusoppitunteja käsitteiden esittelemiseksi, parina videona "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" -videosarjasta, jonka osan tekijöistä osallistui tähän opetussuunnitelmaan.
Lisäksi aloituskysely luokkahuoneen edellä asettaa opiskelijan tavoitteen aiheeseen tutustumiselle, ja luokan jälkeinen toinen kysely tukee oppien säilymistä. Tämä oppimateriaali on suunniteltu joustavaksi ja hauskaksi, ja se voidaan suorittaa kokonaisuudessaan tai osittain. Projektit alkavat pienestä ja monimutkaistuvat viimeistään 12 viikon syklin loppuun mennessä. Lisäksi ennen luokkaa suoritettava pieni tietovisa asettaa opiskelijan tavoitteeksi aiheen oppimisen, ja toinen tietovisa luokan jälkeen varmistaa syvemmän oppimisen. Tämä opetussuunnitelma on suunniteltu joustavaksi ja hauskaksi, ja se voidaan suorittaa kokonaan tai osittain. Projektit alkavat pieninä ja kasvavat monimutkaisemmiksi 12 viikon jakson loppua kohden.
Vaikka olemme tietoisesti välttäneet JavaScript-kehysten käyttöönottoa keskittyäksemme web-kehittäjän perusvalmiuksiin ennen kehysten omaksumista, hyvä seuraava askel tämän oppimateriaalin suorittamisen jälkeen on oppia Node.js:stä toisen videosarjan avulla: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". Vaikka olemme tietoisesti välttäneet JavaScript-kehysten esittelyä keskittyäksemme perusosaamiseen web-kehittäjänä ennen kehysten käyttöönottoa, hyvä seuraava askel tämän opetussuunnitelman jälkeen olisi Node.js:n opettelu toisen videosarjan avulla: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Tutustu myös [käytösohjeisiimme](CODE_OF_CONDUCT.md) ja [osallistumisohjeisiin](CONTRIBUTING.md). Otamme mielellämme vastaan rakentavaa palautettasi! > Tutustu [käyttäytymissääntöihimme](CODE_OF_CONDUCT.md) ja [osallistumisohjeisiin](CONTRIBUTING.md). Otamme mielellämme vastaan rakentavaa palautettasi!
## 🧭 Offline-käyttö ## 🧭 Offline-käyttö
Voit käyttää tätä dokumentaatiota offline-tilassa käyttämällä [Docsifya](https://docsify.js.org/#/). Haarauta tämä repo, [asenna Docsify](https://docsify.js.org/#/quickstart) paikallisesti ja kirjoita tämän repokansion juurikansiossa komento `docsify serve`. Verkkosivusto toimii portissa 3000 paikallisessa koneessasi: `localhost:3000`. Voit käyttää tätä dokumentaatiota offline-tilassa käyttämällä [Docsify](https://docsify.js.org/#/). Haarauta tämä repo, asenna [Docsify](https://docsify.js.org/#/quickstart) paikalliselle koneellesi ja kirjoita tämän reposton juurikansiossa `docsify serve`. Verkkosivusto palvelee portissa 3000 paikallisessa isäntäkoneessasi: `localhost:3000`.
## 📘 PDF ## 📘 PDF
Kaikkien oppituntien PDF löytyy täältä [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Kaikkien oppituntien PDF löytyy [täältä](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Muut kurssit ## 🎒 Muut kurssit
Tiimimme tuottaa muitakin kursseja! Tutustu:
Tiimimme tuottaa myös muita kursseja! Tutustu:
<!-- CO-OP TRANSLATOR OTHER COURSES START --> <!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain ### LangChain
@ -223,7 +233,7 @@ Tiimimme tuottaa muitakin kursseja! Tutustu:
--- ---
### Generatiivisen tekoälyn sarja ### Generative AI Series
[![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 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 (.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 (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 +241,7 @@ Tiimimme tuottaa muitakin kursseja! Tutustu:
--- ---
### Perusteet ### Core Learning
[![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) [![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) [![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) [![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,29 +252,29 @@ Tiimimme tuottaa muitakin kursseja! Tutustu:
--- ---
### Copilot-sarja ### Copilot Series
[![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 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 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) [![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 --> <!-- 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 tukeva yhteisö, jossa kysymyksiä saa esittää ja tietoa jaetaan vapaasti. Jos jäät jumiin tai sinulla on kysyttävää tekoälysovellusten rakentamisesta, liity oppijoiden ja kokeneiden kehittäjien keskusteluihin MCP:stä. Se on kannustava yhteisö, jossa kysymykset ovat tervetulleita ja tieto jaetaan vapaasti.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Jos sinulla on tuotteen palautetta tai kohtaat virheitä rakentamisen aikana, käy: Jos sinulla on tuotepalautetta tai kohtaat virheitä rakennuksen 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) [![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 ## Lisenssi
Tämä arkisto on lisensoitu MIT-lisenssillä. Lisätietoja löytyy tiedostosta [LICENSE](../../LICENSE). Tämä arkisto on lisensoitu MIT-lisenssillä. Lisätietoja saat tiedostosta [LICENSE](../../LICENSE).
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Vastuuvapauslauseke**: **Vastuuvapauslauseke**:
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, ole hyvä ja huomioi, että automaattikäännöksissä saattaa esiintyä virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäiskielellä tulisi pitää virallisena lähteenä. Tärkeissä tiedoissa suositellaan ammattilaisten tekemää ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä johtuvista väärinymmärryksistä tai tulkinnoista. Tämä 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, ota huomioon, että automaattikäännökset saattavat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja omalla kielellään on virallinen ja luotettava lähde. Tärkeissä asioissa suosittelemme ammattimaista ihmis kääntäjän tekemää käännöstä. Emme ole vastuussa mahdollisista väärinymmärryksistä tai tulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -1,7 +1,7 @@
{ {
"1-getting-started-lessons/1-intro-to-programming-languages/README.md": { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": {
"original_hash": "d45ddcc54eb9232a76d08328b09d792e", "original_hash": "bec5e35642176d9e483552bfc82996d8",
"translation_date": "2026-01-07T00:56:37+00:00", "translation_date": "2026-03-06T18:23:07+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "no" "language_code": "no"
}, },
@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-02-06T17:35:49+00:00", "translation_date": "2026-03-06T18:31:13+00:00",
"source_file": "AGENTS.md", "source_file": "AGENTS.md",
"language_code": "no" "language_code": "no"
}, },
@ -516,8 +516,8 @@
"language_code": "no" "language_code": "no"
}, },
"README.md": { "README.md": {
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", "original_hash": "a2c9eed480687319517c08a6319e5536",
"translation_date": "2026-02-06T17:29:49+00:00", "translation_date": "2026-03-06T18:19:02+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "no" "language_code": "no"
}, },

@ -2,14 +2,14 @@
## Prosjektoversikt ## Prosjektoversikt
Dette er et utdanningsrepository for å lære bort grunnleggende webutvikling til nybegynnere. Pensumet er et omfattende 12-ukers kurs utviklet av Microsoft Cloud Advocates, med 24 praktiske leksjoner som dekker JavaScript, CSS og HTML. Dette er et utdanningspensum-repositorium 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.
### Nøkkelkomponenter ### Hovedkomponenter
- **Utdanningsinnhold**: 24 strukturerte leksjoner organisert i prosjektbaserte moduler - **Utdanningsinnhold**: 24 strukturerte leksjoner organisert i prosjektbaserte moduler
- **Praktiske prosjekter**: Terrarium, Typing Game, Nettleserutvidelse, Space Game, Banking App, Code Editor og AI Chat Assistant - **Praktiske prosjekter**: Terrarium, Typing Game, Nettleserutvidelse, Space Game, Bankapp, Kodeeditor og AI Chat-assistent
- **Interaktive quizzer**: 48 quizzer med 3 spørsmål hver (før og etter leksjon) - **Interaktive quizzer**: 48 quizzer med 3 spørsmål hver (før- og etterleksjon vurderinger)
- **Flerspråklig støtte**: Automatiserte oversettelser for 50+ språk via GitHub Actions - **Flerspråklig støtte**: Automatiske oversettelser til 50+ språk via GitHub Actions
- **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (for AI-prosjekter) - **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (for AI-prosjekter)
### Arkitektur ### Arkitektur
@ -17,14 +17,14 @@ Dette er et utdanningsrepository for å lære bort grunnleggende webutvikling ti
- Utdanningsrepository med leksjonsbasert struktur - Utdanningsrepository med leksjonsbasert struktur
- Hver leksjonsmappe inneholder README, kodeeksempler og løsninger - Hver leksjonsmappe inneholder README, kodeeksempler og løsninger
- Frittstående prosjekter i egne kataloger (quiz-app, ulike leksjonsprosjekter) - Frittstående prosjekter i egne kataloger (quiz-app, ulike leksjonsprosjekter)
- Oversettelsessystem ved bruk av GitHub Actions (co-op-translator) - Oversettelsessystem med GitHub Actions (co-op-translator)
- Dokumentasjon levert via Docsify og tilgjengelig som PDF - Dokumentasjon servert via Docsify og tilgjengelig som PDF
## Oppsettskommandoer ## Oppsettskommandoer
Dette repositoryet er primært for konsumering av utdanningsinnhold. For arbeid med spesifikke prosjekter: Dette repositoriet er primært for konsumering av utdanningsinnhold. For arbeid med spesifikke prosjekter:
### Hovedrepository Oppsett ### Hovedrepository-oppsett
```bash ```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
@ -56,7 +56,7 @@ npm run format # Formater med Prettier
```bash ```bash
cd 5-browser-extension/solution cd 5-browser-extension/solution
npm install npm install
# Følg nettleserspesifikke instruksjoner for lasting av utvidelser # Følg nettleserspesifikke instruksjoner for utvidelsesinnlasting
``` ```
### Space Game Prosjekter ### Space Game Prosjekter
@ -67,7 +67,7 @@ npm install
# Åpne index.html i nettleser eller bruk Live Server # Åpne index.html i nettleser eller bruk Live Server
``` ```
### Chat Prosjekt (Python Backend) ### Chat-prosjekt (Python backend)
```bash ```bash
cd 9-chat-project/solution/backend/python cd 9-chat-project/solution/backend/python
@ -78,57 +78,57 @@ python api.py
## Utviklingsarbeidsflyt ## Utviklingsarbeidsflyt
### For innholdsleverandører ### For innholdsbidragsytere
1. **Fork repositoryet** til din GitHub-konto 1. **Fork repositoriet** til din GitHub-konto
2. **Klon din fork** lokalt 2. **Klon din fork** lokalt
3. **Opprett en ny branch** for endringene dine 3. **Opprett en ny gren** for endringene dine
4. Gjør endringer i leksjonsinnhold eller kodeeksempler 4. Gjør endringer i leksjonsinnhold eller kodeeksempler
5. Test eventuelle kodeendringer i relevante prosjektkataloger 5. Test eventuelle kodeendringer i relevante prosjektmapper
6. Send pull requests i henhold til retningslinjene for bidrag 6. Send inn pull requests i henhold til retningslinjer for bidrag
### For lærende ### For lærende
1. Fork eller klon repositoryet 1. Fork eller klon repositoriet
2. Naviger til leksjonskatalogene i rekkefølge 2. Naviger gjennom leksjonsmapper sekvensielt
3. Les README-filene for hver leksjon 3. Les README-filer for hver leksjon
4. Fullfør før-leksjon quizzer på https://ff-quizzes.netlify.app/web/ 4. Fullfør før-leksjons-quizzer på https://ff-quizzes.netlify.app/web/
5. Jobb gjennom kodeeksempler i leksjonsmappene 5. Arbeid gjennom kodeeksempler i leksjonsmapper
6. Fullfør oppgaver og utfordringer 6. Fullfør oppgaver og utfordringer
7. Ta etter-leksjon quizzer 7. Ta etter-leksjons-quizzer
### Live utvikling ### Live utvikling
- **Dokumentasjon**: Kjør `docsify serve` i roten (port 3000) - **Dokumentasjon**: Kjør `docsify serve` i root (port 3000)
- **Quiz App**: Kjør `npm run dev` i quiz-app katalogen - **Quiz App**: Kjør `npm run dev` i quiz-app katalogen
- **Prosjekter**: Bruk VS Code Live Server extension for HTML-prosjekter - **Prosjekter**: Bruk VS Code Live Server extension for HTML-prosjekter
- **API-prosjekter**: Kjør `npm start` i respektive API-kataloger - **API-prosjekter**: Kjør `npm start` i respektive API-kataloger
## Testinstruksjoner ## Testinstruksjoner
### Testing av Quiz App ### Quiz App testing
```bash ```bash
cd quiz-app cd quiz-app
npm run lint # Sjekk for kode stil problemer npm run lint # Sjekk for problemer med kodeformat
npm run build # Bekreft at byggingen lykkes npm run build # Verifiser at byggingen lykkes
``` ```
### Testing av Bank API ### Bank API testing
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm run lint # Sjekk for kode stil problemer npm run lint # Sjekk for kodesstilproblemer
node server.js # Bekreft at server starter uten feil node server.js # Bekreft at serveren starter uten feil
``` ```
### Generell testtilnærming ### Generell testtilnærming
- Dette er et utdanningsrepository uten omfattende automatiserte tester - Dette er et utdanningsrepository uten omfattende automatiske tester
- Manuell testing fokuserer på: - Manuell testing fokuserer på:
- Kodeeksempler kjører uten feil - Kodeeksempler kjører uten feil
- Lenker i dokumentasjonen fungerer riktig - Lenker i dokumentasjonen fungerer som de skal
- Prosjektbyggeoperasjoner fullføres uten feil - Prosjektbygg fullføres suksessfullt
- Eksempler følger beste praksis - Eksempler følger beste praksis
### Sjekk før innsending ### Sjekk før innsending
@ -136,126 +136,126 @@ node server.js # Bekreft at server starter uten feil
- Kjør `npm run lint` i kataloger med package.json - Kjør `npm run lint` i kataloger med package.json
- Verifiser at markdown-lenker er gyldige - Verifiser at markdown-lenker er gyldige
- Test kodeeksempler i nettleser eller Node.js - Test kodeeksempler i nettleser eller Node.js
- Sjekk at oversettelser opprettholder korrekt struktur - Sjekk at oversettelser opprettholder riktig struktur
## Kode stil retningslinjer ## Retningslinjer for kodestil
### JavaScript ### JavaScript
- Bruk moderne ES6+ syntax - Bruk moderne ES6+ syntaks
- Følg standard ESLint-konfigurasjoner gitt i prosjektene - Følg standard ESLint-konfigurasjoner levert i prosjektene
- Bruk meningsfulle variabel- og funksjonsnavn for utdanningsklarhet - Bruk meningsfulle variable- og funksjonsnavn for pedagogisk klarhet
- Legg til kommentarer som forklarer konsepter for lærende - Legg til kommentarer som forklarer konsepter for lærende
- Formater med Prettier der dette er konfigurert - Formater med Prettier der det er konfigurert
### HTML/CSS ### HTML/CSS
- Semantiske HTML5-elementer - Semantiske HTML5-elementer
- Responsive designprinsipper - Responsivt designprinsipper
- Klare klasse-navnekonvensjoner - Klare klassenavnkonvensjoner
- Kommentarer som forklarer CSS-teknikker for lærende - Kommentarer som forklarer CSS-teknikker for lærende
### Python ### Python
- PEP 8 stilretningslinjer - PEP 8 stil retningslinjer
- Tydelige, pedagogiske kodeeksempler - Klare, pedagogiske kodeeksempler
- Type hints hvor hjelpsomt for læring - Typehinting der det er nyttig for læring
### Markdown-dokumentasjon ### Markdown Dokumentasjon
- Klar overskriftsstruktur - Klar overskriftshierarki
- Kodeblokker med språkspesifikasjon - Kodeblokker med spesifisering av språk
- Lenker til tilleggsmateriale - Lenker til ytterligere ressurser
- Skjermbilder og bilder i `images/` kataloger - Skjermbilder og bilder i `images/` mapper
- Alt-tekst for bilder for tilgjengelighet - Alt-tekst for bilder for tilgjengelighet
### Filorganisering ### Filorganisering
- Leksjoner nummerert sekvensielt (1-getting-started-lessons, 2-js-basics, osv.) - Leksjoner nummerert sekvensielt (1-getting-started-lessons, 2-js-basics, osv.)
- Hvert prosjekt har `solution/` og ofte `start/` eller `your-work/` kataloger - Hvert prosjekt har `solution/` og ofte `start/` eller `your-work/` mapper
- Bilder lagres i leksjon-spesifikke `images/` mapper - Bilder lagres i leksjonsspesifikke `images/` mapper
- Oversettelser lagres i `translations/{language-code}/` struktur - Oversettelser i `translations/{language-code}/` struktur
## Bygging og distribusjon ## Bygging og distribusjon
### Distribusjon av Quiz App (Azure Static Web Apps) ### Quiz App distribusjon (Azure Static Web Apps)
quiz-app er konfigurert for distribusjon til Azure Static Web Apps: Quiz-appen er konfigurert for distribusjon på Azure Static Web Apps:
```bash ```bash
cd quiz-app cd quiz-app
npm run build # Oppretter dist/-mappen npm run build # Oppretter dist/-mappe
# Distribuerer via GitHub Actions-arbeidsflyt ved push til main # Distribuerer via GitHub Actions-arbeidsflyt ved push til main
``` ```
Azure Static Web Apps konfigurasjon: Azure Static Web Apps konfigurasjon:
- **App-plassering**: `/quiz-app` - **App-lokasjon**: `/quiz-app`
- **Output-plassering**: `dist` - **Output-lokasjon**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` - **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Generering av PDF-dokumentasjon ### Dokumentasjon PDF-generering
```bash ```bash
npm install # Installer docsify-to-pdf npm install # Installer docsify-to-pdf
npm run convert # Generer PDF fra docs npm run convert # Generer PDF fra docs
``` ```
### Docsify-dokumentasjon ### Docsify dokumentasjon
```bash ```bash
npm install -g docsify-cli # Installer Docsify globalt npm install -g docsify-cli # Installer Docsify globalt
docsify serve # Tjen på localhost:3000 docsify serve # Server på localhost:3000
``` ```
### Prosjektspesifikke bygg ### Prosjektspesifikke bygg
Hver prosjektkatalog kan ha egen byggeprosess: Hver prosjektkatalog kan ha egen byggeprosess:
- Vue-prosjekter: `npm run build` lager produksjonspakker - Vue-prosjekter: `npm run build` lager produksjonspakker
- Statisk prosjekter: Ingen byggeprosess, server filer direkte - Statiske prosjekter: Ingen byggeprosess, server filer direkte
## Retningslinjer for pull requests ## Retningslinjer for pull-forespørsler
### Tittelformat ### Tittelformat
Bruk klare, beskrivende titler som angir område for endring: Bruk klare, beskrivende titler som angir endringsområdet:
- `[Quiz-app] Legg til ny quiz for leksjon X` - `[Quiz-app] Legg til ny quiz for leksjon X`
- `[Lesson-3] Rett skrivefeil i terrarium-prosjekt` - `[Lesson-3] Fiks skrivefeil i terrarium-prosjekt`
- `[Translation] Legg til spansk oversettelse for leksjon 5` - `[Translation] Legg til spansk oversettelse for leksjon 5`
- `[Docs] Oppdater oppsettinstruksjoner` - `[Docs] Oppdater oppsettinstruksjoner`
### Nødvendige sjekker ### Krav til sjekker
Før du sender en PR: Før innsending av PR:
1. **Kodekvalitet**: 1. **Kodekvalitet**:
- Kjør `npm run lint` i berørte prosjektkataloger - Kjør `npm run lint` i berørte prosjektmapper
- Rett opp alle lint-feil og advarsler - Rett opp alle lint-feil og advarsler
2. **Byggeverifisering**: 2. **Byggeverifisering**:
- Kjør `npm run build` om relevant - Kjør `npm run build` hvis aktuelt
- Sørg for at det ikke er byggefeil - Sørg for ingen byggefeil
3. **Lenkekontroll**: 3. **Lenkevalidering**:
- Test alle markdown-lenker - Test alle markdown-lenker
- Verifiser at bildehenvisninger fungerer - Verifiser at bildefreferanser fungerer
4. **Innholdsgjennomgang**: 4. **Innholdsgranskning**:
- Korrekturles for stavefeil og grammatikk - Korrekturles for stave- og grammatikkfeil
- Sørg for at kodeeksempler er riktige og pedagogiske - Sørg for at kodeeksempler er korrekte og pedagogiske
- Dobbeltsjekk at oversettelser beholder opprinnelig betydning - Verifiser at oversettelser opprettholder original betydning
### Bidragskrav ### Bidragskrav
- Aksepter Microsoft CLA (automatisk sjekk første PR) - Aksepter Microsoft CLA (automatisk sjekk ved første PR)
- Følg [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) - Følg [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Se [CONTRIBUTING.md](./CONTRIBUTING.md) for detaljerte retningslinjer - Se [CONTRIBUTING.md](./CONTRIBUTING.md) for detaljerte retningslinjer
- Referer til issue-numre i PR-beskrivelse om relevant - Referer til issues i PR-beskrivelse ved behov
### Gjennomgangsprosess ### Gjennomgangsprosess
- PRer gjennomgås av vedlikeholdere og fellesskap - PRs granskes av vedlikeholdere og community
- Utdanningsklarhet prioriteres - Pedagogisk klarhet prioriteres
- Kodeeksempler skal følge gjeldende beste praksis - Kodeeksempler bør følge gjeldende beste praksis
- Oversettelser vurderes for nøyaktighet og kulturell tilpasning - Oversettelser vurderes for nøyaktighet og kulturell tilpasning
## Oversettelsessystem ## Oversettelsessystem
@ -265,18 +265,18 @@ Før du sender en PR:
- Bruker GitHub Actions med co-op-translator workflow - Bruker GitHub Actions med co-op-translator workflow
- Oversetter automatisk til 50+ språk - Oversetter automatisk til 50+ språk
- Kildefiler i hovedkataloger - Kildefiler i hovedkataloger
- Oversatte filer i `translations/{language-code}/` kataloger - Oversatte filer i `translations/{language-code}/` mapper
### Legge til manuelle oversettelsesforbedringer ### Legge til manuelle oversettelsesforbedringer
1. Finn fil i `translations/{language-code}/` 1. Finn fil i `translations/{language-code}/`
2. Gjør forbedringer samtidig som struktur bevares 2. Gjør forbedringer samtidig som struktur bevares
3. Sørg for at kodeeksempler forblir funksjonelle 3. Sørg for at kodeeksempler fortsatt fungerer
4. Test eventuelt lokaliserte quizinnhold 4. Test eventuelt lokalisert quiz-innhold
### Oversettelsesmetadata ### Oversettelsesmetadata
Oversatte filer inkluderer metadata header: Oversatte filer inkluderer metadata-overskrift:
```markdown ```markdown
<!-- <!--
CO_OP_TRANSLATOR_METADATA: CO_OP_TRANSLATOR_METADATA:
@ -293,116 +293,116 @@ CO_OP_TRANSLATOR_METADATA:
### Vanlige problemer ### Vanlige problemer
**Quiz app starter ikke**: **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 - Slett `node_modules` og `package-lock.json`, kjør `npm install` på nytt
- Sjekk porter for konflikt (standard: Vite bruker port 5173) - Sjekk portkonflikter (standard: Vite bruker port 5173)
**API server starter ikke**: **API-server starter ikke**:
- Verifiser Node.js versjon minimum (node >=10) - Verifiser at Node.js versjon tilfredsstiller minimum (node >=10)
- Sjekk at port ikke er i bruk - Sjekk om port allerede er i bruk
- Sørg for at alle avhengigheter er installert med `npm install` - Sørg for at alle avhengigheter er installert med `npm install`
**Nettleserutvidelse lastes ikke**: **Nettleserutvidelse lastes ikke**:
- Verifiser at manifest.json er korrekt formatert - Kontroller at manifest.json er korrekt formatert
- Sjekk nettleserkonsoll for feil - Sjekk nettleserkonsollen for feil
- Følg nettleserspesifikke installasjonsinstruksjoner - Følg nettleserspesifikke installasjonsinstruksjoner
**Problemer med Python chat prosjekt**: **Problemer med Python chat-prosjekt**:
- Sørg for at OpenAI-pakken er installert: `pip install openai` - Sørg for at OpenAI-pakken er installert: `pip install openai`
- Verifiser at GITHUB_TOKEN miljøvariabel er satt - Verifiser at GITHUB_TOKEN miljøvariabelen er satt
- Sjekk rettigheter for GitHub Models - Kontroller tilgangsrettigheter til GitHub Models
**Docsify serverer ikke dokumentasjonen**: **Docsify serverer ikke dokumentasjon**:
- Installer docsify-cli globalt: `npm install -g docsify-cli` - Installer docsify-cli globalt: `npm install -g docsify-cli`
- Kjør fra repository root-mappe - Kjør fra repository root-katalogen
- Sjekk at `docs/_sidebar.md` eksisterer - Sjekk at `docs/_sidebar.md` eksisterer
### Utviklingsmiljø tips ### Tips for utviklingsmiljø
- Bruk VS Code med Live Server extension for HTML-prosjekter - Bruk VS Code med Live Server extension for HTML-prosjekter
- Installer ESLint og Prettier extensions for konsistent formatering - Installer ESLint og Prettier extensions for konsistent formatering
- Bruk nettleserens DevTools for feilsøking av JavaScript - Bruk nettleserens DevTools for å feilsøke JavaScript
- For Vue-prosjekter, installer Vue DevTools nettleserutvidelse - For Vue-prosjekter, installer Vue DevTools nettleserutvidelse
### Ytelseshensyn ### Ytelsesbetraktninger
- Mange oversatte filer (50+ språk) gjør at hele kloner blir store - Stort antall oversatte filer (50+ språk) gjør at full kloning er stor
- Bruk shallow clone hvis du kun jobber med innhold: `git clone --depth 1` - Bruk shallow clone dersom du kun jobber med innhold: `git clone --depth 1`
- Ekskluder oversettelser fra søk når du jobber med engelsk innhold - Ekskluder oversettelser fra søk når du jobber med engelsk innhold
- Byggeprosesser kan være treg ved første kjøring (npm install, Vite build) - Byggeprosesser kan være trege ved første kjøring (npm install, Vite build)
## Sikkerhetshensyn ## Sikkerhetsbetraktninger
### Miljøvariabler ### Miljøvariabler
- API-nøkler bør aldri legges inn i repository - API-nøkler skal aldri sjekkes inn i repository
- Bruk `.env` filer (allerede i `.gitignore`) - Bruk `.env` filer (allerede i `.gitignore`)
- Dokumenter nødvendige miljøvariabler i prosjekt README-filer - Dokumenter nødvendige miljøvariabler i prosjektets README-filer
### Python-prosjekter ### Python-prosjekter
- Bruk virtuelle miljøer: `python -m venv venv` - Bruk virtuelle miljøer: `python -m venv venv`
- Hold avhengigheter oppdatert - Hold avhengigheter oppdatert
- GitHub-tokener skal ha minimale nødvendige rettigheter - GitHub-tokens skal ha minimale nødvendige tillatelser
### GitHub Models-tilgang ### GitHub Models-tilgang
- Personlige tilgangstokener (PAT) kreves for GitHub Models - Personlige tilgangstokener (PAT) kreves for GitHub Models
- Tokens skal lagres som miljøvariabler - Tokens bør lagres som miljøvariabler
- Aldri legg tokens eller legitimasjon i repository - Aldri sjekk inn tokens eller legitimasjon
## Tilleggsnotater ## Tilleggsnotater
### Målgruppe ### Målgruppe
- Komplett nybegynnere i webutvikling - Fullstendige nybegynnere innen webutvikling
- Studenter og selvlærende - Studenter og selvstudenter
- Lærere som bruker pensum i klasserom - Lærere som bruker pensum i klasserom
- Innholdet er utformet for tilgjengelighet og gradvis ferdighetsbygging - Innholdet er designet for tilgjengelighet og gradvis ferdighetsbygging
### Pedagogisk filosofi ### Pedagogisk filosofi
- Prosjektbasert læringstilnærming - Prosjektbasert læringsmetode
- Hyppige kunnskapskontroller (quizzer) - Hyppige kunnskapskontroller (quizzer)
- Praktiske kodingsøvelser - Praktiske kodingoppgaver
- Virkelige applikasjonseksempler - Virkelighetsnære anvendelseksempler
- Fokus på grunnleggende før rammeverk - Fokus på grunnleggende før rammeverk
### Repository vedlikehold ### Repository-vedlikehold
- Aktivt fellesskap av lærende og bidragsytere - Aktivt community av lærende og bidragsytere
- Regelmessige oppdateringer av avhengigheter og innhold - Jevnlige oppdateringer av avhengigheter og innhold
- Issues og diskusjoner overvåkes av vedlikeholdere - Issues og diskusjoner overvåkes av vedlikeholdere
- Oversettelsesoppdateringer automatiseres via GitHub Actions - Oversettelsesoppdateringer automatisert via GitHub Actions
### Relatert ressurser ### Relaterte ressurser
- [Microsoft Learn moduler](https://docs.microsoft.com/learn/) - [Microsoft Learn moduler](https://docs.microsoft.com/learn/)
- [Student Hub ressurser](https://docs.microsoft.com/learn/student-hub/) - [Student Hub ressurser](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) anbefalt for lærende - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) anbefalt for lærende
- Ytterligere kurs: Generativ AI, Data Science, ML, IoT pensum tilgjengelig - Tilleggs kurs: Generativ AI, Data Science, ML, IoT pensum tilgjengelig
### Arbeide med spesifikke prosjekter ### Arbeid med spesifikke prosjekter
For detaljerte instruksjoner om individuelle prosjekter, se README-filene i: For detaljerte instruksjoner om individuelle prosjekter, se README-filene i:
- `quiz-app/README.md` - Vue 3 quiz applikasjon - `quiz-app/README.md` - Vue 3 quiz-applikasjon
- `7-bank-project/README.md` - Bankapplikasjon med autentisering - `7-bank-project/README.md` - Bankapplikasjon med autentisering
- `5-browser-extension/README.md` - Nettleserutvidelsesutvikling - `5-browser-extension/README.md` - Nettleserutvidelsesutvikling
- `6-space-game/README.md` - Canvas-basert spillutvikling - `6-space-game/README.md` - Canvas-basert spillutvikling
- `9-chat-project/README.md` - AI chat assistent prosjekt - `9-chat-project/README.md` - AI chat-assistent prosjekt
### Monorepo-struktur ### Monorepo-struktur
Selv om det ikke er et tradisjonelt monorepo, inneholder dette repository flere uavhengige prosjekter: Selv om dette ikke er et tradisjonelt monorepo, inneholder dette repositoriet flere uavhengige prosjekter:
- Hver leksjon er selvstendig - Hver leksjon er selvstendig
- Prosjektene deler ikke avhengigheter - Prosjektene deler ikke avhengigheter
- Jobb med individuelle prosjekter uten å påvirke andre - Arbeid på individuelle prosjekter uten å påvirke andre
- Klon hele repo for full pensumopplevelse - Klon hele repo for full pensumopplevelse
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfraskrivelse**: **Ansvarsfraskrivelse**:
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi streber etter nøyaktighet, vennligst vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det 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. 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å dets originale språk bør betraktes som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -10,71 +10,81 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Webutvikling for nybegynnere - en læreplan # Webutvikling for nybegynnere - Et læreplan
Lær det grunnleggende om webutvikling med vårt 12-ukers omfattende kurs av Microsoft Cloud Advocates. Hver av de 24 leksjonene dykker ned i JavaScript, CSS og HTML gjennom praktiske prosjekter som terrarier, nettleserutvidelser og romspill. Delta i quizzer, diskusjoner og praktiske oppgaver. Forbedre ferdighetene dine og optimaliser kunnskapsbevaringen med vår effektive prosjektbaserte pedagogikk. Start din kodingreise i dag! Lær grunnleggende webutvikling med vårt 12-ukers omfattende kurs av Microsoft Cloud Advocates. Hver av de 24 leksjonene dykker ned i JavaScript, CSS og HTML gjennom praktiske prosjekter som terrarier, nettleserutvidelser og romspill. Delta i quizer, diskusjoner og praktiske oppgaver. Forbedre ferdighetene dine og optimaliser kunnskapsretensjonen med vår effektive prosjektbaserte pedagogikk. Start din kode-reise i dag!
Bli med i Azure AI Foundry Discord-fellesskapet Bli med i Azure AI Foundry Discord-fellesskapet
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Følg disse trinnene for å komme i gang med disse ressursene: Følg disse trinnene for å komme i gang med disse ressursene:
1. **Lag en gaffel av repositoriet**: 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) 1. **Fork repoet**: 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 repositoriet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **Klon repoet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Bli med i Azure AI Foundry Discord og møt eksperter og andre utviklere**](https://discord.com/invite/ByRwuEEgH4) 3. [**Bli med i Azure AI Foundry Discord og møt eksperter og medutviklere**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Flerspråklig støtte ### 🌐 Flerspråklig støtte
#### Støttet via GitHub Action (Automatisk og alltid oppdatert) #### Støttes via GitHub Action (Automatisk og alltid oppdatert)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START --> <!-- 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](../nl/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](./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) [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](../nl/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](./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)
> **Foretrekker du å klone lokalt?** > **Foretrekker du å klone lokalt?**
>
> Dette repositoriet inkluderer 50+ språkoversettelser som øker nedlastningsstørrelsen betydelig. For å klone uten oversettelser, bruk sparse checkout: > Dette repoet inkluderer 50+ språkoversettelser som øker nedlastingsstørrelsen betydelig. For å klone uten oversettelser, bruk sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash > ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners > cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ``` > ```
> Dette gir deg alt du trenger for å fullføre kurset med en mye raskere nedlasting. >
> **CMD (Windows):**
> ```cmd
> 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"
> ```
>
> Dette gir deg alt du trenger for å fullføre kurset med mye raskere nedlasting.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END --> <!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Hvis du ønsker at flere oversettelsesspråk skal støttes, er de oppført [her](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** **Hvis du ønsker at flere oversettelsesspråk skal støttes, er disse oppført [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) [![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?_ #### 🧑‍🎓 _Er du student?_
Besøk [**Student Hub-side**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) hvor du finner nybegynnerressurser, studentpakker og til og med måter å få et gratis sertifikatkupong på. Dette er siden du vil bokmerke og sjekke fra tid til annen ettersom vi bytter ut innhold månedlig. Besøk [**Student Hub-siden**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) hvor du finner nybegynnerressurser, studentpakker og til og med måter å få en gratis sertifikatkupong på. Dette er siden du bør bokmerke og sjekke fra tid til annen da vi bytter ut innhold månedlig.
### 📣 Kunngjøring - Nye GitHub Copilot Agent modus utfordringer å fullføre! ### 📣 Annonsering - Nye utfordringer i GitHub Copilot Agent-modus å fullføre!
Ny utfordring lagt til, se etter "GitHub Copilot Agent Challenge 🚀" i de fleste kapitler. Det er en ny utfordring for deg å fullføre ved hjelp av GitHub Copilot og Agent-modus. Om du ikke har brukt Agent-modus før, kan den ikke bare generere tekst, men også lage og redigere filer, kjøre kommandoer og mer. Ny utfordring lagt til, se etter "GitHub Copilot Agent Challenge 🚀" i de fleste kapitlene. Det er en ny utfordring du kan 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.
### 📣 Kunngjøring - _Nytt prosjekt å bygge med Generativ AI_ ### 📣 Annonsering - _Nytt prosjekt å bygge med Generativ AI_
Nytt AI Assistant-prosjekt nettopp lagt til, sjekk det ut [prosjekt](./9-chat-project/README.md) Nytt AI-assistentprosjekt nettopp lagt til, sjekk det ut [prosjekt](./9-chat-project/README.md)
### 📣 Kunngjøring - _Ny læreplan_ om Generativ AI for JavaScript er nettopp lansert ### 📣 Annonsering - _Ny læreplan_ om Generativ AI for JavaScript ble nettopp utgitt
Ikke gå glipp av vår nye Generativ AI læreplan! Ikke gå glipp av vår nye læreplan for Generativ AI!
Besøk [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for å komme i gang! Besøk [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for å komme i gang!
![Background](../../translated_images/no/background.148a8d43afde5730.webp) ![Background](../../translated_images/no/background.148a8d43afde5730.webp)
- Leksjoner som dekker alt fra grunnleggende til RAG. - Leksjoner som dekker alt fra grunnleggende til RAG.
- Kommuniser med historiske karakterer med GenAI og vår følgesvenn-app. - Samhandle med historiske personer ved hjelp av GenAI og vår følgesvenn-app.
- Morsom og engasjerende fortelling, du vil reise i tid! - Moro og engasjerende fortelling, du vil reise i tid!
![character](../../translated_images/no/character.5c0dd8e067ffd693.webp) ![character](../../translated_images/no/character.5c0dd8e067ffd693.webp)
Hver leksjon inkluderer en oppgave å fullføre, en kunnskapstest og en utfordring for å veilede deg gjennom læringsemner som: Hver leksjon inkluderer en oppgave å fullføre, en kunnskapskontroll og en utfordring for å veilede deg i læring av temaer som:
- Prompting og prompt-engineering - Prompting og prompt engineering
- Tekst- og bildeapp-generering - Tekst- og bildeappgenerering
- Søkeapper - Søkeapper
Besøk [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for å komme i gang! Besøk [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for å komme i gang!
@ -83,131 +93,130 @@ Besøk [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for å k
## 🌱 Komme i gang ## 🌱 Komme i gang
> **Lærere**, vi har [inkludert noen forslag](for-teachers.md) til hvordan bruke denne læreplanen. Vi setter stor pris på din tilbakemelding [i vår diskusjonsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! > **Lærere**, vi har [inkludert noen forslag](for-teachers.md) til hvordan du kan 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)!
**[Lærende](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for hver leksjon, start med en pre-forelesningsquiz og følg deretter med å lese forelesningsmaterialet, fullføre de ulike aktivitetene og sjekk forståelsen din med post-forelesningsquizen. **[Elever](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for hver leksjon, start med en for-forelesningsquiz og følg opp med å lese forelesningsmaterialet, fullføre de ulike aktivitetene og sjekke forståelsen med etter-forelesningsquiz.
For å forbedre læringsopplevelsen din, koble deg sammen med dine jevnaldrende for å jobbe med prosjektene sammen! Diskusjoner oppfordres i vårt [diskusjonsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) hvor vårt team av moderatorer vil være tilgjengelig for å svare på dine spørsmål. For å forbedre læringsopplevelsen, koble deg sammen med dine medstudenter for å jobbe på prosjektene sammen! Diskusjoner oppfordres i vårt [diskusjonsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) hvor vårt team av moderatorer vil være tilgjengelig for å svare på spørsmålene dine.
For å videreutvikle utdannelsen din, anbefaler vi sterkt å utforske [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for tilleggsmateriell. For å utvide utdannelsen anbefaler vi sterkt å utforske [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for ekstra studiemateriell.
### 📋 Sette opp miljøet ditt ### 📋 Sette opp miljøet ditt
Denne læreplanen har et utviklingsmiljø klart til bruk! Når du kommer i gang kan du velge å kjøre læreplanen i en [Codespace](https://github.com/features/codespaces/) (_et nettleserbasert miljø uten behov for installasjoner_), eller lokalt på din datamaskin ved bruk av en tekstredigerer som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). Denne læreplanen har et utviklingsmiljø klart til bruk! Når du kommer i gang kan du velge å kjøre læreplanen i en [Codespace](https://github.com/features/codespaces/) (_et nettleserbasert miljø uten behov for installasjoner_), eller lokalt på datamaskinen din ved å bruke en teksteditor som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Opprett ditt eget repository #### Opprett ditt eget repository
For at du enkelt skal kunne lagre arbeidet ditt, anbefales det at du oppretter din egen kopi av dette repositoriet. Du kan gjøre dette ved å klikke på **Use this template** knappen øverst på siden. Dette vil opprette et nytt repository i din GitHub-konto med en kopi av læreplanen. For at du enkelt skal kunne lagre arbeidet ditt, anbefales det at du oppretter din egen kopi av dette repoet. Du kan gjøre dette ved å klikke på **Use this template**-knappen øverst på siden. Dette vil lage et nytt repository i din GitHub-konto med en kopi av læreplanen.
Følg disse trinnene: Følg disse trinnene:
1. **Lag en gaffel av repositoriet**: Klikk på "Fork"-knappen øverst til høyre på denne siden. 1. **Fork repoet**: Klikk på "Fork"-knappen øverst til høyre på denne siden.
2. **Klon repositoriet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **Klon repoet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Kjøre læreplanen i en Codespace #### Kjøre læreplanen i en Codespace
I din kopi av dette repositoriet du opprettet, klikk på **Code**-knappen og velg **Open with Codespaces**. Dette vil opprette en ny Codespace for deg å jobbe i. I din kopi av repoet som du opprettet, klikk på **Code**-knappen og velg **Open with Codespaces**. Dette vil opprette en ny Codespace for deg å jobbe i.
![Codespace](../../translated_images/no/createcodespace.0238bbf4d7a8d955.webp) ![Codespace](../../translated_images/no/createcodespace.0238bbf4d7a8d955.webp)
#### Kjøre læreplanen lokalt på din datamaskin #### Kjøre læreplanen lokalt på din datamaskin
For å kjøre denne læreplanen lokalt på datamaskinen din trenger du en tekstredigerer, en nettleser og et kommandolinjeverktøy. Vår første leksjon, [Introduksjon til programmeringsspråk og verktøy](../../1-getting-started-lessons/1-intro-to-programming-languages), vil guide deg gjennom ulike alternativer for hver av disse verktøyene slik at du kan velge det som passer best for deg. For å kjøre denne læreplanen lokalt på din datamaskin 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 lede deg gjennom ulike valg 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 redigerer, som også har en innebygd [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Du kan laste ned Visual Studio Code [her](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Vi anbefaler å bruke [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) som din 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 ditt repository til din datamaskin. Du kan gjøre dette ved å klikke på **Code**-knappen og kopiere URL-en: 1. Klon ditt repository til din datamaskin. Du kan gjøre dette ved å klikke på **Code**-knappen og kopiere URL-en:
[CodeSpace](./images/createcodespace.png) [CodeSpace](./images/createcodespace.png)
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:
Å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, erstatt `<your-repository-url>` med URL-en du nettopp kopierte:
```bash ```bash
git clone <your-repository-url> git clone <your-repository-url>
``` ```
2. Åpne mappen i Visual Studio Code. Du kan gjøre dette ved å klikke **Fil** > **Åpne mappe** og velge mappen du nettopp klonet. 2. Åpne mappen i Visual Studio Code. Du kan gjøre dette ved å klikke **File** > **Open Folder** og velge mappen du nettopp klonet.
> Anbefalte Visual Studio Code-utvidelser: > 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 > * [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 inneholder: ## 📂 Hver leksjon inkluderer:
- valgfri skisse - valgfri skisse-notat
- valgfri supplerende video - valgfri tilleggsvideo
- oppvarmingsquiz før leksjonen - oppvarmingsquiz før leksjonen
- skriftlig leksjon - skriftlig leksjon
- for prosjektbaserte leksjoner, trinnvise guider for hvordan du bygger prosjektet - for prosjektrelaterte leksjoner, steg-for-steg guider for hvordan bygge prosjektet
- kunnskapstester - kunnskapstester
- en utfordring - en utfordring
- supplerende lesing - tilleggslesning
- oppgave - oppgave
- [quiz etter leksjonen](https://ff-quizzes.netlify.app/web/) - [quiz etter leksjonen](https://ff-quizzes.netlify.app/web/)
> **En merknad om quizer**: Alle quizer er samlet i Quiz-app mappen, totalt 48 quizer med tre spørsmål hver. De er tilgjengelige [her](https://ff-quizzes.netlify.app/web/). quiz-appen kan kjøres lokalt eller deployeres til Azure; følg instruksjonene i `quiz-app`-mappen. > **En merknad om quizer**: Alle quizer ligger 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 distribueres til Azure; følg instruksjonene i `quiz-app`-mappen.
## 🗃️ Leksjoner ## 🗃️ Leksjoner
| | Prosjektnavn | Konsepter som læres | Læringsmål | Tilknyttet leksjon | Forfatter | | | Prosjektnavn | Konsepter som læres | Læringsmål | Lenket leksjon | Forfatter |
| :-: | :------------------------------------------------------: | :------------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :-----------------------: | | :-: | :------------------------------------------------------: | :-----------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :-----------------------------------------------------------------------------------------------------------------------------: | :-----------------------: |
| 01 | Komme i gang | Introduksjon til programmering og verktøy for faget | Lær det grunnleggende bak de fleste programmeringsspråk og om programvare som hjelper profesjonelle utviklere å gjøre jobben sin | [Introduksjon til programmeringsspråk og verktøy](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | | 01 | Komme i gang | Introduksjon til programmering og verktøy i faget | Lær grunnlaget bak de fleste programmeringsspråk og programvare som hjelper profesjonelle utviklere | [Introduksjon til programmeringsspråk og verktøy i faget](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Komme i gang | Grunnleggende om GitHub, inkludert samarbeid i team | Hvordan bruke GitHub i prosjektet ditt, hvordan samarbeide med andre på en kodebase | [Introduksjon til GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | | 02 | Komme i gang | Grunnleggende GitHub, inkludert arbeid i teamet | Hvordan bruke GitHub i ditt prosjekt, og 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 nettside-tilgjengelighet | [Tilgjengelighet Grunnleggende](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 03 | Komme i gang | Tilgjengelighet | Lær det grunnleggende om nettilgjengelighet | [Grunnleggende tilgjengelighet](./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 | | 04 | JS Grunnleggende | JavaScript datatype | 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 å håndtere et applikasjons logikkflyt | [Funksjoner og Metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine og Christopher | | 05 | JS Grunnleggende | Funksjoner og metoder | Lær om funksjoner og metoder for å styre en applikasjons 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 du lager betingelser i koden din ved å bruke beslutningsmetoder | [Ta beslutninger](./2-js-basics/3-making-decisions/README.md) | Jasmine | | 06 | JS Grunnleggende | Å ta beslutninger med JS | Lær hvordan lage betingelser i koden din ved hjelp av beslutningsmetoder | [Beslutningstaking](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Grunnleggende | Arrays og løkker | Arbeide med data ved bruk av arrays og løkker i JavaScript | [Arrays og løkker](./2-js-basics/4-arrays-loops/README.md) | Jasmine | | 07 | JS Grunnleggende | Lister og løkker | Arbeid med data ved bruk av lister og løkker i JavaScript | [Lister 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 virtuelt terrarium, med fokus på å bygge en layout | [Introduksjon til HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | | 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML i praksis | Bygg HTML for å lage et 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 virtuelle terrariet, med fokus på grunnleggende CSS inkludert making siden responsiv | [Introduksjon til CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | | 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS i praksis | Bygg CSS for å style det online terrariet, med fokus på grunnleggende CSS inkludert 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 et dra/slipp-grensesnitt, med fokus på closures og DOM-manipulering | [JavaScript closures, DOM-manipulering](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | | 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-manipulasjon | Bygg JavaScript for å gjøre terrariet til en drag/drop-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) | Lag et Skrivespill | Lær hvordan du bruker tastaturhendelser for å drive logikken i JavaScript-appen din | [Hendelsesdrevet Programmering](./4-typing-game/typing-game/README.md) | Christopher | | 11 | [Typing Game](./4-typing-game/solution/README.md) | Bygg et skrive-spill | Lær hvordan du bruker tastaturevents for å styre logikken i ditt JavaScript-app | [Event-drevet 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 du bygger opp de første elementene i en nettleserutvidelse | [Om nettlesere](./5-browser-extension/1-about-browsers/README.md) | Jen | | 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Arbeide med nettlesere | Lær hvordan nettlesere fungerer, deres historie og hvordan 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) | Lage et skjema, kalle et API og lagre variabler i lokal lagring | Bygg JavaScript-elementene til nettleserutvidelsen din for å kalle et API ved bruk av variabler lagret i lokal lagring | [APIer, skjemautfylling og lokal lagring](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | | 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bygging av skjema, kalle et API og lagre variabler i lokal lagring | Bygg JavaScript-elementer i nettleserutvidelsen din som kaller et API ved bruk av variabler lagret i lokal lagring | [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, web-ytelse | Bruk nettleserens bakgrunnsprosesser for å administrere utvidelsens ikon; lær om web-ytelse og noen optimaliseringer for å gjøre | [Bakgrunnsoppgaver og ytelse](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | | 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bakgrunnsprosesser i nettleseren, web-ytelse | Bruk nettleserens bakgrunnsprosesser til å styre utvidelsens ikon; lær om web-ytelse 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 å bruke både klasser og komposisjon og Pub/Sub-mønsteret, som en forberedelse til å lage et spill | [Introduksjon til avansert spillutvikling](./6-space-game/1-introduction/README.md) | Chris | | 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 å 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 til lerret | Lær om Canvas API, som brukes til å tegne elementer på skjermen | [Tegning til lerret](./6-space-game/2-drawing-to-canvas/README.md) | Chris | | 16 | [Space Game](./6-space-game/solution/README.md) | Tegning til canvas | Lær om Canvas API, brukt for å tegne elementer på en skjerm | [Tegning til 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 hjelp av kartesiske koordinater og Canvas API | [Flytte elementer rundt](./6-space-game/3-moving-elements-around/README.md) | Chris | | 17 | [Space Game](./6-space-game/solution/README.md) | Flytte elementer rundt på skjermen | Oppdag hvordan elementer kan få bevegelse ved hjelp av kartesiske koordinater og Canvas API | [Flytte elementer rundt](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Kollisjonsdeteksjon | La elementer kollidere og reagere på hverandre ved hjelp av tastetrykk og implementer en cooldown-funksjon for å sikre spillytelse | [Kollisjonsdeteksjon](./6-space-game/4-collision-detection/README.md) | Chris | | 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 cooldown-funksjon for å sikre ytelse | [Kollisjonsdeteksjon](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Hold styr på poeng | Utfør matematiske beregninger basert på spillets status og ytelse | [Poengtelling](./6-space-game/5-keeping-score/README.md) | Chris | | 19 | [Space Game](./6-space-game/solution/README.md) | Holde styr på poeng | Utfør matematiske beregninger basert på spillets status og ytelse | [Holde styr på poeng](./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 restarte spillet, inkludert å rydde opp ressurser og tilbakestille variabelverdier | [Avslutningsbetingelsen](./6-space-game/6-end-condition/README.md) | Chris | | 20 | [Space Game](./6-space-game/solution/README.md) | Avslutte og starte spillet på nytt | Lær om å avslutte og starte spillet på nytt, inkludert opprydding av ressurser og tilbakestilling av variabler | [Sluttbetingelsen](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-maler og ruter i et webapp | Lær hvordan du lager grunnstrukturen til en flersidig nettsides arkitektur ved bruk av routing og HTML-maler | [HTML-maler og ruter](./7-bank-project/1-template-route/README.md) | Yohan | | 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-maler og ruter i en webapp | Lær hvordan lage strukturen for en nettsides arkitektur med routing og HTML-maler | [HTML-maler og ruter](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Lag en innloggings- og registreringsskjema | Lær om å lage skjemaer og håndtere valideringsrutiner | [Skjemaer](./7-bank-project/2-forms/README.md) | Yohan | | 22 | [Banking App](./7-bank-project/solution/README.md) | Bygge 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 å hente og bruke data | Hvordan data flyter inn og ut av appen din, hvordan hente det, lagre det, og kvitte seg med det | [Data](./7-bank-project/3-data/README.md) | Yohan | | 23 | [Banking App](./7-bank-project/solution/README.md) | Metoder for henting 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) | Begreper om tilstandsadministrasjon | Lær hvordan appen din beholder tilstand og hvordan du kan styre den programmessig | [Tilstandsadministrasjon](./7-bank-project/4-state-management/README.md) | Yohan | | 24 | [Banking App](./7-bank-project/solution/README.md) | Konsepter innen tilstandshåndtering | Lær hvordan appen din beholder tilstand og hvordan styre den programmatisk | [Tilstandshåndtering](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Arbeider med VScode | Lær hvordan du bruker en kode-editor| [Bruk VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | | 25 | [Browser/VScode Code](../../8-code-editor) | Arbeide med VScode | Lær hvordan du bruker en kodeeditor| [Bruk VScode kodeeditor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Arbeider med AI | Lær hvordan du bygger din egen AI-assistent | [AI Assistent prosjekt](./9-chat-project/README.md) | Chris | | 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 ## 🏫 Pedagogikk
Vårt pensum er designet med to viktige pedagogiske prinsipper i tankene: Vårt pensum er utformet med to viktige pedagogiske prinsipper i tankene:
* prosjektbasert læring * prosjektbasert læring
* hyppige quizer * hyppige quizer
Programmet lærer grunnleggende JavaScript, HTML og CSS, samt de nyeste verktøyene og teknikkene som dagens webutviklere bruker. Studentene vil få muligheten til å utvikle praktisk erfaring ved å bygge et skrivespill, virtuelt terrarium, miljøvennlig nettleserutvidelse, rom-invader-stil spill og en bankapp for bedrifter. Ved slutten av serien vil studentene ha oppnådd en solid forståelse av webutvikling. Programmet lærer grunnleggende JavaScript, HTML, og CSS, samt de nyeste verktøyene og teknikkene som dagens webutviklere bruker. Studenter får muligheten til å utvikle praktisk erfaring ved å bygge et skrive-spill, virtuelt terrarium, miljøvennlig nettleserutvidelse, et Space Invaders-inspirert spill og en bank-app for bedrifter. Ved slutten av serien vil studentene ha oppnådd en solid forståelse av webutvikling.
> 🎓 Du kan ta de første leksjonene i dette pensumet som en [Læringssti](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn! > 🎓 Du kan ta de første leksjonene i dette pensumet som en [Læringssti](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn!
Ved å sikre at innholdet stemmer overens med prosjektene, gjøres prosessen mer engasjerende for studentene og lagring av konsepter vil bli forbedret. Vi skrev også flere startleksjoner i JavaScript-grunnleggende for å introdusere konsepter, koblet med en video fra "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" samlingen av videotutorials, noen av forfatterne bidro til dette pensumet. Ved å sikre at innholdet stemmer overens med prosjektene, blir prosessen mer engasjerende for studentene og konseptene blir bedre husket. Vi skrev også flere oppstartleksjoner 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 lavterskelquiz før en time intensjonen til studenten om å lære et tema, mens en andre quiz etter timen sikrer ytterligere lagring. Dette pensumet er designet for å være fleksibelt og morsomt og kan tas i sin helhet eller delvis. Prosjektene starter smått og blir stadig mer komplekse innen slutten av 12-ukers syklusen. I tillegg setter en lavterskel-quiz før en klasse intensjonen for studenten mot å lære et tema, mens en andre quiz etter klassen sikrer videre hukommelse. Dette pensumet er designet for å være fleksibelt og morsomt, og kan tas i sin helhet eller delvis. Prosjektene starter smått og blir stadig mer komplekse innen slutten av en 12-ukers syklus.
Selv om vi med vilje har unngått å introdusere JavaScript-rammeverk for å fokusere på grunnleggende ferdigheter som trengs som webutvikler før man tar i bruk et rammeverk, vil et godt neste steg etter å ha fullført dette pensumet være å lære om Node.js via en annen samling videoer: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". Selv om vi bevisst har unngått å introdusere JavaScript-rammeverk for å fokusere på grunnleggende ferdigheter som kreves som webutvikler før du tar i bruk et rammeverk, vil et godt neste steg etter dette pensumet være å lære om Node.js via en annen videosamling: "[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 [Atferdskodeks](CODE_OF_CONDUCT.md) og [Bidra](CONTRIBUTING.md). Vi ønsker din konstruktive tilbakemelding velkommen! > Besøk våre retningslinjer for [Adferdskodeks](CODE_OF_CONDUCT.md) og [Bidrag](CONTRIBUTING.md). Vi setter pris på din konstruktive tilbakemelding!
## 🧭 Offline-tilgang ## 🧭 Frakoblet tilgang
Du kan kjøre denne dokumentasjonen offline ved å bruke [Docsify](https://docsify.js.org/#/). Fork dette repoet, [installer Docsify](https://docsify.js.org/#/quickstart) på din lokale maskin, og deretter i rotmappen til dette repoet, skriv `docsify serve`. Nettstedet vil serveres på port 3000 på din localhost: `localhost:3000`. Du kan kjøre denne dokumentasjonen frakoblet ved å bruke [Docsify](https://docsify.js.org/#/). Fork dette repoet, [installer Docsify](https://docsify.js.org/#/quickstart) på din lokale maskin, og så i rotmappen av dette repoet, skriv `docsify serve`. Nettstedet vil bli servert på port 3000 på din localhost: `localhost:3000`.
## 📘 PDF ## 📘 PDF
En PDF av alle leksjonene kan finnes [her](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). En PDF av alle leksjonene kan finnes [her](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Andre Kurs ## 🎒 Andre kurs
Teamet vårt produserer andre kurs! Sjekk ut:
Vårt team produserer andre kurs! Sjekk ut:
<!-- CO-OP TRANSLATOR OTHER COURSES START --> <!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain ### LangChain
@ -216,7 +225,7 @@ Teamet vårt produserer andre kurs! Sjekk ut:
[![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) [![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 / Agenter ### 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) [![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) [![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) [![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)
@ -224,7 +233,7 @@ Teamet vårt produserer andre kurs! Sjekk ut:
--- ---
### Generativ AI-serie ### Generative AI Series
[![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 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 (.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 (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)
@ -232,7 +241,7 @@ Teamet vårt produserer andre kurs! Sjekk ut:
--- ---
### Kjerneopplæring ### Core Learning
[![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) [![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) [![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) [![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)
@ -243,7 +252,7 @@ Teamet vårt produserer andre kurs! Sjekk ut:
--- ---
### Copilot-serie ### Copilot Series
[![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 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 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) [![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)
@ -251,21 +260,21 @@ Teamet vårt produserer andre kurs! Sjekk ut:
## Få hjelp ## Få hjelp
Hvis du sitter fast eller har noen spørsmål om å bygge AI-apper. Bli med andre lærende og erfarne utviklere i diskusjoner om MCP. Det er et støttende fellesskap hvor spørsmål er velkomne og kunnskap deles fritt. 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) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Hvis du har produktfeedback eller finner feil mens du bygger, besøk: Hvis du har produktinnspill eller 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) [![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)
## Lisens ## Lisens
Dette depotet er lisensiert under MIT-lisensen. Se [LICENSE](../../LICENSE)-filen for mer informasjon. Dette depotet er lisensiert under MIT-lisensen. Se [LICENSE](../../LICENSE) filen for mer informasjon.
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfraskrivelse**: **Ansvarsfraskrivelse**:
Dette dokumentet er oversatt ved bruk av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi streber etter nøyaktighet, vennligst vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på dets opprinnelige språk skal betraktes som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen. 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å dets opprinnelige språk skal betraktes som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi påtar oss ikke ansvar for eventuelle misforståelser eller feiltolkninger som følge av bruken av denne oversettelsen.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Loading…
Cancel
Save