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, 12 changes)

Browse Source
pull/1694/head
localizeflow[bot] 7 months ago
parent 8cecbe456c
commit 7a3f2a1887
12 changed files with 1025 additions and 827 deletions
Show Stats Download Patch File Download Diff File

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

@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:29:49+00:00", "translation_date": "2026-02-06T17:25:00+00:00",
"source_file": "AGENTS.md", "source_file": "AGENTS.md",
"language_code": "da" "language_code": "da"
}, },
@ -516,11 +516,17 @@
"language_code": "da" "language_code": "da"
}, },
"README.md": { "README.md": {
"original_hash": "490c83786552d7fab6390991517bef09", "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-01-29T18:30:46+00:00", "translation_date": "2026-02-06T17:20:19+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "da" "language_code": "da"
}, },
"Roadmap.md": {
"original_hash": "28bf6185fd7f27b62ddc210514366192",
"translation_date": "2026-02-06T17:21:18+00:00",
"source_file": "Roadmap.md",
"language_code": "da"
},
"SECURITY.md": { "SECURITY.md": {
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228", "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2025-08-26T21:26:52+00:00", "translation_date": "2025-08-26T21:26:52+00:00",

452
translations/da/AGENTS.md
Unescape View File

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

174
translations/da/README.md
Unescape View File

@ -2,7 +2,7 @@
[![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 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 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/) [![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) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) [![GitHub 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 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/)
@ -10,9 +10,9 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Webudvikling for begyndere - Et undervisningsforløb # Webudvikling for begyndere - Et pensum
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 fra Microsoft Cloud Advocates. Hver af de 24 lektioner dykker ned i JavaScript, CSS og HTML gennem praktiske projekter som terrarier, browserudvidelser og rumspil. Deltag i quizzer, diskussioner og praktiske opgaver. Forbedr dine færdigheder og optimer din viden med vores effektive projektbaserede pædagogik. Start din kodningsrejse i dag!
Deltag i Azure AI Foundry Discord-fællesskabet Deltag i Azure AI Foundry Discord-fællesskabet
@ -23,7 +23,7 @@ Følg disse trin for at komme i gang med at bruge disse ressourcer:
2. **Klon depotet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 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) 3. [**Deltag i Azure AI Foundry Discord og mød eksperter og andre udviklere**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Multisprog-understøttelse ### 🌐 Flersproget support
#### Understøttet via GitHub Action (Automatiseret & Altid Opdateret) #### Understøttet via GitHub Action (Automatiseret & Altid Opdateret)
@ -32,7 +32,7 @@ Følg disse trin for at komme i gang med at bruge disse ressourcer:
> **Foretrækker du at klone lokalt?** > **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 repository indeholder 50+ sprogoversættelser, som betydeligt øger downloadstørrelsen. For at klone uden oversættelser, brug sparsomet udtjekning:
> ```bash > ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners > cd Web-Dev-For-Beginners
@ -41,179 +41,179 @@ Følg disse trin for at komme i gang med at bruge disse ressourcer:
> Dette giver dig alt, hvad du behøver for at gennemføre kurset med en meget hurtigere download. > Dette giver dig alt, hvad du behøver for at gennemføre kurset med en meget hurtigere download.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END --> <!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Hvis du ønsker 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å tilføjet yderligere oversættelsessprog, findes de understøttede sprog [her](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Å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?_ #### 🧑‍🎓 _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 begynderressourcer, studentpakker og endda måder at få en gratis certifikatkupon på. Dette er siden, du vil bogmærke og tjekke fra tid til anden, da vi månedligt udskifter indhold.
### 📣 Meddelelse - Nye GitHub Copilot Agent mode udfordringer at løse! ### 📣 Meddelelse - Nye GitHub Copilot Agent mode udfordringer at gennemfø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 fuldføre ved at bruge GitHub Copilot og Agent mode. Hvis du ikke har brugt Agent mode før, kan den ikke bare generere tekst, men også skabe og redigere filer, køre kommandoer med mere.
### 📣 Meddelelse - _Nyt projekt at bygge med Generative AI_ ### 📣 Meddelelse - _Nyt projekt at bygge med Generativ AI_
Nyt AI Assistant-projekt tilføjet, tjek det ud [projekt](./9-chat-project/README.md) Nyt AI-assistent projekt lige tilføjet, tjek det ud [projekt](./9-chat-project/README.md)
### 📣 Meddelelse - _Nyt undervisningsforløb_ om Generative AI for JavaScript er netop udgivet ### 📣 Meddelelse - _Nyt pensum_ om Generativ AI for JavaScript er netop udgivet
Gå ikke glip af vores nye Generative AI undervisningsforløb! Gå ikke glip af vores nye pensum om Generativ AI!
Besøg [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for at komme i gang! Besøg [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for at komme i gang!
![Background](../../translated_images/da/background.148a8d43afde5730.webp) ![Background](../../translated_images/da/background.148a8d43afde5730.webp)
- Lektioner der dækker alt fra det grundlæggende til RAG. - Lektioner, der dækker alt fra det grundlæggende til RAG.
- Interagér med historiske karakterer ved hjælp af GenAI og vores følgesvend-app. - Interager med historiske karakterer ved hjælp af GenAI og vores følgesvend app.
- Sjov og engagerende fortælling, du vil rejse i tiden! - Sjov og engagerende fortælling, du vil rejse i tiden!
![character](../../translated_images/da/character.5c0dd8e067ffd693.webp) ![character](../../translated_images/da/character.5c0dd8e067ffd693.webp)
Hver lektion inkluderer en opgave, en videnscheck og en udfordring, der guider dig i at lære emner som: Hver lektion inkluderer en opgave, en videnstest og en udfordring for at guide dig i læringsemner som:
- Prompting og prompt engineering - Prompting og prompt engineering
- Tekst- og billedapp-generering - Tekst- og billedapp generation
- Søgeapps - Søgeapps
Besøg [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) for at komme i gang! Besøg [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for at komme i gang!
## 🌱 Kom godt i gang ## 🌱 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 I kan bruge dette pensum. Vi modtager meget gerne jeres feedback [i vores diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[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 quiz før lektion og følg op med at læse lektionens materiale, fuldføre de forskellige aktiviteter og tjek din forståelse med quiz efter lektionen.
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, forbind med dine kammerater og arbejd sammen om projekterne! Diskussioner opfordres i vores [diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), hvor vores moderatorhold vil være tilgængelige for at svare på dine spørgsmål.
For at 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 udvikle din uddannelse yderligere anbefaler vi stærkt at udforske [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for yderligere studiematerialer.
### 📋 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). Dette pensum har et udviklingsmiljø klar til brug! Når du går i gang, kan du vælge at køre pensum i en [Codespace](https://github.com/features/codespaces/) (_et browserbaseret miljø uden installation_), eller lokalt på din computer ved hjælp af en teksteditor som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Opret dit eget depot #### Opret dit repository
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. For at du nemt kan gemme dit arbejde anbefales det, at du opretter din egen kopi af dette repository. Det kan du gøre ved at klikke på knappen **Use this template** øverst på siden. Dette vil oprette et nyt repository på din GitHub-konto med en kopi af pensum.
Følg disse trin: Følg disse trin:
1. **Fork depotet**: Klik på "Fork" knappen øverst til højre på denne side. 1. **Fork depotet**: Klik på knappen "Fork" øverst til højre på denne side.
2. **Klon depotet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **Klon depotet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Kør undervisningsforløbet i en Codespace #### Kør pensum 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 har oprettet, klik på knappen **Code** og vælg **Open with Codespaces**. Dette vil oprette en ny Codespace, som du kan arbejde i.
![Codespace](../../translated_images/da/createcodespace.0238bbf4d7a8d955.webp) ![Codespace](../../translated_images/da/createcodespace.0238bbf4d7a8d955.webp)
#### Kør undervisningsforløbet lokalt på din computer #### Kør pensum 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. For at køre dette pensum lokalt på din computer, skal du bruge en teksteditor, en browser og et kommandolinjeværktøj. Vores første lektion, [Introduktion til programmeringssprog og værktøjer](../../1-getting-started-lessons/1-intro-to-programming-languages), vil guide dig gennem forskellige muligheder for hver af disse værktøjer, så du kan vælge det, der passer bedst til dig.
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). 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) [CodeSpace](./images/createcodespace.png)
Åbn derefter [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) i [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) og kør følgende kommando, hvor du erstatter `<your-repository-url>` med den URL, du lige har kopieret: Åbn derefter [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) i [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon), og kør følgende kommando, hvor du erstatter `<your-repository-url>` med den URL, du lige har kopieret:
```bash ```bash
git clone <your-repository-url> git clone <your-repository-url>
``` ```
2. Åbn mappen i Visual Studio Code. 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: > Anbefalede Visual Studio Code-udvidelser:
> >
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - til at forhåndsvise HTML-sider i Visual Studio Code > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - for at forhåndsvise HTML-sider i Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - til at hjælpe dig med at skrive kode hurtigere > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - for at hjælpe dig med at skrive kode hurtigere
## 📂 Hver lektion indeholder: ## 📂 Hver lektion inkluderer:
- valgfri sketchnote - valgfri sketchnote
- valgfri supplerende video - valgfri supplerende video
- for-lesson opvarmningsquiz - forudgående opvarmningsquiz før lektion
- skreven lektion - skriftlig lektion
- for projektbaserede lektioner, trin-for-trin vejledninger i, hvordan man bygger projektet - for projektbaserede lektioner, trin-for-trin vejledninger til, hvordan man bygger projektet
- vidensprøver - vidensprøver
- en udfordring - en udfordring
- supplerende læsning - supplerende læsning
- opgave - opgave
- [quiz efter lektionen](https://ff-quizzes.netlify.app/web/) - [quiz efter lektionen](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 findes i Quiz-app mappen, i alt 48 quizzer med tre spørgsmål hver. De er tilgængelige [her](https://ff-quizzes.netlify.app/web/). Quiz-appen kan køres lokalt eller implementeres til Azure; følg instruktionerne i `quiz-app` mappen.
## 🗃️ Lektioner ## 🗃️ Lektioner
| | Projekt Navn | Koncepter undervist | Læringsmål | Linket Lektion | Forfatter | | | 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 | | 01 | Kom godt i gang | Introduktion til programmering og værktøjer | Lær de grundlæggende principper bag de fleste programmeringssprog og om software, der hjælper professionelle udviklere | [Introduktion til programmeringssprog og værktøjer](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 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 | | 02 | Kom godt i gang | Grundlæggende om GitHub, inklusiv samarbejde i teams | Hvordan man bruger GitHub i sit projekt, hvordan man samarbejder med andre om en kodebase | [Introduktion til GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 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 | | 03 | Kom godt i gang | Tilgængelighed | Lær det grundlæggende om webtilgængelighed | [Grundlæggende om Tilgængelighed](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Grundlæggende | JavaScript Datatyper | Grundlæggende om JavaScript datatyper | [Datatyper](./2-js-basics/1-data-types/README.md) | Jasmine | | 04 | JS Grundlæggende | JavaScript datatyper | Grundlæggende 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 | | 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 | | 06 | JS Grundlæggende | Beslutninger med JS | Lær hvordan man laver betingelser i din kode ved hjælp af beslutningstagning | [Beslutningstagning](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Grundlæggende | Arrays og Loops | Arbejd med data ved hjælp af arrays og loops i JavaScript | [Arrays og Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | | 07 | JS Grundlæggende | Arrays og 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 | | 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML i praksis | Byg HTML for at skabe et online terrarium med fokus på layout | [Introduktion til HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 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 | | 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS i praksis | Byg CSS for at style det online terrarium, med fokus på CSS-grundlæggende funktioner inklusiv at gøre siden responsiv | [Introduktion til CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 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 | | 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 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 | | 11 | [Typing Game](./4-typing-game/solution/README.md) | Byg et skrive-spil | Lær hvordan du bruger tastaturhændelser til at styre logikken i din JavaScript-app | [Begivenhedsdrevet programmering](./4-typing-game/typing-game/README.md) | Christopher |
| 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 | | 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Arbejde med browsere | Lær hvordan browsere fungerer, deres historie, og hvordan man scaffolder de første elementer i en browserudvidelse | [Om browsere](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 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 | | 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bygge en form, kalde API og gemme variabler i lokal lagring | Byg JavaScript-elementerne i din browserudvidelse for at kalde en API ved hjælp af variabler gemt i lokal lagring | [API'er, formularer og lokal lagring](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 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 | | 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Baggrundsprocesser i browseren, web performance | Brug browserens baggrundsprocesser til at håndtere udvidelsens ikon; lær om webperformance og nogle optimeringer | [Baggrundsopgaver og ydeevne](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 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 | | 15 | [Space Game](./6-space-game/solution/README.md) | Mere avanceret spiludvikling med JavaScript | Lær om arv ved hjælp af både klasser og sammensætning samt Pub/Sub-mønsteret, som forberedelse til at bygge et spil | [Introduktion til avanceret spiludvikling](./6-space-game/1-introduction/README.md) | Chris |
| 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 | | 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 | [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 | | 17 | [Space Game](./6-space-game/solution/README.md) | Flytte elementer rundt på skærmen | Opdag, hvordan elementer kan få bevægelse ved hjælp af kartesiske koordinater og Canvas API | [Flytning af elementer](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 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 | | 18 | [Space Game](./6-space-game/solution/README.md) | Kollisiondetektion | Få elementer til at kollidere og reagere på hinanden ved tastetryk og lav en cooldown-funktion for at sikre spillets ydeevne | [Kollisiondetektion](./6-space-game/4-collision-detection/README.md) | Chris |
| 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 | | 19 | [Space Game](./6-space-game/solution/README.md) | Holde styr på point | Udfør matematiske beregninger baseret på spillets status og præstation | [Pointoptælling](./6-space-game/5-keeping-score/README.md) | Chris |
| 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 | | 20 | [Space Game](./6-space-game/solution/README.md) | Afslutte og genstarte spillet | Lær om hvordan man afslutter og genstarter spillet, inklusiv oprydning af assets og nulstilling af variable | [Afslutningsbetingelsen](./6-space-game/6-end-condition/README.md) | Chris |
| 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 | | 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-skabeloner og ruter i en webapp | Lær hvordan man skaber fundamentet for en multipages website-arkitektur med routing og HTML-skabeloner | [HTML-skabeloner og ruter](./7-bank-project/1-template-route/README.md) | Yohan |
| 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 | | 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 | [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 | | 23 | [Banking App](./7-bank-project/solution/README.md) | Metoder til at hente og bruge data | Hvordan data flyder ind og ud af din app, hvordan man henter, gemmer og bortskaffer det | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 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 | | 24 | [Banking App](./7-bank-project/solution/README.md) | Koncepter om state management | Lær hvordan din app bevarer state og hvordan man styrer den programmatisk | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Arbejde med VScode | Lær hvordan man bruger en kodeeditor| [Brug VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | | 25 | [Browser/VScode Code](../../8-code-editor) | Arbejde med VScode | Lær hvordan man bruger en kodeeditor | [Brug VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Arbejde med AI | Lær hvordan man bygger sin egen AI-assistent | [AI Assistant projekt](./9-chat-project/README.md) | Chris | | 26 | [AI Assistants](./9-chat-project/README.md) | Arbejde med AI | Lær hvordan man bygger sin egen AI-assistent | [AI Assistant projekt](./9-chat-project/README.md) | Chris |
## 🏫 Pædagogik ## 🏫 Pædagogik
Vores pensum er designet med to nøglepædagogiske principper i tankerne: Vores pensum er designet med to nøgleprincipper i pædagogik:
* projektbaseret læring * projektbaseret læring
* hyppige quizzer * 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, som nutidens webudviklere bruger. Studerende får mulighed for at udvikle praktisk erfaring ved at bygge et skrive-spil, et virtuelt terrarium, en miljøvenlig browserudvidelse, et rum-invader stil-spil og en bank-app til virksomheder. Ved slutningen af serien vil eleverne have opnået en solid forståelse for webudvikling.
> 🎓 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 dette pensum som en [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn!
Ved at sikre at indholdet 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, bliver processen mere engagerende for eleverne, og fastholdelsen af koncepterne forbedres. Vi har også skrevet flere introduktionslektioner i JavaScript grundlæggende for at introducere begreber, kombineret med en video fra "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" samlingen af videotutorials, hvor nogle af forfatterne har bidraget til dette pensum.
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 quiz med lav risiko før en klasse intentionen hos eleven mod at lære et emne, mens en anden quiz efter klassen sikrer yderligere fastholdelse. Dette pensum er designet til at være fleksibelt og sjovt og kan tages som helhed eller delvist. Projekterne starter småt og bliver gradvist mere komplekse ved slutningen af 12-ugers cyklussen.
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 bevidst har undgået at introducere JavaScript-rammer for at koncentrere os om de grundlæggende færdigheder, der er nødvendige som webudvikler, før man tager en ramme i brug, kunne et godt næste skridt efter at have gennemført dette pensum være at lære om Node.js via en anden samling videoer: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> 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 byder konstruktiv feedback velkommen!
## 🧭 Offline adgang ## 🧭 Offline adgang
Du kan køre denne dokumentation offline ved at bruge [Docsify](https://docsify.js.org/#/). Fork dette repo, [installer Docsify](https://docsify.js.org/#/quickstart) på din lokale maskine, og i rodmappen 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 i rodmappen for dette repo, skriv `docsify serve`. Hjemmesiden vil blive serveret på port 3000 på din localhost: `localhost:3000`.
## 📘 PDF ## 📘 PDF
En PDF med alle lektionerne kan findes [her](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). En PDF af alle lektionerne kan findes [her](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Andre Kurser ## 🎒 Andre kurser
Vores team laver også andre kurser! Se: Vores team producerer andre kurser! Tjek dem ud:
<!-- CO-OP TRANSLATOR OTHER COURSES START --> <!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain ### 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) [![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.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 / Agenter
@ -232,7 +232,7 @@ Vores team laver også andre kurser! Se:
--- ---
### Kerne Læring ### Grundlæggende 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) [![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) [![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -251,21 +251,21 @@ Vores team laver også andre kurser! Se:
## 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 går i stå eller har spørgsmål om at bygge AI-apps. Deltag sammen med andre elever og erfarne udviklere i diskussioner om MCP. Det er et støttende fællesskab, hvor spørgsmål er velkomne, og viden deles frit.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Hvis du har produktfeedback eller oplever fejl under udviklingen, besøg: Hvis du har produktfeedback eller oplever fejl under byggeriet, besøg:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## Licens ## Licens
Dette repository er licenseret under MIT-licensen. Se [LICENSE](../../LICENSE) filen for flere oplysninger. Dette repository er licenseret under MIT-licensen. Se filen [LICENSE](../../LICENSE) for mere information.
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfraskrivelse**: **Ansvarsfraskrivelse**:
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi 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 bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

53
translations/da/Roadmap.md
Unescape View File

@ -0,0 +1,53 @@
# Vejkort for Microsofts Web-Dev-For-Beginners Repository
**Dette repository giver et vejkort til at lære webudviklingsgrundlag med fokus på JavaScript, HTML og CSS. Pensum er fleksibelt og kan tages helt eller delvist, med 24 lektioner fordelt over 12 uger.**
## Vigtige Milepæle
* **Uger 1-3:**
* Introduktion til programmeringssprog og værktøjer i faget
* Grundlæggende om GitHub
* Tilgængelighed
* JS grundlæggende: datatyper, funktioner og metoder
* At træffe beslutninger med JS
* **Uger 4-6:**
* Arrays og løkker
* Terrarium: HTML i praksis
* CSS i praksis
* JavaScript closures
* DOM-manipulation
* **Uger 7-9:**
* Typing Game: Begivenhedsdrevet programmering
* Green Browser Extension: Arbejde med browsere
* Bygning af en formular, kald til en API og lagring af variabler i local storage
* Baggrundsprocesser i browseren
* Webperformance
* **Uger 10-12:**
* Space Game: Mere avanceret spiludvikling med JavaScript
* Tegning på canvas
* Flytning af elementer rundt på skærmen
* Kollisionsdetektion
* Holde styr på point, afslutte og genstarte spillet
* Banking App: HTML-skabeloner og ruter i en webapp
* Bygning af login- og registreringsformular
* Metoder til at hente og bruge data
* Begreber om state management
## Læringsudbytte
**Ved at gennemføre dette vejkort, vil studerende få praktisk erfaring med at bygge et tastaturspil, virtuelt terrarium, miljøvenlig browserudvidelse, space-invader-stil spil og en banking app for virksomheder. De vil også opbygge en solid forståelse af webudviklingsgrundlag.**
## Yderligere Ressourcer
* Dette repository tilbyder en masse ressourcer til videre læring, inklusive tutorials, kodeeksempler og udfordringer.
* Microsoft Learn-platformen tilbyder en række webudviklingskurser og læringsstier.
* Online fællesskaber som Stack Overflow og MDN Web Docs giver værdifuld støtte og ressourcer til webudviklere.
**Jeg håber, at dette vejkort hjælper dig på din webudviklingsrejse!**
---
<!-- 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, skal du være opmærksom på, at automatiske oversættelser kan indeholde fejl eller unøjagtigheder. Det oprindelige dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritiske oplysninger 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 -->

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

@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:29:11+00:00", "translation_date": "2026-02-06T17:23:53+00:00",
"source_file": "AGENTS.md", "source_file": "AGENTS.md",
"language_code": "sv" "language_code": "sv"
}, },
@ -516,11 +516,17 @@
"language_code": "sv" "language_code": "sv"
}, },
"README.md": { "README.md": {
"original_hash": "490c83786552d7fab6390991517bef09", "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-01-29T18:28:53+00:00", "translation_date": "2026-02-06T17:18:18+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "sv" "language_code": "sv"
}, },
"Roadmap.md": {
"original_hash": "28bf6185fd7f27b62ddc210514366192",
"translation_date": "2026-02-06T17:20:49+00:00",
"source_file": "Roadmap.md",
"language_code": "sv"
},
"SECURITY.md": { "SECURITY.md": {
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228", "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2025-08-26T21:26:39+00:00", "translation_date": "2025-08-26T21:26:39+00:00",

286
translations/sv/AGENTS.md
Unescape View File

@ -2,53 +2,53 @@
## Projektöversikt ## 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 utbildningsbibliotek för att lära ut grunderna i webbapputveckling för 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.
### Viktiga komponenter ### Viktiga komponenter
- **Utbildningsinnehåll**: 24 strukturerade lektioner organiserade i projektbaserade moduler - **Utbildningsinnehåll**: 24 strukturerade lektioner organiserade i projektbaserade moduler
- **Praktiska projekt**: Terrarium, Skrivarspel, Webbläsartillägg, Rymdspel, Bankapp, Kodredigerare och AI-chattassistent - **Praktiska projekt**: Terrarium, Typ-spel, Webbläsartillägg, Rymdspel, Bankapp, Kodredigerare och AI-chattassistent
- **Interaktiva quiz**: 48 quiz med 3 frågor vardera (före/efter lektion) - **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 - **Fler språkstöd**: Automatiska översättningar för 50+ språk via GitHub Actions
- **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (för AI-projekt) - **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (för AI-projekt)
### Arkitektur ### Arkitektur
- Utbildningsmaterial med lektionbaserad struktur - Utbildningsbibliotek med lektionbaserad struktur
- Varje lektionsmapp innehåller README, kodexempel och lösningar - Varje lektionsmapp innehåller README, kodexempel och lösningar
- Självständiga projekt i separata kataloger (quiz-app, olika lektionsprojekt) - Självständiga projekt i separata kataloger (quiz-app, olika lektionsprojekt)
- Översättningssystem med GitHub Actions (co-op-translator) - Översättningssystem med GitHub Actions (co-op-translator)
- Dokumentation tillgänglig via Docsify och som PDF - Dokumentation serveras via Docsify och finns som PDF
## Installationskommandon ## Installationskommandon
Detta material är främst avsett för att konsumera utbildningsinnehåll. För att arbeta med specifika projekt: Detta bibliotek är främst för att konsumera utbildningsinnehåll. För att arbeta med specifika projekt:
### Huvudrepository-installation ### Huvudbibliotekets installation
```bash ```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners cd Web-Dev-For-Beginners
``` ```
### Quiz-app-installation (Vue 3 + Vite) ### Quiz App Setup (Vue 3 + Vite)
```bash ```bash
cd quiz-app cd quiz-app
npm install npm install
npm run dev # Start development server npm run dev # Starta utvecklingsserver
npm run build # Build for production npm run build # Bygg för produktion
npm run lint # Run ESLint npm run lint # Kör ESLint
``` ```
### Bankprojekt-API (Node.js + Express) ### Bankprojekt API (Node.js + Express)
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm install npm install
npm start # Start API server npm start # Starta API-server
npm run lint # Run ESLint npm run lint # Kör ESLint
npm run format # Format with Prettier npm run format # Formatera med Prettier
``` ```
### Webbläsartilläggsprojekt ### Webbläsartilläggsprojekt
@ -56,7 +56,7 @@ npm run format # Format with Prettier
```bash ```bash
cd 5-browser-extension/solution cd 5-browser-extension/solution
npm install npm install
# Follow browser-specific extension loading instructions # Följ webbläsarspecifika instruktioner för att ladda tillägg
``` ```
### Rymdspelsprojekt ### Rymdspelsprojekt
@ -64,15 +64,15 @@ npm install
```bash ```bash
cd 6-space-game/solution cd 6-space-game/solution
npm install 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 ```bash
cd 9-chat-project/solution/backend/python cd 9-chat-project/solution/backend/python
pip install openai pip install openai
# Set GITHUB_TOKEN environment variable # Sätt miljövariabeln GITHUB_TOKEN
python api.py python api.py
``` ```
@ -80,61 +80,61 @@ python api.py
### För innehållsbidragare ### För innehållsbidragare
1. **Forka repositoryt** till ditt GitHub-konto 1. **Forka biblioteket** till ditt GitHub-konto
2. **Klona din fork** lokalt 2. **Klona din fork** lokalt
3. **Skapa en ny gren** för dina ändringar 3. **Skapa en ny branch** för dina ändringar
4. Gör ändringar i lektionsinnehåll eller kodexempel 4. Gör ändringar i lektionsinnehåll eller kodexempel
5. Testa kodändringar i relevanta projektkataloger 5. Testa eventuella kodändringar i relevanta projektmappar
6. Skicka pull requests enligt bidragsriktlinjerna 6. Skicka pull requests enligt bidragsriktlinjer
### För elever ### För elever
1. Forka eller klona repositoryt 1. Forka eller klona biblioteket
2. Navigera till lektionskatalogerna i ordning 2. Gå igenom lektionsmappar i ordning
3. Läs README-filerna för varje lektion 3. Läs README-filer för varje lektion
4. Gör quiz före lektionen på https://ff-quizzes.netlify.app/web/ 4. Slutför för-lektionsquiz på https://ff-quizzes.netlify.app/web/
5. Arbeta igenom kodexempel i lektionsmapparna 5. Arbeta igenom kodexempel i lektionsmappar
6. Slutför uppgifter och utmaningar 6. Slutför uppgifter och utmaningar
7. Gör quiz efter lektionen 7. Gör efter-lektionsquiz
### Liveutveckling ### Live-utveckling
- **Dokumentation**: Kör `docsify serve` i root (port 3000) - **Dokumentation**: Kör `docsify serve` i root (port 3000)
- **Quiz-app**: Kör `npm run dev` i quiz-app-katalogen - **Quiz App**: Kör `npm run dev` i quiz-app-mappen
- **Projekt**: Använd VS Code Live Server-tillägg för HTML-projekt - **Projekt**: Använd VS Code Live Server-extension för HTML-projekt
- **API-projekt**: Kör `npm start` i respektive API-kataloger - **API-projekt**: Kör `npm start` i respektive API-katalog
## Testinstruktioner ## Testningsinstruktioner
### Testning av quiz-app ### Quiz App testning
```bash ```bash
cd quiz-app cd quiz-app
npm run lint # Check for code style issues npm run lint # Kontrollera kodstilproblem
npm run build # Verify build succeeds npm run build # Verifiera att byggnationen lyckas
``` ```
### Testning av bank-API ### Bank API testning
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm run lint # Check for code style issues npm run lint # Kontrollera kodstilproblem
node server.js # Verify server starts without errors node server.js # Verifiera att servern startar utan fel
``` ```
### Allmän teststrategi ### Allmän testmetod
- Detta är ett utbildningsmaterial utan omfattande automatiserade tester - Detta är ett utbildningsbibliotek utan omfattande automatiserade tester
- Manuell testning fokuserar på: - Manuell testning fokuserar på:
- Kodexempel körs utan fel - Kodexempel körs utan fel
- Länkar i dokumentationen fungerar korrekt - Länkar i dokumentationen fungerar korrekt
- Projektbyggen slutförs framgångsrikt - Projekt byggs utan problem
- Exempel följer bästa praxis - Exempel följer bästa praxis
### Kontroll före inlämning ### Kontroll före inskickning
- Kör `npm run lint` i kataloger med package.json - 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 - Testa kodexempel i webbläsare eller Node.js
- Kontrollera att översättningar behåller korrekt struktur - Kontrollera att översättningar behåller korrekt struktur
@ -143,140 +143,140 @@ node server.js # Verify server starts without errors
### JavaScript ### JavaScript
- Använd modern ES6+ syntax - Använd modern ES6+ syntax
- Följ standard ESLint-konfigurationer som tillhandahålls i projekten - Följ standard ESLint-konfigurationer i projekten
- Använd meningsfulla variabel- och funktionsnamn för pedagogisk tydlighet - Använd meningsfulla variabel- och funktionsnamn för utbildningsklarhet
- Lägg till kommentarer som förklarar koncept för elever - Lägg till kommentarer som förklarar koncept för elever
- Formatera med Prettier där det är konfigurerat - Formatera med Prettier där det är konfigurerat
### HTML/CSS ### HTML/CSS
- Semantiska HTML5-element - Semantiska HTML5-element
- Principer för responsiv design - Responsiv designprinciper
- Tydliga klassnamnskonventioner - Klara klassnamnskonventioner
- Kommentarer som förklarar CSS-tekniker för elever - Kommentarer som förklarar CSS-tekniker för elever
### Python ### Python
- PEP 8-stilriktlinjer - PEP 8 stilriktlinjer
- Tydliga, pedagogiska kodexempel - Klara, utbildningsanpassade kodexempel
- Typanvisningar där det är hjälpsamt för lärande - Typangivelser där det är hjälpsamt för lärande
### Markdown-dokumentation ### Markdown-dokumentation
- Tydlig rubrikhierarki - Tydlig rubrikstruktur
- Kodblock med språkspecifikation - Kodblock med språkspecifikation
- Länkar till ytterligare resurser - 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 - Alt-text för bilder för tillgänglighet
### Filorganisation ### Filorganisation
- Lektioner numrerade sekventiellt (1-getting-started-lessons, 2-js-basics, etc.) - Lektioner numrerade i ordning (1-getting-started-lessons, 2-js-basics, etc.)
- Varje projekt har `solution/` och ofta `start/` eller `your-work/`-kataloger - Varje projekt har `solution/` och ofta `start/` eller `your-work/` kataloger
- Bilder lagras i lektionsspecifika `images/`-mappar - Bilder lagras i lektons-specifika `images/`-mappar
- Översättningar i `translations/{language-code}/`-struktur - Översättningar i `translations/{language-code}/` struktur
## Bygg och distribution ## Bygg och distribution
### Quiz-app-distribution (Azure Static Web Apps) ### Quiz App distribution (Azure Static Web Apps)
Quiz-appen är konfigurerad för distribution via Azure Static Web Apps: quiz-app är konfigurerad för distribution till Azure Static Web Apps:
```bash ```bash
cd quiz-app cd quiz-app
npm run build # Creates dist/ folder npm run build # Skapar dist/ mapp
# Deploys via GitHub Actions workflow on push to main # Distribuerar via GitHub Actions-arbetsflöde vid push till main
``` ```
Konfiguration för Azure Static Web Apps: Azure Static Web Apps-konfiguration:
- **App-plats**: `/quiz-app` - **App-plats**: `/quiz-app`
- **Utdata-plats**: `dist` - **Utdata-plats**: `dist`
- **Arbetsflöde**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` - **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Generering av dokumentations-PDF ### Generering av PDF-dokumentation
```bash ```bash
npm install # Install docsify-to-pdf npm install # Installera docsify-to-pdf
npm run convert # Generate PDF from docs npm run convert # Generera PDF från docs
``` ```
### Docsify-dokumentation ### Docsify-dokumentation
```bash ```bash
npm install -g docsify-cli # Install Docsify globally npm install -g docsify-cli # Installera Docsify globalt
docsify serve # Serve on localhost:3000 docsify serve # Servera på localhost:3000
``` ```
### Projekt-specifika byggen ### Projekt-specifika byggsteg
Varje projektkatalog kan ha sin egen byggprocess: Varje projektkatalog kan ha egen byggprocess:
- Vue-projekt: `npm run build` skapar produktionspaket - Vue-projekt: `npm run build` skapar produktionspaket
- Statiska projekt: Ingen byggsteg, servera filer direkt - Statisk projekt: Inget byggsteg, servera filer direkt
## Riktlinjer för pull requests ## Pull Request-riktlinjer
### Titelformat ### Titelformat
Använd tydliga, beskrivande titlar som indikerar ändringsområdet: Använd tydliga, beskrivande titlar som anger ändringsområde:
- `[Quiz-app] Lägg till nytt quiz för lektion X` - `[Quiz-app] Lägg till nytt quiz för lektion X`
- `[Lesson-3] Rätta stavfel i terrarium-projekt` - `[Lesson-3] Fixar 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` - `[Docs] Uppdatera installationsinstruktioner`
### Obligatoriska kontroller ### Obligatoriska kontroller
Innan du skickar en PR: Innan PR skickas in:
1. **Kodkvalitet**: 1. **Kodkvalitet**:
- Kör `npm run lint` i berörda projektkataloger - Kör `npm run lint` i berörda projektmappar
- Åtgärda alla lintningsfel och varningar - Åtgärda alla lint-varningar och fel
2. **Byggverifiering**: 2. **Byggverifiering**:
- Kör `npm run build` om tillämpligt - Kör `npm run build` om tillämpligt
- Kontrollera att inga byggfel uppstår - Säkerställ att inga byggfel uppstår
3. **Länkvalidering**: 3. **Länkkontroll**:
- Testa alla markdown-länkar - Testa alla markdown-länkar
- Kontrollera att bildreferenser fungerar - Verifiera att bildreferenser fungerar
4. **Innehållsgranskning**: 4. **Innehållsgranskning**:
- Korrekturläs för stavning och grammatik - Korrekturläs stavning och grammatik
- Kontrollera att kodexempel är korrekta och pedagogiska - Säkerställ att kodexempel är korrekta och pedagogiska
- Verifiera att översättningar behåller ursprunglig mening - Kontrollera att översättningar behåller ursprungligt budskap
### Bidragskrav ### Bidragskrav
- Godkänn Microsoft CLA (automatisk kontroll vid första PR) - Acceptera Microsoft CLA (automatisk kontroll vid första PR)
- Följ [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) - Följ [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Se [CONTRIBUTING.md](./CONTRIBUTING.md) för detaljerade riktlinjer - 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 ### Granskningsprocess
- PRs granskas av underhållare och communityn - PR granskas av underhållare och community
- Pedagogisk tydlighet prioriteras - Utbildningsklarhet prioriteras
- Kodexempel bör följa aktuella bästa praxis - Kodexempel ska följa aktuella bästa praxis
- Översättningar granskas för noggrannhet och kulturell lämplighet - Översättningar granskas för korrekthet och kulturell lämplighet
## Översättningssystem ## Översättningssystem
### Automatiserad översättning ### Automatisk översättning
- Använder GitHub Actions med co-op-translator-arbetsflöde - Använder GitHub Actions med co-op-translator workflow
- Översätter automatiskt till 50+ språk - Översätter automatiskt till 50+ språk
- Källfiler i huvudkataloger - Källfiler i huvudkataloger
- Översatta filer i `translations/{language-code}/`-kataloger - Översatta filer i `translations/{language-code}/`-mappar
### Lägga till manuella förbättringar av översättningar ### Manuella förbättringar av översättning
1. Lokalisera filen i `translations/{language-code}/` 1. Hitta filen i `translations/{language-code}/`
2. Gör förbättringar samtidigt som strukturen bevaras 2. Gör förbättringar samtidigt som struktur bevaras
3. Kontrollera att kodexempel förblir funktionella 3. Säkerställ att kodexempel förblir funktionella
4. Testa eventuellt lokaliserat quizinnehåll 4. Testa eventuellt lokaliserat quizinnehåll
### Metadata för översättningar ### Översättningsmetadata
Översatta filer inkluderar metadata-header: Översatta filer innehåller metadatahuvud:
```markdown ```markdown
<!-- <!--
CO_OP_TRANSLATOR_METADATA: CO_OP_TRANSLATOR_METADATA:
@ -296,111 +296,113 @@ CO_OP_TRANSLATOR_METADATA:
**Quiz-appen startar inte**: **Quiz-appen startar inte**:
- Kontrollera Node.js-version (v14+ rekommenderas) - Kontrollera Node.js-version (v14+ rekommenderas)
- Ta bort `node_modules` och `package-lock.json`, kör `npm install` igen - Ta bort `node_modules` och `package-lock.json`, kör `npm install` igen
- Kontrollera portkonflikter (standard: Vite använder port 5173) - Kontrollera om porten är upptagen (standard: Vite använder port 5173)
**API-servern startar inte**: **API-server startar inte**:
- Verifiera att Node.js-versionen uppfyller minimikrav (node >=10) - Verifiera att Node.js-version är minst (node >=10)
- Kontrollera om porten redan används - Kontrollera om port är redan i bruk
- Säkerställ att alla beroenden är installerade med `npm install` - 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 att manifest.json är korrekt formaterad
- Kontrollera webbläsarkonsolen för fel - Kontrollera webbläsarkonsolen för fel
- Följ webbläsarspecifika installationsinstruktioner för tillägg - Följ webbläsarspecifika installationsinstruktioner för tillägg
**Problem med Python-chattprojekt**: **Problem med Python-chattprojektet**:
- Säkerställ att OpenAI-paketet är installerat: `pip install openai` - Kontrollera att OpenAI-paketet är installerat: `pip install openai`
- Verifiera att GITHUB_TOKEN-miljövariabeln är inställd - Verifiera att GITHUB_TOKEN miljövariabel är satt
- Kontrollera GitHub Models åtkomstbehörigheter - Kontrollera GitHub Models åtkomsträttigheter
**Docsify serverar inte dokumentation**: **Docsify serverar inte dokumentation**:
- Installera docsify-cli globalt: `npm install -g docsify-cli` - Installera docsify-cli globalt: `npm install -g docsify-cli`
- Kör från repositorys root-katalog - Kör från repository root-katalog
- Kontrollera att `docs/_sidebar.md` finns - Kontrollera att `docs/_sidebar.md` finns
### Tips för utvecklingsmiljö ### Tips för utvecklingsmiljö
- Använd VS Code med Live Server-tillägg för HTML-projekt - Använd VS Code med Live Server-extension för HTML-projekt
- Installera ESLint och Prettier-tillägg för konsekvent formatering - Installera ESLint och Prettier extensions för konsekvent formatering
- Använd webbläsarens utvecklingsverktyg för att felsöka JavaScript - Använd webbläsarens DevTools för att debugga JavaScript
- För Vue-projekt, installera Vue DevTools-webbläsartillägg - För Vue-projekt, installera Vue DevTools webbläsartillägg
### Prestandaöverväganden ### Prestandaöverväganden
- Stort antal översatta filer (50+ språk) innebär att fullständiga kloner är stora - Stort antal översatta filer (50+ språk) gör att fulla kloner blir stora
- Använd grundläggande klon om du bara arbetar med innehåll: `git clone --depth 1` - Använd shallow clone om du bara arbetar med innehåll: `git clone --depth 1`
- Exkludera översättningar från sökningar när du arbetar med engelskt innehåll - 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 ## Säkerhetsöverväganden
### Miljövariabler ### Miljövariabler
- API-nycklar ska aldrig begås till repositoryt - API-nycklar bör aldrig committas till repository
- Använd `.env`-filer (redan i `.gitignore`) - Använd `.env`-filer (redan i `.gitignore`)
- Dokumentera nödvändiga miljövariabler i projektens README-filer - Dokumentera erforderliga miljövariabler i projekt-README
### Python-projekt ### Python-projekt
- Använd virtuella miljöer: `python -m venv venv` - Använd virtuella miljöer: `python -m venv venv`
- Håll beroenden uppdaterade - Håll beroenden uppdaterade
- GitHub-token ska ha minimalt nödvändiga behörigheter - GitHub-tokens bör ha minimala nödvändiga rättigheter
### GitHub Models-åtkomst ### GitHub Models-åtkomst
- Personliga åtkomsttoken (PAT) krävs för GitHub Models - Personliga åtkomsttokens (PAT) krävs för GitHub Models
- Token ska lagras som miljövariabler - Tokens bör sparas som miljövariabler
- Begå aldrig token eller autentiseringsuppgifter - Commita aldrig tokens eller inloggningsuppgifter
## Ytterligare anteckningar ## Ytterligare anteckningar
### Målgrupp ### Målgrupp
- Helt nybörjare inom webbutveckling - Helt nybörjare inom webbappar
- Studenter och självlärande - Studenter och självlärande
- Lärare som använder kursplanen i klassrum - Lärare som använder kursplanen i klassrum
- Innehållet är utformat för tillgänglighet och gradvis färdighetsbyggande - Innehållet är utformat för tillgänglighet och stegvis kompetensuppbyggnad
### Pedagogisk filosofi ### Pedagogisk filosofi
- Projektbaserad inlärningsmetod - Projektbaserat lärande
- Frekventa kunskapskontroller (quiz) - Frekventa kunskapskontroller (quiz)
- Praktiska kodövningar - Praktiska kodövningar
- Exempel på verkliga applikationer - Exempel från verkliga tillämpningar
- Fokus på grunder innan ramverk - Fokus på grunder innan ramverk
### Repository-underhåll ### Underhåll av repository
- Aktiv community av elever och bidragsgivare - Aktiv community av elever och bidragsgivare
- Regelbundna uppdateringar av beroenden och innehåll - Regelbundna uppdateringar av beroenden och innehåll
- Ärenden och diskussioner övervakas av underhållare - Ärenden och diskussioner övervakas av underhållare
- Översättningsuppdateringar automatiserade via GitHub Actions - Översättningsuppdateringar automatiseras via GitHub Actions
### Relaterade resurser ### Relaterade resurser
- [Microsoft Learn-moduler](https://docs.microsoft.com/learn/) - [Microsoft Learn moduler](https://docs.microsoft.com/learn/)
- [Student Hub-resurser](https://docs.microsoft.com/learn/student-hub/) - [Student Hub resurser](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) rekommenderas för elever - [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 kursplaner finns
### Arbeta med specifika projekt ### Arbeta med specifika projekt
För detaljerade instruktioner om individuella projekt, se README-filerna i: För detaljerade instruktioner om individuell projekt, se README-filer i:
- `quiz-app/README.md` - Vue 3 quiz-applikation - `quiz-app/README.md` - Vue 3 quiz-app
- `7-bank-project/README.md` - Bankapplikation med autentisering - `7-bank-project/README.md` - Bankapplikation med autentisering
- `5-browser-extension/README.md` - Utveckling av webbläsartillägg - `5-browser-extension/README.md` - Webbläsartilläggsutveckling
- `6-space-game/README.md` - Canvas-baserad spelutveckling - `6-space-game/README.md` - Canvas-baserat spel
- `9-chat-project/README.md` - AI-chattassistentprojekt - `9-chat-project/README.md` - AI-chattassistentprojekt
### Monorepo-struktur ### 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 detta bibliotek flera oberoende projekt:
- Varje lektion är självständig - Varje lektion är självständig
- Projekt delar inte beroenden - Projekt delar inga beroenden
- Arbeta med individuella projekt utan att påverka andra - Arbeta med enskilda projekt utan att påverka andra
- Klona hela repositoryt för hela kursupplevelsen - Klona hela repot för full utbildningsupplevelse
--- ---
**Ansvarsfriskrivning**: <!-- CO-OP TRANSLATOR DISCLAIMER START -->
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. **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 bör du vara medveten om att automatiska översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess ursprungsspråk ska 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 -->

202
translations/sv/README.md
Unescape View File

@ -1,24 +1,38 @@
# 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)
# Webb utveckling för nybörjare - En läroplan
Lär dig grunderna i webbutveckling med vår 12-veckors omfattande kurs av Microsoft Cloud Advocates. Varje av de 24 lektionerna fördjupar sig i JavaScript, CSS och HTML genom praktiska projekt som terrarier, webbläsartillägg och rymdspel. Delta i frågesporter, diskussioner och praktiska uppgifter. Förbättra dina färdigheter och optimera din kunskapsbevarande med vår effektiva projektbaserade pedagogik. Börja din kodningsresa idag!
Gå med i Azure AI Foundry Discord Community 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: 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) 1. **Forka FÖrrådet**: 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` 2. **Klona FÖrrådet**: `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) 3. [**Gå med i Azure AI Foundry Discord och träffa experter och andra utvecklare**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Fler språkstöd ### 🌐 Flerspråkigt stöd
#### Stöds via GitHub Action (Automatiskt & Alltid uppdaterat) #### Stöds via GitHub Action (Automatiserat och alltid uppdaterat)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START --> <!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../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) [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 förråd inkluderar över 50 språköversättningar som betydligt ökar nedladdningsstorleken. För att klona utan översättningar, använd sparsamt utläsning:
> ```bash > ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners > cd Web-Dev-For-Beginners
@ -27,78 +41,80 @@ Följ dessa steg för att komma igång med dessa resurser:
> 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 slutföra kursen med en mycket snabbare nedladdning.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END --> <!-- 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 vill ha ytterligare översättningsspråk stödjs dessa [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?_ #### 🧑‍🎓 _Ä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 även sätt att få ett gratis certifikat-voucher. Detta är sidan du vill bokmärka och kolla då och då eftersom vi byter ut innehållet varje månad.
### 📣 Meddelande - Nya GitHub Copilot Agent-lägesutmaningar att slutföra! ### 📣 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 GitHub Copilot och Agent-läge. Om du inte har använt Agent-läge tidigare kan det inte bara generera text utan kan också 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 Assistant-projekt nyligen 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 just 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! 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. - Lektioner som täcker allt från grunder till RAG.
- Interagera med historiska karaktärer med GenAI och vår följeslagsapp. - Interagera med historiska karaktärer med GenAI och vår app.
- Rolig och engagerande berättelse, du kommer att resa i tiden! - Rolig och engagerande berättelse, du kommer att resa i tiden!
![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: Varje lektion innehåller en uppgift att slutföra, en kunskapskontroll och en utmaning som vägleder dig genom ämnen som:
- Prompting och prompt-engineering - Frågeteknik och promptteknik
- Text- och bildapplikationsgenerering - Text- och bildappsgenerering
- Sökapplikationer - Sökappar
Besök [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) för att komma igång! Besök [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) för att komma igång!
## 🌱 Komma igång ## 🌱 Komma 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 du kan använda denna läroplan. Vi skulle uppskatta din 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. **[Lärande](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, för varje lektion, börja med en för-foreläsningsfrågesport och fortsätt med att läsa föreläsningsmaterialet, komplettera de olika aktiviteterna och kontrollera din förståelse med post-foreläsningsfrågesporten.
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 inlärningsupplevelse, anslut med dina kamrater 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. För att vidareutbilda dig 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ö ### 📋 Ställa in 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 kommer igång kan du välja att köra läroplanen i en [Codespace](https://github.com/features/codespaces/) (_en webbläsarbaserad, ingen installation behövs-miljö_), 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 #### Skapa ditt förråd
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 du enkelt ska kunna spara ditt arbete rekommenderas att du skapar din egen kopia av detta förråd. Du kan göra detta genom att klicka på knappen **Use this template** högst upp på sidan. Detta skapar ett nytt förråd i ditt GitHub-konto med en kopia av läroplanen.
Följ stegen: Följ dessa steg:
1. **Gaffla arkivet**: Klicka på "Fork"-knappen uppe till höger på denna sida. 1. **Forka FÖrrådet**: Klicka på "Fork"-knappen i det övre högra hörnet på denna sida.
2. **Klona arkivet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **Klona FÖrrådet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Köra läroplanen i en Codespace #### 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 förråd som du skapade, klicka på **Code**-knappen och välj **Open with Codespaces**. Detta skapar en ny Codespace för dig att arbeta i.
![Codespace](../../translated_images/sv/createcodespace.0238bbf4d7a8d955.webp) ![Codespace](../../translated_images/sv/createcodespace.0238bbf4d7a8d955.webp)
#### Köra läroplanen lokalt på din dator #### 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), guidar dig genom olika alternativ för varje av dessa 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). Vårt rekommenderade redigeringsprogram är [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 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 förråd till din dator. Du kan göra detta genom att klicka på **Code**-knappen och kopiera URL:
[CodeSpace](./images/createcodespace.png) [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) 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:
@ -107,82 +123,82 @@ Vi rekommenderar att använda [Visual Studio Code](https://code.visualstudio.com
git clone <your-repository-url> 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. Det kan du göra genom att klicka på **File** > **Open Folder** och välja mappen du just klonade.
> Rekommenderade Visual Studio Code-tillägg: > 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 > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - för att förhandsgranska HTML-sidor i 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 skriva kod snabbare
## 📂 Varje lektion innehåller: ## 📂 Varje lektion inkluderar:
- valfri sketchnote - valfri sketchnote
- valfri kompletterande video - valfri kompletterande video
- quiz som uppvärmning före lektion - förberedande quiz före lektionen
- skriftlig lektion - 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 för hur man bygger projektet
- kunskapskontroller - kunskapskontroller
- en utmaning - en utmaning
- kompletterande läsning - kompletterande läsning
- uppgift - uppgift
- [quiz efter lektionen](https://ff-quizzes.netlify.app/web/) - [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 mappen `quiz-app`.
## 🗃️ Lektioner ## 🗃️ Lektioner
| | Projektnamn | Undervisade begrepp | Lärandemål | Länkad Lektion | Författare | | | Projektnamn | Undervisade koncept | 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 | | 01 | Kom igång | Introduktion till programmering och verktyg | Lär dig de grundläggande principerna bakom de flesta programmeringsspråk och programvara som hjälper professionella utvecklare | [Introduktion 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 | | 02 | Kom igång | Grunder i GitHub, inklusive samarbete i team | Hur man använder GitHub i sitt projekt, och hur man samarbetar med andra i en kodbas | [Introduktion 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 | | 03 | Kom igång | Tillgänglighet | Lär dig grunderna i webbtillgänglighet | [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 | | 04 | JS Grunder | JavaScript-datatyper | Grunderna i JavaScript-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 | | 05 | JS Grunder | Funktioner och metoder | Lär dig om funktioner och metoder för att hantera applikationens logik | [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 | | 06 | JS Grunder | Beslutsfattande med JS | Lär dig att skapa villkor i din kod med hjälp av beslutsfattandemetoder | [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 | | 07 | JS Grunder | Arrayer och loopar | Arbeta med data genom 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 | | 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML i praktiken | Bygg HTML:en för att skapa ett online-terrarium, med fokus på 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 | | 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS i praktiken | Bygg CSS:en för att styla online-terrarium, med fokus på CSS-grunder, inklusive responsivt webbdesign | [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 | | 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript-closures, DOM-manipulation | Bygg JavaScript för att få terrariet att fungera som ett 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 | | 11 | [Typing Game](./4-typing-game/solution/README.md) | Bygg ett skrivspel | Lär dig använda tangentbordevenemang 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 | | 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 de första elementen i 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 | | 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bygg ett formulär, anropa en API och lagra variabler lokalt | Bygg JavaScript-komponenterna i din webbläsartillägg för att anropa en API med hjälp av variabler lagrade lokalt | [API:er, 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 | | 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äggets ikon; lär dig om webbprestanda och vissa optimeringar | [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 | | 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 samt 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 | | 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 | [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 | | 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 | | 18 | [Space Game](./6-space-game/solution/README.md) | Kollisionsdetektion | Få element att kollidera och reagera på varandra med hjälp av knapptryckningar och ge en cooldown-funktion för 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 | | 19 | [Space Game](./6-space-game/solution/README.md) | Poängräkning | Utför matematiska beräkningar baserat på spelets status och prestanda | [Poängräkning](./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 | | 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 rensa tillgångar och återställa variabelvärden | [Avslutsvillkor](./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 | | 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-mallar och rutter i en webbapp | Lär dig skapa grunden till en multipages webbplats arkitektur med routing och HTML-mallar | [HTML-mallar och rutter](./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 | | 22 | [Banking App](./7-bank-project/solution/README.md) | Bygg ett 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 | | 23 | [Banking App](./7-bank-project/solution/README.md) | Sätt att hämta och använda data | Hur data flyter 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 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 | | 24 | [Banking App](./7-bank-project/solution/README.md) | Begrepp i tillståndshantering | Lär dig hur din app behåller tillstånd och hur du hanterar det programmässigt | [Tillståndshantering](./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 | | 25 | [Browser/VScode Code](../../8-code-editor) | Arbeta med VScode | Lär dig hur man använder en kodredigerare | [Använd 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 bygga din egen AI-assistent | [AI-assistentprojekt](./9-chat-project/README.md) | Chris | | 26 | [AI Assistants](./9-chat-project/README.md) | Arbeta med AI | Lär dig hur du bygger din egen AI-assistent | [AI Assistentprojekt](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogik ## 🏫 Pedagogik
Vår läroplan är utformad med två centrala pedagogiska principer i åtanke: Vår läroplan är utformad med två viktiga pedagogiska principer i åtanke:
* projektbaserat lärande * projektbaserat lärande
* frekventa quiz * 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 används av dagens webbutvecklare. Studenter får möjlighet att utveckla praktisk erfarenhet genom att bygga ett skrivspel, ett virtuellt terrarium, en miljövänlig webbläsartillägg, ett rymd-invaderarspel och en bankapp för företag. I slutet av serien kommer studenter att ha en gedigen 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 [Lärväg](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 överensstämmer med projekten blir processen mer engagerande för studenterna och konceptens bestående förstärks. Vi skrev också flera grundläggande lektioner i JavaScript för att introducera koncept, tillsammans 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ågrisk-quiz före en lektion studentens fokus mot att lära sig ett ämne, medan ett andra quiz efter lektionen säkerställer ytterligare bestående förståelse. Denna läroplan är designad för att vara flexibel och rolig och kan tas i sin helhet eller delvis. Projekten börjar smått och blir successivt mer komplexa vid slutet av 12-veckorscykeln.
Ä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 har undvikit att introducera JavaScript-ramverk för att fokusera på grundläggande färdigheter som webbutvecklare innan ett ramverk används, är ett bra nästa steg efter att ha genomfört denna läroplan att lära sig om Node.js via en annan videosamling: "[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 riktlinjer för [Uppförandekod](CODE_OF_CONDUCT.md) och [Bidrag](CONTRIBUTING.md). Vi välkomnar din konstruktiva feedback!
## 🧭 Offline-åtkomst ## 🧭 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 maskin, och sedan i rotmappen av detta repo skriver du `docsify serve`. Webbplatsen kommer att serveras på port 3000 på din localhost: `localhost:3000`.
## 📘 PDF ## 📘 PDF
@ -196,10 +212,10 @@ Vårt team producerar andra kurser! Kolla in:
### LangChain ### 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) [![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.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) [![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) [![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -207,7 +223,7 @@ Vårt team producerar andra kurser! Kolla in:
--- ---
### Generativ AI-serie ### Generative AI Series
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) [![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -215,7 +231,7 @@ Vårt team producerar andra kurser! Kolla in:
--- ---
### Kärninlärning ### Core Learning
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) [![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -226,7 +242,7 @@ Vårt team producerar andra kurser! Kolla in:
--- ---
### Copilot-serie ### Copilot Series
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) [![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) [![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
@ -234,21 +250,21 @@ Vårt team producerar andra kurser! Kolla in:
## Få hjälp ## 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 några frågor om att bygga AI-appar. Gå med andra studenter och erfarna utvecklare i diskussioner 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) [![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 under byggandet, besök:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## Licens ## Licens
Detta förvar är licensierat under MIT-licensen. Se [LICENSE](../../LICENSE)-filen för mer information. Detta förråd är licensierat under MIT-licensen. Se filen [LICENSE](../../LICENSE) för mer information.
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfriskrivning**: **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. 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 god notera att automatiska översättningar kan innehålla fel eller brister. Det ursprungliga dokumentet på dess ursprungliga språk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för några missförstånd eller feltolkningar som uppstår till följd av användningen av denna översättning.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

53
translations/sv/Roadmap.md
Unescape View File

@ -0,0 +1,53 @@
# Färdplan för Microsofts Web-Dev-For-Beginners Repository
**Detta repository erbjuder en färdplan för att lära sig grunderna i webbutveckling med fokus på JavaScript, HTML och CSS. Läroplanen är flexibel och kan genomföras helt eller delvis, med 24 lektioner spridda över 12 veckor.**
## Viktiga milstolpar
* **Veckor 1-3:**
* Introduktion till programmeringsspråk och verktyg för yrket
* Grunderna i GitHub
* Tillgänglighet
* JS-grunder: datatyper, funktioner och metoder
* Att fatta beslut med JS
* **Veckor 4-6:**
* Arrayer och loopar
* Terrarium: HTML i praktiken
* CSS i praktiken
* JavaScript-closures
* DOM-manipulation
* **Veckor 7-9:**
* Typningsspel: Händelsestyrd programmering
* Green Browser Extension: Arbeta med webbläsare
* Bygga ett formulär, anropa ett API och lagra variabler i lokal lagring
* Bakgrundsprocesser i webbläsaren
* Webbprestanda
* **Veckor 10-12:**
* Space Game: Mer avancerad spelutveckling med JavaScript
* Rita på canvas
* Flytta element runt på skärmen
* Kollisiondetektion
* Hålla poäng, avsluta och starta om spelet
* Banking App: HTML-mallar och rutter i en webbapp
* Bygga inloggnings- och registreringsformulär
* Metoder för hämtning och användning av data
* Begrepp för tillståndshantering
## Lärandemål
**Genom att fullfölja denna färdplan får studenter praktisk erfarenhet av att bygga ett typningsspel, virtuellt terrarium, miljövänligt webbläsartillägg, space-invader-liknande spel och en bankapp för företag. De kommer också att utveckla en gedigen förståelse för webbutvecklingens grunder.**
## Ytterligare resurser
* Detta repository erbjuder en mängd resurser för vidare lärande, inklusive handledningar, kodexempel och utmaningar.
* Microsoft Learn-plattformen erbjuder olika kurser och lärvägar inom webbutveckling.
* Online-communityn som Stack Overflow och MDN Web Docs tillhandahåller värdefullt stöd och resurser för webbutvecklare.
**Jag hoppas att denna färdplan hjälper dig på din resa inom webbutveckling!**
---
<!-- 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 eftersträvar noggrannhet, var vänlig uppmärksam på att automatiska översättningar kan innehålla fel eller brister. Det ursprungliga dokumentet på dess ursprungliga språk bör anses vara den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för några missförstånd eller feltolkningar som uppstår från användningen av denna översättning.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

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

@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:28:21+00:00", "translation_date": "2026-02-06T17:22:44+00:00",
"source_file": "AGENTS.md", "source_file": "AGENTS.md",
"language_code": "th" "language_code": "th"
}, },
@ -516,11 +516,17 @@
"language_code": "th" "language_code": "th"
}, },
"README.md": { "README.md": {
"original_hash": "490c83786552d7fab6390991517bef09", "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-01-29T18:27:19+00:00", "translation_date": "2026-02-06T17:15:05+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "th" "language_code": "th"
}, },
"Roadmap.md": {
"original_hash": "28bf6185fd7f27b62ddc210514366192",
"translation_date": "2026-02-06T17:20:35+00:00",
"source_file": "Roadmap.md",
"language_code": "th"
},
"SECURITY.md": { "SECURITY.md": {
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228", "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2025-08-26T21:26:23+00:00", "translation_date": "2025-08-26T21:26:23+00:00",

346
translations/th/AGENTS.md
Unescape View File

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

197
translations/th/README.md
Unescape View File

@ -2,7 +2,7 @@
[![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 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 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/) [![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) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) [![GitHub 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 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/)
@ -12,52 +12,52 @@
# การพัฒนาเว็บสำหรับผู้เริ่มต้น - หลักสูตร # การพัฒนาเว็บสำหรับผู้เริ่มต้น - หลักสูตร
เรียนรู้พื้นฐานของการพัฒนาเว็บกับหลักสูตรครบวงจร 12 สัปดาห์โดย Microsoft Cloud Advocates แต่ละบทเรียน 24 บทเจาะลึก JavaScript, CSS และ HTML ผ่านโครงการปฏิบัติ เช่น สวนในขวด, ส่วนขยายเบราว์เซอร์ และเกมอวกาศ มีการทดสอบ, การอภิปราย และแบบฝึกหัดเชิงปฏิบัติ เพิ่มพูนทักษะและเพิ่มประสิทธิภาพการจดจำความรู้ด้วยวิธีการสอนที่เน้นโครงการ เริ่มต้นการเขียนโค้ดของคุณวันนี้! เรียนรู้พื้นฐานของการพัฒนาเว็บกับหลักสูตรครอบคลุม 12 สัปดาห์ของเราโดย Microsoft Cloud Advocates แต่ละบทเรียนทั้ง 24 บทเรียนจะเจาะลึก JavaScript, CSS, และ HTML ผ่านโปรเจกต์ปฏิบัติ เช่น เทอร์ราเรียม, ส่วนขยายเบราว์เซอร์ และเกมอวกาศ พร้อมส่วนร่วมกับแบบทดสอบ, การสนทนา และงานปฏิบัติ พัฒนาทักษะและเพิ่มประสิทธิภาพการเก็บความรู้ของคุณด้วยวิธีการสอนผ่านโปรเจกต์ที่ได้ผล เริ่มต้นเส้นทางการเขียนโค้ดของคุณวันนี้!
เข้าร่วมชุมชน Azure AI Foundry Discord เข้าร่วมชุมชน Discord Azure AI Foundry
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
ทำตามขั้นตอนเหล่านี้เพื่อเริ่มต้นใช้แหล่งข้อมูลเหล่านี้: ทำตามขั้นตอนเหล่านี้เพื่อเริ่มใช้ทรัพยากรเหล่านี้:
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` 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 --> <!-- 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) [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 > ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners > cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ``` > ```
> จะให้ทุกอย่างที่คุณต้องใช้สำหรับทำหลักสูตรนี้ด้วยการดาวน์โหลดที่เร็วขึ้นมาก > ซึ่งจะให้คุณทุกอย่างที่จำเป็นสำหรับหลักสูตรด้วยการดาวน์โหลดที่รวดเร็วขึ้นมาก
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END --> <!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**หากคุณต้องการรองรับภาษาแปลเพิ่มเติม รายการภาษาที่รองรับอยู่ [ที่นี่](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** **ถ้าคุณต้องการให้เพิ่มการสนับสนุนภาษาแปลอื่น ๆ รายการภาษาที่สนับสนุนอยู่ [ที่นี่](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 Assistant ใหม่เพิ่งเพิ่มเข้ามา ลองดูได้ที่ [โปรเจกต์](./9-chat-project/README.md)
### 📣 ประกาศ - _หลักสูตรใหม่_ เกี่ยวกับ Generative AI สำหรับ JavaScript ได้เปิดตัวแล้ว ### 📣 ประกาศ - _หลักสูตรใหม่_ สำหรับ Generative AI สำหรับ JavaScript เพิ่งเปิดตัว
อย่าพลาดหลักสูตร Generative AI ใหม่ของเรา! อย่าพลาดหลักสูตร Generative AI ใหม่ของเรา!
@ -65,60 +65,60 @@
![Background](../../translated_images/th/background.148a8d43afde5730.webp) ![Background](../../translated_images/th/background.148a8d43afde5730.webp)
- บทเรียนครอบคลุมทุกอย่างตั้งแต่พื้นฐานถึง RAG - บทเรียนครอบคลุมทุกอย่างตั้งแต่พื้นฐานจนถึง RAG
- โต้ตอบกับตัวละครประวัติศาสตร์โดยใช้ GenAI และแอปเสริมของเรา - โต้ตอบกับตัวละครประวัติศาสตร์โดยใช้ GenAI และแอปคู่ของเรา
- เรื่องเล่าสนุกสนานและน่าติดตาม คุณจะได้เดินทางข้ามเวลา! - เนื้อเรื่องสนุกและน่าติดตาม คุณจะได้เดินทางข้ามเวลา!
![character](../../translated_images/th/character.5c0dd8e067ffd693.webp) ![character](../../translated_images/th/character.5c0dd8e067ffd693.webp)
แต่ละบทเรียนมีงานมอบหมายให้ทำ, การตรวจสอบความรู้ และความท้าทายเพื่อแนะนำคุณในการเรียนรู้หัวข้อต่างๆ เช่น: แต่ละบทเรียนประกอบด้วยงานที่ต้องทำ, การตรวจสอบความรู้ และความท้าทายเพื่อแนะนำการเรียนรู้หัวข้อต่าง ๆ เช่น:
- การตั้งคำถามและวิศวกรรมคำถาม (Prompt Engineering) - การตั้งค่าและออกแบบ prompt
- การสร้างแอปข้อความและภาพ - การสร้างแอปข้อความและรูปภาพ
- แอปค้นหา - แอปค้นหา
เยี่ยมชม [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) เพื่อเริ่มต้น! เยี่ยมชม [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) เพื่อเริ่มต้น!
## 🌱 เริ่มต้น ## 🌱 การเริ่มต้นใช้งาน
> **คุณครู** เราได้ [รวมข้อแนะนำบางส่วน](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 ของคุณที่มีสำเนาหลักสูตรนี้ เพื่อความสะดวกในการบันทึกงานของคุณ ควรสร้างสำเนาของที่เก็บนี้โดยคลิกปุ่ม **Use this template** ที่ด้านบนของหน้าเพื่อสร้างที่เก็บใหม่ในบัญชี GitHub ของคุณที่มีสำเนาหลักสูตรนี้
ทำตามขั้นตอนนี้: ทำตามขั้นตอนเหล่านี้:
1. **ทำ Fork ที่เก็บข้อมูล**: คลิกที่ปุ่ม "Fork" ที่มุมขวาบนของหน้านี้ 1. **Fork ที่เก็บ**: คลิกที่ปุ่ม "Fork" ที่มุมบนขวาของหน้านี้
2. **โคลนที่เก็บข้อมูล**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **โคลนที่เก็บ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### การรันหลักสูตรใน Codespace #### การใช้งานหลักสูตรใน Codespace
ในสำเนาที่คุณสร้างขึ้น ให้คลิกปุ่ม **Code** และเลือก **เปิดด้วย Codespaces** เพื่อสร้าง Codespace ใหม่สำหรับคุณทำงาน ในสำเนาที่เก็บของคุณที่สร้างไว้ คลิกปุ่ม **Code** และเลือก **Open with Codespaces** ขั้นตอนนี้จะสร้าง Codespace ใหม่ให้คุณทำงานได้
![Codespace](../../translated_images/th/createcodespace.0238bbf4d7a8d955.webp) ![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. โคลนที่เก็บของคุณลงบนเครื่องของคุณได้โดยคลิกที่ปุ่ม **Code** และคัดลอก URL:
[CodeSpace](./images/createcodespace.png) [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 ```bash
git clone <your-repository-url> git clone <your-repository-url>
@ -127,92 +127,91 @@
2. เปิดโฟลเดอร์ใน Visual Studio Code คุณสามารถทำได้โดยคลิกที่ **File** > **Open Folder** และเลือกโฟลเดอร์ที่คุณเพิ่งโคลนมา 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 > * [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/) - [แบบทดสอบหลังเรียน](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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, การจัดการ DOM | สร้าง JavaScript เพื่อให้เทอร์ราเรียมทำงานเป็นอินเทอร์เฟซลากและวาง โดยเน้นที่ closures และการจัดการ DOM | [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 | | 11 | [Typing Game](./4-typing-game/solution/README.md) | สร้างเกมพิมพ์ดีด | เรียนรู้วิธีใช้เหตุการณ์แป้นพิมพ์เพื่อควบคุมตรรกะของแอป 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 | | 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 | | 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 | | 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 | | 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 | | 16 | [Space Game](./6-space-game/solution/README.md) | การวาดบน canvas | เรียนรู้เกี่ยวกับ 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 | | 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 | | 18 | [Space Game](./6-space-game/solution/README.md) | การตรวจจับการชน | ทำให้องค์ประกอบชนกันและตอบสนองต่อกันโดยใช้การกดปุ่ม แถมมีฟังก์ชัน cooldown เพื่อรักษาประสิทธิภาพของเกม | [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 | | 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 | | 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 | | 21 | [Banking App](./7-bank-project/solution/README.md) | แม่แบบ HTML และเส้นทางในเว็บแอป | เรียนรู้วิธีสร้างโครงสร้างของเว็บไซต์หลายหน้าโดยใช้ routing และแม่แบบ HTML | [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 | | 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 | | 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 | | 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 | | 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 | | 26 | [AI Assistants](./9-chat-project/README.md) | การทำงานกับ AI | เรียนรู้วิธีสร้างผู้ช่วย AI ของคุณเอง | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 รูปแบบการสอน ## 🏫 วิธีการสอน
หลักสูตรของเราถูกออกแบบโดยมีหลักการสอนสำคัญสองประการ: หลักสูตรของเราออกแบบโดยมีหลักการทางการสอนสองประการสำคัญ:
* การเรียนรู้ผ่านโปรเจกต์ * การเรียนรู้ผ่านโครงการ
* แบบทดสอบบ่อยครั้ง * แบบทดสอบบ่อยครั้ง
โปรแกรมนี้สอนพื้นฐานของ JavaScript, HTML และ CSS รวมถึงเครื่องมือและเทคนิคล่าสุดที่นักพัฒนาเว็บสมัยใหม่ใช้ นักเรียนจะมีโอกาสพัฒนาทักษะผ่านการสร้างเกมพิมพ์ เกมเทอร์ราเรียมเสมือนจริง ส่วนขยายเบราว์เซอร์ที่เป็นมิตรต่อสิ่งแวดล้อม เกมสไตล์ space invader และแอปธนาคารสำหรับธุรกิจ เมื่อจบชุดนี้ นักเรียนจะได้ความเข้าใจที่มั่นคงเกี่ยวกับการพัฒนาเว็บ โปรแกรมสอนพื้นฐานของ JavaScript, HTML และ CSS รวมถึงเครื่องมือและเทคนิคล่าสุดที่นักพัฒนาเว็บสมัยใหม่ใช้ นักเรียนจะมีโอกาสได้รับประสบการณ์ปฏิบัติจริงโดยการสร้างเกมพิมพ์ดีด เทอร์ราเรียมเสมือน ส่วนขยายเบราว์เซอร์สีเขียว เกมอวกาศสไตล์ space-invader และแอปธนาคารสำหรับธุรกิจ เมื่อจบซีรีส์นี้ นักเรียนจะมีความเข้าใจแท้จริงเกี่ยวกับการพัฒนาเว็บ
> 🎓 คุณสามารถเรียนบทเรียนแรกๆ ในหลักสูตรนี้เป็น [เส้นทางการเรียนรู้](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) บน Microsoft Learn! > 🎓 คุณสามารถเรียนบทเรียนแรก ๆ ของหลักสูตรนี้ในรูปแบบ [Learn Path](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](CODE_OF_CONDUCT.md) และแนวทาง [Contributing](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/#/) โคลน repo นี้ ติดตั้ง Docsify บนเครื่องของคุณ แล้วในโฟลเดอร์หลักของ repo ให้พิมพ์ `docsify serve` เว็บไซต์จะถูกให้บริการผ่านพอร์ต 3000 บน localhost ของคุณ: `localhost:3000`
## 📘 PDF ## 📘 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 --> <!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain ### 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) [![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.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
--- ---
### Azure / Edge / MCP / Agents ### Azure / Edge / MCP / Agents
@ -250,21 +249,21 @@
## การขอความช่วยเหลือ ## การขอความช่วยเหลือ
หากคุณติดขัดหรือมีคำถามเกี่ยวกับการสร้างแอป AI เข้าร่วมกับผู้เรียนและนักพัฒนาที่มีประสบการณ์ในการอภิปรายเกี่ยวกับ MCP นี่คือชุมชนที่สนับสนุนซึ่งยินดีต้อนรับคำถามและแบ่งปันความรู้กันอย่างเสรี ถ้าคุณติดปัญหาหรือมีคำถามใดๆ เกี่ยวกับการสร้างแอป AI เข้าร่วมกับผู้เรียนและนักพัฒนาที่มีประสบการณ์ในการสนทนาเกี่ยวกับ MCP นี่คือชุมชนที่ให้กำลังใจ ที่ซึ่งคำถามเป็นที่ต้อนรับและความรู้ถูกแบ่งปันอย่างเสรี
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
หากคุณมีความคิดเห็นเกี่ยวกับผลิตภัณฑ์หรือเกิดข้อผิดพลาดระหว่างการสร้างโปรดไปที่: ถ้าคุณมีความคิดเห็นเกี่ยวกับผลิตภัณฑ์หรือพบข้อผิดพลาดในขณะสร้างโปรเจกต์ เยี่ยมชม:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## สิทธิ์การใช้งาน ## ใบอนุญาต
ที่เก็บนี้ได้รับอนุญาตภายใต้ใบอนุญาต MIT ดูไฟล์ [LICENSE](../../LICENSE) สำหรับข้อมูลเพิ่มเติม ที่เก็บนี้ได้รับอนุญาตภายใต้ใบอนุญาต MIT ดูไฟล์ [LICENSE](../../LICENSE) สำหรับข้อมูลเพิ่มเติม.
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- 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 --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

53
translations/th/Roadmap.md
Unescape View File

@ -0,0 +1,53 @@
# แผนที่เส้นทางสำหรับที่เก็บ Web-Dev-For-Beginners ของ Microsoft
**ที่เก็บนี้ให้แผนที่เส้นทางสำหรับการเรียนรู้พื้นฐานการพัฒนาเว็บโดยเน้นที่ JavaScript, HTML, และ CSS หลักสูตรนี้ยืดหยุ่นและสามารถทำได้ทั้งหมดหรือบางส่วน โดยมี 24 บทเรียนที่กระจายอยู่ตลอด 12 สัปดาห์**
## จุดมุ่งหมายสำคัญ
* **สัปดาห์ที่ 1-3:**
* บทนำสู่ภาษาการเขียนโปรแกรมและเครื่องมือของงาน
* พื้นฐานของ GitHub
* การเข้าถึงได้ง่าย
* พื้นฐาน JS: ชนิดข้อมูล, ฟังก์ชัน และเมธอด
* การตัดสินใจด้วย JS
* **สัปดาห์ที่ 4-6:**
* อาร์เรย์และลูป
* Terrarium: การใช้ HTML ในทางปฏิบัติ
* CSS ในทางปฏิบัติ
* JavaScript closures
* การจัดการ DOM
* **สัปดาห์ที่ 7-9:**
* Typing Game: การเขียนโปรแกรมที่ขับเคลื่อนด้วยเหตุการณ์
* Green Browser Extension: การทำงานกับเบราว์เซอร์
* การสร้างฟอร์ม, เรียกใช้ API และเก็บตัวแปรใน local storage
* กระบวนการพื้นหลังในเบราว์เซอร์
* ประสิทธิภาพเว็บ
* **สัปดาห์ที่ 10-12:**
* Space Game: การพัฒนาเกมขั้นสูงด้วย JavaScript
* การวาดลงบนแคนวาส
* การเคลื่อนย้ายองค์ประกอบบนหน้าจอ
* การตรวจจับการชนกัน
* การเก็บคะแนน, การจบและการเริ่มเกมใหม่
* Banking App: HTML Templates และ Routes ในเว็บแอป
* การสร้างฟอร์มเข้าสู่ระบบและการลงทะเบียน
* วิธีการดึงและใช้ข้อมูล
* แนวคิดการจัดการสถานะ
## ผลลัพธ์การเรียนรู้
**โดยการทำแผนที่เส้นทางนี้เสร็จสิ้น นักเรียนจะได้รับประสบการณ์ตรงในการสร้างเกมพิมพ์, Terrarium เสมือนจริง, ส่วนขยายเบราว์เซอร์ที่เป็นมิตรต่อสิ่งแวดล้อม, เกมสไตล์ผู้บุกรุกในอวกาศ และแอปธนาคารสำหรับธุรกิจ อีกทั้งยังพัฒนาความเข้าใจที่แข็งแกร่งในพื้นฐานการพัฒนาเว็บ**
## แหล่งข้อมูลเพิ่มเติม
* ที่เก็บนี้มีแหล่งข้อมูลมากมายสำหรับการเรียนรู้เพิ่มเติม รวมถึงบทแนะนำ, ตัวอย่างโค้ด และความท้าทายต่างๆ
* แพลตฟอร์ม Microsoft Learn มีหลักสูตรและเส้นทางการเรียนรู้การพัฒนาเว็บหลากหลาย
* ชุมชนออนไลน์เช่น Stack Overflow และ MDN Web Docs ให้การสนับสนุนและแหล่งข้อมูลที่มีคุณค่าสำหรับนักพัฒนาเว็บ
**หวังว่าแผนที่เส้นทางนี้จะช่วยให้คุณประสบความสำเร็จในการเดินทางสู่การพัฒนาเว็บ!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**คำปฏิเสธความรับผิดชอบ**:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษาอัตโนมัติ [Co-op Translator](https://github.com/Azure/co-op-translator) แม้เราจะพยายามให้ความแม่นยำ แต่โปรดทราบว่าการแปลแบบอัตโนมัติอาจมีข้อผิดพลาดหรือตกหล่น ข้อมูลต้นฉบับในภาษาต้นฉบับควรถูกนับเป็นแหล่งที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลโดยมืออาชีพ เรายังไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Write Preview
Loading…
Cancel
Save