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

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

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

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

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:29:49+00:00",
"translation_date": "2026-02-06T08:55:46+00:00",
"source_file": "AGENTS.md",
"language_code": "da"
},
@ -516,8 +516,8 @@
"language_code": "da"
},
"README.md": {
"original_hash": "490c83786552d7fab6390991517bef09",
"translation_date": "2026-01-29T18:30:46+00:00",
"original_hash": "805cd399757df19e886e86f0891a1374",
"translation_date": "2026-02-06T08:52:03+00:00",
"source_file": "README.md",
"language_code": "da"
},

344
translations/da/AGENTS.md
Unescape View File

@ -2,190 +2,190 @@
## Projektoversigt
Dette er et uddannelsesmateriale-repository designet til at lære begyndere grundlæggende webudvikling. Curriculumet 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 uddannelsespensum-repositorium til undervisning i webudviklingsgrundlag for begyndere. Pensum består af et omfattende 12-ugers kursus udviklet af Microsoft Cloud Advocates, med 24 praktiske lektioner, der dækker JavaScript, CSS og HTML.
### Nøglekomponenter
### Centrale komponenter
- **Uddannelsesindhold**: 24 strukturerede lektioner organiseret i projektbaserede moduler
- **Praktiske projekter**: Terrarium, Skrivespil, Browserudvidelse, Rumspil, Bankapp, Kodeeditor og AI-chatassistent
- **Interaktive quizzer**: 48 quizzer med 3 spørgsmål hver (før/efter lektion vurderinger)
- **Praktiske projekter**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor og AI Chat Assistant
- **Interaktive quizzer**: 48 quizzer med 3 spørgsmål hver (forud/efter-lektion vurderinger)
- **Flersproget support**: Automatiske oversættelser til 50+ sprog via GitHub Actions
- **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (til AI-projekter)
### Arkitektur
- Uddannelsesrepository med lektionbaseret struktur
- Hver lektionmappe indeholder README, kodeeksempler og løsninger
- Selvstændige projekter i separate mapper (quiz-app, diverse lektionprojekter)
- Oversættelsessystem ved hjælp af GitHub Actions (co-op-translator)
- Dokumentation leveret via Docsify og tilgængelig som PDF
- Uddannelses-repositorium med lektionbaseret struktur
- Hver lektionsmappe indeholder README, kodeeksempler og løsninger
- Fritstående projekter i separate mapper (quiz-app, forskellige lektionsprojekter)
- Oversættelsessystem med GitHub Actions (co-op-translator)
- Dokumentation serveret via Docsify og tilgængelig som PDF
## Opsætningskommandoer
Dette repository er primært til forbrug af uddannelsesindhold. For at arbejde med specifikke projekter:
Dette repositorium er primært til forbrug af uddannelsesindhold. For at arbejde med specifikke projekter:
### Opsætning af hovedrepository
### Hoved-repositorium opsætning
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Opsætning af Quiz App (Vue 3 + Vite)
### Quiz App opsætning (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # Start development server
npm run build # Build for production
npm run lint # Run ESLint
npm run dev # Start udviklingsserver
npm run build # Byg til produktion
npm run lint # Kør ESLint
```
### Bankprojekt API (Node.js + Express)
### Bank Project API (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # Start API server
npm run lint # Run ESLint
npm run format # Format with Prettier
npm start # Start API-server
npm run lint # Kør ESLint
npm run format # Formater med Prettier
```
### Browserudvidelsesprojekter
### Browser Extension projekter
```bash
cd 5-browser-extension/solution
npm install
# Follow browser-specific extension loading instructions
# Følg browser-specifikke instruktioner til indlæsning af udvidelser
```
### Rumspilsprojekter
### Space Game projekter
```bash
cd 6-space-game/solution
npm install
# Open index.html in browser or use Live Server
# Åbn index.html i browser eller brug Live Server
```
### Chatprojekt (Python-backend)
### Chat Projekt (Python Backend)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Set GITHUB_TOKEN environment variable
# Indstil miljøvariablen GITHUB_TOKEN
python api.py
```
## Udviklingsworkflow
## Udviklingsarbejdsgang
### For indholdsbidragydere
### For indholds-bidragsydere
1. **Fork repositoryet** til din GitHub-konto
1. **Fork repositoriet** til din GitHub-konto
2. **Klon din fork** lokalt
3. **Opret en ny branch** til dine ændringer
4. Foretag ændringer i lektionindhold eller kodeeksempler
3. **Lav en ny branch** til dine ændringer
4. Lav ændringer i lektionsindhold eller kodeeksempler
5. Test eventuelle kodeændringer i relevante projektmapper
6. Indsend pull requests i henhold til bidragsretningslinjer
### For lærende
### For elever
1. Fork eller klon repositoryet
2. Naviger til lektionmapperne i rækkefølge
3. Læs README-filerne for hver lektion
4. Tag før-lektion quizzer på https://ff-quizzes.netlify.app/web/
5. Arbejd gennem kodeeksempler i lektionmapperne
6. Fuldfør opgaver og udfordringer
7. Tag efter-lektion quizzer
1. Fork eller klon repositoriet
2. Naviger sekventielt til lektionsmapperne
3. Læs README-filer for hver lektion
4. Gennemfør for-lektion-quizzer på https://ff-quizzes.netlify.app/web/
5. Arbejd med kodeeksempler i lektionsmapperne
6. Lav opgaver og udfordringer
7. Tag efter-lektion-quizzer
### Live udvikling
- **Dokumentation**: Kør `docsify serve` i roden (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-udvidelsen til HTML-projekter
- **API-projekter**: Kør `npm start` i de respektive API-mapper
- **API projekter**: Kør `npm start` i respektive API-mapper
## Testinstruktioner
### Test af Quiz App
### Quiz App test
```bash
cd quiz-app
npm run lint # Check for code style issues
npm run build # Verify build succeeds
npm run lint # Tjek for kode stil problemer
npm run build # Bekræft at build lykkes
```
### Test af Bank API
### Bank API test
```bash
cd 7-bank-project/api
npm run lint # Check for code style issues
node server.js # Verify server starts without errors
npm run lint # Tjek for kode stil problemer
node server.js # Bekræft at serveren starter uden fejl
```
### Generel testtilgang
### Generel testmetode
- Dette er et uddannelsesrepository uden omfattende automatiserede tests
- Dette er et uddannelses-repositorium uden omfattende automatiserede tests
- Manuel test fokuserer på:
- Kodeeksempler kører uden fejl
- Links i dokumentationen fungerer korrekt
- Projektbygninger fuldføres succesfuldt
- Links i dokumentationen virker korrekt
- Projekt builds gennemføres succesfuldt
- Eksempler følger bedste praksis
### Kontroller før indsendelse
### Forud for indsendelse checks
- Kør `npm run lint` i mapper med package.json
- Bekræft, at markdown-links er gyldige
- Bekræft at markdown-links er gyldige
- Test kodeeksempler i browser eller Node.js
- Kontroller, at oversættelser bevarer korrekt struktur
- Tjek at oversættelser bevarer korrekt struktur
## Kodestilretningslinjer
## Kodestil-retningslinjer
### JavaScript
- Brug moderne ES6+ syntaks
- Følg standard ESLint-konfigurationer leveret i projekterne
- Følg standard ESLint-konfigurationer fra projekterne
- Brug meningsfulde variabel- og funktionsnavne for uddannelsesmæssig klarhed
- Tilføj kommentarer, der forklarer koncepter for lærende
- Formater med Prettier, hvor det er konfigureret
- Tilføj kommentarer, der forklarer koncepter for elever
- Formatér med Prettier hvor det er konfigureret
### HTML/CSS
- Semantiske HTML5-elementer
- Principper for responsivt design
- Klare klassifikationsnavne
- Kommentarer, der forklarer CSS-teknikker for lærende
- Responsive designprincipper
- Klare klasse-navngivningskonventioner
- Kommentarer, der forklarer CSS-teknikker for elever
### Python
- PEP 8 stilretningslinjer
- PEP 8 stil-retningslinjer
- Klare, uddannelsesmæssige kodeeksempler
- Type hints, hvor det er nyttigt for læring
- Type hints hvor det er hjælpsomt for læring
### Markdown-dokumentation
### Markdown dokumentation
- Klar overskriftsstruktur
- Kodeblokke med sprogspecifikation
- Klar overskriftshierarki
- Kodeblokke med sprogspecificering
- Links til yderligere ressourcer
- Skærmbilleder og billeder i `images/` mapper
- Alt-tekst til billeder for tilgængelighed
- Skærmbilleder og billeder i `images/`-mapper
- ALT-tekst til billeder for tilgængelighed
### Filorganisation
- Lektioner nummereret sekventielt (1-getting-started-lessons, 2-js-basics, osv.)
- Lektioner nummereret sekventielt (1-getting-started-lessons, 2-js-basics, etc.)
- Hvert projekt har `solution/` og ofte `start/` eller `your-work/` mapper
- Billeder gemt i lektion-specifikke `images/` mapper
- Billeder gemt i lektion-specifikke `images/`-mapper
- Oversættelser i `translations/{language-code}/` struktur
## Bygning og udrulning
## Build og deploy
### Quiz App udrulning (Azure Static Web Apps)
### Quiz App deploy (Azure Static Web Apps)
Quiz-app er konfigureret til udrulning på Azure Static Web Apps:
quiz-app er konfigureret til Azure Static Web Apps deployment:
```bash
cd quiz-app
npm run build # Creates dist/ folder
# Deploys via GitHub Actions workflow on push to main
npm run build # Opretter dist/ mappe
# Udruller via GitHub Actions workflow ved push til main
```
Azure Static Web Apps konfiguration:
@ -193,86 +193,86 @@ Azure Static Web Apps konfiguration:
- **Output placering**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Generering af dokumentation som PDF
### Dokumentations PDF-generering
```bash
npm install # Install docsify-to-pdf
npm run convert # Generate PDF from docs
npm install # Installer docsify-to-pdf
npm run convert # Generer PDF fra docs
```
### Docsify-dokumentation
### Docsify dokumentation
```bash
npm install -g docsify-cli # Install Docsify globally
docsify serve # Serve on localhost:3000
npm install -g docsify-cli # Installer Docsify globalt
docsify serve # Server på localhost:3000
```
### Projekt-specifikke bygninger
### Projekt-specifikke builds
Hver projektmappe kan have sin egen byggeproces:
- Vue-projekter: `npm run build` skaber produktionsbundter
- Statiske projekter: Ingen byggeproces, server filer direkte
Hver projektmappe kan have sin egen build-proces:
- Vue-projekter: `npm run build` skaber produktionsbundles
- Statiske projekter: Ingen build-step, server filer direkte
## Retningslinjer for pull requests
## Pull Request retningslinjer
### Titelformat
### Titel-format
Brug klare, beskrivende titler, der angiver ændringsområdet:
- `[Quiz-app] Tilføj ny quiz til lektion X`
- `[Lesson-3] Ret stavefejl i terrarium-projekt`
- `[Translation] Tilføj spansk oversættelse til lektion 5`
Brug klare, beskrivende titler, der angiver område for ændring:
- `[Quiz-app] Tilføj ny quiz for lektion X`
- `[Lesson-3] Ret stavefejl i terrarium projekt`
- `[Translation] Tilføj spansk oversættelse for lektion 5`
- `[Docs] Opdater opsætningsinstruktioner`
### Påkrævede kontroller
### Nødvendige checks
Før indsendelse af en PR:
Før PR indsendes:
1. **Kodekvalitet**:
- Kør `npm run lint` i berørte projektmapper
- Ret alle linting-fejl og advarsler
2. **Bygverifikation**:
- Kør `npm run build`, hvis relevant
- Sørg for, at der ikke er byggefejl
2. **Build verifikation**:
- Kør `npm run build` hvis relevant
- Sikr at der ikke er build-fejl
3. **Linkvalidering**:
3. **Link validering**:
- Test alle markdown-links
- Bekræft, at billedreferencer fungerer
- Bekræft at billedreferencer virker
4. **Indholdsrevision**:
- Læs korrektur for stave- og grammatikfejl
- Sørg for, at kodeeksempler er korrekte og uddannelsesmæssige
- Bekræft, at oversættelser bevarer original betydning
4. **Indholds-gennemgang**:
- Korrekturlæs for stave- og grammatikfejl
- Sikr, at kodeeksempler er korrekte og pædagogiske
- Bekræft, at oversættelser bevarer oprindelig mening
### Bidragskrav
- Accepter Microsoft CLA (automatisk kontrol ved første PR)
- Accepter Microsoft CLA (automatisk tjek på første PR)
- Følg [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Se [CONTRIBUTING.md](./CONTRIBUTING.md) for detaljerede retningslinjer
- Referer til problemnumre i PR-beskrivelsen, hvis relevant
- Referer issues i PR-beskrivelse hvis relevant
### Reviewproces
### Gennemgangsproces
- PR'er gennemgås af maintainers og fællesskabet
- PR'er gennemgås af vedligeholdere og community
- Uddannelsesmæssig klarhed prioriteres
- Kodeeksempler skal følge aktuelle bedste praksis
- Oversættelser gennemgås for nøjagtighed og kulturel relevans
- Kodeeksempler skal følge nuværende bedste praksis
- Oversættelser gennemgås for nøjagtighed og kulturel passendehed
## Oversættelsessystem
### Automatisk oversættelse
- Bruger GitHub Actions med co-op-translator workflow
- Oversætter automatisk til 50+ sprog
- Kildemapper i hovedmapper
- Oversætter til 50+ sprog automatisk
- Kildefiler i hovedmapper
- Oversatte filer i `translations/{language-code}/` mapper
### Tilføjelse af manuelle oversættelsesforbedringer
1. Find filen i `translations/{language-code}/`
2. Foretag forbedringer, mens strukturen bevares
1. Find fil i `translations/{language-code}/`
2. Lav forbedringer mens struktur bevares
3. Sørg for, at kodeeksempler forbliver funktionelle
4. Test eventuelt lokaliseret quizindhold
4. Test eventuelt lokaliseret quiz-indhold
### Oversættelsesmetadata
@ -289,118 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Fejlfinding og problemløsning
## Debugging og fejlfinding
### Almindelige problemer
**Quiz-app starter ikke**:
- Kontroller Node.js version (v14+ anbefales)
**Quiz app starter ikke**:
- Tjek Node.js version (v14+ anbefales)
- Slet `node_modules` og `package-lock.json`, kør `npm install` igen
- Kontroller for portkonflikter (standard: Vite bruger port 5173)
- Tjek for portkonflikter (default: Vite bruger port 5173)
**API-server starter ikke**:
- Bekræft, at Node.js version opfylder minimumskrav (node >=10)
- Kontroller, om porten allerede er i brug
- Sørg for, at alle afhængigheder er installeret med `npm install`
**API server starter ikke**:
- Bekræft Node.js version opfylder minimum (node >=10)
- Tjek om port allerede er i brug
- Sørg for at alle afhængigheder er installeret med `npm install`
**Browserudvidelse indlæses ikke**:
- Bekræft, at manifest.json er korrekt formateret
- Kontroller browserkonsollen for fejl
- Følg browser-specifikke installationsinstruktioner for udvidelser
**Browser extension loader ikke**:
- Bekræft manifest.json er korrekt formateret
- Tjek browserkonsol for fejl
- Følg browser-specifikke installationsinstruktioner
**Problemer med Python-chatprojekt**:
- Sørg for, at OpenAI-pakken er installeret: `pip install openai`
- Bekræft, at GITHUB_TOKEN miljøvariablen er sat
- Kontroller GitHub Models adgangstilladelser
**Python chat projekt problemer**:
- Sørg for at OpenAI-pakken er installeret: `pip install openai`
- Bekræft at GITHUB_TOKEN miljøvariabel er sat
- Tjek GitHub Models adgangstilladelser
**Docsify serverer ikke dokumentation**:
**Docsify serverer ikke docs**:
- Installer docsify-cli globalt: `npm install -g docsify-cli`
- Kør fra repositoryets rodmappe
- Kontroller, at `docs/_sidebar.md` eksisterer
- Kør fra repositoriets rodmappe
- Tjek at `docs/_sidebar.md` findes
### Tips til udviklingsmiljø
- Brug VS Code med Live Server-udvidelsen til HTML-projekter
- Brug VS Code med Live Server-udvidelse til HTML-projekter
- Installer ESLint og Prettier-udvidelser for konsistent formatering
- Brug browserens DevTools til fejlfinding af JavaScript
- For Vue-projekter, installer Vue DevTools browserudvidelse
- Brug browser DevTools til JavaScript-debugging
- For Vue projekter, installer Vue DevTools browserudvidelse
### Ydelseshensyn
### Performance overvejelser
- Det store antal oversatte filer (50+ sprog) betyder, at fulde kloner er store
- Brug en lav dybde klon, hvis du kun arbejder på indhold: `git clone --depth 1`
- Ekskluder oversættelser fra søgninger, når du arbejder på engelsk indhold
- Byggeprocesser kan være langsomme ved første kørsel (npm install, Vite build)
- Mange oversatte filer (50+ sprog) betyder store fulde kloner
- Brug shallow clone, hvis du kun arbejder med indhold: `git clone --depth 1`
- Ekskluder oversættelser fra søgninger ved arbejde med engelsk indhold
- Build-processer kan være langsomme ved første kørsel (npm install, Vite build)
## Sikkerhedshensyn
## Sikkerhedsovervejelser
### Miljøvariabler
- API-nøgler må aldrig committes til repositoryet
- API-nøgler må aldrig committes til repositoriet
- Brug `.env` filer (allerede i `.gitignore`)
- Dokumenter påkrævede miljøvariabler i projekt-README'er
- Dokumenter nødvendige miljøvariabler i projekt-README'er
### Python-projekter
### Python projekter
- Brug virtuelle miljøer: `python -m venv venv`
- Hold afhængigheder opdateret
- GitHub tokens bør have minimale nødvendige tilladelser
- Hold afhængigheder opdaterede
- GitHub tokens skal have minimale nødvendige tilladelser
### GitHub Models adgang
- Personlige adgangstokens (PAT) kræves for GitHub Models
- Tokens bør gemmes som miljøvariabler
- Tokens eller legitimationsoplysninger må aldrig committes
- Personlige Access Tokens (PAT) kræves til GitHub Models
- Tokens skal opbevares som miljøvariabler
- Aldrig commit tokens eller legitimationsoplysninger
## Yderligere noter
### Målgruppe
- Komplette begyndere inden for webudvikling
- Studerende og selvstændige lærende
- Lærere, der bruger curriculumet i klasseværelser
- Indholdet er designet til tilgængelighed og gradvis færdighedsopbygning
- Komplette begyndere til webudvikling
- Studerende og selvstuderende
- Lærere, der bruger pensum i klasseværelser
- Indhold designet til tilgængelighed og gradvist færdighedsopbygning
### Uddannelsesfilosofi
- Projektbaseret læringsmetode
- Hyppige videnskontroller (quizzer)
- Hyppige videnscheck (quizzer)
- Praktiske kodningsøvelser
- Eksempler med anvendelse i den virkelige verden
- Virkelighedsnære anvendelseseksempler
- Fokus på grundlæggende før frameworks
### Repository-vedligeholdelse
### Vedligeholdelse af repositorium
- Aktivt fællesskab af lærende og bidragydere
- Aktivt fællesskab af elever og bidragsydere
- Regelmæssige opdateringer af afhængigheder og indhold
- Problemer og diskussioner overvåges af maintainers
- Issues og diskussioner overvåges af vedligeholdere
- Oversættelsesopdateringer automatiseret via GitHub Actions
### Relaterede ressourcer
- [Microsoft Learn-moduler](https://docs.microsoft.com/learn/)
- [Student Hub-ressourcer](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) anbefales til lærende
- Yderligere kurser: Generativ AI, Data Science, ML, IoT curriculum tilgængelige
- [Microsoft Learn moduler](https://docs.microsoft.com/learn/)
- [Student Hub ressourcer](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) anbefales til elever
- Yderligere kurser: Generativ AI, Data Science, ML, IoT pensum tilgængeligt
### Arbejde med specifikke projekter
For detaljerede instruktioner om individuelle projekter, se README-filerne i:
- `quiz-app/README.md` - Vue 3 quiz-applikation
For detaljerede instruktioner om individuelle projekter, se README-filer i:
- `quiz-app/README.md` - Vue 3 quiz applikation
- `7-bank-project/README.md` - Bankapplikation med autentifikation
- `5-browser-extension/README.md` - Udvikling af browserudvidelser
- `5-browser-extension/README.md` - Browser extension udvikling
- `6-space-game/README.md` - Canvas-baseret spiludvikling
- `9-chat-project/README.md` - AI-chatassistentprojekt
- `9-chat-project/README.md` - AI chat assistent projekt
### Monorepo-struktur
### Monorepo struktur
Selvom det ikke er en traditionel monorepo, indeholder dette repository flere uafhængige projekter:
Selvom det ikke er et traditionelt monorepo, indeholder dette repositorium flere uafhængige projekter:
- Hver lektion er selvstændig
- Projekter deler ikke afhængigheder
- Arbejd på individuelle projekter uden at påvirke andre
- Klon hele repoet for den fulde curriculumoplevelse
- Arbejd med individuelle projekter uden at påvirke andre
- Klon hele repo for den komplette penumsoplevelse
---
**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å at sikre nøjagtighed, skal det bemærkes, 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 ikke ansvar for eventuelle misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**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, bedes du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det oprindelige dokument på originalsproget bør betragtes som den autoritative kilde. For vigtig 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.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

192
translations/da/README.md
Unescape View File

@ -10,71 +10,70 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Webudvikling for begyndere - Et undervisningsforløb
# Webudvikling for begyndere - En læseplan
Lær grundprincipperne i webudvikling med vores 12-ugers omfattende kursus afholdt af Microsoft Cloud Advocates. Hver af de 24 lektioner dykker ned i JavaScript, CSS og HTML gennem hands-on projekter som terrarier, browser-udvidelser og rumspil. Gennemfør 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 undervisningsmetode. Start din kodningsrejse i dag!
Deltag i Azure AI Foundry Discord-fællesskabet
[![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:
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)
2. **Klon depotet**: `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)
1. **Fork repoet**: 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)
2. **Klon repoet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Deltag i Azure AI Foundry Discord og mød eksperter og medudviklere**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Multisprog-understøttelse
### 🌐 Fler-sprogsunderstøttelse
#### Understøttet via GitHub Action (Automatiseret & Altid Opdateret)
#### Understøttet via GitHub Action (Automatisk & Altid opdateret)
<!-- 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)
> **Foretrækker du at klone lokalt?**
> Dette depot inkluderer over 50 sprogoversættelser, hvilket øger downloadstørrelsen betydeligt. For at klone uden oversættelser, brug sparse checkout:
> Dette repo inkluderer 50+ sprogoversættelser, hvilket væsentligt forøger downloadstørrelsen. For at klone uden oversættelser, brug spars checkout:
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> 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 -->
**Hvis du ønsker yderligere understøttede oversættelsessprog er listet [her](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Hvis du ønsker at få yderligere oversættelses-sprog understøttet, er de listet [her](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Åbn i 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?_
Besøg [**Student Hub siden**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) hvor du finder begyndervenlige ressourcer, studentpakker og endda måder at få et gratis certifikatkupon. Dette er siden, du vil bogmærke og tjekke fra tid til anden, da indholdet udskiftes månedligt.
Besøg [**Student Hub siden**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), hvor du finder nybegynderressourcer, studenterpakker og endda måder at få et gratis certifikat-voucher. Det er siden, du vil bogmærke og tjekke fra tid til anden, da vi udskifter indhold månedligt.
### 📣 Meddelelse - Nye GitHub Copilot Agent mode udfordringer at løse!
### 📣 Meddelelse - Nye GitHub Copilot Agent mode udfordringer at fuldføre!
Ny udfordring tilføjet, find "GitHub Copilot Agent Challenge 🚀" i de fleste kapitler. Det er en ny udfordring for dig at løse ved hjælp af GitHub Copilot og Agent mode. Hvis du ikke har brugt Agent mode før, kan det ikke kun generere tekst, men også oprette og redigere filer, køre kommandoer og mere.
Ny udfordring tilføjet, kig efter "GitHub Copilot Agent Challenge 🚀" i de fleste kapitler. Det er en ny udfordring for dig at gennemføre ved hjælp af GitHub Copilot og Agent mode. Hvis du ikke har brugt Agent mode før, kan den ikke bare generere tekst, men også oprette og redigere filer, køre kommandoer og mere.
### 📣 Meddelelse - _Nyt projekt at bygge med Generative AI_
### 📣 Meddelelse - _Nyt Projekt at bygge ved hjælp af Generativ AI_
Nyt AI Assistant-projekt tilføjet, tjek det ud [projekt](./9-chat-project/README.md)
Nyt AI Assistant projekt lige tilføjet, tjek [projektet](./9-chat-project/README.md)
### 📣 Meddelelse - _Nyt undervisningsforløb_ om Generative AI for JavaScript er netop udgivet
### 📣 Meddelelse - _Ny Læseplan_ om Generativ AI for JavaScript blev lige udgivet
Gå ikke glip af vores nye Generative AI undervisningsforløb!
Gå ikke glip af vores nye Generativ AI læseplan!
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)
- Lektioner der dækker alt fra det grundlæggende til RAG.
- Interagér med historiske karakterer ved hjælp af GenAI og vores følgesvend-app.
- Sjov og engagerende fortælling, du vil rejse i tiden!
- Lektioner der dækker alt fra det grundlæggende til RAG.
- Interager med historiske figurer ved hjælp af GenAI og vores følgesvend-app.
- Sjov og engagerende fortælling, du vil rejse i tid!
![character](../../translated_images/da/character.5c0dd8e067ffd693.webp)
Hver lektion inkluderer en opgave, en videnscheck og en udfordring, der guider dig i at lære emner som:
- Prompting og prompt engineering
- Tekst- og billedapp-generering
Hver lektion inkluderer en opgave at fuldføre, en videnscheck og en udfordring, der guider dig i at lære emner som:
- Prompting og prompt engineering
- Tekst- og billedapp-generation
- Søgeapps
Besøg [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) for at komme i gang!
@ -83,39 +82,38 @@ Besøg [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) fo
## 🌱 Kom godt i gang
> **Lærere**, vi har [inkluderet nogle forslag](for-teachers.md) til, hvordan I kan bruge dette undervisningsforløb. Vi vil meget gerne have 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 du kan bruge denne læseplan. Vi vil meget gerne have din 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 forelæsningen og fortsæt med at læse forelæsningsmaterialet, gennemføre de forskellige aktiviteter og tjek din forståelse med quizzen efter forelæsningen.
**[Elever](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for hver lektion, start med en før-forelæsning quiz og fortsæt derefter med at læse forelæsningsmaterialet, gennemføre de forskellige aktiviteter og tjek din forståelse med efter-forelæsning quizzen.
For at forbedre din læring, forbind med dine medstuderende for at arbejde sammen på projekterne! 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 forbedre din læringsoplevelse, opfordres du til at forbinde med dine jævnbyrdige for at arbejde på projekterne sammen! Diskussioner opmuntres 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 udbygge din uddannelse anbefaler vi varmt at udforske [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for yderligere studie-materialer.
For at fortsætte 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æt dit miljø
### 📋 Opsætning af dit miljø
Dette undervisningsforløb har et udviklingsmiljø klar til brug! Når du starter, kan du vælge at køre undervisningsforløbet i en [Codespace](https://github.com/features/codespaces/) (_et browser-baseret, ingen installation nødvendig miljø_), eller lokalt på din computer ved brug 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 går i gang, kan du vælge at køre læseplanen i en [Codespace](https://github.com/features/codespaces/) (_et browserbaseret miljø uden installationer nødvendige_), eller lokalt på din computer med en teksteditor som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Opret dit eget depot
For at du nemt kan gemme dit arbejde, anbefales det, at du opretter din egen kopi af dette depot. Det kan du gøre ved at klikke på knappen **Use this template** øverst på siden. Dette opretter et nyt depot i din GitHub-konto med en kopi af undervisningsforløbet.
#### Opret dit repository
For at gøre det nemt for dig at 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 opretter et nyt repository på din GitHub-konto med en kopi af læseplanen.
Følg disse trin:
1. **Fork depotet**: 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`
Følg disse trin:
1. **Fork repoet**: Klik på knappen "Fork" øverst til højre på denne side.
2. **Klon repoet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Kør undervisningsforløbet i en Codespace
#### Kør læseplanen i en Codespace
I din kopi af dette depot, som du har oprettet, klik på **Code** knappen og vælg **Open with Codespaces**. Dette opretter en ny Codespace, hvor du kan arbejde.
I din kopi af dette repository, som du oprettede, klik på knappen **Code** og vælg **Open with Codespaces**. Dette opretter en ny Codespace til dig at arbejde i.
![Codespace](../../translated_images/da/createcodespace.0238bbf4d7a8d955.webp)
#### Kør undervisningsforløbet lokalt på din computer
For at køre dette undervisningsforløb lokalt på din computer, skal du bruge en teksteditor, en browser og et kommandolinjeværktøj. Vores første lektion, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), vil guide dig gennem forskellige muligheder for hvert af disse værktøjer, så du kan vælge, hvad der passer dig bedst.
#### Kør læseplanen lokalt på din computer
Vores anbefaling er 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 værktøjer i faget](../../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).
1. Klon dit depot til din computer. Det kan du gøre ved at klikke på **Code** knappen og kopiere URL'en:
1. Klon dit repository til din computer. Det kan du gøre ved at klikke på knappen **Code** og kopiere URL'en:
[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:
@ -124,7 +122,7 @@ Vores anbefaling er at bruge [Visual Studio Code](https://code.visualstudio.com/
git clone <your-repository-url>
```
2. Åbn mappen i Visual Studio Code. Du kan gøre dette 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 lige har klonet.
> Anbefalede Visual Studio Code-udvidelser:
@ -136,84 +134,84 @@ Vores anbefaling er at bruge [Visual Studio Code](https://code.visualstudio.com/
- valgfri sketchnote
- valgfri supplerende video
- for-lesson opvarmningsquiz
- skreven lektion
- for projektbaserede lektioner, trin-for-trin vejledninger i, hvordan man bygger projektet
- for-lektion opvarmningsquiz
- skriftlig lektion
- for projektbaserede lektioner, trin-for-trin vejledninger til hvordan man bygger projektet
- vidensprøver
- en udfordring
- supplerende læsning
- opgave
- [quiz efter lektionen](https://ff-quizzes.netlify.app/web/)
- [post-lesson quiz](https://ff-quizzes.netlify.app/web/)
> **En bemærkning 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 deployeres til Azure; følg instruktionen i `quiz-app` mappen.
> **En note om quizzer**: Alle quizzer er indeholdt 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 deployes til Azure; følg instruktionerne i `quiz-app` mappen.
## 🗃️ Lektioner
| | Projekt Navn | Koncepter undervist | Læringsmål | Linket Lektion | Forfatter |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Kom 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 med deres arbejde | [Intro til Programmeringssprog og Værktøjer](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Kom i Gang | Grundlæggende GitHub, inklusiv arbejde i et team | Hvordan man bruger GitHub i dit projekt, hvordan man samarbejder med andre om en kodebase | [Intro til GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Kom i Gang | Tilgængelighed | Lær det grundlæggende om webtilgængelighed | [Grundlæggende Tilgængelighed](./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 |
| 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 |
| 06 | JS Grundlæggende | Træffe beslutninger med JS | Lær hvordan man skaber betingelser i din kode ved hjælp af beslutningstagning | [Tag beslutninger](./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 |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML i Praksis | Byg HTML'en til at skabe et online terrarium, med fokus på at bygge et 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'en til at style det online terrarium, med fokus på det grundlæggende i CSS inklusiv at gøre siden responsiv | [Introduktion til CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-manipulation | Byg JavaScripten 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 |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Byg et Skrivespil | Lær hvordan man bruger tastaturhændelser til at styre logikken i din JavaScript-app | [Hændelsesdrevet Programmering](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Grøn Browser Udvidelse](./5-browser-extension/solution/README.md) | Arbejde med Browsere | Lær hvordan browsere fungerer, deres historie, og hvordan man opbygger de første elementer i en browserudvidelse | [Om Browsere](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Grøn Browser Udvidelse](./5-browser-extension/solution/README.md) | Byg et formular, kald et API og gem variabler i lokal lagring | Byg JavaScript-elementerne i din browserudvidelse for at kalde et API ved brug af variabler lagret i lokal lagring | [API'er, Formularer og Lokal Lagring](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Grøn Browser Udvidelse](./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 ydeevnen | [Baggrundsopgaver og Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Rumspil](./6-space-game/solution/README.md) | Mere avanceret spiludvikling med JavaScript | Lær om arv ved brug 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 |
| 16 | [Rumspil](./6-space-game/solution/README.md) | Tegning på canvas | Lær om Canvas API'et, der bruges til at tegne elementer på en skærm | [Tegning på Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Rumspil](./6-space-game/solution/README.md) | Flytte elementer rundt på skærmen | Opdag hvordan elementer kan få bevægelse ved brug af kartesiske koordinater og Canvas API'en | [Flytte elementer rundt](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Rumspil](./6-space-game/solution/README.md) | Kollision detektion | Få elementer til at kollidere og reagere på hinanden ved hjælp af tastetryk og lever en cooldown-funktion for at sikre spillets ydeevne | [Kollisiondetektion](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Rumspil](./6-space-game/solution/README.md) | Holde styr på point | Udfør matematiske beregninger baseret på spillets status og præstation | [Holde styr på point](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Rumspil](./6-space-game/solution/README.md) | Afslutte og genstarte spillet | Lær om at afslutte og genstarte spillet, inklusive oprydning af ressourcer og nulstilling af variabelværdier | [Afslutningsbetingelsen](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bank App](./7-bank-project/solution/README.md) | HTML-skabeloner og ruter i et Web App | Lær hvordan man opretter scaffoldet til en multipage hjemmesidestruktur ved brug af routing og HTML-skabeloner | [HTML-skabeloner og ruter](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bank 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 |
| 23 | [Bank 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 det, gemmer det, og bortskaffer det | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bank App](./7-bank-project/solution/README.md) | Koncepter for State Management | Lær hvordan din app bevarer tilstand og hvordan man styrer det programmæssigt | [State Management](./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 |
| 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 |
| | Projektnavn | Undervisede 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 | [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 GitHub, inkl. teamwork | Hvordan man bruger GitHub i sit projekt, hvordan man samarbejder med andre på 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 tilgængelighed](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScript datatyper | Det grundlæggende om JavaScript-datatyper | [Datatyper](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Funktioner og metoder | Lær om funktioner og metoder til at håndtere en applikations logik | [Funktioner og metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | Beslutningstagning med JS | Lær, hvordan du opretter betingelser i din kode ved hjælp af beslutningstagning | [Beslutningstagning](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | 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 |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML i praksis | Byg HTML for at skabe et online terrarium med fokus på at bygge 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å grundlæggende CSS inklusiv 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 |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Byg et skrive-spil | Lær at bruge tastaturhændelser til at styre logikken i din JavaScript-app | [Event-drevet 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 skaber de første elementer i en browserudvidelse | [Om browsere](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Byg en formular, kald et API og gem variabler i lokal lager | Byg JavaScript-elementerne i din browserudvidelse for at kalde et API ved hjælp af variabler gemt i lokal lager | [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, webperformance | Brug browserens baggrundsprocesser til at styre udvidelsens ikon; lær om webperformance og nogle optimeringer | [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 brug af både klasser og komposition samt Pub/Sub-mønsteret, som forberedelse til at bygge 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 |
| 17 | [Space Game](./6-space-game/solution/README.md) | Flytte elementer rundt på skærmen | Opdag, hvordan elementer kan få bevægelse ved brug af 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) | Kollisionregistrering | Få elementer til at kollidere og reagere på hinanden ved hjælp af tastetryk og tilføj en cooldown-funktion | [Kollisionregistrering](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Holde styr på score | Udfør matematiske beregninger baseret på spillets status og ydeevne | [Holde styr på score](./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 afslutning og genstart af spillet, inkl. oprydning af ressourcer og nulstilling af variable | [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 laver grundstrukturen for en multipages hjemmeside ved brug af routing og HTML-skabeloner | [HTML-skabeloner og ruter](./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 |
| 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 fjerner det | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Begreber om tilstandsstyring | Lær hvordan din app bevarer tilstand og hvordan man styrer den programmatisk | [Tilstandsstyring](./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 |
| 26 | [AI Assistants](./9-chat-project/README.md) | Arbejde med AI | Lær hvordan man bygger din egen AI-assistent | [AI Assistant projekt](./9-chat-project/README.md) | Chris |
## 🏫 Pædagogik
Vores pensum er designet med to nøglepædagogiske principper i tankerne:
Vores læseplan er designet med to nøglepædagogiske principper for øje:
* projektbaseret læring
* hyppige quizzer
Programmet underviser i JavaScripts, HTML's og CSS' grundlæggende elementer samt de nyeste værktøjer og teknikker, der bruges af nutidens webudviklere. Studerende får mulighed for at opnå praktisk erfaring ved at bygge et skrive spil, virtuelt terrarium, en miljøvenlig browserudvidelse, et rum-invader-stil spil og en bankapp til virksomheder. Ved slutningen af serien vil studerende have opnået en solid forståelse af webudvikling.
Programmet underviser i grundlæggende JavaScript, HTML og CSS samt de nyeste værktøjer og teknikker, der bruges af dagens webudviklere. Studerende får mulighed for at opnå praktisk erfaring ved at bygge et skrive-spil, et virtuelt terrarium, en miljøvenlig browserudvidelse, et space-invader-stil spil og en bankapp til virksomheder. Ved programmets afslutning vil de have opnået en solid forståelse af webudvikling.
> 🎓 Du kan tage de første par lektioner i dette pensum som en [Læringsvej](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn!
> 🎓 Du kan tage de første par lektioner i denne læseplan som en [Læringssti](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn!
Ved at sikre at indholdet er knyttet til projekter, bliver processen mere engagerende for eleverne og fastholdelsen af konceptet forbedres. Vi skrev også flere introduktionslektioner i JavaScript-grundlæggende for at introducere koncepter, parret 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 dette pensum.
Ved at sikre, at indholdet stemmer overens med projekterne, gøres processen mere engagerende for de studerende, og fastholdelsen af begreber vil blive styrket. Vi har også skrevet flere introduktionslektioner i JavaScript basics 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 denne læseplan.
Derudover sætter en lavrisiko quiz før en klasse elevens intention 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 helt eller delvist. Projekterne starter småt og bliver mere komplekse mod slutningen af 12-ugers cyklussen.
Derudover sætter en lavrisikoquiz før en lektion studentens intention på at lære et emne, mens en anden quiz efter lektionen sikrer yderligere fastholdelse. Denne læseplan er designet til at være fleksibel og sjov og kan tages i sin helhed eller delvist. Projekterne starter små og bliver gradvist mere komplekse ved slutningen af det 12-ugers forløb.
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 adopterer et framework, vil et godt næste skridt til at fuldføre 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 med vilje har undgået at introducere JavaScript-frameworks for at koncentrere os om de grundlæggende færdigheder, der kræves som webudvikler, inden man tager et framework i brug, kunne et godt næste skridt efter denne læseplan 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 værdsætter din konstruktive feedback!
> Besøg vores [Code of Conduct](CODE_OF_CONDUCT.md) og [Contributing](CONTRIBUTING.md)-retningslinjer. Vi ser frem til din konstruktive feedback!
## 🧭 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 af 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 så i roden af dette repo, skriv `docsify serve`. Websitet vil blive serveret på port 3000 på din localhost: `localhost:3000`.
## 📘 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
Vores team laver også andre kurser! Se:
## 🎒 Andre kurser
Vores team producerer andre kurser! Tjek dem ud:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agenter
@ -224,7 +222,7 @@ Vores team laver også andre kurser! Se:
---
### Generativ AI Serie
### Generativ AI-serie
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -232,7 +230,7 @@ Vores team laver også andre kurser! Se:
---
### Kerne Læring
### Kerne-læring
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -243,29 +241,29 @@ Vores team laver også andre kurser! Se:
---
### Copilot Serie
### Copilot-serie
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Få Hjælp
## Få hjælp
Hvis du sidder fast 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 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)
Hvis du har produktfeedback eller oplever fejl under udviklingen, besøg:
Hvis du har feedback på produktet 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)
## Licens
Dette repository er licenseret under MIT-licensen. Se [LICENSE](../../LICENSE) filen for flere oplysninger.
Dette repository er licenseret under MIT-licensen. Se [LICENSE](../../LICENSE)-filen for mere information.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**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 stræber efter 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. 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 stræber efter nøjagtighed, skal du være opmærksom på, at automatiske 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 opstår som følge af brugen af denne oversættelse.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

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

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:29:11+00:00",
"translation_date": "2026-02-06T08:54:39+00:00",
"source_file": "AGENTS.md",
"language_code": "sv"
},
@ -516,8 +516,8 @@
"language_code": "sv"
},
"README.md": {
"original_hash": "490c83786552d7fab6390991517bef09",
"translation_date": "2026-01-29T18:28:53+00:00",
"original_hash": "805cd399757df19e886e86f0891a1374",
"translation_date": "2026-02-06T08:50:17+00:00",
"source_file": "README.md",
"language_code": "sv"
},

282
translations/sv/AGENTS.md
Unescape View File

@ -2,53 +2,53 @@
## Projektöversikt
Detta är ett utbildningsmaterial för att lära ut grunderna i webbutveckling till nybörjare. Kursplanen är en omfattande 12-veckors kurs utvecklad av Microsoft Cloud Advocates, med 24 praktiska lektioner som täcker JavaScript, CSS och HTML.
Detta är ett utbildningsmaterial för att lära ut grunderna i webbutveckling till nybörjare. Kursen är en omfattande 12-veckors kurs utvecklad av Microsoft Cloud Advocates, med 24 praktiska lektioner som täcker JavaScript, CSS och HTML.
### Viktiga komponenter
- **Utbildningsinnehåll**: 24 strukturerade lektioner organiserade i projektbaserade moduler
- **Praktiska projekt**: Terrarium, Skrivarspel, Webbläsartillägg, Rymdspel, Bankapp, Kodredigerare och AI-chattassistent
- **Interaktiva quiz**: 48 quiz med 3 frågor vardera (före/efter lektion)
- **Flerspråkigt stöd**: Automatiserade översättningar till 50+ språk via GitHub Actions
- **Praktiska projekt**: Terrarium, Skrivspel, Webbläsartillägg, Rymdspel, Bankapp, Kodredigerare och AI-chattassistent
- **Interaktiva quiz**: 48 quiz med 3 frågor vardera (före-/efter-lektion bedömningar)
- **Fler språkstöd**: Automatiska översättningar till 50+ språk via GitHub Actions
- **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (för AI-projekt)
### Arkitektur
- Utbildningsmaterial med lektionbaserad struktur
- Utbildningsförråd med lektionsbaserad struktur
- Varje lektionsmapp innehåller README, kodexempel och lösningar
- Självständiga projekt i separata kataloger (quiz-app, olika lektionsprojekt)
- Översättningssystem med GitHub Actions (co-op-translator)
- Dokumentation tillgänglig via Docsify och som PDF
- Fristående projekt i separata kataloger (quiz-app, olika lektionsprojekt)
- Översättningssystem som använder GitHub Actions (co-op-translator)
- Dokumentation serveras via Docsify och finns som PDF
## Installationskommandon
## Uppstarts-kommandon
Detta material är främst avsett för att konsumera utbildningsinnehåll. För att arbeta med specifika projekt:
Det här arkivet är främst för konsumtion av utbildningsinnehåll. För att arbeta med specifika projekt:
### Huvudrepository-installation
### Huvudförrådets uppsättning
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Quiz-app-installation (Vue 3 + Vite)
### Quiz App-uppsättning (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # Start development server
npm run build # Build for production
npm run lint # Run ESLint
npm run dev # Starta utvecklingsserver
npm run build # Bygg för produktion
npm run lint # Kör ESLint
```
### Bankprojekt-API (Node.js + Express)
### Bankprojekt API (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # Start API server
npm run lint # Run ESLint
npm run format # Format with Prettier
npm start # Starta API-server
npm run lint # Kör ESLint
npm run format # Formatera med Prettier
```
### Webbläsartilläggsprojekt
@ -56,7 +56,7 @@ npm run format # Format with Prettier
```bash
cd 5-browser-extension/solution
npm install
# Follow browser-specific extension loading instructions
# Följ webbläsarspecifika instruktioner för att ladda tillägg
```
### Rymdspelsprojekt
@ -64,77 +64,77 @@ npm install
```bash
cd 6-space-game/solution
npm install
# Open index.html in browser or use Live Server
# Öppna index.html i webbläsaren eller använd Live Server
```
### Chattprojekt (Python-backend)
### Chattprojekt (Python Backend)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Set GITHUB_TOKEN environment variable
# Sätt miljövariabeln GITHUB_TOKEN
python api.py
```
## Utvecklingsarbetsflöde
### För innehållsbidragare
### För innehållsbidragsgivare
1. **Forka repositoryt** till ditt GitHub-konto
2. **Klona din fork** lokalt
1. **Fork:a förrådet** till ditt GitHub-konto
2. **Klon:a din fork** lokalt
3. **Skapa en ny gren** för dina ändringar
4. Gör ändringar i lektionsinnehåll eller kodexempel
5. Testa kodändringar i relevanta projektkataloger
6. Skicka pull requests enligt bidragsriktlinjerna
5. Testa ändringar i motsvarande projektkataloger
6. Skicka in pull requests i enlighet med bidragsriktlinjer
### För elever
1. Forka eller klona repositoryt
2. Navigera till lektionskatalogerna i ordning
3. Läs README-filerna för varje lektion
4. Gör quiz före lektionen på https://ff-quizzes.netlify.app/web/
1. Fork:a eller klona förrådet
2. Navigera sekventiellt genom lektionskataloger
3. Läs README-filer för varje lektion
4. Gör för-lektionsquiz på https://ff-quizzes.netlify.app/web/
5. Arbeta igenom kodexempel i lektionsmapparna
6. Slutför uppgifter och utmaningar
7. Gör quiz efter lektionen
6. Utför uppgifter och utmaningar
7. Gör efter-lektionsquiz
### Liveutveckling
### Live-utveckling
- **Dokumentation**: Kör `docsify serve` i root (port 3000)
- **Quiz-app**: Kör `npm run dev` i quiz-app-katalogen
- **Projekt**: Använd VS Code Live Server-tillägg för HTML-projekt
- **API-projekt**: Kör `npm start` i respektive API-kataloger
- **Dokumentation**: Kör `docsify serve` i roten (port 3000)
- **Quiz App**: Kör `npm run dev` i quiz-app-katalogen
- **Projekt**: Använd VS Code Live Server tillägg för HTML-projekt
- **API-projekt**: Kör `npm start` i respektive API-katalog
## Testinstruktioner
### Testning av quiz-app
### Quiz App-testning
```bash
cd quiz-app
npm run lint # Check for code style issues
npm run build # Verify build succeeds
npm run lint # Kontrollera kodstilsproblem
npm run build # Verifiera att bygget lyckas
```
### Testning av bank-API
### Bank API-testning
```bash
cd 7-bank-project/api
npm run lint # Check for code style issues
node server.js # Verify server starts without errors
npm run lint # Kontrollera kodstilproblem
node server.js # Verifiera att servern startar utan fel
```
### Allmän teststrategi
### Allmän testmetod
- Detta är ett utbildningsmaterial utan omfattande automatiserade tester
- Manuell testning fokuserar på:
- Detta är ett utbildningsförråd utan omfattande automatiska tester
- Manuella tester fokuserar på:
- Kodexempel körs utan fel
- Länkar i dokumentationen fungerar korrekt
- Projektbyggen slutförs framgångsrikt
- Projekten byggs klart utan problem
- Exempel följer bästa praxis
### Kontroll före inlämning
### Kontroll före inskick
- Kör `npm run lint` i kataloger med package.json
- Kontrollera att markdown-länkar är giltiga
- Verifiera att markdown-länkar är giltiga
- Testa kodexempel i webbläsare eller Node.js
- Kontrollera att översättningar behåller korrekt struktur
@ -143,7 +143,7 @@ node server.js # Verify server starts without errors
### JavaScript
- Använd modern ES6+ syntax
- Följ standard ESLint-konfigurationer som tillhandahålls i projekten
- Följ standard ESLint-konfigurationer som finns i projekten
- Använd meningsfulla variabel- och funktionsnamn för pedagogisk tydlighet
- Lägg till kommentarer som förklarar koncept för elever
- Formatera med Prettier där det är konfigurerat
@ -151,130 +151,130 @@ node server.js # Verify server starts without errors
### HTML/CSS
- Semantiska HTML5-element
- Principer för responsiv design
- Tydliga klassnamnskonventioner
- Responsiv designprinciper
- Klara klassnamnskonventioner
- Kommentarer som förklarar CSS-tekniker för elever
### Python
- PEP 8-stilriktlinjer
- Tydliga, pedagogiska kodexempel
- Klara, pedagogiska kodexempel
- Typanvisningar där det är hjälpsamt för lärande
### Markdown-dokumentation
- Tydlig rubrikhierarki
- Klar rubrikhierarki
- Kodblock med språkspecifikation
- Länkar till ytterligare resurser
- Skärmdumpar och bilder i `images/`-kataloger
- Skärmdumpar och bilder i `images/` mappar
- Alt-text för bilder för tillgänglighet
### Filorganisation
- Lektioner numrerade sekventiellt (1-getting-started-lessons, 2-js-basics, etc.)
- Varje projekt har `solution/` och ofta `start/` eller `your-work/`-kataloger
- Bilder lagras i lektionsspecifika `images/`-mappar
- Översättningar i `translations/{language-code}/`-struktur
- Varje projekt har `solution/` och ofta `start/` eller `your-work/` mappar
- Bilder lagras i lektionsspecifika `images/` mappar
- Översättningar i `translations/{language-code}/` struktur
## Bygg och distribution
### Quiz-app-distribution (Azure Static Web Apps)
### Distribution av Quiz App (Azure Static Web Apps)
Quiz-appen är konfigurerad för distribution via Azure Static Web Apps:
quiz-app är konfigurerad för distribution via Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Creates dist/ folder
# Deploys via GitHub Actions workflow on push to main
npm run build # Skapar dist/-mappen
# Distribuerar via GitHub Actions-arbetsflöde vid push till main
```
Konfiguration för Azure Static Web Apps:
- **App-plats**: `/quiz-app`
- **Utdata-plats**: `dist`
Azure Static Web Apps-konfiguration:
- **App plats**: `/quiz-app`
- **Utdata plats**: `dist`
- **Arbetsflöde**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Generering av dokumentations-PDF
### Generering av PDF-dokumentation
```bash
npm install # Install docsify-to-pdf
npm run convert # Generate PDF from docs
npm install # Installera docsify-to-pdf
npm run convert # Generera PDF från docs
```
### Docsify-dokumentation
```bash
npm install -g docsify-cli # Install Docsify globally
docsify serve # Serve on localhost:3000
npm install -g docsify-cli # Installera Docsify globalt
docsify serve # Servera på localhost:3000
```
### Projekt-specifika byggen
Varje projektkatalog kan ha sin egen byggprocess:
Varje projektmapp kan ha egen byggprocess:
- Vue-projekt: `npm run build` skapar produktionspaket
- Statiska projekt: Ingen byggsteg, servera filer direkt
- Statiska projekt: Ingen byggsteg, filer serveras direkt
## Riktlinjer för pull requests
## Pull Request-riktlinjer
### Titelformat
Använd tydliga, beskrivande titlar som indikerar ändringsområdet:
Använd klara, beskrivande titlar som tydligt anger ändringsområde:
- `[Quiz-app] Lägg till nytt quiz för lektion X`
- `[Lesson-3] Rätta stavfel i terrarium-projekt`
- `[Translation] Lägg till svensk översättning för lektion 5`
- `[Translation] Lägg till spansk översättning för lektion 5`
- `[Docs] Uppdatera installationsinstruktioner`
### Obligatoriska kontroller
Innan du skickar en PR:
Innan PR skickas in:
1. **Kodkvalitet**:
- Kör `npm run lint` i berörda projektkataloger
- Åtgärda alla lintningsfel och varningar
- Åtgärda alla lint-fel och varningar
2. **Byggverifiering**:
- Kör `npm run build` om tillämpligt
- Kontrollera att inga byggfel uppstår
- Säkerställ inga byggfel
3. **Länkvalidering**:
- Testa alla markdown-länkar
- Kontrollera att bildreferenser fungerar
- Verifiera bildreferenser fungerar
4. **Innehållsgranskning**:
- Korrekturläs för stavning och grammatik
- Kontrollera att kodexempel är korrekta och pedagogiska
- Verifiera att översättningar behåller ursprunglig mening
- Säkerställ att kodexempel är korrekta och pedagogiska
- Kontrollera att översättningar bevarar ursprungligt innehåll
### Bidragskrav
- Godkänn Microsoft CLA (automatisk kontroll vid första PR)
- Godkänn Microsoft CLA (automatiskt vid första PR)
- Följ [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Se [CONTRIBUTING.md](./CONTRIBUTING.md) för detaljerade riktlinjer
- Referera till ärendenummer i PR-beskrivningen om tillämpligt
- Referera ärendenummer i PR-beskrivning vid behov
### Granskningsprocess
- PRs granskas av underhållare och communityn
- PR granskas av underhållare och community
- Pedagogisk tydlighet prioriteras
- Kodexempel bör följa aktuella bästa praxis
- Översättningar granskas för noggrannhet och kulturell lämplighet
- Kodexempel ska följa aktuella bästa praxis
- Översättningar granskas för korrekthet och kulturell anpassning
## Översättningssystem
### Automatiserad översättning
### Automatisk översättning
- Använder GitHub Actions med co-op-translator-arbetsflöde
- Översätter automatiskt till 50+ språk
- Källfiler i huvudkataloger
- Översatta filer i `translations/{language-code}/`-kataloger
- Använder GitHub Actions med co-op-translator arbetsflöde
- Översätter till 50+ språk automatiskt
- Källfiler i huvuddirektorier
- Översatta filer i `translations/{language-code}/` kataloger
### Lägga till manuella förbättringar av översättningar
### Lägg till manuella förbättringar
1. Lokalisera filen i `translations/{language-code}/`
2. Gör förbättringar samtidigt som strukturen bevaras
3. Kontrollera att kodexempel förblir funktionella
4. Testa eventuellt lokaliserat quizinnehåll
1. Hitta fil i `translations/{language-code}/`
2. Gör förbättringar medan strukturen bevaras
3. Säkerställ att kodexempel fungerar som de ska
4. Testa eventuellt lokalt quiz-innehåll
### Metadata för översättningar
### Översättningsmetadata
Översatta filer inkluderar metadata-header:
```markdown
@ -293,114 +293,116 @@ CO_OP_TRANSLATOR_METADATA:
### Vanliga problem
**Quiz-appen startar inte**:
- Kontrollera Node.js-version (v14+ rekommenderas)
- Ta bort `node_modules` och `package-lock.json`, kör `npm install` igen
- Kontrollera portkonflikter (standard: Vite använder port 5173)
**Quiz app startar inte**:
- Kontrollera Node.js version (v14+ rekommenderas)
- Radera `node_modules` och `package-lock.json`, kör `npm install` igen
- Kontrollera om porten är upptagen (standard: Vite använder port 5173)
**API-servern startar inte**:
- Verifiera att Node.js-versionen uppfyller minimikrav (node >=10)
- Kontrollera att Node.js version är tillräckligt hög (node >=10)
- Kontrollera om porten redan används
- Säkerställ att alla beroenden är installerade med `npm install`
**Webbläsartillägget laddas inte**:
**Webbläsartillägg laddas inte**:
- Kontrollera att manifest.json är korrekt formaterad
- Kontrollera webbläsarkonsolen för fel
- Följ webbläsarspecifika installationsinstruktioner för tillägg
- Följ installationsinstruktioner för webbläsarspecifika tillägg
**Problem med Python-chattprojekt**:
**Problem med Python-chattprojektet**:
- Säkerställ att OpenAI-paketet är installerat: `pip install openai`
- Verifiera att GITHUB_TOKEN-miljövariabeln är inställd
- Kontrollera GitHub Models åtkomstbehörigheter
- Verifiera att miljövariabeln GITHUB_TOKEN är satt
- Kontrollera åtkomsttillstånd för GitHub Models
**Docsify serverar inte dokumentation**:
- Installera docsify-cli globalt: `npm install -g docsify-cli`
- Kör från repositorys root-katalog
- Kör från förrådets rotkatalog
- Kontrollera att `docs/_sidebar.md` finns
### Tips för utvecklingsmiljö
### Utvecklingsmiljötips
- Använd VS Code med Live Server-tillägg för HTML-projekt
- Installera ESLint och Prettier-tillägg för konsekvent formatering
- Använd webbläsarens utvecklingsverktyg för att felsöka JavaScript
- För Vue-projekt, installera Vue DevTools-webbläsartillägg
- Använd webbläsarens DevTools för JavaScript-felsökning
- För Vue-projekt, installera Vue DevTools webbläsartillägg
### Prestandaöverväganden
- Stort antal översatta filer (50+ språk) innebär att fullständiga kloner är stora
- Använd grundläggande klon om du bara arbetar med innehåll: `git clone --depth 1`
- Stort antal översatta filer (50+ språk) gör fulla kloningar stora
- Använd grundlig kloning för endast innehåll: `git clone --depth 1`
- Exkludera översättningar från sökningar när du arbetar med engelskt innehåll
- Byggprocesser kan vara långsamma vid första körningen (npm install, Vite build)
- Byggprocesser kan vara långsamma vid första körning (npm install, Vite build)
## Säkerhetsöverväganden
### Miljövariabler
- API-nycklar ska aldrig begås till repositoryt
- API-nycklar ska aldrig committas till förrådet
- Använd `.env`-filer (redan i `.gitignore`)
- Dokumentera nödvändiga miljövariabler i projektens README-filer
- Dokumentera nödvändiga miljövariabler i projektets README
### Python-projekt
- Använd virtuella miljöer: `python -m venv venv`
- Håll beroenden uppdaterade
- GitHub-token ska ha minimalt nödvändiga behörigheter
- GitHub-tokens bör ha minimala nödvändiga behörigheter
### GitHub Models-åtkomst
- Personliga åtkomsttoken (PAT) krävs för GitHub Models
- Token ska lagras som miljövariabler
- Begå aldrig token eller autentiseringsuppgifter
- Personliga access tokens (PAT) krävs för GitHub Models
- Tokens ska lagras som miljövariabler
- Aldrig committa tokens eller credentials
## Ytterligare anteckningar
### Målgrupp
- Helt nybörjare inom webbutveckling
- Fullständiga nybörjare i webbutveckling
- Studenter och självlärande
- Lärare som använder kursplanen i klassrum
- Innehållet är utformat för tillgänglighet och gradvis färdighetsbyggande
- Lärare som använder kursmaterial i klassrum
- Innehållet är utformat för tillgänglighet och gradvis kompetensuppbyggnad
### Pedagogisk filosofi
- Projektbaserad inlärningsmetod
- Projektbaserat lärande
- Frekventa kunskapskontroller (quiz)
- Praktiska kodövningar
- Exempel på verkliga applikationer
- Praktiska kodningsövningar
- Exempel på verkliga tillämpningar
- Fokus på grunder innan ramverk
### Repository-underhåll
### Underhåll av förrådet
- Aktiv community av elever och bidragsgivare
- Regelbundna uppdateringar av beroenden och innehåll
- Ärenden och diskussioner övervakas av underhållare
- Översättningsuppdateringar automatiserade via GitHub Actions
- Översättningsuppdateringar automatiseras via GitHub Actions
### Relaterade resurser
- [Microsoft Learn-moduler](https://docs.microsoft.com/learn/)
- [Student Hub-resurser](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) rekommenderas för elever
- Ytterligare kurser: Generativ AI, Data Science, ML, IoT-kursplaner tillgängliga
- Ytterligare kurser: Generativ AI, Data Science, ML, IoT-kurser tillgängliga
### Arbeta med specifika projekt
För detaljerade instruktioner om individuella projekt, se README-filerna i:
- `quiz-app/README.md` - Vue 3 quiz-applikation
För detaljerade instruktioner om individuella projekt, se README-filer i:
- `quiz-app/README.md` - Vue 3 quiz applikation
- `7-bank-project/README.md` - Bankapplikation med autentisering
- `5-browser-extension/README.md` - Utveckling av webbläsartillägg
- `6-space-game/README.md` - Canvas-baserad spelutveckling
- `9-chat-project/README.md` - AI-chattassistentprojekt
- `6-space-game/README.md` - Canvas-baserat spel
- `9-chat-project/README.md` - AI chatassistentprojekt
### Monorepo-struktur
Även om det inte är en traditionell monorepo, innehåller detta repository flera oberoende projekt:
Även om detta inte är ett traditionellt monorepo, innehåller förrådet flera fristående projekt:
- Varje lektion är självständig
- Projekt delar inte beroenden
- Arbeta med individuella projekt utan att påverka andra
- Klona hela repositoryt för hela kursupplevelsen
- Projekten delar inte beroenden
- Arbeta med enskilda projekt utan att påverka andra
- Klona hela förrådet för att få hela kursupplevelsen
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfriskrivning**:
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, vänligen notera att automatiska översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess originalspråk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, vänligen observera att automatiska översättningar kan innehålla fel eller brister. Det ursprungliga dokumentet på dess modersmål ska betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

197
translations/sv/README.md
Unescape View File

@ -1,188 +1,205 @@
# Webbprogrammering för nybörjare - En läroplan
[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
Lär dig grunderna i webbutveckling med vår 12-veckors omfattande kurs från Microsoft Cloud Advocates. Var och en av de 24 lektionerna går på djupet med JavaScript, CSS och HTML genom praktiska projekt som terrarier, webbläsartillägg och rymdspel. Delta i quiz, diskussioner och praktiska uppgifter. Förbättra dina färdigheter och optimera din kunskapsinlärning med vår effektiva projektbaserade pedagogik. Starta din kodningsresa idag!
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Webbutveckling för nybörjare - En läroplan
Lär dig grunderna i webbutveckling med vår omfattande 12-veckors kurs från Microsoft Cloud Advocates. Varje av de 24 lektionerna går på djupet i JavaScript, CSS och HTML genom praktiska projekt som terrarier, webbläsartillägg och rymdspel. Delta i quiz, diskussioner och praktiska uppgifter. Förbättra dina färdigheter och optimera din kunskapsinhämtning med vår effektiva projektbaserade pedagogik. Påbörja din kodningsresa idag!
Gå med i Azure AI Foundry Discord Community
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Följ dessa steg för att komma igång med dessa resurser:
1. **Gaffla (Fork) arkivet**: Klicka [![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. **Klona arkivet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Gå med i Azure AI Foundry Discord och träffa experter samt andra utvecklare**](https://discord.com/invite/ByRwuEEgH4)
1. **Forka arkivet**: Klicka [![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. **Klona arkivet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Gå med i Azure AI Foundry Discord och träffa experter och andra utvecklare**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Fler språkstöd
### 🌐 Stöd för flera språk
#### Stöds via GitHub Action (Automatiskt & Alltid uppdaterat)
#### Stöds via GitHub Action (Automatiserat & Alltid uppdaterat)
<!-- 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](../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](./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)
> **Vill du hellre klona lokalt?**
> **Föredrar du att klona lokalt?**
> Det här arkivet inkluderar över 50 språköversättningar vilket betydligt ökar nedladdningsstorleken. För att klona utan översättningar, använd sparse checkout:
> Detta arkiv innehåller över 50 språköversättningar vilket avsevärt ökar nedladdningsstorleken. För att klona utan översättningar, använd sparse checkout:
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Detta ger dig allt du behöver för att slutföra kursen med en mycket snabbare nedladdning.
> Detta ger dig allt du behöver för att genomföra kursen med en mycket snabbare nedladdning.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Om du önskar att få stöd för ytterligare översättningsspråk se listan [här](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Om du önskar fler stödda översättningsspråk finns de listade [här](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)
#### 🧑‍🎓 _Är du student?_
Besök [**Student Hub-sidan**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) där du hittar nybörjarresurser, studentpaket och till och med sätt att få ett gratiscertifikat. Detta är sidan du vill bokmärka och kolla regelbundet eftersom innehållet byts ut varje månad.
Besök [**Student Hub-sidan**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) där du hittar nybörjarresurser, studentpaket och till och med sätt att få ett gratis certifikatgiltighetsbevis. Detta är sidan du vill bokmärka och kolla in då och då eftersom vi byter ut innehåll varje månad.
### 📣 Meddelande - Nya GitHub Copilot Agent-lägesutmaningar att slutföra!
Ny utmaning tillagd, leta efter "GitHub Copilot Agent Challenge 🚀" i de flesta kapitel. Det är en ny utmaning för dig att slutföra med GitHub Copilot och Agent-läget. Om du inte har använt Agent-läget tidigare kan det inte bara generera text utan också skapa och redigera filer, köra kommandon med mera.
Ny utmaning tillagd, leta efter "GitHub Copilot Agent Challenge 🚀" i de flesta kapitel. Det är en ny utmaning för dig att slutföra med hjälp av GitHub Copilot och Agent-läget. Om du inte har använt Agent-läget tidigare kan det inte bara generera text utan även skapa och redigera filer, köra kommandon med mera.
### 📣 Meddelande - _Nytt projekt att bygga med generativ AI_
### 📣 Meddelande - _Nytt projekt att bygga med Generativ AI_
Nytt AI-assistentprojekt precis tillagt, kolla in [projektet](./9-chat-project/README.md)
Nytt AI-assistentprojekt tillagt, kolla in det [projekt](./9-chat-project/README.md)
### 📣 Meddelande - _Ny läroplan_ för generativ AI för JavaScript har precis släppts
### 📣 Meddelande - _Ny läroplan_ om Generativ AI för JavaScript har precis släppts
Missa inte vår nya Generative AI-läroplan!
Missa inte vår nya läroplan för Generativ AI!
Besök [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) för att komma igång!
![Bakgrund](../../translated_images/sv/background.148a8d43afde5730.webp)
![Background](../../translated_images/sv/background.148a8d43afde5730.webp)
- Lektioner som täcker allt från grunder till RAG.
- Interagera med historiska karaktärer med GenAI och vår följeslagsapp.
- Rolig och engagerande berättelse, du kommer att resa i tiden!
- Lektioner som täcker allt från grunderna till RAG.
- Interagera med historiska karaktärer med GenAI och vår medföljande app.
- Rolig och engagerande berättelse, du kommer att tidsresa!
![karaktär](../../translated_images/sv/character.5c0dd8e067ffd693.webp)
![character](../../translated_images/sv/character.5c0dd8e067ffd693.webp)
Varje lektion inkluderar en uppgift att slutföra, en kunskapskontroll och en utmaning som guidar dig genom ämnen som:
- Prompting och prompt-engineering
- Text- och bildapplikationsgenerering
- Sökapplikationer
Varje lektion inkluderar en uppgift att slutföra, en kunskapskontroll och en utmaning för att guida dig i ämnen som:
- Promptning och promptteknik
- Text- och bildappsgenerering
- Sökappar
Besök [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) för att komma igång!
## 🌱 Komma igång
## 🌱 Kom igång
> **Lärare**, vi har [inkluderat några förslag](for-teachers.md) på hur du kan använda den här läroplanen. Vi skulle uppskatta din feedback [i vårt diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Lärare**, vi har [inkluderat några förslag](for-teachers.md) om hur ni kan använda denna läroplan. Vi tar gärna emot er feedback [i vårt diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Studenter](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, för varje lektion, börja med ett förföreläsningsquiz och fortsätt sedan med att läsa föreläsningsmaterialet, slutföra de olika aktiviteterna och kontrollera din förståelse med ett efterföreläsningsquiz.
**[Studenter](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, för varje lektion, börja med ett förföreläsningsquiz och fortsätt sedan med att läsa föreläsningsmaterialet, genomföra olika aktiviteter och kontrollera din förståelse med ett efterföreläsningsquiz.
För att förbättra din inlärningsupplevelse, anslut med dina kamrater för att arbeta på projekten tillsammans! Diskussioner uppmuntras i vårt [diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) där vårt team av moderatorer finns till hands för att svara på dina frågor.
För att förbättra din lärandeupplevelse, koppla ihop dig med dina kurskamrater för att arbeta med projekten tillsammans! Diskussioner uppmuntras i vårt [diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) där vårt team av moderatorer finns tillgängliga för att svara på dina frågor.
För att fördjupa din utbildning rekommenderar vi starkt att utforska [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) för ytterligare studiematerial.
### 📋 Sätta upp din miljö
### 📋 Konfigurera din miljö
Den här läroplanen har en utvecklingsmiljö redo att använda! När du kommer igång kan du välja att köra läroplanen i en [Codespace](https://github.com/features/codespaces/) (_en webbläsarbaserad miljö utan behov av installationer_), eller lokalt på din dator med en textredigerare som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Denna läroplan har en utvecklingsmiljö redo att användas! När du börjar kan du välja att köra läroplanen i en [Codespace](https://github.com/features/codespaces/) (_en webbläsarbaserad miljö utan installationskrav_), eller lokalt på din dator med en textredigerare som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Skapa ditt arkiv
För att enkelt spara ditt arbete rekommenderas att du skapar din egen kopia av detta arkiv. Du kan göra det genom att klicka på knappen **Use this template** högst upp på sidan. Detta skapar ett nytt arkiv på ditt GitHub-konto med en kopia av läroplanen.
För att enkelt kunna spara ditt arbete rekommenderas det att du skapar en egen kopia av detta arkiv. Det kan du göra genom att klicka på knappen **Use this template** högst upp på sidan. Detta skapar ett nytt arkiv i ditt GitHub-konto med en kopia av läroplanen.
Följ stegen:
1. **Gaffla arkivet**: Klicka på "Fork"-knappen uppe till höger på denna sida.
2. **Klona arkivet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Följ dessa steg:
1. **Forka arkivet**: Klicka på knappen "Fork" uppe till höger på denna sida.
2. **Klona arkivet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Köra läroplanen i en Codespace
I din kopia av arkivet som du skapade klickar du på knappen **Code** och väljer **Open with Codespaces**. Det skapar en ny Codespace där du kan arbeta.
I din kopia av detta arkiv som du skapade, klicka på knappen **Code** och välj **Open with Codespaces**. Detta skapar en ny Codespace för dig att arbeta i.
![Codespace](../../translated_images/sv/createcodespace.0238bbf4d7a8d955.webp)
#### Köra läroplanen lokalt på din dator
För att köra denna läroplan lokalt på din dator behöver du en textredigerare, en webbläsare och ett kommandoradsverktyg. Vår första lektion, [Introduktion till programmeringsspråk och verktyg](../../1-getting-started-lessons/1-intro-to-programming-languages), guidar dig genom olika alternativ för var och en av dessa verktyg så att du kan välja det som passar dig bäst.
För att köra denna läroplan lokalt på din dator behöver du en textredigerare, en webbläsare och ett kommandoradsverktyg. Vår första lektion, [Introduktion till programmeringsspråk och verktyg](../../1-getting-started-lessons/1-intro-to-programming-languages), leder dig genom olika alternativ för varje verktyg så att du kan välja det som passar dig bäst.
Vi rekommenderar att använda [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) som din redigerare, som även har en inbyggd [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Du kan ladda ner Visual Studio Code [här](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Vi rekommenderar att använda [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) som redigerare, som även har en inbyggd [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Du kan ladda ner Visual Studio Code [här](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klona ditt arkiv till din dator. Du kan göra detta genom att klicka på **Code**-knappen och kopiera URL:en:
1. Klona ditt arkiv till din dator. Det kan du göra genom att klicka på **Code**-knappen och kopiera URL:en:
[CodeSpace](./images/createcodespace.png)
Öppna sedan [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) och kör följande kommando, byt ut `<your-repository-url>` mot URL:en du just kopierade:
Öppna sedan [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) inom [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) och kör följande kommando, byt ut `<your-repository-url>` mot den URL du precis kopierade:
```bash
git clone <your-repository-url>
```
2. Öppna mappen i Visual Studio Code. Det kan du göra genom att klicka på **Arkiv** > **Öppna mapp** och välja den mapp du just klonade.
2. Öppna mappen i Visual Studio Code. Du kan göra detta genom att klicka på **File** > **Open Folder** och välj mappen du just klonade.
> Rekommenderade Visual Studio Code-tillägg:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - för att förhandsgranska HTML-sidor inom Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - för att hjälpa dig skriva kod snabbare
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - för att hjälpa dig att skriva kod snabbare
## 📂 Varje lektion innehåller:
- valfri sketchnote
- valfri kompletterande video
- quiz som uppvärmning före lektion
- förberedande quiz före lektionen
- skriftlig lektion
- för projektbaserade lektioner, steg-för-steg-guider för att bygga projektet
- för projektbaserade lektioner, steg-för-steg-guider om hur man bygger projektet
- kunskapskontroller
- en utmaning
- kompletterande läsning
- uppgift
- [quiz efter lektionen](https://ff-quizzes.netlify.app/web/)
> **En notis om quiz**: Alla quiz finns i mappen Quiz-app, totalt 48 quiz med tre frågor vardera. De finns tillgängliga [här](https://ff-quizzes.netlify.app/web/), quiz-appen kan köras lokalt eller distribueras till Azure; följ instruktionerna i `quiz-app`-mappen.
> **En notering om quiz**: Alla quiz finns i Quiz-app mappen, totalt 48 quiz med tre frågor vardera. De finns tillgängliga [här](https://ff-quizzes.netlify.app/web/), quiz-appen kan köras lokalt eller distribueras till Azure; följ instruktionerna i `quiz-app` mappen.
## 🗃️ Lektioner
| | Projektnamn | Undervisade begrepp | Lärandemål | Länkad Lektion | Författare |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :-------------------------: |
| 01 | Komma igång | Introduktion till programmering och verktyg | Lär dig grunderna bakom de flesta programmeringsspråk och om mjukvara som hjälper professionella utvecklare i deras arbete | [Intro till programmeringsspråk och verktyg](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Komma igång | Grunderna i GitHub, inklusive samarbete i team | Hur man använder GitHub i sitt projekt, hur man samarbetar med andra på en kodbas | [Intro till GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Komma igång | Tillgänglighet | Lär dig grunderna i webbåtkomst | [Grundläggande tillgänglighet](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScripts datatyper | Grunderna i JavaScripts datatyper | [Datatyper](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Funktioner och metoder | Lär dig om funktioner och metoder för att hantera applikationens logiska flöde | [Funktioner och metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine och Christopher |
| 06 | JS Basics | Beslutsfattande med JS | Lär dig skapa villkor i din kod med beslutsfattande metoder | [Beslutsfattande](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Arrayer och loopar | Arbeta med data med arrayer och loopar i JavaScript | [Arrayer och loopar](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML i praktiken | Bygg HTML för att skapa ett online-terrarium, med fokus på att bygga layout | [Introduktion till HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS i praktiken | Bygg CSS för att styla online-terrarium, med fokus på CSS-grunder inklusive responsiv design av sidan | [Introduktion till CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-manipulation | Bygg JavaScript för att göra terrariet funktionellt som en drag/drop-gränssnitt, med fokus på closures och 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) | Bygg ett skrivspel | Lär dig använda tangentbords-händelser för att styra logiken i din JavaScript-app | [Händelsestyrd programmering](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Arbeta med webbläsare | Lär dig hur webbläsare fungerar, deras historia och hur man skissar upp de första delarna av en webbläsartillägg | [Om webbläsare](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bygga formulär, anropa API och lagra variabler i lokal lagring | Bygg JavaScript-elementen i din webbläsartillägg för att anropa ett API med variabler lagrade lokalt | [APIer, formulär och lokal lagring](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bakgrundsprocesser i webbläsaren, webbutförande | Använd webbläsarens bakgrundsprocesser för att hantera tilläggsikonen; lär dig om webbutförande och optimeringar för att göra | [Bakgrundsuppgifter och prestanda](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Mer avancerad spelutveckling med JavaScript | Lär dig om arv med både klasser och komposition och Pub/Sub-mönstret, som förberedelse för att bygga ett spel | [Introduktion till avancerad spelutveckling](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Rita på canvas | Lär dig om Canvas API, som används för att rita element på skärm | [Rita på canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Flytta element runt på skärmen | Upptäck hur element kan få rörelse med kartesiska koordinater och Canvas API | [Flytta element runt](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Kollisionsdetektion | Få element att kollidera och reagera på varandra med tangenttryckningar och ge en cooldown-funktion för att garantera spelets prestanda | [Kollisionsdetektion](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Hålla poäng | Utför matematiska beräkningar baserat på spelets status och prestanda | [Hålla poäng](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Avsluta och återstarta spelet | Lär dig om att avsluta och återstarta spelet, inklusive att rensa tillgångar och nollställa variabelvärden | [Avslutningsvillkor](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-mallar och routing i en webbapp | Lär dig skapa grunden för en flersidig webbplats arkitektur med routing och HTML-mallar | [HTML-mallar och routing](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Bygga inloggnings- och registreringsformulär | Lär dig om att bygga formulär och hantera valideringsrutiner | [Formulär](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metoder för att hämta och använda data | Hur data flödar in och ut ur din app, hur du hämtar den, lagrar den och gör dig av med den | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Begrepp om state management | Lär dig hur din app behåller state och hur du hanterar det programmatiskt | [State management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Arbeta med VScode | Lär dig använda en kodredigerare | [Använd VScode-kodredigerare](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Arbeta med AI | Lär dig bygga din egen AI-assistent | [AI-assistentprojekt](./9-chat-project/README.md) | Chris |
| | Projektnamn | Begrepp som lärs ut | Lärandemål | Länkat lektion | Författare |
| :-: | :------------------------------------------------------: | :------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------: | :------------------------: |
| 01 | Komma igång | Introduktion till programmering och verktyg | Lär dig de grundläggande principerna bakom de flesta programmeringsspråk och om mjukvara som hjälper professionella utvecklare | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Komma igång | Grundläggande GitHub, inklusive att arbeta i team | Hur du använder GitHub i ditt projekt, hur man samarbetar med andra på en kodbas | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Komma igång | Tillgänglighet | Lär dig grunderna i webbtillgänglighet | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Grundläggande | JavaScript-datatyper | Grunderna i JavaScript-datatyper | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Grundläggande | Funktioner och metoder | Lär dig om funktioner och metoder för att hantera ett programs logikflöde | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine och Christopher |
| 06 | JS Grundläggande | Beslutsfattande med JS | Lär dig skapa villkor i din kod med hjälp av beslutsfattandemetoder | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Grundläggande | Arrayer och loopar | Arbeta med data med arrayer och loopar i JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML i praktiken | Bygg HTML för att skapa ett online-terrarie, med fokus på att bygga layout | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS i praktiken | Bygg CSS för att styla online-terrariet, med fokus på grundläggande CSS inklusive att göra sidan responsiv | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-manipulation | Bygg JavaScript för att göra terrariet som en drag/drop-gränssnitt, med fokus på closures och 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) | Skapa ett skrivspel | Lär dig hur man använder tangentbords-händelser för att driva logiken i din JavaScript-app | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Arbeta med webbläsare | Lär dig hur webbläsare fungerar, deras historia, och hur man skapar de första elementen i en webbläsartillägg | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bygga ett formulär, anropa ett API och spara variabler lokalt | Bygg JavaScript-elementen i din webbläsartillägg för att anropa ett API med variabler som lagras lokalt | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bakgrundsprocesser i webbläsaren, webbprestanda | Använd webbläsarens bakgrundsprocesser för att hantera tilläggsikonen; lär dig om webbprestanda och optimeringar | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Mer avancerad spelutveckling med JavaScript | Lär dig om arv med både klasser och sammansättning samt Pub/Sub-mönstret, som förberedelse för att bygga ett spel | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Rita på canvas | Lär dig om Canvas API, som används för att rita element på en skärm | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Flytta element runt på skärmen | Upptäck hur element kan få rörelse med kartesiska koordinater och Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Kollisiondetektion | Få element att kollidera och reagera på varandra med tangentryck samt tillhandahålla en cooldown-funktion för prestanda | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Poängräkning | Utför matematiska beräkningar baserat på spelets status och prestanda | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Avsluta och starta om spelet | Lär dig om att avsluta och starta om spelet, inklusive att städa upp resurser och återställa variabelvärden | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-mallar och rutter i en webbapp | Lär dig skapa grunden för en multipage-webbplats arkitektur med routing och HTML-mallar | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Bygg inloggning och registreringsformulär | Lär dig om att bygga formulär och hantera valideringsrutiner | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metoder för att hämta och använda data | Hur data flödar in och ut ur din app, hur man hämtar, lagrar och gör sig av med det | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Begrepp för tillståndshantering | Lär dig hur din app behåller tillstånd och hur man hanterar det programmässigt | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Arbeta med VScode | Lär dig hur man använder en kodredigerare | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Arbeta med AI | Lär dig hur man bygger din egen AI-assistent | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogik
Vår läroplan är utformad med två centrala pedagogiska principer i åtanke:
Vårt läroplan är utformad med två viktiga pedagogiska principer i åtanke:
* projektbaserat lärande
* frekventa quiz
Programmet lär ut grunderna i JavaScript, HTML och CSS, samt de senaste verktygen och teknikerna som används av dagens webbutvecklare. Studenterna får möjlighet att utveckla praktisk erfarenhet genom att bygga ett skrivspel, virtuellt terrarium, miljövänlig webbläsartillägg, space-invader-stil spel, och en bankapp för företag. I slutet av serien kommer studenterna ha fått en solid förståelse för webbutveckling.
Programmet lär ut grunderna i JavaScript, HTML och CSS, samt de senaste verktygen och teknikerna som dagens webbutvecklare använder. Studenter får möjlighet att utveckla praktisk erfarenhet genom att skapa ett skrivspel, virtuellt terrarium, miljövänlig webbläsartillägg, spel i rymdinvasionsstil och en bankapp för företag. I slutet av serien kommer studenterna ha fått en solid förståelse för webbutveckling.
> 🎓 Du kan ta de första lektionerna i detta läroprogram som en [Lärväg](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn!
> 🎓 Du kan ta de första lektionerna i denna läroplan som en [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn!
Genom att säkerställa att innehållet matchar projekt görs processen mer engagerande för studenter och konceptens retention ökar. Vi skrev också flera startlektioner i JavaScript-grunder för att introducera begrepp, ihopkopplade med en video från "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"-samlingen av videotutorials, där några av författarna bidragit till denna läroplan.
Genom att säkerställa att innehållet stämmer överens med projekten blir processen mer engagerande för studenter och retentionen av begrepp kommer att öka. Vi skrev också flera startlektioner i JavaScript-grunder för att introducera begrepp, parat med en video från "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" samlingen av videotutorials, vars några författare bidrog till denna läroplan.
Dessutom sätter ett lågintensivt quiz före en lektion studentens intention att lära sig ett ämne, medan ett andra quiz efter lektion säkerställer ytterligare retention. Denna läroplan är designad för att vara flexibel och rolig och kan tas i sin helhet eller delvis. Projekten börjar små och blir alltmer komplexa mot slutet av den 12-veckors cykeln.
Dessutom sätter ett lågintensivt quiz före en lektion studentens intention mot att lära sig ett ämne, medan ett andra quiz efter lektionen säkerställer ytterligare retention. Denna läroplan är designad att vara flexibel och rolig och kan tas i sin helhet eller delvis. Projekten startar små och blir mer komplexa vid slutet av den 12-veckors cykeln.
Även om vi medvetet har undvikit att introducera JavaScript-ramverk för att koncentrera oss på de grundläggande färdigheter som behövs som webbutvecklare innan man går vidare till ett ramverk, skulle ett bra nästa steg efter denna läroplan vara att lära sig om Node.js via en annan samling videor: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Medan vi medvetet undvikit att introducera JavaScript-ramverk för att koncentrera oss på de grundläggande färdigheter som behövs som webbutvecklare innan man tar till ett ramverk, skulle ett bra nästa steg efter denna läroplan vara att lära sig om Node.js via en annan samling av videor: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Besök våra riktlinjer för [Code of Conduct](CODE_OF_CONDUCT.md) och [Bidragande](CONTRIBUTING.md). Vi välkomnar din konstruktiva feedback!
> Besök våra [Uppförandekod](CODE_OF_CONDUCT.md) och [Bidragsriktlinjer](CONTRIBUTING.md). Vi välkomnar din konstruktiva feedback!
## 🧭 Offline-åtkomst
Du kan köra denna dokumentation offline med [Docsify](https://docsify.js.org/#/). Forka detta repo, [installera Docsify](https://docsify.js.org/#/quickstart) på din lokala dator, och skriv sedan `docsify serve` i roten av detta repo. Webbplatsen kommer att serveras på port 3000 på din lokala värd: `localhost:3000`.
Du kan köra denna dokumentation offline genom att använda [Docsify](https://docsify.js.org/#/). Forka detta repo, [installera Docsify](https://docsify.js.org/#/quickstart) på din lokala dator, och sedan i root-mappen av detta repo, skriv `docsify serve`. Webbplatsen kommer att serveras på port 3000 på din localhost: `localhost:3000`.
## 📘 PDF
@ -196,10 +213,10 @@ Vårt team producerar andra kurser! Kolla in:
### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / 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)
[![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)
@ -215,7 +232,7 @@ Vårt team producerar andra kurser! Kolla in:
---
### Kärninlärning
### Grundläggande lärande
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -234,21 +251,21 @@ Vårt team producerar andra kurser! Kolla in:
## Få hjälp
Om du fastnar eller har frågor om att bygga AI-appar. Gå med i gemenskapen av andra lärande och erfarna utvecklare i diskussioner om MCP. Det är en stödjande gemenskap där frågor är välkomna och kunskap delas fritt.
Om du fastnar eller har frågor om att bygga AI-appar. Gå med i samtal med andra lärande och erfarna utvecklare om MCP. Det är en stödjande gemenskap där frågor är välkomna och kunskap delas fritt.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Om du har produktfeedback eller hittar fel under byggandet, besök:
Om du har produktfeedback eller stöter på fel vid bygget, 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)
## Licens
Detta förvar är licensierat under MIT-licensen. Se [LICENSE](../../LICENSE)-filen för mer information.
Detta arkiv är licensierat under MIT-licensen. Se filen [LICENSE](../../LICENSE) för mer information.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfriskrivning**:
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, vänligen var medveten om att automatiska översättningar kan innehålla fel eller brister. Det ursprungliga dokumentet på dess modersmål ska betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.
**Ansvarsfriskrivning**:
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, var vänlig observera att automatiska översättningar kan innehålla fel eller brister. Det ursprungliga dokumentet på dess modersmål bör betraktas som den auktoritativa källan. För viktig information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för några missförstånd eller feltolkningar som uppstår vid användning av denna översättning.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

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

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:28:21+00:00",
"translation_date": "2026-02-06T08:53:26+00:00",
"source_file": "AGENTS.md",
"language_code": "th"
},
@ -516,8 +516,8 @@
"language_code": "th"
},
"README.md": {
"original_hash": "490c83786552d7fab6390991517bef09",
"translation_date": "2026-01-29T18:27:19+00:00",
"original_hash": "805cd399757df19e886e86f0891a1374",
"translation_date": "2026-02-06T08:46:25+00:00",
"source_file": "README.md",
"language_code": "th"
},

366
translations/th/AGENTS.md
Unescape View File

@ -1,282 +1,282 @@
# AGENTS.md
## ภาพรวมของโปรเจกต์
## ภาพรวมโครงการ
นี่คือคลังหลักสูตรการศึกษาเพื่อสอนพื้นฐานการพัฒนาเว็บสำหรับผู้เริ่มต้น หลักสูตรนี้เป็นโปรแกรมเรียนรู้แบบครบวงจร 12 สัปดาห์ที่พัฒนาโดย Microsoft Cloud Advocates ซึ่งประกอบด้วยบทเรียนเชิงปฏิบัติ 24 บทที่ครอบคลุม JavaScript, CSS และ HTML
นี่คือที่เก็บหลักสูตรการศึกษาสำหรับสอนพื้นฐานการพัฒนาเว็บแก่ผู้เริ่มต้น หลักสูตรเป็นคอร์สครบถ้วน 12 สัปดาห์ซึ่งพัฒนาโดย Microsoft Cloud Advocates โดยมีบทเรียนเชิงปฏิบัติการ 24 บทเรียนครอบคลุม JavaScript, CSS และ HTML
### ส่วนประกอบสำคัญ
### องค์ประกอบสำคัญ
- **เนื้อหาการศึกษา**: บทเรียนที่มีโครงสร้าง 24 บท จัดเป็นโมดูลตามโปรเจกต์
- **โปรเจกต์เชิงปฏิบัติ**: Terrarium, เกมพิมพ์ดีด, ส่วนขยายเบราว์เซอร์, เกมอวกาศ, แอปธนาคาร, ตัวแก้ไขโค้ด และผู้ช่วยแชท AI
- **แบบทดสอบเชิงโต้ตอบ**: แบบทดสอบ 48 ชุด ชุดละ 3 คำถาม (การประเมินก่อน/หลังบทเรียน)
- **เนื้อหาการศึกษา**: 24 บทเรียนที่จัดเรียงอย่างมีโครงสร้างเป็นโมดูลตามโครงการ
- **โครงการเชิงปฏิบัติการ**: Terrarium, เกมพิมพ์, ส่วนขยายเบราว์เซอร์, เกมอวกาศ, แอปธนาคาร, ตัวแก้ไขโค้ด, และผู้ช่วยแชท AI
- **แบบทดสอบแบบโต้ตอบ**: 48 แบบทดสอบโดยมี 3 คำถามแต่ละแบบ (การประเมินก่อน/หลังบทเรียน)
- **รองรับหลายภาษา**: การแปลอัตโนมัติสำหรับมากกว่า 50 ภาษาโดยใช้ GitHub Actions
- **เทคโนโลยี**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (สำหรับโปรเจกต์ AI)
- **เทคโนโลยี**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (สำหรับโครงการ AI)
### สถาปัตยกรรม
- คลังการศึกษาที่มีโครงสร้างตามบทเรียน
- โฟลเดอร์ของแต่ละบทเรียนประกอบด้วย README, ตัวอย่างโค้ด และคำตอบ
- โปรเจกต์แยกต่างหากในไดเรกทอรีเฉพาะ (quiz-app, โปรเจกต์บทเรียนต่างๆ)
- ระบบการแปลโดยใช้ GitHub Actions (co-op-translator)
- เอกสารให้บริการผ่าน Docsify และมีให้ดาวน์โหลดในรูปแบบ PDF
- ที่เก็บเนื้อหาการศึกษาที่มีโครงสร้างตามบทเรียน
- โฟลเดอร์แต่ละบทเรียนประกอบด้วย README, ตัวอย่างโค้ด และวิธีแก้ปัญหา
- โครงการแบบสแตนด์อโลนในโฟลเดอร์แยกต่างหาก (quiz-app, โครงการบทเรียนต่างๆ)
- ระบบแปลโดยใช้ GitHub Actions (co-op-translator)
- เอกสารให้บริการผ่าน Docsify และพร้อมใช้งานในรูปแบบ PDF
## คำสั่งการตั้งค่า
## คำสั่งการติดตั้ง
คลังนี้ถูกออกแบบมาเพื่อการบริโภคเนื้อหาการศึกษาเป็นหลัก สำหรับการทำงานกับโปรเจกต์เฉพาะ:
ที่เก็บนี้เน้นไปที่การบริโภคเนื้อหาการศึกษาหลัก สำหรับการทำงานกับโครงการเฉพาะ:
### การตั้งค่าคลังหลัก
### การติดตั้งที่เก็บหลัก
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### การตั้งค่าแอปแบบทดสอบ (Vue 3 + Vite)
### การติดตั้ง Quiz App (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # Start development server
npm run build # Build for production
npm run lint # Run ESLint
npm run dev # เริ่มเซิร์ฟเวอร์พัฒนา
npm run build # สร้างสำหรับโปรดักชัน
npm run lint # รัน ESLint
```
### API ของโปรเจกต์ธนาคาร (Node.js + Express)
### โครงการ API ธนาคาร (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # Start API server
npm run lint # Run ESLint
npm run format # Format with Prettier
npm start # เริ่มต้นเซิร์ฟเวอร์ API
npm run lint # รัน ESLint
npm run format # จัดรูปแบบด้วย Prettier
```
### โปรเจกต์ส่วนขยายเบราว์เซอร์
### โครงการส่วนขยายเบราว์เซอร์
```bash
cd 5-browser-extension/solution
npm install
# Follow browser-specific extension loading instructions
# ปฏิบัติตามคำแนะนำการโหลดส่วนขยายเฉพาะเบราว์เซอร์
```
### โปรเจกต์เกมอวกาศ
### โครงการเกมอวกาศ
```bash
cd 6-space-game/solution
npm install
# Open index.html in browser or use Live Server
# เปิดไฟล์ index.html ในเบราว์เซอร์หรือใช้ Live Server
```
### โปรเจกต์แชท (Python Backend)
### โครงการแชท (backend ด้วย Python)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Set GITHUB_TOKEN environment variable
# ตั้งค่าตัวแปรสภาพแวดล้อม GITHUB_TOKEN
python api.py
```
## เวิร์กโฟลว์การพัฒนา
## กระบวนการพัฒนา
### สำหรับผู้ร่วมสร้างเนื้อหา
### สำหรับผู้มีส่วนร่วมในเนื้อหา
1. **Fork คลัง** ไปยังบัญชี GitHub ของคุณ
2. **Clone fork ของคุณ** ลงในเครื่อง
1. **Fork ที่เก็บนี้** ไปยังบัญชี GitHub ของคุณ
2. **โคลนโฟล์กของคุณ** ลงในเครื่อง
3. **สร้างสาขาใหม่** สำหรับการเปลี่ยนแปลงของคุณ
4. ทำการเปลี่ยนแปลงเนื้อหาบทเรียนหรือตัวอย่างโค้ด
5. ทดสอบการเปลี่ยนแปลงโค้ดในไดเรกทอรีโปรเจกต์ที่เกี่ยวข้อง
4. แก้ไขเนื้อหาบทเรียนหรือตัวอย่างโค้ด
5. ทดสอบการเปลี่ยนแปลงโค้ดในโฟลเดอร์โครงการที่เกี่ยวข้อง
6. ส่ง pull request ตามแนวทางการมีส่วนร่วม
### สำหรับผู้เรียน
1. Fork หรือ Clone คลัง
2. ไปยังไดเรกทอรีบทเรียนตามลำดับ
3. อ่านไฟล์ README ของแต่ละบทเรียน
1. Fork หรือโคลนที่เก็บนี้
2. เข้าสู่โฟลเดอร์บทเรียนตามลำดับ
3. อ่านไฟล์ README สำหรับแต่ละบทเรียน
4. ทำแบบทดสอบก่อนบทเรียนที่ https://ff-quizzes.netlify.app/web/
5. ทำความเข้าใจตัวอย่างโค้ดในโฟลเดอร์บทเรียน
6. ทำแบบฝึกหัดและความท้าทาย
5. ทำความเข้าใจกับตัวอย่างโค้ดในโฟลเดอร์บทเรียน
6. ทำงานมอบหมายและความท้าทายให้เสร็จ
7. ทำแบบทดสอบหลังบทเรียน
### การพัฒนาแบบสด
- **เอกสาร**: รัน `docsify serve` ใน root (พอร์ต 3000)
- **แอปแบบทดสอบ**: รัน `npm run dev` ในไดเรกทอรี quiz-app
- **โปรเจกต์**: ใช้ส่วนขยาย Live Server ของ VS Code สำหรับโปรเจกต์ HTML
- **โปรเจกต์ API**: รัน `npm start` ในไดเรกทอรี API ที่เกี่ยวข้อง
- **เอกสาร**: รัน `docsify serve` ในโฟลเดอร์ราก (พอร์ต 3000)
- **Quiz App**: รัน `npm run dev` ในโฟลเดอร์ quiz-app
- **โครงการ**: ใช้ VS Code Live Server extension สำหรับโครงการ HTML
- **โครงการ API**: รัน `npm start` ในโฟลเดอร์ API ที่เกี่ยวข้อง
## คำแนะนำการทดสอบ
### การทดสอบแอปแบบทดสอบ
### การทดสอบ Quiz App
```bash
cd quiz-app
npm run lint # Check for code style issues
npm run build # Verify build succeeds
npm run lint # ตรวจสอบปัญหาสไตล์โค้ด
npm run build # ยืนยันการสร้างสำเร็จ
```
### การทดสอบ API ของธนาคาร
### การทดสอบ API ธนาคาร
```bash
cd 7-bank-project/api
npm run lint # Check for code style issues
node server.js # Verify server starts without errors
npm run lint # ตรวจสอบปัญหาสไตล์โค้ด
node server.js # ยืนยันว่าเซิร์ฟเวอร์เริ่มต้นโดยไม่มีข้อผิดพลาด
```
### แนวทางการทดสอบทั่วไป
- คลังนี้เป็นคลังการศึกษา ไม่มีการทดสอบอัตโนมัติที่ครอบคลุม
- การทดสอบด้วยมือเน้นที่:
- เป็นที่เก็บเนื้อหาการศึกษาซึ่งไม่มีการทดสอบอัตโนมัติอย่างครบถ้วน
- การทดสอบด้วยมือมุ่งเน้นที่:
- ตัวอย่างโค้ดทำงานโดยไม่มีข้อผิดพลาด
- ลิงก์ในเอกสารทำงานถูกต้อง
- การสร้างโปรเจกต์สำเร็จ
- ตัวอย่างปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุด
- ลิงก์ในเอกสารใช้งานได้ถูกต้อง
- การสร้างโปรเจกต์สำเร็จลุล่วง
- ตัวอย่างปฏิบัติตามแนวทางปฏิบัติที่ดี
### การตรวจสอบก่อนส่ง
- รัน `npm run lint` ในไดเรกทอรีที่มี package.json
- ตรวจสอบลิงก์ markdown ว่าถูกต้อง
- รัน `npm run lint` ในโฟลเดอร์ที่มี package.json
- ตรวจสอบลิงก์ markdown ว่ายังใช้งานได้
- ทดสอบตัวอย่างโค้ดในเบราว์เซอร์หรือ Node.js
- ตรวจสอบว่าโครงสร้างการแปลยังคงถูกต้อง
- ตรวจสอบว่าแปลยังคงรักษาโครงสร้างไว้ถูกต้อง
## แนวทางการเขียนโค้ด
## แนวทางสไตล์โค้ด
### JavaScript
- ใช้ไวยากรณ์ ES6+ สมัยใหม่
- ปฏิบัติตามการตั้งค่า ESLint มาตรฐานที่ให้ไว้ในโปรเจกต์
- ใช้ชื่อตัวแปรและฟังก์ชันที่มีความหมายเพื่อความชัดเจนทางการศึกษา
- ใช้ไวยากรณ์ ES6+ ที่ทันสมัย
- ปฏิบัติตามการตั้งค่า ESLint มาตรฐานที่กำหนดในโปรเจกต์
- ใช้ชื่อระบุที่มีความหมายเพื่อความชัดเจนในการศึกษา
- เพิ่มคอมเมนต์อธิบายแนวคิดสำหรับผู้เรียน
- จัดรูปแบบด้วย Prettier หากมีการตั้งค่าไว้
- ฟอร์แมตด้วย Prettier หากมีการกำหนดค่า
### HTML/CSS
- ใช้ HTML5 แบบ Semantic
- หลักการออกแบบที่ตอบสนองต่ออุปกรณ์
- ใช้องค์ประกอบ HTML5 ที่มีความหมาย
- หลักการออกแบบตอบสนองได้ (responsive)
- การตั้งชื่อคลาสที่ชัดเจน
- คอมเมนต์อธิบายเทคนิค CSS สำหรับผู้เรียน
### Python
- ปฏิบัติตามแนวทาง PEP 8
- ตัวอย่างโค้ดที่ชัดเจนและเหมาะสำหรับการศึกษา
- ใช้ Type hints เมื่อมีประโยชน์ต่อการเรียนรู้
- ปฏิบัติตามแนวทางสไตล์ PEP 8
- ตัวอย่างโค้ดที่ชัดเจนและเน้นการศึกษา
- ใช้คำชี้แนะชนิดข้อมูลเมื่อช่วยให้เรียนรู้ได้ดีขึ้น
### เอกสาร Markdown
- ลำดับหัวข้อที่ชัดเจน
- บล็อกโค้ดพร้อมระบุภาษา
- โครงสร้างหัวข้อชัดเจน
- บล็อกโค้ดพร้อมระบุภาษาชัดเจน
- ลิงก์ไปยังแหล่งข้อมูลเพิ่มเติม
- ภาพหน้าจอและรูปภาพในไดเรกทอรี `images/`
- ข้อความ Alt สำหรับรูปภาพเพื่อการเข้าถึง
- ภาพหน้าจอและรูปภาพในโฟลเดอร์ `images/`
- ข้อความ alt สำหรับภาพเพื่อการเข้าถึง
### การจัดระเบียบไฟล์
- บทเรียนเรียงลำดับตามหมายเลข (1-getting-started-lessons, 2-js-basics, ฯลฯ)
- แต่ละโปรเจกต์มีโฟลเดอร์ `solution/` และมักจะมี `start/` หรือ `your-work/`
- รูปภาพเก็บในโฟลเดอร์ `images/` เฉพาะบทเรียน
- การแปลเก็บในโครงสร้าง `translations/{language-code}/`
- บทเรียนลำดับหมายเลข (1-getting-started-lessons, 2-js-basics, ฯลฯ)
- โครงการแต่ละชิ้นมีโฟลเดอร์ `solution/` และมักมี `start/` หรือ `your-work/`
- เก็บภาพในโฟลเดอร์ `images/` เฉพาะบทเรียน
- การแปลในโครงสร้าง `translations/{language-code}/`
## การสร้างและการปรับใช้
## การสร้างและปรับใช้
### การปรับใช้แอปแบบทดสอบ (Azure Static Web Apps)
### การปรับใช้ Quiz App (Azure Static Web Apps)
แอปแบบทดสอบถูกตั้งค่าสำหรับการปรับใช้ Azure Static Web Apps:
quiz-app ถูกกำหนดค่าระบบสำหรับปรับใช้บน Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Creates dist/ folder
# Deploys via GitHub Actions workflow on push to main
npm run build # สร้างโฟลเดอร์ dist/
# ปล่อยงานโดยใช้ GitHub Actions workflow เมื่อมีการ push ไปยัง main
```
การตั้งค่า Azure Static Web Apps:
การกำหนดค่า Azure Static Web Apps:
- **ตำแหน่งแอป**: `/quiz-app`
- **ตำแหน่งผลลัพธ์**: `dist`
- **เวิร์กโฟลว์**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### การสร้างเอกสาร PDF
### การสร้าง PDF เอกสาร
```bash
npm install # Install docsify-to-pdf
npm run convert # Generate PDF from docs
npm install # ติดตั้ง docsify-to-pdf
npm run convert # สร้าง PDF จาก docs
```
### เอกสาร Docsify
```bash
npm install -g docsify-cli # Install Docsify globally
docsify serve # Serve on localhost:3000
npm install -g docsify-cli # ติดตั้ง Docsify ทั่วโลก
docsify serve # ให้บริการที่ localhost:3000
```
### การสร้างโปรเจกต์เฉพาะ
แต่ละไดเรกทอรีโปรเจกต์อาจมีขั้นตอนการสร้างของตัวเอง:
- โปรเจกต์ Vue: `npm run build` สร้างชุดโปรดักชัน
- โปรเจกต์ Static: ไม่มีขั้นตอนการสร้าง ให้บริการไฟล์โดยตรง
แต่ละโฟลเดอร์โปรเจกต์อาจมีขั้นตอนการสร้างของตนเอง:
- โครงการ Vue: รัน `npm run build` เพื่อสร้างบันเดิลสำหรับการผลิต
- โครงการแบบสแตติก: ไม่มีขั้นตอนการสร้าง ให้ให้บริการไฟล์โดยตรง
## แนวทางการส่ง Pull Request
### รูปแบบชื่อเรื่อง
ใช้ชื่อเรื่องที่ชัดเจนและอธิบายถึงการเปลี่ยนแปลง:
- `[Quiz-app] เพิ่มแบบทดสอบใหม่สำหรับบทเรียน X`
- `[Lesson-3] แก้ไขคำผิดในโปรเจกต์ terrarium`
- `[Translation] เพิ่มการแปลภาษาเสปนสำหรับบทเรียน 5`
- `[Docs] อัปเดตคำแนะนำการตั้งค่า`
ใช้ชื่อเรื่องชัดเจนบอกพื้นที่ของการเปลี่ยนแปลง:
- `[Quiz-app] Add new quiz for lesson X`
- `[Lesson-3] Fix typo in terrarium project`
- `[Translation] Add Spanish translation for lesson 5`
- `[Docs] Update setup instructions`
### การตรวจสอบที่จำเป็น
### การตรวจสอบที่ต้องทำ
ก่อนส่ง PR:
1. **คุณภาพโค้ด**:
- รัน `npm run lint` ในไดเรกทอรีโปรเจกต์ที่ได้รับผลกระทบ
- รัน `npm run lint` ในโฟลเดอร์โปรเจกต์ที่เกี่ยวข้อง
- แก้ไขข้อผิดพลาดและคำเตือนทั้งหมด
2. **การตรวจสอบการสร้าง**:
- รัน `npm run build` หากเกี่ยวข้อง
2. **ยืนยันการสร้าง**:
- รัน `npm run build` ถ้ามี
- ตรวจสอบว่าไม่มีข้อผิดพลาดในการสร้าง
3. **การตรวจสอบลิงก์**:
- ทดสอบลิงก์ markdown ทั้งหมด
- ตรวจสอบการอ้างอิงรูปภาพว่าทำงาน
- ยืนยันการอ้างอิงภาพทำงานถูกต้อง
4. **การตรวจสอบเนื้อหา**:
- ตรวจสอบการสะกดและไวยากรณ์
- ตรวจสอบว่าตัวอย่างโค้ดถูกต้องและเหมาะสมสำหรับการศึกษา
- ตรวจสอบว่าการแปลยังคงความหมายเดิม
4. **ทบทวนเนื้อหา**:
- ตรวจสอบการสะกดคำและไวยากรณ์
- ยืนยันว่าตัวอย่างโค้ดถูกต้องและใช้เพื่อการศึกษา
- ตรวจสอบว่าแปลยังคงความหมายเดิมอย่างถูกต้อง
### ข้อกำหนดการมีส่วนร่วม
- ยอมรับ Microsoft CLA (การตรวจสอบอัตโนมัติใน PR แรก)
- ยินยอมกับ Microsoft CLA (ตรวจสอบอัตโนมัติสำหรับ PR แรก)
- ปฏิบัติตาม [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- ดู [CONTRIBUTING.md](./CONTRIBUTING.md) สำหรับแนวทางโดยละเอียด
- อ้างอิงหมายเลขปัญหาในคำอธิบาย PR หากเกี่ยวข้อง
- อ้างเลขที่ issue ในคำอธิบาย PR หากเกี่ยวข้อง
### กระบวนการตรวจสอบ
- PR จะได้รับการตรวจสอบโดยผู้ดูแลและชุมชน
- ให้ความสำคัญกับความชัดเจนทางการศึกษา
- ตัวอย่างโค้ดควรปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดในปัจจุบัน
- การแปลจะได้รับการตรวจสอบเพื่อความถูกต้องและเหมาะสมทางวัฒนธรรม
- PR ถูกตรวจสอบโดยผู้ดูแลและชุมชน
- เน้นความชัดเจนด้านการศึกษา
- ตัวอย่างโค้ดยึดตามแนวทางปฏิบัติที่ดีที่สุดในปัจจุบัน
- การแปลตรวจสอบความถูกต้องและเหมาะสมทางวัฒนธรรม
## ระบบการแปล
## ระบบแปลภาษา
### การแปลอัตโนมัติ
- ใช้ GitHub Actions กับเวิร์กโฟลว์ co-op-translator
- แปลเป็นมากกว่า 50 ภาษาโดยอัตโนมัติ
- ไฟล์ต้นฉบับในไดเรกทอรีหลัก
- ไฟล์แปลในโครงสร้าง `translations/{language-code}/`
- แปลกว่า 50 ภาษาโดยอัตโนมัติ
- ไฟล์ต้นทางอยู่ในโฟลเดอร์หลัก
- ไฟล์แปลเก็บไว้ใน `translations/{language-code}/`
### การเพิ่มการปรับปรุงการแปลด้วยตนเอง
### การเพิ่มการแปลด้วยมือ
1. ค้นหาไฟล์ใน `translations/{language-code}/`
2. ปรับปรุงในขณะที่รักษาโครงสร้างไว้
3. ตรวจสอบว่าตัวอย่างโค้ดยังคงทำงานได้
4. ทดสอบเนื้อหาแบบทดสอบที่แปลแล้ว
1. หาไฟล์ใน `translations/{language-code}/`
2. แก้ไขปรับปรุงโดยรักษาโครงสร้างไว้
3. ยืนยันตัวอย่างโค้ดยังทำงานได้
4. ทดสอบเนื้อหาแบบทดสอบแปลภาษาแล้ว
### เมตาดาทาการแปล
### ข้อมูลเมตาแปล
ไฟล์แปลรวมถึงส่วนหัวเมตาดาทา:
ไฟล์แปลจะมีส่วนหัวข้อมูลเมตา:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,118 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## การแก้ไขข้อบกพร่องและการแก้ปัญหา
## การแก้ไขปัญหาและการวินิจฉัย
### ปัญหาทั่วไป
**แอปแบบทดสอบไม่เริ่มต้น**:
**Quiz app เริ่มต้นไม่ติด**:
- ตรวจสอบเวอร์ชัน Node.js (แนะนำ v14+)
- ลบ `node_modules` และ `package-lock.json` แล้วรัน `npm install` ใหม่
- ตรวจสอบความขัดแย้งของพอร์ต (ค่าเริ่มต้น: Vite ใช้พอร์ต 5173)
- ตรวจสอบการชนกันของพอร์ต (โดยปกติ Vite ใช้พอร์ต 5173)
**เซิร์ฟเวอร์ API ไม่เริ่มต้น**:
- ตรวจสอบว่าเวอร์ชัน Node.js ตรงตามขั้นต่ำ (node >=10)
- ตรวจสอบว่าพอร์ตถูกใช้งานอยู่หรือไม่
- ตรวจสอบว่าติดตั้ง dependencies ทั้งหมดด้วย `npm install`
**API server ไม่เริ่มทำงาน**:
- ยืนยันเวอร์ชัน Node.js ตรงตามขั้นต่ำ (node >=10)
- ตรวจสอบว่าพอร์ตยังว่างอยู่
- ยืนยันว่าติดตั้ง dependencies ครบถ้วนโดยรัน `npm install`
**ส่วนขยายเบราว์เซอร์ไม่โหลด**:
- ตรวจสอบว่า manifest.json ถูกจัดรูปแบบอย่างถูกต้อง
- ตรวจสอบคอนโซลเบราว์เซอร์สำหรับข้อผิดพลาด
- ปฏิบัติตามคำแนะนำการติดตั้งส่วนขยายเฉพาะเบราว์เซอร์
- ตรวจสอบว่า manifest.json ถูกฟอร์แมตอย่างถูกต้อง
- ดูคอนโซลเบราว์เซอร์ว่ามีข้อผิดพลาดหรือไม่
- ปฏิบัติตามคำแนะนำการติดตั้งส่วนขยายสำหรับเบราว์เซอร์เฉพาะ
**ปัญหาโปรเจกต์แชท Python**:
- ตรวจสอบว่าติดตั้งแพ็กเกจ OpenAI: `pip install openai`
- ตรวจสอบว่าได้ตั้งค่า GITHUB_TOKEN เป็นตัวแปรสภาพแวดล้อม
- ตรวจสอบสิทธิ์การเข้าถึง GitHub Models
**ปัญหาโครงการแชท Python**:
- ตรวจสอบว่าติดตั้งแพ็กเกจ OpenAI แล้ว: `pip install openai`
- ตรวจสอบตัวแปรสภาพแวดล้อม GITHUB_TOKEN ถูกตั้งค่า
- ตรวจสอบสิทธิ์เข้าถึง GitHub Models
**Docsify ไม่ให้บริการเอกสาร**:
- ติดตั้ง docsify-cli ทั่วโลก: `npm install -g docsify-cli`
- รันจากไดเรกทอรี root ของคลัง
- ตรวจสอบว่า `docs/_sidebar.md` มีอยู่
- ติดตั้ง docsify-cli แบบ global: `npm install -g docsify-cli`
- รันจากโฟลเดอร์รากของที่เก็บ
- ตรวจสอบว่าไฟล์ `docs/_sidebar.md` มีอยู่
### เคล็ดลับสภาพแวดล้อมการพัฒนา
- ใช้ VS Code พร้อมส่วนขยาย Live Server สำหรับโปรเจกต์ HTML
- ติดตั้งส่วนขยาย ESLint และ Prettier เพื่อการจัดรูปแบบที่สม่ำเสมอ
- ใช้ DevTools ของเบราว์เซอร์สำหรับการดีบัก JavaScript
- สำหรับโปรเจกต์ Vue ให้ติดตั้งส่วนขยาย Vue DevTools ในเบราว์เซอร์
- ใช้ VS Code กับส่วนขยาย Live Server สำหรับโปรเจกต์ HTML
- ติดตั้ง ESLint และ Prettier เพื่อฟอร์แมตโค้ดอย่างสม่ำเสมอ
- ใช้ DevTools ของเบราว์เซอร์เพื่อตรวจแก้ไข JavaScript
- สำหรับโครงการ Vue ให้ติดตั้ง Vue DevTools ส่วนขยายเบราว์เซอร์
### ข้อควรพิจารณาด้านประสิทธิภาพ
### การพิจารณาด้านประสิทธิภาพ
- จำนวนไฟล์แปลที่มาก (50+ ภาษา) ทำให้การโคลนทั้งหมดมีขนาดใหญ่
- ใช้การโคลนแบบตื้นหากทำงานเฉพาะเนื้อหา: `git clone --depth 1`
- ยกเว้นการแปลจากการค้นหาเมื่อทำงานกับเนื้อหาภาษาอังกฤษ
- กระบวนการสร้างอาจช้าในครั้งแรก (npm install, Vite build)
- จำนวนไฟล์แปลมาก (50+ ภาษา) ทำให้การโคลนเต็มมีขนาดใหญ่
- ใช้ shallow clone ถ้าทำงานกับเนื้อหาอย่างเดียว: `git clone --depth 1`
- ยกเว้นการค้นหาการแปลเมื่อทำงานกับเนื้อหาเป็นภาษาอังกฤษ
- กระบวนการสร้างอาจช้าในครั้งแรกที่รัน (npm install, สร้าง Vite)
## ข้อควรพิจารณาด้านความปลอดภัย
## การพิจารณาด้านความปลอดภัย
### ตัวแปรสภาพแวดล้อม
- ห้ามคีย์ API ถูกคอมมิตในคลัง
- ใช้ไฟล์ `.env` (อยู่ใน `.gitignore` แล้ว)
- เอกสารตัวแปรสภาพแวดล้อมที่จำเป็นใน README ของโปรเจกต์
- หลีกเลี่ยงการคอมมิตกุญแจ API ลงที่เก็บ
- ใช้ไฟล์ `.env` (ซึ่งมีใน `.gitignore` แล้ว)
- บันทึกตัวแปรสภาพแวดล้อมที่จำเป็นไว้ใน README โครงการ
### โปรเจกต์ Python
### โครงการ Python
- ใช้ virtual environments: `python -m venv venv`
- อัปเดต dependencies อย่างสม่ำเสมอ
- โทเค็น GitHub ควรมีสิทธิ์ที่จำเป็นขั้นต่ำ
- ใช้ virtual environment: `python -m venv venv`
- รักษา dependencies ให้ทันสมัย
- โทเค็น GitHub ควรมีสิทธิ์เพียงพออย่างน้อยที่สุดที่จำเป็น
### การเข้าถึง GitHub Models
- ต้องใช้ Personal Access Tokens (PAT) สำหรับ GitHub Models
- โทเค็นควรถูกเก็บเป็นตัวแปรสภาพแวดล้อม
- ห้ามคอมมิตโทเค็นหรือข้อมูลรับรอง
- ต้องใช้ Personal Access Tokens (PAT)
- เก็บ token เป็นตัวแปรสภาพแวดล้อม
- หลีกเลี่ยงการคอมมิต token หรือข้อมูลรับรองใดๆ
## หมายเหตุเพิ่มเติม
### กลุ่มเป้าหมาย
- ผู้เริ่มต้นที่ไม่มีพื้นฐานการพัฒนาเว็บ
- นักเรียนและผู้เรียนด้วยตนเอง
- ครูที่ใช้หลักสูตรในห้องเรียน
- เนื้อหาออกแบบมาเพื่อการเข้าถึงและการพัฒนาทักษะอย่างค่อยเป็นค่อยไป
- ผู้เริ่มต้นเรียนรู้การพัฒนาเว็บเต็มตัว
- นักเรียนและผู้เรียนด้วยตัวเอง
- ครูผู้ใช้หลักสูตรในห้องเรียน
- เนื้อหาออกแบบเพื่อการเข้าถึงและการพัฒนาทักษะอย่างเป็นขั้นตอน
### ปรัชญาการศึกษา
- แนวทางการเรียนรู้แบบโปรเจกต์
- การตรวจสอบความรู้บ่อยครั้ง (แบบทดสอบ)
- แบบฝึกหัดการเขียนโค้ดเชิงปฏิบัติ
- ตัวอย่างการใช้งานในโลกจริง
- เน้นพื้นฐานก่อนเข้าสู่เฟรมเวิร์ก
- แนวทางการเรียนรู้ด้วยโครงการ
- ตรวจสอบความรู้บ่อยครั้ง (แบบทดสอบ)
- แบบฝึกหัดโค้ดเชิงปฏิบัติการ
- ตัวอย่างการประยุกต์ใช้ในโลกความจริง
- มุ่งเน้นพื้นฐานก่อนเรียนรู้กรอบงาน
### การดูแลคลัง
### การบำรุงรักษาที่เก็บ
- ชุมชนผู้เรียนและผู้ร่วมสร้างที่มีความกระตือรือร้น
- ชุมชนผู้เรียนและผู้ร่วมพัฒนาที่มีชีวิตชีวา
- การอัปเดต dependencies และเนื้อหาอย่างสม่ำเสมอ
- ผู้ดูแลตรวจสอบปัญหาและการสนทนา
- การอัปเดตการแปลอัตโนมัติผ่าน GitHub Actions
- ติดตามปัญหาและการสนทนาโดยผู้ดูแล
- การอัปเดตการแปลทำโดยอัตโนมัติผ่าน GitHub Actions
### แหล่งข้อมูลที่เกี่ยวข้อง
- [Microsoft Learn modules](https://docs.microsoft.com/learn/)
- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) แนะนำสำหรับผู้เรียน
- หลักสูตรเพิ่มเติม: Generative AI, Data Science, ML, IoT
- คอร์สเสริม: AI สร้างสรรค์, วิทยาศาสตร์ข้อมูล, ML, หลักสูตร IoT
### การทำงานกับโปรเจกต์เฉพาะ
### การทำงานกับโครงการเฉพาะ
สำหรับคำแนะนำโดยละเอียดเกี่ยวกับโปรเจกต์แต่ละโปรเจกต์ โปรดดูไฟล์ README ใน:
สำหรับคำแนะนำละเอียดขอให้ดูไฟล์ README ใน:
- `quiz-app/README.md` - แอปแบบทดสอบ Vue 3
- `7-bank-project/README.md` - แอปธนาคารพร้อมการยืนยันตัวตน
- `7-bank-project/README.md` - แอปธนาคารพร้อมระบบยืนยันตัวตน
- `5-browser-extension/README.md` - การพัฒนาส่วนขยายเบราว์เซอร์
- `6-space-game/README.md` - การพัฒนาเกมบน Canvas
- `9-chat-project/README.md` - โปรเจกต์ผู้ช่วยแชท AI
- `6-space-game/README.md` - การพัฒนาเกมบนแคนวาส
- `9-chat-project/README.md` - โครงการผู้ช่วยแชท AI
### โครงสร้าง Monorepo
แม้จะไม่ใช่ Monorepo แบบดั้งเดิม คลังนี้ประกอบด้วยโปรเจกต์อิสระหลายโปรเจกต์:
- แต่ละบทเรียนเป็นแบบแยกตัว
ถึงแม้จะไม่ใช่ monorepo แบบดั้งเดิม แต่ที่เก็บนี้มีโปรเจกต์อิสระหลายตัว:
- บทเรียนแต่ละบทเรียนเป็นอิสระ
- โปรเจกต์ไม่มีการแชร์ dependencies
- ทำงานกับโปรเจกต์เฉพาะโดยไม่กระทบโปรเจกต์อื่น
- โคลนคลังทั้งหมดเพื่อประสบการณ์หลักสูตรแบบครบวงจร
- ทำงานกับโครงการเดี่ยวโดยไม่กระทบโปรเจกต์อื่น
- โคลนที่เก็บทั้งชุดเพื่อรับประสบการณ์หลักสูตรเต็มรูปแบบ
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**ข้อจำกัดความรับผิดชอบ**:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามนุษย์ที่เป็นมืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษาอัตโนมัติ [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้ความถูกต้องสูงสุด แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความคลาดเคลื่อน เอกสารต้นฉบับในภาษาต้นทางควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลสำคัญ ขอแนะนำให้ใช้บริการแปลโดยมนุษย์มืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดใด ๆ ที่เกิดจากการใช้การแปลนี้
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

187
translations/th/README.md
Unescape View File

@ -10,54 +10,54 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# การพัฒนาเว็บสำหรับผู้เริ่มต้น - หลักสูตร
# การพัฒนาเว็บสำหรับผู้เริ่มต้น - หลักสูตรการเรียนการสอน
เรียนรู้พื้นฐานของการพัฒนาเว็บกับหลักสูตรครบวงจร 12 สัปดาห์โดย Microsoft Cloud Advocates แต่ละบทเรียน 24 บทเจาะลึก JavaScript, CSS และ HTML ผ่านโครงการปฏิบัติ เช่น สวนในขวด, ส่วนขยายเบราว์เซอร์ และเกมอวกาศ มีการทดสอบ, การอภิปราย และแบบฝึกหัดเชิงปฏิบัติ เพิ่มพูนทักษะและเพิ่มประสิทธิภาพการจดจำความรู้ด้วยวิธีการสอนที่เน้นโครงการ เริ่มต้นการเขียนโค้ดของคุณวันนี้!
เรียนรู้พื้นฐานการพัฒนาเว็บด้วยหลักสูตรครบวงจร 12 สัปดาห์ของเราที่จัดทำโดยผู้สนับสนุน Microsoft Cloud Advocates แต่ละบทเรียน 24 บทจะเจาะลึก JavaScript, CSS และ HTML ผ่านโครงการแบบลงมือปฏิบัติเช่น เทอราเรี่ยม, ส่วนขยายเบราว์เซอร์ และเกมอวกาศ มีแบบทดสอบ การอภิปราย และการมอบหมายงานเชิงปฏิบัติ เพิ่มพูนทักษะของคุณและเพิ่มประสิทธิภาพการจดจำความรู้ด้วยหลักสูตรที่เน้นโครงการอย่างมีประสิทธิภาพ เริ่มต้นการเขียนโค้ดของคุณวันนี้!
เข้าร่วมชุมชน Azure AI Foundry Discord
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
ทำตามขั้นตอนเหล่านี้เพื่อเริ่มต้นใช้แหล่งข้อมูลเหล่านี้:
1. **ทำการ Fork ที่เก็บข้อมูล**: คลิก [![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 ที่เก็บข้อมูล**: คลิก [![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. **โคลนที่เก็บข้อมูล**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**เข้าร่วม Azure AI Foundry Discord เพื่อพบปะผู้เชี่ยวชาญและนักพัฒนาร่วมกัน**](https://discord.com/invite/ByRwuEEgH4)
3. [**เข้าร่วม Azure AI Foundry Discord และพบปะผู้เชี่ยวชาญและนักพัฒนาร่วมกัน**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 รองรับหลายภาษา
#### รองรับผ่าน GitHub Action (อัตโนมัติ & อัปเดตตลอดเวลา)
#### รองรับผ่าน GitHub Action (อัตโนมัติและอัปเดตตลอดเวลา)
<!-- 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](../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](./README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **ต้องการโคลนในเครื่อง?**
> **ต้องการโคลนในเครื่องไหม?**
> ที่เก็บนี้รวมการแปลมากกว่า 50 ภาษา ซึ่งเพิ่มขนาดการดาวน์โหลดอย่างมาก หากต้องการโคลนโดยไม่มีการแปล ให้ใช้ sparse checkout:
> ที่เก็บนี้รวมการแปลกว่า 50 ภาษา ซึ่งเพิ่มขนาดการดาวน์โหลดอย่างมาก หากต้องการโคลนโดยไม่รวมการแปล ให้ใช้ sparse checkout:
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> จะให้ทุกอย่างที่คุณต้องใช้สำหรับทำหลักสูตรนี้ด้วยการดาวน์โหลดที่เร็วขึ้นมาก
> สิ่งนี้จะให้ทุกอย่างที่คุณต้องการเพื่อทำหลักสูตรให้เสร็จสมบูรณ์ด้วยการดาวน์โหลดที่เร็วขึ้นมาก
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**หากคุณต้องการรองรับภาษาแปลเพิ่มเติม รายการภาษาที่รองรับอยู่ [ที่นี่](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**หากต้องการให้รองรับภาษาแปลเพิ่มเติม ดูรายการได้ที่นี่ [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=เปิดใน Visual Studio Code&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)
#### 🧑‍🎓 _คุณเป็นนักเรียนหรือไม่?_
เยี่ยมชม [**หน้า Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ที่ซึ่งคุณจะพบแหล่งเรียนรู้สำหรับผู้เริ่มต้น, ชุดนักเรียน และแม้แต่ช่องทางรับบัตรรับรองฟรี นี่คือหน้าที่คุณควรบันทึกไว้และตรวจสอบเป็นระยะๆ เนื่องจากเราจะเปลี่ยนเนื้อหาเป็นรายเดือน
เยี่ยมชม [**หน้า Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ที่ซึ่งคุณจะพบแหล่งข้อมูลสำหรับผู้เริ่มต้น, ชุดนักเรียน และวิธีการรับบัตรรับรองฟรี นี่คือหน้าที่คุณควรบันทึกและตรวจสอบเป็นครั้งคราวเนื่องจากเราจะเปลี่ยนเนื้อหาทุกเดือน
### 📣 ประกาศ - ความท้าทายโหมด GitHub Copilot Agent ใหม่ให้ทำให้สำเร็จ!
### 📣 ประกาศ - โหมด GitHub Copilot Agent ใหม่กับความท้าทายที่ต้องทำให้เสร็จ!
เพิ่มความท้าทายใหม่ ดูได้ในหัวข้อต่างๆ ชื่อ "GitHub Copilot Agent Challenge 🚀" นี่คือความท้าทายใหม่ที่ให้คุณทำโดยใช้ GitHub Copilot และโหมด Agent หากคุณยังไม่เคยใช้โหมด Agent มาก่อน มันสามารถไม่เพียงแค่สร้างข้อความ แต่ยังสร้างและแก้ไขไฟล์, รันคำสั่ง และอื่น ๆ ได้อีกด้วย
มีความท้าทายใหม่เพิ่มเข้ามา ค้นหา "GitHub Copilot Agent Challenge 🚀" ในหลายบท ซึ่งเป็นความท้าทายใหม่ให้คุณทำโดยใช้ GitHub Copilot และโหมด Agent หากคุณยังไม่เคยใช้โหมด Agent มาก่อน โหมดนี้ไม่เพียงแต่สร้างข้อความเท่านั้น แต่สามารถสร้างและแก้ไขไฟล์, รันคำสั่ง และอื่นๆ ได้อีกด้วย
### 📣 ประกาศ - _โครงการใหม่สร้างด้วย Generative AI_
### 📣 ประกาศ - _โครงการใหม่สำหรับการสร้างโดยใช้ Generative AI_
มีการเพิ่มโครงการผู้ช่วย AI ใหม่ ตรวจสอบ [โครงการ](./9-chat-project/README.md)
มีโครงการผู้ช่วย AI ใหม่เพิ่มเข้ามา ดูได้ที่ [โครงการ](./9-chat-project/README.md)
### 📣 ประกาศ - _หลักสูตรใหม่_ เกี่ยวกับ Generative AI สำหรับ JavaScript ได้เปิดตัวแล้ว
### 📣 ประกาศ - _หลักสูตรใหม่_ เกี่ยวกับ Generative AI สำหรับ JavaScript เพิ่งเปิดตัว
อย่าพลาดหลักสูตร Generative AI ใหม่ของเรา!
@ -65,15 +65,14 @@
![Background](../../translated_images/th/background.148a8d43afde5730.webp)
- บทเรียนครอบคลุมทุกอย่างตั้งแต่พื้นฐานถึง RAG
- บทเรียนครอบคลุมตั้งแต่พื้นฐานถึง RAG
- โต้ตอบกับตัวละครประวัติศาสตร์โดยใช้ GenAI และแอปเสริมของเรา
- เรื่องเล่าสนุกสนานและน่าติดตาม คุณจะได้เดินทางข้ามเวลา!
- เรื่องราวสนุกสนานและน่าสนใจ คุณจะท่องเวลาย้อนอดีตได้!
![character](../../translated_images/th/character.5c0dd8e067ffd693.webp)
แต่ละบทเรียนมีงานมอบหมายให้ทำ, การตรวจสอบความรู้ และความท้าทายเพื่อแนะนำคุณในการเรียนรู้หัวข้อต่างๆ เช่น:
- การตั้งคำถามและวิศวกรรมคำถาม (Prompt Engineering)
แต่ละบทเรียนมีการมอบหมายงานให้ทำ, การตรวจสอบความรู้ และความท้าทายเพื่อแนะนำคุณในหัวข้อต่างๆ เช่น:
- การเขียน prompt และวิศวกรรม prompt
- การสร้างแอปข้อความและภาพ
- แอปค้นหา
@ -83,42 +82,42 @@
## 🌱 เริ่มต้น
> **คุณครู** เราได้ [รวมข้อแนะนำบางส่วน](for-teachers.md) เกี่ยวกับวิธีการใช้หลักสูตรนี้ เรารอรับคำติชมของคุณ [ในฟอรัมการอภิปรายของเรา](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **คุณครู** เรามี [คำแนะนำบางส่วน](for-teachers.md) เกี่ยวกับวิธีใช้หลักสูตรนี้ เรายินดีรับข้อเสนอแนะของคุณ [ในฟอรัมการอภิปราย](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[ผู้เรียน](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)** สำหรับแต่ละบทเรียน ให้เริ่มด้วยแบบทดสอบก่อนบรรยาย แล้วจึงอ่านเนื้อหาบรรยาย ทำกิจกรรมต่างๆ และตรวจสอบความเข้าใจของคุณด้วยแบบทดสอบหลังบรรยาย
**[ผู้เรียน](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)** สำหรับแต่ละบทเรียน ให้เริ่มด้วยแบบทดสอบก่อนการบรรยาย แล้วอ่านเนื้อหาบรรยาย ทำกิจกรรมต่างๆ และตรวจสอบความเข้าใจด้วยแบบทดสอบหลังการบรรยาย
เพื่อเพิ่มประสบการณ์การเรียนรู้ของคุณ ให้เชื่อมต่อกับเพื่อนร่วมเรียนเพื่อทำโครงการร่วมกัน! ส่งเสริมการอภิปรายใน [ฟอรัมการอภิปรายของเรา](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ที่ซึ่งทีมผู้ดูแลของเราจะคอยตอบคำถามของคุณ
เพื่อเพิ่มประสบการณ์การเรียนรู้ของคุณ เชื่อมต่อกับเพื่อนร่วมชั้นเพื่อทำโครงการร่วมกัน! สนับสนุนให้มีการอภิปรายใน [ฟอรัมการอภิปราย](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ของเราซึ่งมีทีมผู้ดูแลคอยตอบคำถามคุณ
เพื่อการศึกษาที่กว้างขวาง เราแนะนำอย่างยิ่งให้สำรวจ [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) เพื่อหาวัสดุการศึกษาเพิ่มเติม
เพื่อการศึกษาต่อ เรายินดีแนะนำให้สำรวจ [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) สำหรับวัสดุการศึกษาพิเศษเพิ่มเติม
### 📋 การตั้งค่าสภาพแวดล้อมของคุณ
หลักสูตรนี้มีสภาพแวดล้อมการพัฒนาที่พร้อมใช้งาน! เมื่อคุณเริ่มต้นคุณสามารถเลือกที่จะรันหลักสูตรนี้ใน [Codespace](https://github.com/features/codespaces/) (_สภาพแวดล้อมบนเบราว์เซอร์ที่ไม่ต้องติดตั้งใดๆ_), หรือรันในเครื่องของคุณโดยใช้เครื่องมือแก้ไขข้อความเช่น [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)
หลักสูตรนี้มีสภาพแวดล้อมสำหรับพัฒนาที่พร้อมใช้งานแล้ว! เมื่อคุณเริ่มต้น คุณสามารถเลือกใช้งานหลักสูตรผ่าน [Codespace](https://github.com/features/codespaces/) (_สภาพแวดล้อมที่ใช้งานผ่านเบราว์เซอร์โดยไม่ต้องติดตั้ง_) หรือใช้งานบนคอมพิวเตอร์ของคุณโดยใช้ตัวแก้ไขข้อความเช่น [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)
#### สร้างที่เก็บของคุณ
เพื่อให้คุณสามารถบันทึกผลงานของคุณได้ง่าย เราแนะนำให้คุณสร้างสำเนาของที่เก็บนี้ คุณสามารถทำได้โดยคลิกปุ่ม **ใช้แม่แบบนี้** ที่ด้านบนของหน้า ซึ่งจะสร้างที่เก็บใหม่ในบัญชี GitHub ของคุณที่มีสำเนาหลักสูตรนี้
#### สร้าง repository ของคุณ
เพื่อให้คุณสามารถบันทึกงานของคุณได้ง่ายขึ้น ขอแนะนำให้สร้างสำเนาของ repository นี้เองได้โดยการคลิกปุ่ม **Use this template** ที่ด้านบนของหน้า ซึ่งจะสร้าง repository ใหม่ในบัญชี GitHub ของคุณโดยมีสำเนาของหลักสูตรนี้
ทำตามขั้นตอนนี้:
1. **ทำ Fork ที่เก็บข้อมูล**: คลิกที่ปุ่ม "Fork" ที่มุมขวาบนของหน้านี้
ทำตามขั้นตอนดังนี้:
1. **Fork ที่เก็บข้อมูล**: คลิกที่ปุ่ม "Fork" ที่มุมบนขวาของหน้าหน้านี้
2. **โคลนที่เก็บข้อมูล**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### การรันหลักสูตรใน Codespace
#### รันหลักสูตรใน Codespace
ในสำเนาที่คุณสร้างขึ้น ให้คลิกปุ่ม **Code** และเลือก **เปิดด้วย Codespaces** เพื่อสร้าง Codespace ใหม่สำหรับคุณทำงาน
ในสำเนาของ repository ที่คุณสร้างขึ้น ให้คลิกปุ่ม **Code** และเลือก **Open with Codespaces** ซึ่งจะสร้าง Codespace ใหม่ให้คุณทำงานภายใน
![Codespace](../../translated_images/th/createcodespace.0238bbf4d7a8d955.webp)
#### การรันหลักสูตรในเครื่องของคุณ
#### รันหลักสูตรในเครื่องของคุณ
หากคุณต้องการรันหลักสูตรนี้ในเครื่องของคุณ คุณจะต้องมีเครื่องมือแก้ไขข้อความ, เบราว์เซอร์ และเครื่องมือบรรทัดคำสั่ง บทเรียนแรกของเรา [บทนำสู่ภาษาโปรแกรมและเครื่องมือการพัฒนา](../../1-getting-started-lessons/1-intro-to-programming-languages) จะนำคุณผ่านตัวเลือกต่าง ๆ สำหรับเครื่องมือเหล่านี้เพื่อให้คุณเลือกใช้ตามที่เหมาะสมกับคุณ
ถ้าคุณต้องการรันหลักสูตรนี้ในเครื่องของคุณ คุณจะต้องมีตัวแก้ไขข้อความ, เบราว์เซอร์ และเครื่องมือบรรทัดคำสั่ง บทเรียนแรกของเรา, [บทนำสู่ภาษาโปรแกรมและเครื่องมือในสายงาน](../../1-getting-started-lessons/1-intro-to-programming-languages), จะนำทางคุณผ่านทางเลือกต่างๆ สำหรับแต่ละเครื่องมือเพื่อให้คุณเลือกสิ่งที่เหมาะสมกับคุณที่สุด
คำแนะนำของเราคือใช้ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) เป็นเครื่องมือแก้ไขที่มาพร้อมกับ [เทอร์มินัล](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ในตัว คุณสามารถดาวน์โหลด Visual Studio Code ได้ที่นี่ [ลิงก์ดาวน์โหลด](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)
เราขอแนะนำให้ใช้ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) เป็นตัวแก้ไขของคุณ ซึ่งมี [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ในตัว คุณสามารถดาวน์โหลด Visual Studio Code ได้จาก [ที่นี่](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)
1. โคลนที่เก็บของคุณมายังเครื่องคอมพิวเตอร์ของคุณ โดยการคลิกปุ่ม **Code** และคัดลอก URL:
1. โคลน repository ของคุณไปยังคอมพิวเตอร์ คลิกที่ปุ่ม **Code** แล้วคัดลอก URL:
[CodeSpace](./images/createcodespace.png)
จากนั้น เปิด [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ภายใน [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) แล้วรันคำสั่งต่อไปนี้ โดยแทนที่ `<your-repository-url>` ด้วย URL ที่คุณเพิ่งคัดลอกมา:
จากนั้น เปิด [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ภายใน [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) และรันคำสั่งต่อไปนี้ โดยแทนที่ `<your-repository-url>` ด้วย URL ที่คุณเพิ่งคัดลอกมา:
```bash
git clone <your-repository-url>
@ -127,92 +126,92 @@
2. เปิดโฟลเดอร์ใน Visual Studio Code คุณสามารถทำได้โดยคลิกที่ **File** > **Open Folder** และเลือกโฟลเดอร์ที่คุณเพิ่งโคลนมา
> ส่วนขยาย Visual Studio Code ที่แนะนำ:
> ส่วนขยาย Visual Studio Code ที่แนะนำ:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - เพื่อดูตัวอย่างหน้า HTML ภายใน Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - เพื่อช่วยคุณเขียนโค้ดได้เร็วขึ้น
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - ช่วยให้คุณเขียนโค้ดได้เร็วขึ้น
## 📂 แต่ละบทเรียนประกอบด้วย:
- สเก็ตช์โน้ต (optional)
- วิดีโอเสริม (optional)
- สเก็ตช์โน้ตเสริม (ตัวเลือก)
- วิดีโอเสริม (ตัวเลือก)
- แบบทดสอบวอร์มอัพก่อนบทเรียน
- บทเรียนที่เขียน
- สำหรับบทเรียนแบบโปรเจกต์ มีไกด์ทีละขั้นตอนในการสร้างโปรเจกต์
- การตรวจสอบความรู้
- บทเรียนที่เขียนไว้
- สำหรับบทเรียนที่เน้นโครงการ มีคำแนะนำทีละขั้นตอนเกี่ยวกับการสร้างโครงการ
- การเช็คความรู้
- ความท้าทาย
- การอ่านเสริม
- งานมอบหมาย
- การบ้าน
- [แบบทดสอบหลังบทเรียน](https://ff-quizzes.netlify.app/web/)
> **หมายเหตุเกี่ยวกับแบบทดสอบ**: แบบทดสอบทั้งหมดถูกเก็บไว้ในโฟลเดอร์ Quiz-app รวม 48 แบบทดสอบ แต่ละชุดมีสามคำถาม คุณสามารถเข้าถึงได้ [ที่นี่](https://ff-quizzes.netlify.app/web/) แบบทดสอบสามารถรันได้ในเครื่องหรือจะดีพลอยที่ Azure ตามคำแนะนำในโฟลเดอร์ `quiz-app`
> **หมายเหตุเกี่ยวกับแบบทดสอบ**: แบบทดสอบทั้งหมดอยู่ในโฟลเดอร์ Quiz-app รวม 48 แบบทดสอบ แต่ละแบบมีคำถามสามข้อ สามารถเข้าถึงได้ที่ [นี่](https://ff-quizzes.netlify.app/web/) แอปแบบทดสอบสามารถรันได้แบบออฟไลน์หรือเผยแพร่บน Azure; ทำตามคำแนะนำในโฟลเดอร์ `quiz-app`
## 🗃️ บทเรียน
| | ชื่อโปรเจกต์ | แนวคิดที่เรียนรู้ | วัตถุประสงค์การเรียนรู้ | บทเรียนที่เชื่อมโยง | ผู้แต่ง |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Getting Started | บทนำสู่การเขียนโปรแกรมและเครื่องมือการทำงาน | เรียนรู้พื้นฐานเบื้องต้นของภาษาการเขียนโปรแกรมส่วนใหญ่และเกี่ยวกับซอฟต์แวร์ที่ช่วยนักพัฒนามืออาชีพทำงานของพวกเขา | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | พื้นฐานของ GitHub รวมถึงการทำงานร่วมกับทีม | วิธีใช้ GitHub ในโปรเจกต์ของคุณ วิธีการทำงานร่วมกับผู้อื่นบนฐานโค้ด | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | การเข้าถึง | เรียนรู้พื้นฐานของการเข้าถึงเว็บไซต์ | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | ประเภทข้อมูลใน JavaScript | พื้นฐานของประเภทข้อมูลใน JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | ฟังก์ชันและเมธอด | เรียนรู้เกี่ยวกับฟังก์ชันและเมธอดเพื่อจัดการลำดับความคิดของแอปพลิเคชัน | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | การตัดสินใจใน JS | เรียนรู้วิธีสร้างเงื่อนไขในโค้ดของคุณโดยใช้วิธีการตัดสินใจ | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | อาร์เรย์และลูป | ทำงานกับข้อมูลโดยใช้ arrays และ loops ใน JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | การใช้งาน HTML | สร้าง HTML เพื่อสร้างเทอร์ราเรียมออนไลน์ โดยเน้นการสร้างเลย์เอาต์ | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | การใช้งาน CSS | สร้าง CSS เพื่อจัดแต่งเทอร์ราเรียมออนไลน์ โดยเน้นพื้นฐานของ CSS รวมถึงการทำให้หน้าเว็บตอบสนอง | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | สร้าง JavaScript เพื่อทำให้เทอร์ราเรียมทำงานเป็นอินเทอร์เฟซลากและวาง โดยเน้น closures และ 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) | สร้างเกมพิมพ์ | เรียนรู้วิธีใช้ keyboard events เพื่อขับเคลื่อนลอจิกของแอป JavaScript ของคุณ | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | การทำงานกับเบราว์เซอร์ | เรียนรู้วิธีการทำงานของเบราว์เซอร์ ประวัติ และวิธีตั้งโครงร่างองค์ประกอบแรกของส่วนขยายเบราว์เซอร์ | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | สร้างฟอร์ม เรียกใช้ API และจัดเก็บตัวแปรใน Local Storage | สร้างองค์ประกอบ JavaScript ของส่วนขยายเบราว์เซอร์ของคุณเพื่อเรียกใช้ API โดยใช้ตัวแปรที่เก็บใน Local Storage | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | กระบวนการพื้นหลังในเบราว์เซอร์ การแสดงผลเว็บ | ใช้กระบวนการพื้นหลังของเบราว์เซอร์เพื่อจัดการไอคอนส่วนขยาย เรียนรู้เกี่ยวกับการแสดงผลเว็บและการปรับแต่งเพื่อประสิทธิภาพที่ดีขึ้น | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | การพัฒนาเกมขั้นสูงด้วย JavaScript | เรียนรู้เกี่ยวกับการสืบทอดโดยใช้ทั้ง Classes และ Composition รวมถึงรูปแบบ Pub/Sub เพื่อเตรียมตัวสำหรับการสร้างเกม | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | การวาดลงบนแคนวาส | เรียนรู้เกี่ยวกับ Canvas API ที่ใช้สำหรับวาดองค์ประกอบลงบนหน้าจอ | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | การเคลื่อนย้ายองค์ประกอบบนหน้าจอ | ค้นพบวิธีที่องค์ประกอบสามารถเคลื่อนที่ได้โดยใช้พิกัดคาร์ทีเซียนและ Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | การตรวจจับการชน | ทำให้องค์ประกอบชนกันและตอบสนองต่อกันโดยใช้การกดปุ่มและเพิ่มฟังก์ชันเย็นตัวเพื่อประสิทธิภาพของเกม | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | การเก็บคะแนน | คำนวณทางคณิตศาสตร์ตามสถานะและประสิทธิภาพของเกม | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | การจบและเริ่มเกมใหม่ | เรียนรู้เกี่ยวกับการจบและเริ่มเกมใหม่ รวมถึงการจัดการกับทรัพยากรและรีเซ็ตค่าตัวแปร | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML Templates และ Routes ในเว็บแอป | เรียนรู้วิธีสร้างโครงสร้างของเว็บหลายหน้าโดยใช้ routing และ HTML templates | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | สร้างฟอร์มล็อกอินและลงทะเบียน | เรียนรู้เกี่ยวกับการสร้างฟอร์มและจัดการตรวจสอบความถูกต้อง | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | วิธีการดึงและใช้ข้อมูล | วิธีการไหลของข้อมูลเข้าออกแอปของคุณ วิธีการดึงข้อมูล เก็บ และลบทิ้ง | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | แนวคิดการจัดการสถานะ | เรียนรู้ว่าแอปของคุณเก็บสถานะอย่างไร และการจัดการด้วยวิธีการเขียนโปรแกรม | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | การใช้งานกับ VScode | เรียนรู้วิธีใช้ตัวแก้ไขโค้ด | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | การทำงานกับ AI | เรียนรู้วิธีสร้างผู้ช่วย AI ของคุณเอง | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 รูปแบบการสอน
หลักสูตรของเราถูกออกแบบโดยมีหลักการสอนสำคัญสองประการ:
* การเรียนรู้ผ่านโปรเจกต์
| | ชื่อโครงการ | แนวคิดที่สอน | วัตถุประสงค์การเรียนรู้ | บทเรียนที่ลิงก์ | ผู้แต่ง |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | การเริ่มต้น | บทนำสู่การเขียนโปรแกรมและเครื่องมือการทำงาน | เรียนรู้พื้นฐานเบื้องต้นของภาษาการเขียนโปรแกรมส่วนใหญ่และเกี่ยวกับซอฟต์แวร์ที่ช่วยนักพัฒนามืออาชีพทำงานของตน | [บทนำสู่ภาษาการเขียนโปรแกรมและเครื่องมือ](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | การเริ่มต้น | พื้นฐานของ GitHub รวมถึงการทำงานเป็นทีม | วิธีใช้ GitHub ในโครงการของคุณ วิธีการทำงานร่วมกับผู้อื่นในฐานะโค้ด | [บทนำสู่ GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | การเริ่มต้น | การเข้าถึง | เรียนรู้พื้นฐานของการเข้าถึงเว็บ | [พื้นฐานการเข้าถึง](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | พื้นฐาน JS | ประเภทข้อมูล JavaScript | พื้นฐานของประเภทข้อมูลใน JavaScript | [ประเภทข้อมูล](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | พื้นฐาน JS | ฟังก์ชันและเมธอด | เรียนรู้เกี่ยวกับฟังก์ชันและเมธอดเพื่อจัดการลอจิกของแอป | [ฟังก์ชันและเมธอด](./2-js-basics/2-functions-methods/README.md) | Jasmine และ Christopher |
| 06 | พื้นฐาน JS | การตัดสินใจด้วย JS | เรียนรู้วิธีสร้างเงื่อนไขในโค้ดของคุณโดยใช้วิธีการตัดสินใจ | [การตัดสินใจ](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | พื้นฐาน JS | อาร์เรย์และลูป | ทำงานกับข้อมูลโดยใช้ arrays และ loops ใน JavaScript | [อาร์เรย์และลูป](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML ในการปฏิบัติ | สร้าง HTML เพื่อทำกระจกสวนออนไลน์ โดยเน้นการสร้างเลย์เอาต์ | [บทนำสู่ HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS ในการปฏิบัติ | สร้าง CSS เพื่อจัดแต่งสไตล์กระจกสวนออนไลน์ โดยเน้นพื้นฐานของ CSS รวมถึงการทำให้หน้าเว็บตอบสนอง | [บทนำสู่ CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, การจัดการ DOM | สร้าง JavaScript เพื่อให้กระจกสวนทำงานแบบลากและวาง โดยเน้น closures และการจัดการ DOM | [JavaScript Closures, การจัดการ DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | สร้างเกมพิมพ์ | เรียนรู้การใช้เหตุการณ์แป้นพิมพ์เพื่อควบคุมลอจิกของแอป JavaScript ของคุณ | [การเขียนโปรแกรมขับเคลื่อนด้วยเหตุการณ์](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [ส่วนขยายเบราว์เซอร์สีเขียว](./5-browser-extension/solution/README.md) | การทำงานกับเบราว์เซอร์ | เรียนรู้การทำงานของเบราว์เซอร์ ประวัติ และวิธีจัดโครงสร้างองค์ประกอบแรกของส่วนขยายเบราว์เซอร์ | [เกี่ยวกับเบราว์เซอร์](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [ส่วนขยายเบราว์เซอร์สีเขียว](./5-browser-extension/solution/README.md) | การสร้างฟอร์ม เรียกใช้ API และเก็บข้อมูลใน local storage | สร้างองค์ประกอบ JavaScript ของส่วนขยายเบราว์เซอร์ของคุณเพื่อเรียก API โดยใช้ตัวแปรที่เก็บใน local storage | [API, ฟอร์ม และ Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [ส่วนขยายเบราว์เซอร์สีเขียว](./5-browser-extension/solution/README.md) | กระบวนการทำงานพื้นหลังในเบราว์เซอร์, ประสิทธิภาพเว็บ | ใช้กระบวนการทำงานพื้นหลังของเบราว์เซอร์ในการจัดการไอคอนของส่วนขยาย; เรียนรู้เกี่ยวกับประสิทธิภาพเว็บและการเพิ่มประสิทธิภาพบางอย่าง | [งานพื้นหลังและประสิทธิภาพ](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [เกมอวกาศ](./6-space-game/solution/README.md) | การพัฒนาเกมขั้นสูงด้วย JavaScript | เรียนรู้เกี่ยวกับการสืบทอดโดยใช้ทั้ง Classes และ Composition และรูปแบบ Pub/Sub เพื่อเตรียมตัวสำหรับการสร้างเกม | [บทนำสู่การพัฒนาเกมขั้นสูง](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [เกมอวกาศ](./6-space-game/solution/README.md) | การวาดลงบนแคนวาส | เรียนรู้เกี่ยวกับ Canvas API ซึ่งใช้ในการวาดองค์ประกอบลงบนหน้าจอ | [การวาดบนแคนวาส](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [เกมอวกาศ](./6-space-game/solution/README.md) | การเคลื่อนย้ายองค์ประกอบรอบหน้าจอ | ค้นพบว่าธรรมชาติของการเคลื่อนไหวขององค์ประกอบใช้พิกัดคาร์ทีเซียนและ Canvas API อย่างไร | [การเคลื่อนย้ายองค์ประกอบรอบหน้าจอ](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [เกมอวกาศ](./6-space-game/solution/README.md) | การตรวจจับการชน | ทำให้องค์ประกอบชนกันและตอบสนองต่อกัน โดยใช้การกดแป้นพิมพ์และเพิ่มฟังก์ชัน cooldown เพื่อรักษาประสิทธิภาพเกม | [การตรวจจับการชน](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [เกมอวกาศ](./6-space-game/solution/README.md) | การบันทึกคะแนน | การคำนวณทางคณิตศาสตร์ตามสถานะและประสิทธิภาพของเกม | [การบันทึกคะแนน](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [เกมอวกาศ](./6-space-game/solution/README.md) | การจบเกมและเริ่มเกมใหม่ | เรียนรู้เกี่ยวกับการจบและเริ่มเกมใหม่ รวมถึงการจัดการทรัพยากรและการรีเซ็ตค่าตัวแปร | [เงื่อนไขการจบเกม](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [แอปธนาคาร](./7-bank-project/solution/README.md) | เทมเพลต HTML และเส้นทางในเว็บแอป | เรียนรู้วิธีสร้างโครงสร้างเว็บไซต์หลายหน้าโดยใช้ routing และเทมเพลต HTML | [เทมเพลต HTML และเส้นทาง](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [แอปธนาคาร](./7-bank-project/solution/README.md) | สร้างฟอร์มล็อกอินและลงทะเบียน | เรียนรู้การสร้างฟอร์มและการทำตรวจสอบความถูกต้อง | [ฟอร์ม](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [แอปธนาคาร](./7-bank-project/solution/README.md) | วิธีการดึงและใช้ข้อมูล | วิธีการรับข้อมูลเข้าและออกจากแอปของคุณ วิธีดึงข้อมูล การเก็บ และการกำจัดข้อมูล | [ข้อมูล](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [แอปธนาคาร](./7-bank-project/solution/README.md) | แนวคิดของการจัดการสถานะ | เรียนรู้วิธีที่แอปของคุณเก็บรักษาสถานะและจัดการสถานะแบบโปรแกรม | [การจัดการสถานะ](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [โค้ดเบราว์เซอร์/VScode](../../8-code-editor) | การทำงานกับ VScode | เรียนรู้การใช้โปรแกรมแก้ไขโค้ด | [ใช้โปรแกรมแก้ไขโค้ด VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [ผู้ช่วย AI](./9-chat-project/README.md) | การทำงานกับ AI | เรียนรู้วิธีสร้างผู้ช่วย AI ของคุณเอง | [โครงการผู้ช่วย AI](./9-chat-project/README.md) | Chris |
## 🏫 วิธีการสอน
หลักสูตรของเราออกแบบโดยมีหลักการทางการศึกษาสำคัญสองประการ:
* การเรียนรู้ผ่านโครงการ
* แบบทดสอบบ่อยครั้ง
โปรแกรมนี้สอนพื้นฐานของ JavaScript, HTML และ CSS รวมถึงเครื่องมือและเทคนิคล่าสุดที่นักพัฒนาเว็บสมัยใหม่ใช้ นักเรียนจะมีโอกาสพัฒนาทักษะผ่านการสร้างเกมพิมพ์ เกมเทอร์ราเรียมเสมือนจริง ส่วนขยายเบราว์เซอร์ที่เป็นมิตรต่อสิ่งแวดล้อม เกมสไตล์ space invader และแอปธนาคารสำหรับธุรกิจ เมื่อจบชุดนี้ นักเรียนจะได้ความเข้าใจที่มั่นคงเกี่ยวกับการพัฒนาเว็บ
โปรแกรมนี้สอนพื้นฐานของ JavaScript, HTML และ CSS รวมถึงเครื่องมือและเทคนิคล่าสุดที่นักพัฒนาเว็บยุคใหม่ใช้ นักเรียนจะมีโอกาสฝึกฝนทำโปรเจกต์จริงโดยการสร้างเกมพิมพ์จำลอง, กระจกสวนเสมือน, ส่วนขยายเบราว์เซอร์ที่เป็นมิตรต่อสิ่งแวดล้อม, เกมสไตล์เจ้าน invading อวกาศ และแอปธนาคารสำหรับธุรกิจ เมื่อจบชุดนี้ นักเรียนจะมีความเข้าใจอย่างมั่นคงเกี่ยวกับการพัฒนาเว็บ
> 🎓 คุณสามารถเรียนบทเรียนแรกๆ ในหลักสูตรนี้เป็น [เส้นทางการเรียนรู้](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) บน Microsoft Learn!
> 🎓 คุณสามารถเรียนบทเรียนแรกๆ ในหลักสูตรนี้เป็น [เส้นทางการเรียน](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) ใน Microsoft Learn!
โดยการทำให้เนื้อหาสอดคล้องกับโปรเจกต์ กระบวนการเรียนรู้จะน่าสนใจขึ้นและช่วยให้จดจำแนวคิดได้ดีขึ้น นอกจากนี้เรายังเขียนบทเรียนเริ่มต้นในพื้นฐาน JavaScript เพื่อแนะนำแนวคิด คู่กับวิดีโอจากชุด "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ซึ่งผู้แต่งบางส่วนมีส่วนร่วมในการเขียนหลักสูตรนี้ด้วย
โดยการทำให้เนื้อหาสอดคล้องกับโครงการ กระบวนการเรียนรู้จะมีความน่าสนใจมากขึ้นสำหรับนักเรียน และการจดจำแนวคิดก็จะดีขึ้น เราเขียนบทเรียนเริ่มต้นหลายบทเกี่ยวกับพื้นฐาน JavaScript เพื่อแนะนำแนวคิด พร้อมกับวิดีโอจากชุด "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ซึ่งบางส่วนของผู้เขียนได้มีส่วนร่วมในการพัฒนาหลักสูตรนี้
นอกจากนี้ยังมีแบบทดสอบความเสี่ยงต่ำก่อนเข้าชั้นเรียนเพื่อช่วยให้นักเรียนตั้งใจเรียนหัวข้อ และแบบทดสอบอีกชุดหลังเรียนเพื่อเสริมการจดจำ หลักสูตรนี้ออกแบบให้ยืดหยุ่นและสนุกสนาน สามารถเรียนทั้งชุดหรือบางส่วนก็ได้ โปรเจกต์เริ่มเล็กและค่อยๆ มีความซับซ้อนมากขึ้นจนจบรอบ 12 สัปดาห์
นอกจากนี้ แบบทดสอบที่มีความเสี่ยงต่ำก่อนเรียนชั้นเรียนช่วยตั้งเป้าหมายของนักเรียนสำหรับการเรียนรู้หัวข้อ ในขณะที่แบบทดสอบที่สองหลังชั้นเรียนช่วยสร้างการจดจำเพิ่มเติม หลักสูตรนี้ถูกออกแบบมาให้ยืดหยุ่นและสนุกสนาน และสามารถเรียนทั้งหมดหรือบางส่วนได้ โครงการเริ่มจากขั้นตอนเล็กๆ และซับซ้อนขึ้นเรื่อยๆ จนจบในระยะเวลา 12 สัปดาห์
แม้ว่าเราจะตั้งใจไม่แนะนำ JavaScript frameworks เพื่อเน้นทักษะพื้นฐานที่จำเป็นก่อนใช้เฟรมเวิร์กขั้นสูง ขั้นตอนถัดไปที่ดีสำหรับการจบหลักสูตรนี้คือการเรียนรู้ Node.js ผ่านชุดวิดีโออีกชุด: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
แม้ว่าเราจะตั้งใจหลีกเลี่ยงการแนะนำเฟรมเวิร์ก JavaScript เพื่อเน้นทักษะพื้นฐานที่จำเป็นสำหรับนักพัฒนาเว็บก่อนเรียนรู้เฟรมเวิร์ก ขั้นตอนถัดไปที่ดีสำหรับการศึกษาหลักสูตรนี้คือการเรียนรู้เกี่ยวกับ Node.js ผ่านชุดวิดีโออีกชุดหนึ่ง: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"
> เยี่ยมชม [Code of Conduct](CODE_OF_CONDUCT.md) และแนวทาง [Contributing](CONTRIBUTING.md) ของเรา เรายินดีรับคำติชมเชิงสร้างสรรค์จากคุณ!
> เยี่ยมชม [จรรยาบรรณ](CODE_OF_CONDUCT.md) และแนวทาง [การมีส่วนร่วม](CONTRIBUTING.md) ของเรา เรายินดีรับความคิดเห็นเชิงสร้างสรรค์ของคุณ!
## 🧭 การเข้าถึงแบบออฟไลน์
คุณสามารถรันเอกสารนี้แบบออฟไลน์โดยใช้ [Docsify](https://docsify.js.org/#/) โคลน repo นี้, [ติดตั้ง Docsify](https://docsify.js.org/#/quickstart) บนเครื่องของคุณ แล้วในโฟลเดอร์ root ของ repo นี้ ให้พิมพ์คำสั่ง `docsify serve` เว็บไซต์จะให้บริการที่พอร์ต 3000 บน localhost: `localhost:3000`
คุณสามารถรันเอกสารนี้แบบออฟไลน์ได้ด้วยการใช้ [Docsify](https://docsify.js.org/#/). Fork รีโพนี้, [ติดตั้ง Docsify](https://docsify.js.org/#/quickstart) ในเครื่องของคุณ จากนั้นในโฟลเดอร์รากของรีโพนี้ พิมพ์ `docsify serve`. เว็บไซต์จะให้บริการบนพอร์ต 3000 ที่ localhost ของคุณ: `localhost:3000`.
## 📘 PDF
ไฟล์ PDF ของบทเรียนทั้งหมดสามารถดูได้ [ที่นี่](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
ไฟล์ PDF ของบทเรียนทั้งหมดหาได้ที่ [นี่](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 หลักสูตรอื่น ๆ
ทีมของเราผลิตหลักสูตรอื่นๆ ด้วย! เชิญดูได้ที่:
ทีมของเราผลิตหลักสูตรอื่นๆ ด้วย! เชิญชม:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
@ -250,15 +249,15 @@
## การขอความช่วยเหลือ
หากคุณติดขัดหรือมีคำถามเกี่ยวกับการสร้างแอป AI เข้าร่วมกับผู้เรียนและนักพัฒนาที่มีประสบการณ์ในการอภิปรายเกี่ยวกับ MCP นี่คือชุมชนที่สนับสนุนซึ่งยินดีต้อนรับคำถามและแบ่งปันความรู้กันอย่างเสรี
หากคุณติดขัดหรือมีคำถามเกี่ยวกับการสร้างแอป AI ร่วมพูดคุยกับผู้เรียนและนักพัฒนาที่มีประสบการณ์เกี่ยวกับ MCP ได้ในชุมชนที่สนับสนุนซึ่งยินดีตอบคำถามและแบ่งปันความรู้ได้อย่างอิสระ
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
หากคุณมีความคิดเห็นเกี่ยวกับผลิตภัณฑ์หรือเกิดข้อผิดพลาดระหว่างการสร้างโปรดไปที่:
ถ้าคุณมีข้อเสนอแนะเกี่ยวกับผลิตภัณฑ์หรือพบข้อผิดพลาดในการสร้าง สามารถเยี่ยมชมได้ที่:
[![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)
## สิทธิ์การใช้งาน
## ใบอนุญาต
ที่เก็บนี้ได้รับอนุญาตภายใต้ใบอนุญาต MIT ดูไฟล์ [LICENSE](../../LICENSE) สำหรับข้อมูลเพิ่มเติม
@ -266,5 +265,5 @@
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**ข้อจำกัดความรับผิดชอบ**:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลด้วย AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้เราจะพยายามให้มีความถูกต้อง โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่แม่นยำ เอกสารต้นฉบับในภาษาต้นทางถือเป็นแหล่งข้อมูลที่ถูกต้องและน่าเชื่อถือ สำหรับข้อมูลที่สำคัญ ควรใช้การแปลโดยมนุษย์มืออาชีพ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดที่เกิดจากการใช้การแปลนี้
เอกสารฉบับนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้เราจะพยายามให้มีความถูกต้อง โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่แม่นยำ เอกสารต้นฉบับในภาษาต้นทางถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลโดยมนุษย์ผู้เชี่ยวชาญ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดใด ๆ ที่เกิดขึ้นจากการใช้การแปลนี้
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Write Preview
Loading…
Cancel
Save