diff --git a/translations/da/.co-op-translator.json b/translations/da/.co-op-translator.json index 57050e246..15f1dc205 100644 --- a/translations/da/.co-op-translator.json +++ b/translations/da/.co-op-translator.json @@ -493,7 +493,7 @@ }, "AGENTS.md": { "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", "language_code": "da" }, @@ -516,11 +516,17 @@ "language_code": "da" }, "README.md": { - "original_hash": "490c83786552d7fab6390991517bef09", - "translation_date": "2026-01-29T18:30:46+00:00", + "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", + "translation_date": "2026-02-06T17:20:19+00:00", "source_file": "README.md", "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": { "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228", "translation_date": "2025-08-26T21:26:52+00:00", diff --git a/translations/da/AGENTS.md b/translations/da/AGENTS.md index a95f52458..5bd894a83 100644 --- a/translations/da/AGENTS.md +++ b/translations/da/AGENTS.md @@ -2,281 +2,281 @@ ## 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 -- **Uddannelsesindhold**: 24 strukturerede lektioner organiseret i projektbaserede moduler -- **Praktiske projekter**: Terrarium, Skrivespil, Browserudvidelse, Rumspil, Bankapp, Kodeeditor og AI-chatassistent -- **Interaktive quizzer**: 48 quizzer med 3 spørgsmål hver (før/efter lektion vurderinger) -- **Flersproget support**: Automatiske oversættelser til 50+ sprog via GitHub Actions -- **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (til AI-projekter) +- **Uddannelsesindhold**: 24 strukturerede lektioner organiseret i projektbaserede moduler +- **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) +- **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) ### Arkitektur -- Uddannelsesrepository med lektionbaseret struktur -- Hver lektionmappe indeholder README, kodeeksempler og løsninger -- Selvstændige projekter i separate mapper (quiz-app, diverse lektionprojekter) -- Oversættelsessystem ved hjælp af GitHub Actions (co-op-translator) -- Dokumentation leveret via Docsify og tilgængelig som PDF +- Uddannelsesrepository med lektionbaseret struktur +- Hver lektionsmappe indeholder README, kodeeksempler og løsninger +- Selvstændige projekter i separate mapper (quiz-app, diverse lektionsprojekter) +- Oversættelsessystem ved brug af GitHub Actions (co-op-translator) +- Dokumentation serveres via Docsify og findes som PDF ## 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 git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` - -### Opsætning af Quiz App (Vue 3 + Vite) + +### Quiz App opsætning (Vue 3 + Vite) ```bash cd quiz-app npm install -npm run dev # Start development server -npm run build # Build for production -npm run lint # Run ESLint +npm run dev # Start udviklingsserver +npm run build # Byg til produktion +npm run lint # Kør ESLint ``` - + ### Bankprojekt API (Node.js + Express) ```bash cd 7-bank-project/api npm install -npm start # Start API server -npm run lint # Run ESLint -npm run format # Format with Prettier +npm start # Start API-server +npm run lint # Kør ESLint +npm run format # Formater med Prettier ``` - + ### Browserudvidelsesprojekter ```bash cd 5-browser-extension/solution npm install -# Follow browser-specific extension loading instructions +# Følg browser-specifikke instruktioner til indlæsning af udvidelser ``` - + ### Rumspilsprojekter ```bash cd 6-space-game/solution 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 cd 9-chat-project/solution/backend/python pip install openai -# Set GITHUB_TOKEN environment variable +# Indstil miljøvariablen GITHUB_TOKEN python api.py ``` - + ## Udviklingsworkflow -### For indholdsbidragydere +### For indholdsleverandører -1. **Fork repositoryet** til din GitHub-konto -2. **Klon din fork** lokalt -3. **Opret en ny branch** til dine ændringer -4. Foretag ændringer i lektionindhold eller kodeeksempler -5. Test eventuelle kodeændringer i relevante projektmapper -6. Indsend pull requests i henhold til bidragsretningslinjer +1. **Fork repository** til din GitHub-konto +2. **Clone din fork** lokalt +3. **Opret en ny branch** til dine ændringer +4. Foretag ændringer til lektionsindhold eller kodeeksempler +5. Test eventuelle kodeændringer i relevante projektmapper +6. Indsend pull requests i henhold til bidragsretningslinjer ### For lærende -1. Fork eller klon repositoryet -2. Naviger til lektionmapperne i rækkefølge -3. Læs README-filerne for hver lektion -4. Tag før-lektion quizzer på https://ff-quizzes.netlify.app/web/ -5. Arbejd gennem kodeeksempler i lektionmapperne -6. Fuldfør opgaver og udfordringer -7. Tag efter-lektion quizzer +1. Fork eller klon repository +2. Naviger sekventielt i lektionsmapper +3. Læs README-filer for hver lektion +4. Tag pre-lesson quizzer på https://ff-quizzes.netlify.app/web/ +5. Arbejd gennem kodeeksempler i lektionsmapper +6. Fuldfør opgaver og udfordringer +7. Tag post-lesson quizzer -### Live udvikling +### Liveudvikling -- **Dokumentation**: Kør `docsify serve` i roden (port 3000) -- **Quiz App**: Kør `npm run dev` i quiz-app mappen -- **Projekter**: Brug VS Code Live Server-udvidelsen til HTML-projekter -- **API-projekter**: Kør `npm start` i de respektive API-mapper +- **Dokumentation**: Kør `docsify serve` i rodmappen (port 3000) +- **Quiz App**: Kør `npm run dev` i quiz-app mappen +- **Projekter**: Brug VS Code Live Server extension til HTML-projekter +- **API-projekter**: Kør `npm start` i respektive API-mapper ## Testinstruktioner -### Test af Quiz App +### Quiz App test ```bash cd quiz-app -npm run lint # Check for code style issues -npm run build # Verify build succeeds +npm run lint # Tjek for problemer med kodestil +npm run build # Bekræft at build lykkes ``` - -### Test af Bank API + +### Bank API test ```bash cd 7-bank-project/api -npm run lint # Check for code style issues -node server.js # Verify server starts without errors +npm run lint # Tjek for kode stil problemer +node server.js # Bekræft at serveren starter uden fejl ``` - + ### Generel testtilgang -- Dette er et uddannelsesrepository uden omfattende automatiserede tests -- Manuel test fokuserer på: - - Kodeeksempler kører uden fejl - - Links i dokumentationen fungerer korrekt - - Projektbygninger fuldføres succesfuldt - - Eksempler følger bedste praksis +- Dette er et uddannelsesrepository uden omfattende automatiserede tests +- Manuel test fokuserer på: + - Kodeeksempler kører fejlfrit + - Links i dokumentation fungerer korrekt + - Projektbygninger gennemføres succesfuldt + - Eksempler følger bedste praksis -### Kontroller før indsendelse +### Pre-indsendelsescheck -- Kør `npm run lint` i mapper med package.json -- Bekræft, at markdown-links er gyldige -- Test kodeeksempler i browser eller Node.js -- Kontroller, at oversættelser bevarer korrekt struktur +- Kør `npm run lint` i mapper med package.json +- Bekræft at markdown-links er gyldige +- Test kodeeksempler i browser eller Node.js +- Tjek at oversættelser bevarer korrekt struktur -## Kodestilretningslinjer +## Kode-stil retningslinjer ### JavaScript -- Brug moderne ES6+ syntaks -- Følg standard ESLint-konfigurationer leveret i projekterne -- Brug meningsfulde variabel- og funktionsnavne for uddannelsesmæssig klarhed -- Tilføj kommentarer, der forklarer koncepter for lærende -- Formater med Prettier, hvor det er konfigureret +- Brug moderne ES6+ syntaks +- Følg standard ESLint konfigurationer leveret i projekterne +- Brug meningsfulde variabel- og funktionsnavne for uddannelsesmæssig klarhed +- Tilføj kommentarer der forklarer koncepter for lærende +- Formater med Prettier hvor konfigureret ### HTML/CSS -- Semantiske HTML5-elementer -- Principper for responsivt design -- Klare klassifikationsnavne -- Kommentarer, der forklarer CSS-teknikker for lærende +- Semantiske HTML5 elementer +- Responsive designprincipper +- Klare klasse-navnekonventioner +- Kommentarer der forklarer CSS-teknikker for lærende ### Python -- PEP 8 stilretningslinjer -- Klare, uddannelsesmæssige kodeeksempler -- Type hints, hvor det er nyttigt for læring +- PEP 8 stil retningslinjer +- Klare, uddannelsesmæssige kodeeksempler +- Type hints hvor hjælpsomt for læring -### Markdown-dokumentation +### Markdown dokumentation -- Klar overskriftsstruktur -- Kodeblokke med sprogspecifikation -- Links til yderligere ressourcer -- Skærmbilleder og billeder i `images/` mapper -- Alt-tekst til billeder for tilgængelighed +- Klar overskriftshierarki +- Kodeblokke med sprogspecifikation +- Links til yderligere ressourcer +- Skærmbilleder og billeder i `images/` mapper +- Alt-tekst for billeder for tilgængelighed ### Filorganisation -- Lektioner nummereret sekventielt (1-getting-started-lessons, 2-js-basics, osv.) -- Hvert projekt har `solution/` og ofte `start/` eller `your-work/` mapper -- Billeder gemt i lektion-specifikke `images/` mapper -- Oversættelser i `translations/{language-code}/` struktur +- Lektioner nummereret sekventielt (1-getting-started-lessons, 2-js-basics, osv.) +- Hvert projekt har `solution/` og ofte `start/` eller `your-work/` mapper +- Billeder opbevaret i lektionsspecifikke `images/` mapper +- Oversættelser i `translations/{language-code}/` struktur -## Bygning og udrulning +## Build og udrulning ### 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 cd quiz-app -npm run build # Creates dist/ folder -# Deploys via GitHub Actions workflow on push to main +npm run build # Opretter dist/-mappe +# Udruller via GitHub Actions-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: -- **App placering**: `/quiz-app` -- **Output placering**: `dist` -- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` - -### Generering af dokumentation som PDF +### Dokumentations PDF generering ```bash -npm install # Install docsify-to-pdf -npm run convert # Generate PDF from docs +npm install # Installer docsify-to-pdf +npm run convert # Generer PDF fra docs ``` - -### Docsify-dokumentation + +### Docsify dokumentation ```bash -npm install -g docsify-cli # Install Docsify globally -docsify serve # Serve on localhost:3000 +npm install -g docsify-cli # Installer Docsify globalt +docsify serve # Server på localhost:3000 ``` + +### Projekt-specifikke builds -### Projekt-specifikke bygninger - -Hver projektmappe kan have sin egen byggeproces: -- Vue-projekter: `npm run build` skaber produktionsbundter -- Statiske projekter: Ingen byggeproces, server filer direkte +Hver projektmappe kan have sin egen build-proces: +- Vue projekter: `npm run build` skaber produktionspakker +- Statisk projekter: Ingen build-step, filer serveres direkte -## Retningslinjer for pull requests +## Pull Request retningslinjer ### Titelformat -Brug klare, beskrivende titler, der angiver ændringsområdet: -- `[Quiz-app] Tilføj ny quiz til lektion X` -- `[Lesson-3] Ret stavefejl i terrarium-projekt` -- `[Translation] Tilføj spansk oversættelse til lektion 5` -- `[Docs] Opdater opsætningsinstruktioner` +Brug klare, beskrivende titler der angiver ændringsområdet: +- `[Quiz-app] Tilføj ny quiz til lektion X` +- `[Lesson-3] Ret stavefejl i terrarium projekt` +- `[Translation] Tilføj spansk oversættelse til lektion 5` +- `[Docs] Opdater opsætningsinstruktioner` -### Påkrævede kontroller +### Nødvendige checks -Før indsendelse af en PR: +Før indsendelse af PR: -1. **Kodekvalitet**: - - Kør `npm run lint` i berørte projektmapper - - Ret alle linting-fejl og advarsler +1. **Kodekvalitet**: + - Kør `npm run lint` i berørte projektmapper + - Ret alle lintfejl og advarsler -2. **Bygverifikation**: - - Kør `npm run build`, hvis relevant - - Sørg for, at der ikke er byggefejl +2. **Build verifikation**: + - Kør `npm run build` hvis relevant + - Sikr at der ikke er build-fejl -3. **Linkvalidering**: - - Test alle markdown-links - - Bekræft, at billedreferencer fungerer +3. **Linkvalidering**: + - Test alle markdown links + - Bekræft at billedreferencer virker -4. **Indholdsrevision**: - - Læs korrektur for stave- og grammatikfejl - - Sørg for, at kodeeksempler er korrekte og uddannelsesmæssige - - Bekræft, at oversættelser bevarer original betydning +4. **Indholdsrevision**: + - Korrekturlæs stavning og grammatik + - Sikr at kodeeksempler er korrekte og uddannelsesmæssige + - Bekræft at oversættelser bevarer oprindelig betydning ### Bidragskrav -- Accepter Microsoft CLA (automatisk kontrol ved første PR) -- Følg [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) -- Se [CONTRIBUTING.md](./CONTRIBUTING.md) for detaljerede retningslinjer -- Referer til problemnumre i PR-beskrivelsen, hvis relevant +- Accepter Microsoft CLA (automatisk check ved første PR) +- Følg [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) +- Se [CONTRIBUTING.md](./CONTRIBUTING.md) for detaljerede retningslinjer +- Referer issues i PR-beskrivelse hvis relevant -### Reviewproces +### Review proces -- PR'er gennemgås af maintainers og fællesskabet -- Uddannelsesmæssig klarhed prioriteres -- Kodeeksempler skal følge aktuelle bedste praksis -- Oversættelser gennemgås for nøjagtighed og kulturel relevans +- PRs gennemgås af vedligeholdere og community +- Uddannelsesklarhed prioriteres +- Kodeeksempler skal følge gældende bedste praksis +- Oversættelser gennemgås for nøjagtighed og kulturel egnethed ## Oversættelsessystem ### Automatisk oversættelse -- Bruger GitHub Actions med co-op-translator workflow -- Oversætter automatisk til 50+ sprog -- Kildemapper i hovedmapper -- Oversatte filer i `translations/{language-code}/` mapper +- Bruger GitHub Actions med co-op-translator workflow +- Oversætter automatisk til 50+ sprog +- Kildefiler i hovedmapper +- Oversatte filer i `translations/{language-code}/` mapper ### Tilføjelse af manuelle oversættelsesforbedringer -1. Find filen i `translations/{language-code}/` -2. Foretag forbedringer, mens strukturen bevares -3. Sørg for, at kodeeksempler forbliver funktionelle -4. Test eventuelt lokaliseret quizindhold +1. Find fil i `translations/{language-code}/` +2. Foretag forbedringer samtidig med at struktur bevares +3. Sørg for at kodeeksempler forbliver funktionelle +4. Test evt. lokaliseret quizindhold -### Oversættelsesmetadata +### Oversættelses metadata -Oversatte filer inkluderer metadata-header: +Oversatte filer inkluderer metadata header: ```markdown ``` - + ## Fejlfinding og problemløsning ### Almindelige problemer -**Quiz-app starter ikke**: -- Kontroller Node.js version (v14+ anbefales) -- Slet `node_modules` og `package-lock.json`, kør `npm install` igen -- Kontroller for portkonflikter (standard: Vite bruger port 5173) +**Quiz app starter ikke**: +- Tjek Node.js version (v14+ anbefales) +- Slet `node_modules` og `package-lock.json`, kør `npm install` igen +- Tjek for portkonflikter (standard: Vite bruger port 5173) -**API-server starter ikke**: -- Bekræft, at Node.js version opfylder minimumskrav (node >=10) -- Kontroller, om porten allerede er i brug -- Sørg for, at alle afhængigheder er installeret med `npm install` +**API serveren starter ikke**: +- Bekræft at Node.js version opfylder minimum (node >=10) +- Tjek om port allerede er i brug +- Sørg for alle afhængigheder er installeret med `npm install` -**Browserudvidelse indlæses ikke**: -- Bekræft, at manifest.json er korrekt formateret -- Kontroller browserkonsollen for fejl -- Følg browser-specifikke installationsinstruktioner for udvidelser +**Browserudvidelse indlæses ikke**: +- Bekræft at manifest.json er korrekt formateret +- Tjek browserens konsol for fejl +- Følg browser-specifikke installationsinstruktioner for udvidelser -**Problemer med Python-chatprojekt**: -- Sørg for, at OpenAI-pakken er installeret: `pip install openai` -- Bekræft, at GITHUB_TOKEN miljøvariablen er sat -- Kontroller GitHub Models adgangstilladelser +**Python chat projekt problemer**: +- Sørg for OpenAI pakken er installeret: `pip install openai` +- Bekræft at GITHUB_TOKEN miljøvariablen er sat +- Check GitHub Models adgangstilladelser -**Docsify serverer ikke dokumentation**: -- Installer docsify-cli globalt: `npm install -g docsify-cli` -- Kør fra repositoryets rodmappe -- Kontroller, at `docs/_sidebar.md` eksisterer +**Docsify serverer ikke dokumenter**: +- Installer docsify-cli globalt: `npm install -g docsify-cli` +- Kør fra repository rodmappe +- Tjek at `docs/_sidebar.md` eksisterer -### Tips til udviklingsmiljø +### Udviklingsmiljøtips -- Brug VS Code med Live Server-udvidelsen til HTML-projekter -- Installer ESLint og Prettier-udvidelser for konsistent formatering -- Brug browserens DevTools til fejlfinding af JavaScript -- For Vue-projekter, installer Vue DevTools browserudvidelse +- Brug VS Code med Live Server extension til HTML projekter +- Installer ESLint og Prettier extensions for konsistent formattering +- Brug browserens DevTools til debugging af JavaScript +- Til Vue projekter, installer Vue DevTools browser extension -### Ydelseshensyn +### Ydeevne overvejelser -- Det store antal oversatte filer (50+ sprog) betyder, at fulde kloner er store -- Brug en lav dybde klon, hvis du kun arbejder på indhold: `git clone --depth 1` -- Ekskluder oversættelser fra søgninger, når du arbejder på engelsk indhold -- Byggeprocesser kan være langsomme ved første kørsel (npm install, Vite build) +- Stort antal oversatte filer (50+ sprog) betyder at fulde clones er store +- Brug shallow clone hvis kun indhold arbejdes på: `git clone --depth 1` +- Ekskluder oversættelser fra søgninger når der arbejdes på engelsk indhold +- Buildprocesser kan være langsomme ved første kørsel (npm install, Vite build) -## Sikkerhedshensyn +## Sikkerhedsovervejelser ### Miljøvariabler -- API-nøgler må aldrig committes til repositoryet -- Brug `.env` filer (allerede i `.gitignore`) -- Dokumenter påkrævede miljøvariabler i projekt-README'er +- API nøgler må aldrig committes til repository +- Brug `.env` filer (allerede i `.gitignore`) +- Dokumenter nødvendige miljøvariabler i projektets README -### Python-projekter +### Python projekter -- Brug virtuelle miljøer: `python -m venv venv` -- Hold afhængigheder opdateret -- GitHub tokens bør have minimale nødvendige tilladelser +- Brug virtuelle miljøer: `python -m venv venv` +- Hold afhængigheder opdaterede +- GitHub tokens skal have minimal nødvendige tilladelser ### GitHub Models adgang -- Personlige adgangstokens (PAT) kræves for GitHub Models -- Tokens bør gemmes som miljøvariabler -- Tokens eller legitimationsoplysninger må aldrig committes +- Personlige Access Tokens (PAT) kræves for GitHub Models +- Tokens skal gemmes som miljøvariabler +- Commit aldrig tokens eller credentials ## Yderligere noter ### Målgruppe -- Komplette begyndere inden for webudvikling -- Studerende og selvstændige lærende -- Lærere, der bruger curriculumet i klasseværelser -- Indholdet er designet til tilgængelighed og gradvis færdighedsopbygning +- Fuldstændige begyndere til webudvikling +- Studerende og selvstuderende +- Lærere der bruger curriculum i klasseværelser +- Indhold designet for tilgængelighed og gradvis færdighedsopbygning ### Uddannelsesfilosofi -- Projektbaseret læringsmetode -- Hyppige videnskontroller (quizzer) -- Praktiske kodningsøvelser -- Eksempler med anvendelse i den virkelige verden -- Fokus på grundlæggende før frameworks +- Projektbaseret læringstilgang +- Hyppige videnschecks (quizzer) +- Praktiske kodningsøvelser +- Eksempler på virkelige anvendelser +- Fokus på grundlæggende før frameworks -### Repository-vedligeholdelse +### Repository vedligeholdelse -- Aktivt fællesskab af lærende og bidragydere -- Regelmæssige opdateringer af afhængigheder og indhold -- Problemer og diskussioner overvåges af maintainers -- Oversættelsesopdateringer automatiseret via GitHub Actions +- Aktivt community af lærende og bidragydere +- Regelmæssige opdateringer af afhængigheder og indhold +- Issues og diskussioner overvåges af vedligeholdere +- Oversættelsesopdateringer automatiseret via GitHub Actions ### Relaterede ressourcer -- [Microsoft Learn-moduler](https://docs.microsoft.com/learn/) -- [Student Hub-ressourcer](https://docs.microsoft.com/learn/student-hub/) -- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) anbefales til lærende -- Yderligere kurser: Generativ AI, Data Science, ML, IoT curriculum tilgængelige +- [Microsoft Learn moduler](https://docs.microsoft.com/learn/) +- [Student Hub ressourcer](https://docs.microsoft.com/learn/student-hub/) +- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) anbefales til lærende +- Yderligere kurser: Generativ AI, Data Science, ML, IoT curriculum tilgængelige ### Arbejde med specifikke projekter -For detaljerede instruktioner om individuelle projekter, se README-filerne i: -- `quiz-app/README.md` - Vue 3 quiz-applikation -- `7-bank-project/README.md` - Bankapplikation med autentifikation -- `5-browser-extension/README.md` - Udvikling af browserudvidelser -- `6-space-game/README.md` - Canvas-baseret spiludvikling -- `9-chat-project/README.md` - AI-chatassistentprojekt +For detaljerede instruktioner om individuelle projekter, se README-filer i: +- `quiz-app/README.md` - Vue 3 quiz applikation +- `7-bank-project/README.md` - Bankapplikation med autentifikation +- `5-browser-extension/README.md` - Udvikling af browserudvidelse +- `6-space-game/README.md` - Canvas-baseret spiludvikling +- `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: -- Hver lektion er selvstændig -- Projekter deler ikke afhængigheder -- Arbejd på individuelle projekter uden at påvirke andre -- Klon hele repoet for den fulde curriculumoplevelse +Selvom det ikke er et traditionelt monorepo, indeholder dette repository flere uafhængige projekter: +- Hver lektion er selvstændig +- Projekter deler ikke afhængigheder +- Arbejd på individuelle projekter uden at påvirke andre +- Klon hele repo for fuld curriculum oplevelse --- + **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. \ No newline at end of file +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. + \ No newline at end of file diff --git a/translations/da/README.md b/translations/da/README.md index 4b353b302..e756cd1cd 100644 --- a/translations/da/README.md +++ b/translations/da/README.md @@ -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 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) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) @@ -10,9 +10,9 @@ [![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 @@ -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` 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) @@ -32,7 +32,7 @@ Følg disse trin for at komme i gang med at bruge disse ressourcer: > **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 > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > 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. -**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?_ -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! ![Background](../../translated_images/da/background.148a8d43afde5730.webp) -- Lektioner der dækker alt fra det grundlæggende til RAG. -- Interagér med historiske karakterer ved hjælp af GenAI og vores følgesvend-app. +- Lektioner, der dækker alt fra det grundlæggende til RAG. +- Interager med historiske karakterer ved hjælp af GenAI og vores følgesvend app. - Sjov og engagerende fortælling, du vil rejse i tiden! ![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 -- Tekst- og billedapp-generering +- Tekst- og billedapp generation - Søgeapps -Besøg [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) for at komme i gang! +Besøg [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for at komme 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 -For at du nemt kan gemme dit arbejde, anbefales det, at du opretter din egen kopi af dette depot. Det kan du gøre ved at klikke på knappen **Use this template** øverst på siden. Dette opretter et nyt depot i din GitHub-konto med en kopi af undervisningsforløbet. +#### Opret dit repository +For at 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: -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` -#### 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) -#### 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) - Å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 `` 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 `` med den URL, du lige har kopieret: ```bash git clone ``` -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: > -> * [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 -> * [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 +> * [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) - for at hjælpe dig med at skrive kode hurtigere -## 📂 Hver lektion indeholder: +## 📂 Hver lektion inkluderer: - valgfri sketchnote - valgfri supplerende video -- for-lesson opvarmningsquiz -- skreven lektion -- for projektbaserede lektioner, trin-for-trin vejledninger i, hvordan man bygger projektet +- forudgående opvarmningsquiz før lektion +- skriftlig lektion +- for projektbaserede lektioner, trin-for-trin vejledninger til, hvordan man bygger projektet - vidensprøver - en udfordring - supplerende læsning - opgave - [quiz efter lektionen](https://ff-quizzes.netlify.app/web/) -> **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 -| | Projekt Navn | Koncepter undervist | Læringsmål | Linket Lektion | Forfatter | -| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Kom i Gang | Introduktion til Programmering og Værktøjer | Lær de grundlæggende principper bag de fleste programmeringssprog og om software, der hjælper professionelle udviklere med deres arbejde | [Intro til Programmeringssprog og Værktøjer](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Kom i Gang | Grundlæggende GitHub, inklusiv arbejde i et team | Hvordan man bruger GitHub i dit projekt, hvordan man samarbejder med andre om en kodebase | [Intro til GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Kom i Gang | Tilgængelighed | Lær det grundlæggende om webtilgængelighed | [Grundlæggende Tilgængelighed](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS Grundlæggende | JavaScript Datatyper | Grundlæggende om JavaScript datatyper | [Datatyper](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS Grundlæggende | Funktioner og Metoder | Lær om funktioner og metoder til at styre en applikations logik | [Funktioner og Metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine og Christopher | -| 06 | JS Grundlæggende | Træffe beslutninger med JS | Lær hvordan man skaber betingelser i din kode ved hjælp af beslutningstagning | [Tag beslutninger](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS Grundlæggende | Arrays og Loops | Arbejd med data ved hjælp af arrays og loops i JavaScript | [Arrays og Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML i Praksis | Byg HTML'en til at skabe et online terrarium, med fokus på at bygge et layout | [Introduktion til HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS i Praksis | Byg CSS'en til at style det online terrarium, med fokus på det grundlæggende i CSS inklusiv at gøre siden responsiv | [Introduktion til CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-manipulation | Byg JavaScripten for at få terrariet til at fungere som en drag/drop interface, med fokus på closures og DOM-manipulation | [JavaScript Closures, DOM-manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | Byg et Skrivespil | Lær hvordan man bruger tastaturhændelser til at styre logikken i din JavaScript-app | [Hændelsesdrevet Programmering](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Grøn Browser Udvidelse](./5-browser-extension/solution/README.md) | Arbejde med Browsere | Lær hvordan browsere fungerer, deres historie, og hvordan man opbygger de første elementer i en browserudvidelse | [Om Browsere](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Grøn Browser Udvidelse](./5-browser-extension/solution/README.md) | Byg et formular, kald et API og gem variabler i lokal lagring | Byg JavaScript-elementerne i din browserudvidelse for at kalde et API ved brug af variabler lagret i lokal lagring | [API'er, Formularer og Lokal Lagring](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Grøn Browser Udvidelse](./5-browser-extension/solution/README.md) | Baggrundsprocesser i browseren, webperformance | Brug browserens baggrundsprocesser til at styre udvidelsens ikon; lær om webperformance og nogle optimeringer for at forbedre ydeevnen | [Baggrundsopgaver og Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Rumspil](./6-space-game/solution/README.md) | Mere avanceret spiludvikling med JavaScript | Lær om arv ved brug af både klasser og sammensætning samt Pub/Sub-mønsteret som forberedelse til at bygge et spil | [Introduktion til avanceret spiludvikling](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Rumspil](./6-space-game/solution/README.md) | Tegning på canvas | Lær om Canvas API'et, der bruges til at tegne elementer på en skærm | [Tegning på Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Rumspil](./6-space-game/solution/README.md) | Flytte elementer rundt på skærmen | Opdag hvordan elementer kan få bevægelse ved brug af kartesiske koordinater og Canvas API'en | [Flytte elementer rundt](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Rumspil](./6-space-game/solution/README.md) | Kollision detektion | Få elementer til at kollidere og reagere på hinanden ved hjælp af tastetryk og lever en cooldown-funktion for at sikre spillets ydeevne | [Kollisiondetektion](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Rumspil](./6-space-game/solution/README.md) | Holde styr på point | Udfør matematiske beregninger baseret på spillets status og præstation | [Holde styr på point](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Rumspil](./6-space-game/solution/README.md) | Afslutte og genstarte spillet | Lær om at afslutte og genstarte spillet, inklusive oprydning af ressourcer og nulstilling af variabelværdier | [Afslutningsbetingelsen](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Bank App](./7-bank-project/solution/README.md) | HTML-skabeloner og ruter i et Web App | Lær hvordan man opretter scaffoldet til en multipage hjemmesidestruktur ved brug af routing og HTML-skabeloner | [HTML-skabeloner og ruter](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Bank App](./7-bank-project/solution/README.md) | Byg en Login- og Registreringsformular | Lær om at bygge formularer og håndtere valideringsrutiner | [Formularer](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Bank App](./7-bank-project/solution/README.md) | Metoder til at hente og bruge data | Hvordan data flyder ind og ud af din app, hvordan man henter det, gemmer det, og bortskaffer det | [Data](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Bank App](./7-bank-project/solution/README.md) | Koncepter for State Management | Lær hvordan din app bevarer tilstand og hvordan man styrer det programmæssigt | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode Code](../../8-code-editor) | Arbejde med VScode | Lær hvordan man bruger en kodeeditor| [Brug VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| | Projekt Navn | Koncepter undervist | Læringsmål | Linket Lektion | Forfatter | +| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :-----------------------: | +| 01 | Kom godt i gang | Introduktion til programmering og værktøjer | Lær de grundlæggende principper bag de fleste programmeringssprog og om software, der hjælper professionelle udviklere | [Introduktion til programmeringssprog og værktøjer](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 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 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 | +| 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 | 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 | +| 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 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 JavaScript for at få terrariet til at fungere som en drag/drop interface, med fokus på closures og DOM-manipulation | [JavaScript Closures, DOM-manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Typing Game](./4-typing-game/solution/README.md) | Byg et skrive-spil | Lær hvordan du bruger tastaturhændelser til at styre logikken i din JavaScript-app | [Begivenhedsdrevet programmering](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Arbejde med browsere | Lær hvordan browsere fungerer, deres historie, og hvordan man scaffolder de første elementer i en browserudvidelse | [Om browsere](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 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 | [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 | [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 | [Space Game](./6-space-game/solution/README.md) | Tegning på canvas | Lær om Canvas API, der bruges til at tegne elementer på en skærm | [Tegning på Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](./6-space-game/solution/README.md) | Flytte elementer rundt på skærmen | Opdag, hvordan elementer kan få bevægelse ved hjælp af kartesiske koordinater og Canvas API | [Flytning af elementer](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | Kollisiondetektion | Få elementer til at kollidere og reagere på hinanden ved tastetryk og lav en cooldown-funktion for at sikre spillets ydeevne | [Kollisiondetektion](./6-space-game/4-collision-detection/README.md) | Chris | +| 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 | [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 | [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 | [Banking App](./7-bank-project/solution/README.md) | Byg en Login og Registreringsformular | Lær om at bygge formularer og håndtere valideringsrutiner | [Formularer](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banking App](./7-bank-project/solution/README.md) | Metoder til 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 | [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 | | 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 -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 * 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 -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 -En PDF med alle lektionerne kan findes [her](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). +En PDF af alle lektionerne kan findes [her](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). -## 🎒 Andre Kurser -Vores team laver også andre kurser! Se: +## 🎒 Andre kurser +Vores team producerer andre kurser! Tjek dem ud: ### LangChain [![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) [![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) - +[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) --- ### Azure / Edge / MCP / Agenter @@ -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) [![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) @@ -251,21 +251,21 @@ Vores team laver også andre kurser! Se: ## 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) -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) ## 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. --- **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. \ No newline at end of file diff --git a/translations/da/Roadmap.md b/translations/da/Roadmap.md new file mode 100644 index 000000000..2193b5200 --- /dev/null +++ b/translations/da/Roadmap.md @@ -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!** + +--- + + +**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. + \ No newline at end of file diff --git a/translations/sv/.co-op-translator.json b/translations/sv/.co-op-translator.json index 8e8b2094b..6aedfe20f 100644 --- a/translations/sv/.co-op-translator.json +++ b/translations/sv/.co-op-translator.json @@ -493,7 +493,7 @@ }, "AGENTS.md": { "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", "language_code": "sv" }, @@ -516,11 +516,17 @@ "language_code": "sv" }, "README.md": { - "original_hash": "490c83786552d7fab6390991517bef09", - "translation_date": "2026-01-29T18:28:53+00:00", + "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", + "translation_date": "2026-02-06T17:18:18+00:00", "source_file": "README.md", "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": { "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228", "translation_date": "2025-08-26T21:26:39+00:00", diff --git a/translations/sv/AGENTS.md b/translations/sv/AGENTS.md index a33816bcf..b807c3c2b 100644 --- a/translations/sv/AGENTS.md +++ b/translations/sv/AGENTS.md @@ -2,53 +2,53 @@ ## Projektöversikt -Detta är ett utbildningsmaterial för att lära ut grunderna i webbutveckling till nybörjare. Kursplanen är en omfattande 12-veckors kurs utvecklad av Microsoft Cloud Advocates, med 24 praktiska lektioner som täcker JavaScript, CSS och HTML. +Detta är ett 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 - **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) -- **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) ### Arkitektur -- Utbildningsmaterial med lektionbaserad struktur +- Utbildningsbibliotek med lektionbaserad struktur - Varje lektionsmapp innehåller README, kodexempel och lösningar - Självständiga projekt i separata kataloger (quiz-app, olika lektionsprojekt) - Översättningssystem med GitHub Actions (co-op-translator) -- Dokumentation tillgänglig via Docsify och som PDF +- Dokumentation serveras via Docsify och finns som PDF ## 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 git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### Quiz-app-installation (Vue 3 + Vite) +### Quiz App Setup (Vue 3 + Vite) ```bash cd quiz-app npm install -npm run dev # Start development server -npm run build # Build for production -npm run lint # Run ESLint +npm run dev # Starta utvecklingsserver +npm run build # Bygg för produktion +npm run lint # Kör ESLint ``` -### Bankprojekt-API (Node.js + Express) +### Bankprojekt API (Node.js + Express) ```bash cd 7-bank-project/api npm install -npm start # Start API server -npm run lint # Run ESLint -npm run format # Format with Prettier +npm start # Starta API-server +npm run lint # Kör ESLint +npm run format # Formatera med Prettier ``` ### Webbläsartilläggsprojekt @@ -56,7 +56,7 @@ npm run format # Format with Prettier ```bash cd 5-browser-extension/solution npm install -# Follow browser-specific extension loading instructions +# Följ webbläsarspecifika instruktioner för att ladda tillägg ``` ### Rymdspelsprojekt @@ -64,15 +64,15 @@ npm install ```bash cd 6-space-game/solution npm install -# Open index.html in browser or use Live Server +# Öppna index.html i webbläsaren eller använd Live Server ``` -### Chattprojekt (Python-backend) +### Chattprojekt (Python backend) ```bash cd 9-chat-project/solution/backend/python pip install openai -# Set GITHUB_TOKEN environment variable +# Sätt miljövariabeln GITHUB_TOKEN python api.py ``` @@ -80,61 +80,61 @@ python api.py ### För innehållsbidragare -1. **Forka repositoryt** till ditt GitHub-konto +1. **Forka biblioteket** till ditt GitHub-konto 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 -5. Testa kodändringar i relevanta projektkataloger -6. Skicka pull requests enligt bidragsriktlinjerna +5. Testa eventuella kodändringar i relevanta projektmappar +6. Skicka pull requests enligt bidragsriktlinjer ### För elever -1. Forka eller klona repositoryt -2. Navigera till lektionskatalogerna i ordning -3. Läs README-filerna för varje lektion -4. Gör quiz före lektionen på https://ff-quizzes.netlify.app/web/ -5. Arbeta igenom kodexempel i lektionsmapparna +1. Forka eller klona biblioteket +2. Gå igenom lektionsmappar i ordning +3. Läs README-filer för varje lektion +4. Slutför för-lektionsquiz på https://ff-quizzes.netlify.app/web/ +5. Arbeta igenom kodexempel i lektionsmappar 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) -- **Quiz-app**: Kör `npm run dev` i quiz-app-katalogen -- **Projekt**: Använd VS Code Live Server-tillägg för HTML-projekt -- **API-projekt**: Kör `npm start` i respektive API-kataloger +- **Quiz App**: Kör `npm run dev` i quiz-app-mappen +- **Projekt**: Använd VS Code Live Server-extension för HTML-projekt +- **API-projekt**: Kör `npm start` i respektive API-katalog -## Testinstruktioner +## Testningsinstruktioner -### Testning av quiz-app +### Quiz App testning ```bash cd quiz-app -npm run lint # Check for code style issues -npm run build # Verify build succeeds +npm run lint # Kontrollera kodstilproblem +npm run build # Verifiera att byggnationen lyckas ``` -### Testning av bank-API +### Bank API testning ```bash cd 7-bank-project/api -npm run lint # Check for code style issues -node server.js # Verify server starts without errors +npm run lint # Kontrollera kodstilproblem +node server.js # Verifiera att servern startar utan fel ``` -### Allmän teststrategi +### Allmän testmetod -- Detta är ett utbildningsmaterial utan omfattande automatiserade tester +- Detta är ett utbildningsbibliotek utan omfattande automatiserade tester - Manuell testning fokuserar på: - Kodexempel körs utan fel - Länkar i dokumentationen fungerar korrekt - - Projektbyggen slutförs framgångsrikt + - Projekt byggs utan problem - 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 -- Kontrollera att markdown-länkar är giltiga +- Verifiera att markdown-länkar är giltiga - Testa kodexempel i webbläsare eller Node.js - Kontrollera att översättningar behåller korrekt struktur @@ -143,140 +143,140 @@ node server.js # Verify server starts without errors ### JavaScript - Använd modern ES6+ syntax -- Följ standard ESLint-konfigurationer som tillhandahålls i projekten -- Använd meningsfulla variabel- och funktionsnamn för pedagogisk tydlighet +- Följ standard ESLint-konfigurationer i projekten +- Använd meningsfulla variabel- och funktionsnamn för utbildningsklarhet - Lägg till kommentarer som förklarar koncept för elever - Formatera med Prettier där det är konfigurerat ### HTML/CSS - Semantiska HTML5-element -- Principer för responsiv design -- Tydliga klassnamnskonventioner +- Responsiv designprinciper +- Klara klassnamnskonventioner - Kommentarer som förklarar CSS-tekniker för elever ### Python -- PEP 8-stilriktlinjer -- Tydliga, pedagogiska kodexempel -- Typanvisningar där det är hjälpsamt för lärande +- PEP 8 stilriktlinjer +- Klara, utbildningsanpassade kodexempel +- Typangivelser där det är hjälpsamt för lärande ### Markdown-dokumentation -- Tydlig rubrikhierarki +- Tydlig rubrikstruktur - Kodblock med språkspecifikation - Länkar till ytterligare resurser -- Skärmdumpar och bilder i `images/`-kataloger +- Skärmdumpar och bilder i `images/`-mappar - Alt-text för bilder för tillgänglighet ### Filorganisation -- Lektioner numrerade sekventiellt (1-getting-started-lessons, 2-js-basics, etc.) -- Varje projekt har `solution/` och ofta `start/` eller `your-work/`-kataloger -- Bilder lagras i lektionsspecifika `images/`-mappar -- Översättningar i `translations/{language-code}/`-struktur +- Lektioner numrerade i ordning (1-getting-started-lessons, 2-js-basics, etc.) +- Varje projekt har `solution/` och ofta `start/` eller `your-work/` kataloger +- Bilder lagras i lektons-specifika `images/`-mappar +- Översättningar i `translations/{language-code}/` struktur ## 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 cd quiz-app -npm run build # Creates dist/ folder -# Deploys via GitHub Actions workflow on push to main +npm run build # Skapar dist/ mapp +# 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` - **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 -npm install # Install docsify-to-pdf -npm run convert # Generate PDF from docs +npm install # Installera docsify-to-pdf +npm run convert # Generera PDF från docs ``` ### Docsify-dokumentation ```bash -npm install -g docsify-cli # Install Docsify globally -docsify serve # Serve on localhost:3000 +npm install -g docsify-cli # Installera Docsify globalt +docsify serve # Servera på localhost:3000 ``` -### Projekt-specifika byggen +### Projekt-specifika byggsteg -Varje projektkatalog kan ha sin egen byggprocess: +Varje projektkatalog kan ha egen byggprocess: - 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 -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` -- `[Lesson-3] Rätta stavfel i terrarium-projekt` -- `[Translation] Lägg till svensk översättning för lektion 5` +- `[Lesson-3] Fixar stavfel i terrarium-projekt` +- `[Translation] Lägg till spansk översättning för lektion 5` - `[Docs] Uppdatera installationsinstruktioner` ### Obligatoriska kontroller -Innan du skickar en PR: +Innan PR skickas in: 1. **Kodkvalitet**: - - Kör `npm run lint` i berörda projektkataloger - - Åtgärda alla lintningsfel och varningar + - Kör `npm run lint` i berörda projektmappar + - Åtgärda alla lint-varningar och fel 2. **Byggverifiering**: - 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 - - Kontrollera att bildreferenser fungerar + - Verifiera att bildreferenser fungerar 4. **Innehållsgranskning**: - - Korrekturläs för stavning och grammatik - - Kontrollera att kodexempel är korrekta och pedagogiska - - Verifiera att översättningar behåller ursprunglig mening + - Korrekturläs stavning och grammatik + - Säkerställ att kodexempel är korrekta och pedagogiska + - Kontrollera att översättningar behåller ursprungligt budskap ### 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/) - Se [CONTRIBUTING.md](./CONTRIBUTING.md) för detaljerade riktlinjer -- Referera till ärendenummer i PR-beskrivningen om tillämpligt +- Referera ärendenummer i PR-beskrivning vid behov ### Granskningsprocess -- PRs granskas av underhållare och communityn -- Pedagogisk tydlighet prioriteras -- Kodexempel bör följa aktuella bästa praxis -- Översättningar granskas för noggrannhet och kulturell lämplighet +- PR granskas av underhållare och community +- Utbildningsklarhet prioriteras +- Kodexempel ska följa aktuella bästa praxis +- Översättningar granskas för korrekthet och kulturell lämplighet ## Ö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 - 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}/` -2. Gör förbättringar samtidigt som strukturen bevaras -3. Kontrollera att kodexempel förblir funktionella +1. Hitta filen i `translations/{language-code}/` +2. Gör förbättringar samtidigt som struktur bevaras +3. Säkerställ att kodexempel förblir funktionella 4. Testa eventuellt lokaliserat quizinnehåll -### Metadata för översättningar +### Översättningsmetadata -Översatta filer inkluderar metadata-header: +Översatta filer innehåller metadatahuvud: ```markdown +**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. + \ No newline at end of file diff --git a/translations/sv/README.md b/translations/sv/README.md index db3e15bac..a568d3c28 100644 --- a/translations/sv/README.md +++ b/translations/sv/README.md @@ -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 +[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) + Följ dessa steg för att komma igång med dessa resurser: -1. **Gaffla (Fork) arkivet**: Klicka [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **Klona arkivet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Gå med i Azure AI Foundry Discord och träffa experter samt andra utvecklare**](https://discord.com/invite/ByRwuEEgH4) +1. **Forka 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 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 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) [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 > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > 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. -**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?_ -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! -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! -![Bakgrund](../../translated_images/sv/background.148a8d43afde5730.webp) +![Background](../../translated_images/sv/background.148a8d43afde5730.webp) - Lektioner som täcker allt från grunder till RAG. -- Interagera med historiska karaktärer med GenAI och vår följeslagsapp. +- Interagera med historiska karaktärer med GenAI och vår app. - 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: -- Prompting och prompt-engineering -- Text- och bildapplikationsgenerering -- Sökapplikationer +Varje lektion innehåller en uppgift att slutföra, en kunskapskontroll och en utmaning som vägleder dig genom ämnen som: +- Frågeteknik och promptteknik +- Text- och bildappsgenerering +- Sökappar -Besök [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) för att komma igång! +Besök [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) för att 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 -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. +#### Skapa ditt förråd +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: -1. **Gaffla arkivet**: Klicka på "Fork"-knappen uppe till höger på denna sida. -2. **Klona arkivet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +Följ dessa steg: +1. **Forka FÖrrådet**: Klicka på "Fork"-knappen i det övre högra hörnet på denna sida. +2. **Klona FÖrrådet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` #### Köra läroplanen i en Codespace -I din kopia av arkivet som du skapade klickar du på knappen **Code** och väljer **Open with Codespaces**. Det skapar en ny Codespace där du kan arbeta. +I din kopia av detta 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) #### 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) Ö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 `` mot URL:en du just kopierade: @@ -107,82 +123,82 @@ Vi rekommenderar att använda [Visual Studio Code](https://code.visualstudio.com git clone ``` -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: > -> * [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 -## 📂 Varje lektion innehåller: +## 📂 Varje lektion inkluderar: - valfri sketchnote - valfri kompletterande video -- quiz som uppvärmning före lektion +- förberedande quiz före lektionen - skriftlig lektion -- för projektbaserade lektioner, steg-för-steg-guider för att bygga projektet +- för projektbaserade lektioner, steg-för-steg guider för hur man bygger projektet - kunskapskontroller - en utmaning - kompletterande läsning - uppgift - [quiz efter lektionen](https://ff-quizzes.netlify.app/web/) -> **En notis om quiz**: Alla quiz finns i mappen Quiz-app, totalt 48 quiz med tre frågor vardera. De finns tillgängliga [här](https://ff-quizzes.netlify.app/web/), quiz-appen kan köras lokalt eller distribueras till Azure; följ instruktionerna i `quiz-app`-mappen. +> **En notering om quiz**: Alla quiz finns i Quiz-app-mappen, totalt 48 quiz med tre frågor vardera. De finns tillgängliga [här](https://ff-quizzes.netlify.app/web/), quiz-appen kan köras lokalt eller distribueras till Azure; följ instruktionerna i mappen `quiz-app`. ## 🗃️ Lektioner -| | Projektnamn | Undervisade begrepp | Lärandemål | Länkad Lektion | Författare | -| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :-------------------------: | -| 01 | Komma igång | Introduktion till programmering och verktyg | Lär dig grunderna bakom de flesta programmeringsspråk och om mjukvara som hjälper professionella utvecklare i deras arbete | [Intro till programmeringsspråk och verktyg](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Komma igång | Grunderna i GitHub, inklusive samarbete i team | Hur man använder GitHub i sitt projekt, hur man samarbetar med andra på en kodbas | [Intro till GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Komma igång | Tillgänglighet | Lär dig grunderna i webbåtkomst | [Grundläggande tillgänglighet](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS Basics | JavaScripts datatyper | Grunderna i JavaScripts datatyper | [Datatyper](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS Basics | Funktioner och metoder | Lär dig om funktioner och metoder för att hantera applikationens logiska flöde | [Funktioner och metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine och Christopher | -| 06 | JS Basics | Beslutsfattande med JS | Lär dig skapa villkor i din kod med beslutsfattande metoder | [Beslutsfattande](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS Basics | Arrayer och loopar | Arbeta med data med arrayer och loopar i JavaScript | [Arrayer och loopar](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML i praktiken | Bygg HTML för att skapa ett online-terrarium, med fokus på att bygga layout | [Introduktion till HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS i praktiken | Bygg CSS för att styla online-terrarium, med fokus på CSS-grunder inklusive responsiv design av sidan | [Introduktion till CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-manipulation | Bygg JavaScript för att göra terrariet funktionellt som en drag/drop-gränssnitt, med fokus på closures och DOM-manipulation | [JavaScript Closures, DOM-manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | Bygg ett skrivspel | Lär dig använda tangentbords-händelser för att styra logiken i din JavaScript-app | [Händelsestyrd programmering](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Arbeta med webbläsare | Lär dig hur webbläsare fungerar, deras historia och hur man skissar upp de första delarna av en webbläsartillägg | [Om webbläsare](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bygga formulär, anropa API och lagra variabler i lokal lagring | Bygg JavaScript-elementen i din webbläsartillägg för att anropa ett API med variabler lagrade lokalt | [APIer, formulär och lokal lagring](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bakgrundsprocesser i webbläsaren, webbutförande | Använd webbläsarens bakgrundsprocesser för att hantera tilläggsikonen; lär dig om webbutförande och optimeringar för att göra | [Bakgrundsuppgifter och prestanda](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Space Game](./6-space-game/solution/README.md) | Mer avancerad spelutveckling med JavaScript | Lär dig om arv med både klasser och komposition och Pub/Sub-mönstret, som förberedelse för att bygga ett spel | [Introduktion till avancerad spelutveckling](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Space Game](./6-space-game/solution/README.md) | Rita på canvas | Lär dig om Canvas API, som används för att rita element på skärm | [Rita på canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Space Game](./6-space-game/solution/README.md) | Flytta element runt på skärmen | Upptäck hur element kan få rörelse med kartesiska koordinater och Canvas API | [Flytta element runt](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Space Game](./6-space-game/solution/README.md) | Kollisionsdetektion | Få element att kollidera och reagera på varandra med tangenttryckningar och ge en cooldown-funktion för att garantera spelets prestanda | [Kollisionsdetektion](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Space Game](./6-space-game/solution/README.md) | Hålla poäng | Utför matematiska beräkningar baserat på spelets status och prestanda | [Hålla poäng](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Space Game](./6-space-game/solution/README.md) | Avsluta och återstarta spelet | Lär dig om att avsluta och återstarta spelet, inklusive att rensa tillgångar och nollställa variabelvärden | [Avslutningsvillkor](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-mallar och routing i en webbapp | Lär dig skapa grunden för en flersidig webbplats arkitektur med routing och HTML-mallar | [HTML-mallar och routing](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Banking App](./7-bank-project/solution/README.md) | Bygga inloggnings- och registreringsformulär | Lär dig om att bygga formulär och hantera valideringsrutiner | [Formulär](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Banking App](./7-bank-project/solution/README.md) | Metoder för att hämta och använda data | Hur data flödar in och ut ur din app, hur du hämtar den, lagrar den och gör dig av med den | [Data](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Banking App](./7-bank-project/solution/README.md) | Begrepp om state management | Lär dig hur din app behåller state och hur du hanterar det programmatiskt | [State management](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode Code](../../8-code-editor) | Arbeta med VScode | Lär dig använda en kodredigerare | [Använd VScode-kodredigerare](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI Assistants](./9-chat-project/README.md) | Arbeta med AI | Lär dig bygga din egen AI-assistent | [AI-assistentprojekt](./9-chat-project/README.md) | Chris | +| | Projektnamn | Undervisade koncept | Lärandemål | Länkad lektion | Författare | +| :-: | :----------------------------------------------------: | :------------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :-------------------------: | +| 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 | 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 | 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 Grunder | JavaScript-datatyper | Grunderna i JavaScript-datatyper | [Datatyper](./2-js-basics/1-data-types/README.md) | Jasmine | +| 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 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 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: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: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 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 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 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) | 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, 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 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å 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 | +| 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) | 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 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 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) | 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) | 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 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 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 hur du bygger din egen AI-assistent | [AI Assistentprojekt](./9-chat-project/README.md) | Chris | ## 🏫 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 * 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 @@ -196,10 +212,10 @@ Vårt team producerar andra kurser! Kolla in: ### LangChain [![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) [![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) - +[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) --- -### Azure / Edge / MCP / Agenter +### Azure / Edge / MCP / Agents [![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) [![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) [![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) @@ -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 (.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) @@ -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) [![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) @@ -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 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) @@ -234,21 +250,21 @@ Vårt team producerar andra kurser! Kolla in: ## Få hjälp -Om du fastnar eller har frågor om att bygga AI-appar. Gå med i gemenskapen av andra lärande och erfarna utvecklare i diskussioner om MCP. Det är en stödjande gemenskap där frågor är välkomna och kunskap delas fritt. +Om du fastnar eller har 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) -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) ## 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. --- -**Ansvarsfriskrivning**: -Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, vänligen var medveten om att automatiska översättningar kan innehålla fel eller brister. Det ursprungliga dokumentet på dess modersmål ska betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning. +**Ansvarsfriskrivning**: +Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, var 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. \ No newline at end of file diff --git a/translations/sv/Roadmap.md b/translations/sv/Roadmap.md new file mode 100644 index 000000000..3edc7fb4e --- /dev/null +++ b/translations/sv/Roadmap.md @@ -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!** + +--- + + +**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. + \ No newline at end of file diff --git a/translations/th/.co-op-translator.json b/translations/th/.co-op-translator.json index bcdd95ed8..cf8d1d764 100644 --- a/translations/th/.co-op-translator.json +++ b/translations/th/.co-op-translator.json @@ -493,7 +493,7 @@ }, "AGENTS.md": { "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", "language_code": "th" }, @@ -516,11 +516,17 @@ "language_code": "th" }, "README.md": { - "original_hash": "490c83786552d7fab6390991517bef09", - "translation_date": "2026-01-29T18:27:19+00:00", + "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", + "translation_date": "2026-02-06T17:15:05+00:00", "source_file": "README.md", "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": { "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228", "translation_date": "2025-08-26T21:26:23+00:00", diff --git a/translations/th/AGENTS.md b/translations/th/AGENTS.md index 8b5cd9092..a5e5b0cbc 100644 --- a/translations/th/AGENTS.md +++ b/translations/th/AGENTS.md @@ -1,28 +1,28 @@ # AGENTS.md -## ภาพรวมของโปรเจกต์ +## ภาพรวมโครงการ -นี่คือคลังหลักสูตรการศึกษาเพื่อสอนพื้นฐานการพัฒนาเว็บสำหรับผู้เริ่มต้น หลักสูตรนี้เป็นโปรแกรมเรียนรู้แบบครบวงจร 12 สัปดาห์ที่พัฒนาโดย Microsoft Cloud Advocates ซึ่งประกอบด้วยบทเรียนเชิงปฏิบัติ 24 บทที่ครอบคลุม JavaScript, CSS และ HTML +นี่คือคลังหลักสูตรการศึกษาเพื่อสอนพื้นฐานการพัฒนาเว็บให้กับผู้เริ่มต้น หลักสูตรนี้เป็นคอร์สที่ครอบคลุม 12 สัปดาห์ พัฒนาโดย Microsoft Cloud Advocates ซึ่งประกอบด้วยบทเรียนเชิงปฏิบัติ 24 บทที่ครอบคลุม JavaScript, CSS และ HTML ### ส่วนประกอบสำคัญ -- **เนื้อหาการศึกษา**: บทเรียนที่มีโครงสร้าง 24 บท จัดเป็นโมดูลตามโปรเจกต์ -- **โปรเจกต์เชิงปฏิบัติ**: Terrarium, เกมพิมพ์ดีด, ส่วนขยายเบราว์เซอร์, เกมอวกาศ, แอปธนาคาร, ตัวแก้ไขโค้ด และผู้ช่วยแชท AI -- **แบบทดสอบเชิงโต้ตอบ**: แบบทดสอบ 48 ชุด ชุดละ 3 คำถาม (การประเมินก่อน/หลังบทเรียน) -- **รองรับหลายภาษา**: การแปลอัตโนมัติสำหรับมากกว่า 50 ภาษาโดยใช้ GitHub Actions -- **เทคโนโลยี**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (สำหรับโปรเจกต์ AI) +- **เนื้อหาการศึกษา**: บทเรียน 24 บทจัดโครงสร้างเป็นโมดูลที่อิงโครงการ +- **โครงการเชิงปฏิบัติ**: Terrarium, เกมพิมพ์, ส่วนขยายเบราว์เซอร์, เกมอวกาศ, แอพธนาคาร, ตัวแก้ไขโค้ด และผู้ช่วยแชท AI +- **แบบทดสอบเชิงโต้ตอบ**: แบบทดสอบ 48 ชุด แต่ละชุดมี 3 คำถาม (ประเมินก่อน/หลังบทเรียน) +- **รองรับหลายภาษา**: การแปลอัตโนมัติสำหรับ 50+ ภาษา ผ่าน GitHub Actions +- **เทคโนโลยี**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (สำหรับโครงการ AI) ### สถาปัตยกรรม -- คลังการศึกษาที่มีโครงสร้างตามบทเรียน -- โฟลเดอร์ของแต่ละบทเรียนประกอบด้วย README, ตัวอย่างโค้ด และคำตอบ -- โปรเจกต์แยกต่างหากในไดเรกทอรีเฉพาะ (quiz-app, โปรเจกต์บทเรียนต่างๆ) -- ระบบการแปลโดยใช้ GitHub Actions (co-op-translator) -- เอกสารให้บริการผ่าน Docsify และมีให้ดาวน์โหลดในรูปแบบ PDF +- คลังการศึกษาที่มีโครงสร้างแบบเน้นบทเรียน +- โฟลเดอร์บทเรียนแต่ละบทประกอบด้วย README, ตัวอย่างโค้ด และคำตอบ +- โครงการแยกเดี่ยวในไดเรกทอรีแยกต่างหาก (quiz-app, โครงการบทเรียนต่างๆ) +- ระบบแปลด้วย GitHub Actions (co-op-translator) +- เอกสารให้บริการผ่าน Docsify และมีให้ในรูปแบบ PDF -## คำสั่งการตั้งค่า +## คำสั่งติดตั้ง -คลังนี้ถูกออกแบบมาเพื่อการบริโภคเนื้อหาการศึกษาเป็นหลัก สำหรับการทำงานกับโปรเจกต์เฉพาะ: +คลังนี้เน้นสำหรับการบริโภคเนื้อหาการศึกษาหลัก สำหรับการทำงานกับโครงการเฉพาะ: ### การตั้งค่าคลังหลัก @@ -31,252 +31,252 @@ git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### การตั้งค่าแอปแบบทดสอบ (Vue 3 + Vite) +### การตั้งค่า Quiz App (Vue 3 + Vite) ```bash cd quiz-app npm install -npm run dev # Start development server -npm run build # Build for production -npm run lint # Run ESLint +npm run dev # เริ่มเซิร์ฟเวอร์สำหรับพัฒนา +npm run build # สร้างสำหรับโปรดักชัน +npm run lint # รัน ESLint ``` -### API ของโปรเจกต์ธนาคาร (Node.js + Express) +### Bank Project API (Node.js + Express) ```bash cd 7-bank-project/api npm install -npm start # Start API server -npm run lint # Run ESLint -npm run format # Format with Prettier +npm start # เริ่มต้นเซิร์ฟเวอร์ API +npm run lint # รัน ESLint +npm run format # จัดรูปแบบด้วย Prettier ``` -### โปรเจกต์ส่วนขยายเบราว์เซอร์ +### โครงการส่วนขยายเบราว์เซอร์ ```bash cd 5-browser-extension/solution npm install -# Follow browser-specific extension loading instructions +# ปฏิบัติตามคำแนะนำการโหลดส่วนขยายเฉพาะเบราว์เซอร์ ``` -### โปรเจกต์เกมอวกาศ +### โครงการเกมอวกาศ ```bash cd 6-space-game/solution npm install -# Open index.html in browser or use Live Server +# เปิดไฟล์ index.html ในเบราว์เซอร์หรือใช้ Live Server ``` -### โปรเจกต์แชท (Python Backend) +### โครงการแชท (Python Backend) ```bash cd 9-chat-project/solution/backend/python pip install openai -# Set GITHUB_TOKEN environment variable +# ตั้งค่าตัวแปรแวดล้อม GITHUB_TOKEN python api.py ``` -## เวิร์กโฟลว์การพัฒนา +## กระบวนการพัฒนา ### สำหรับผู้ร่วมสร้างเนื้อหา -1. **Fork คลัง** ไปยังบัญชี GitHub ของคุณ -2. **Clone fork ของคุณ** ลงในเครื่อง +1. **Fork คลังไปยังบัญชี GitHub ของคุณ** +2. **โคลน Fork ของคุณลงเครื่อง** 3. **สร้างสาขาใหม่** สำหรับการเปลี่ยนแปลงของคุณ -4. ทำการเปลี่ยนแปลงเนื้อหาบทเรียนหรือตัวอย่างโค้ด -5. ทดสอบการเปลี่ยนแปลงโค้ดในไดเรกทอรีโปรเจกต์ที่เกี่ยวข้อง -6. ส่ง pull request ตามแนวทางการมีส่วนร่วม +4. แก้ไขเนื้อหาหรือโค้ดตัวอย่างในบทเรียน +5. ทดสอบการเปลี่ยนแปลงโค้ดในไดเรกทอรีโครงการที่เกี่ยวข้อง +6. ส่งคำร้อง pull request ตามแนวทางการร่วมมือ ### สำหรับผู้เรียน -1. Fork หรือ Clone คลัง +1. Fork หรือโคลนคลัง 2. ไปยังไดเรกทอรีบทเรียนตามลำดับ 3. อ่านไฟล์ README ของแต่ละบทเรียน 4. ทำแบบทดสอบก่อนบทเรียนที่ https://ff-quizzes.netlify.app/web/ -5. ทำความเข้าใจตัวอย่างโค้ดในโฟลเดอร์บทเรียน -6. ทำแบบฝึกหัดและความท้าทาย -7. ทำแบบทดสอบหลังบทเรียน +5. ทำงานผ่านตัวอย่างโค้ดในโฟลเดอร์บทเรียน +6. ทำแบบฝึกหัดและความท้าทายให้ครบถ้วน +7. เข้าทำแบบทดสอบหลังบทเรียน ### การพัฒนาแบบสด -- **เอกสาร**: รัน `docsify serve` ใน root (พอร์ต 3000) -- **แอปแบบทดสอบ**: รัน `npm run dev` ในไดเรกทอรี quiz-app -- **โปรเจกต์**: ใช้ส่วนขยาย Live Server ของ VS Code สำหรับโปรเจกต์ HTML -- **โปรเจกต์ API**: รัน `npm start` ในไดเรกทอรี API ที่เกี่ยวข้อง +- **เอกสาร**: รัน `docsify serve` ในโฟลเดอร์หลัก (พอร์ต 3000) +- **Quiz App**: รัน `npm run dev` ในโฟลเดอร์ quiz-app +- **โครงการ**: ใช้ส่วนขยาย Live Server ของ VS Code สำหรับโครงการ HTML +- **โครงการ API**: รัน `npm start` ในไดเรกทอรี API ที่เกี่ยวข้อง ## คำแนะนำการทดสอบ -### การทดสอบแอปแบบทดสอบ +### การทดสอบ Quiz App ```bash cd quiz-app -npm run lint # Check for code style issues -npm run build # Verify build succeeds +npm run lint # ตรวจสอบปัญหาสไตล์โค้ด +npm run build # ยืนยันการสร้างสำเร็จ ``` -### การทดสอบ API ของธนาคาร +### การทดสอบ Bank API ```bash cd 7-bank-project/api -npm run lint # Check for code style issues -node server.js # Verify server starts without errors +npm run lint # ตรวจสอบปัญหาสไตล์โค้ด +node server.js # ตรวจสอบว่าเซิร์ฟเวอร์เริ่มต้นโดยไม่มีข้อผิดพลาด ``` ### แนวทางการทดสอบทั่วไป -- คลังนี้เป็นคลังการศึกษา ไม่มีการทดสอบอัตโนมัติที่ครอบคลุม -- การทดสอบด้วยมือเน้นที่: - - ตัวอย่างโค้ดทำงานโดยไม่มีข้อผิดพลาด +- นี่คือคลังเพื่อการศึกษาไม่มีการทดสอบอัตโนมัติอย่างครอบคลุม +- การทดสอบด้วยตนเองเน้นที่: + - ตัวอย่างโค้ดรันได้โดยไม่มีข้อผิดพลาด - ลิงก์ในเอกสารทำงานถูกต้อง - - การสร้างโปรเจกต์สำเร็จ - - ตัวอย่างปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุด + - การสร้างโครงการสำเร็จลุล่วง + - ตัวอย่างปฏิบัติตามแนวปฏิบัติที่ดีที่สุด ### การตรวจสอบก่อนส่ง -- รัน `npm run lint` ในไดเรกทอรีที่มี package.json -- ตรวจสอบลิงก์ markdown ว่าถูกต้อง +- รัน `npm run lint` ในโฟลเดอร์ที่มี package.json +- ตรวจสอบว่าลิงก์ markdown ถูกต้อง - ทดสอบตัวอย่างโค้ดในเบราว์เซอร์หรือ Node.js -- ตรวจสอบว่าโครงสร้างการแปลยังคงถูกต้อง +- ตรวจสอบว่าแปลภาษายังคงรักษาโครงสร้างอย่างถูกต้อง ## แนวทางการเขียนโค้ด ### JavaScript - ใช้ไวยากรณ์ ES6+ สมัยใหม่ -- ปฏิบัติตามการตั้งค่า ESLint มาตรฐานที่ให้ไว้ในโปรเจกต์ +- ปฏิบัติตามการตั้งค่า ESLint มาตรฐานที่ระบุในโครงการ - ใช้ชื่อตัวแปรและฟังก์ชันที่มีความหมายเพื่อความชัดเจนทางการศึกษา - เพิ่มคอมเมนต์อธิบายแนวคิดสำหรับผู้เรียน -- จัดรูปแบบด้วย Prettier หากมีการตั้งค่าไว้ +- จัดรูปแบบโดยใช้ Prettier เมื่อมีการตั้งค่า ### HTML/CSS -- ใช้ HTML5 แบบ Semantic -- หลักการออกแบบที่ตอบสนองต่ออุปกรณ์ -- การตั้งชื่อคลาสที่ชัดเจน -- คอมเมนต์อธิบายเทคนิค CSS สำหรับผู้เรียน +- องค์ประกอบ HTML5 เชิงความหมาย +- หลักการออกแบบตอบสนอง +- การตั้งชื่อชั้นเรียนที่ชัดเจน +- คอมเมนต์เพื่ออธิบายเทคนิค CSS สำหรับผู้เรียน ### Python -- ปฏิบัติตามแนวทาง PEP 8 -- ตัวอย่างโค้ดที่ชัดเจนและเหมาะสำหรับการศึกษา -- ใช้ Type hints เมื่อมีประโยชน์ต่อการเรียนรู้ +- ปฏิบัติตามมาตรฐานสไตล์ PEP 8 +- ตัวอย่างโค้ดที่ชัดเจนและใช้เพื่อการศึกษา +- ใช้ type hints เมื่อต้องช่วยการเรียนรู้ ### เอกสาร Markdown -- ลำดับหัวข้อที่ชัดเจน +- โครงสร้างหัวข้อชัดเจน - บล็อกโค้ดพร้อมระบุภาษา - ลิงก์ไปยังแหล่งข้อมูลเพิ่มเติม -- ภาพหน้าจอและรูปภาพในไดเรกทอรี `images/` -- ข้อความ Alt สำหรับรูปภาพเพื่อการเข้าถึง +- ภาพหน้าจอและรูปในโฟลเดอร์ `images/` +- ข้อความ alt สำหรับภาพเพื่อการเข้าถึง ### การจัดระเบียบไฟล์ -- บทเรียนเรียงลำดับตามหมายเลข (1-getting-started-lessons, 2-js-basics, ฯลฯ) -- แต่ละโปรเจกต์มีโฟลเดอร์ `solution/` และมักจะมี `start/` หรือ `your-work/` +- บทเรียนลำดับหมายเลข (1-getting-started-lessons, 2-js-basics, ฯลฯ) +- โครงการแต่ละโครงการมีโฟลเดอร์ `solution/` และบ่อยครั้งมี `start/` หรือ `your-work/` - รูปภาพเก็บในโฟลเดอร์ `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 cd quiz-app -npm run build # Creates dist/ folder -# Deploys via GitHub Actions workflow on push to main +npm run build # สร้างโฟลเดอร์ dist/ +# ทำการดีพลอยผ่านเวิร์กโฟลว์ GitHub Actions เมื่อมีการ push ไปที่ main ``` -การตั้งค่า Azure Static Web Apps: +การกำหนดค่า Azure Static Web Apps: - **ตำแหน่งแอป**: `/quiz-app` - **ตำแหน่งผลลัพธ์**: `dist` -- **เวิร์กโฟลว์**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` +- **ขั้นตอนงาน**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### การสร้างเอกสาร PDF +### การสร้างไฟล์ PDF จากเอกสาร ```bash -npm install # Install docsify-to-pdf -npm run convert # Generate PDF from docs +npm install # ติดตั้ง docsify-to-pdf +npm run convert # สร้างไฟล์ PDF จาก docs ``` ### เอกสาร Docsify ```bash -npm install -g docsify-cli # Install Docsify globally -docsify serve # Serve on localhost:3000 +npm install -g docsify-cli # ติดตั้ง Docsify ทั่วระบบ +docsify serve # ให้บริการบน localhost:3000 ``` -### การสร้างโปรเจกต์เฉพาะ +### การสร้างโครงการเฉพาะ -แต่ละไดเรกทอรีโปรเจกต์อาจมีขั้นตอนการสร้างของตัวเอง: -- โปรเจกต์ Vue: `npm run build` สร้างชุดโปรดักชัน -- โปรเจกต์ Static: ไม่มีขั้นตอนการสร้าง ให้บริการไฟล์โดยตรง +แต่ละไดเรกทอรีโครงการอาจมีขั้นตอนการสร้างของตัวเอง: +- โครงการ Vue: `npm run build` เพื่อสร้าง bundle สำหรับโปรดักชัน +- โครงการสแตติก: ไม่มีขั้นตอนการสร้าง บริการไฟล์โดยตรง ## แนวทางการส่ง Pull Request ### รูปแบบชื่อเรื่อง -ใช้ชื่อเรื่องที่ชัดเจนและอธิบายถึงการเปลี่ยนแปลง: +ใช้ชื่อเรื่องที่ชัดเจนและบอกบริเวณการเปลี่ยนแปลง: - `[Quiz-app] เพิ่มแบบทดสอบใหม่สำหรับบทเรียน X` -- `[Lesson-3] แก้ไขคำผิดในโปรเจกต์ terrarium` -- `[Translation] เพิ่มการแปลภาษาเสปนสำหรับบทเรียน 5` -- `[Docs] อัปเดตคำแนะนำการตั้งค่า` +- `[Lesson-3] แก้ไขคำผิดในโครงการ terrarium` +- `[Translation] เพิ่มการแปลภาษาสเปนสำหรับบทเรียน 5` +- `[Docs] ปรับปรุงคำแนะนำการตั้งค่า` ### การตรวจสอบที่จำเป็น ก่อนส่ง PR: 1. **คุณภาพโค้ด**: - - รัน `npm run lint` ในไดเรกทอรีโปรเจกต์ที่ได้รับผลกระทบ + - รัน `npm run lint` ในโฟลเดอร์โครงการที่ได้รับผลกระทบ - แก้ไขข้อผิดพลาดและคำเตือนทั้งหมด 2. **การตรวจสอบการสร้าง**: - - รัน `npm run build` หากเกี่ยวข้อง + - รัน `npm run build` หากใช้งานได้ - ตรวจสอบว่าไม่มีข้อผิดพลาดในการสร้าง 3. **การตรวจสอบลิงก์**: - ทดสอบลิงก์ markdown ทั้งหมด - - ตรวจสอบการอ้างอิงรูปภาพว่าทำงาน + - ยืนยันการอ้างอิงรูปภาพทำงานถูกต้อง 4. **การตรวจสอบเนื้อหา**: - - ตรวจสอบการสะกดและไวยากรณ์ - - ตรวจสอบว่าตัวอย่างโค้ดถูกต้องและเหมาะสมสำหรับการศึกษา - - ตรวจสอบว่าการแปลยังคงความหมายเดิม + - ตรวจทานการสะกดและไวยากรณ์ + - ตรวจสอบว่าตัวอย่างโค้ดถูกต้องและเหมาะสมกับการศึกษา + - ยืนยันว่าการแปลรักษาความหมายเดิม -### ข้อกำหนดการมีส่วนร่วม +### ข้อกำหนดการร่วมมือ -- ยอมรับ Microsoft CLA (การตรวจสอบอัตโนมัติใน PR แรก) +- ตกลงยอมรับ Microsoft CLA (ตรวจสอบอัตโนมัติใน PR แรก) - ปฏิบัติตาม [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) -- ดู [CONTRIBUTING.md](./CONTRIBUTING.md) สำหรับแนวทางโดยละเอียด -- อ้างอิงหมายเลขปัญหาในคำอธิบาย PR หากเกี่ยวข้อง +- ดู [CONTRIBUTING.md](./CONTRIBUTING.md) สำหรับแนวทางรายละเอียด +- อ้างอิงหมายเลข issue ในคำอธิบาย PR หากเกี่ยวข้อง ### กระบวนการตรวจสอบ -- PR จะได้รับการตรวจสอบโดยผู้ดูแลและชุมชน +- PR ได้รับการตรวจโดยผู้ดูแลและชุมชน - ให้ความสำคัญกับความชัดเจนทางการศึกษา -- ตัวอย่างโค้ดควรปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดในปัจจุบัน -- การแปลจะได้รับการตรวจสอบเพื่อความถูกต้องและเหมาะสมทางวัฒนธรรม +- ตัวอย่างโค้ดต้องเป็นไปตามแนวทางปฏิบัติที่ดีที่สุดปัจจุบัน +- การแปลได้รับการตรวจสอบเพื่อความถูกต้องและเหมาะสมทางวัฒนธรรม -## ระบบการแปล +## ระบบแปลภาษา ### การแปลอัตโนมัติ -- ใช้ GitHub Actions กับเวิร์กโฟลว์ co-op-translator -- แปลเป็นมากกว่า 50 ภาษาโดยอัตโนมัติ -- ไฟล์ต้นฉบับในไดเรกทอรีหลัก +- ใช้ GitHub Actions กับ workflow co-op-translator +- แปลเป็น 50+ ภาษาโดยอัตโนมัติ +- ไฟล์ต้นทางในไดเรกทอรีหลัก - ไฟล์แปลในโครงสร้าง `translations/{language-code}/` -### การเพิ่มการปรับปรุงการแปลด้วยตนเอง +### การเพิ่มการแปลด้วยตนเอง 1. ค้นหาไฟล์ใน `translations/{language-code}/` -2. ปรับปรุงในขณะที่รักษาโครงสร้างไว้ -3. ตรวจสอบว่าตัวอย่างโค้ดยังคงทำงานได้ -4. ทดสอบเนื้อหาแบบทดสอบที่แปลแล้ว +2. ปรับปรุงโดยรักษาโครงสร้างไว้ +3. ตรวจสอบให้ตัวอย่างโค้ดยังคงทำงานได้ +4. ทดสอบเนื้อหาแบบทดสอบในท้องถิ่นถ้ามี -### เมตาดาทาการแปล +### เมตาดาต้าแปลภาษา -ไฟล์แปลรวมถึงส่วนหัวเมตาดาทา: +ไฟล์แปลจะมีหัวข้อเมตาดาต้าดังนี้: ```markdown ``` -## การแก้ไขข้อบกพร่องและการแก้ปัญหา +## การดีบักและแก้ไขปัญหา ### ปัญหาทั่วไป -**แอปแบบทดสอบไม่เริ่มต้น**: +**แอปแบบทดสอบไม่เริ่มทำงาน**: - ตรวจสอบเวอร์ชัน Node.js (แนะนำ v14+) - ลบ `node_modules` และ `package-lock.json` แล้วรัน `npm install` ใหม่ -- ตรวจสอบความขัดแย้งของพอร์ต (ค่าเริ่มต้น: Vite ใช้พอร์ต 5173) +- ตรวจสอบปัญหาพอร์ตซ้ำซ้อน (ค่าเริ่มต้น: Vite ใช้พอร์ต 5173) -**เซิร์ฟเวอร์ API ไม่เริ่มต้น**: -- ตรวจสอบว่าเวอร์ชัน Node.js ตรงตามขั้นต่ำ (node >=10) +**เซิร์ฟเวอร์ API ไม่เริ่มทำงาน**: +- ตรวจสอบเวอร์ชัน Node.js ต้อง>=10 - ตรวจสอบว่าพอร์ตถูกใช้งานอยู่หรือไม่ -- ตรวจสอบว่าติดตั้ง dependencies ทั้งหมดด้วย `npm install` +- ติดตั้ง dependencies ทุกตัวด้วย `npm install` -**ส่วนขยายเบราว์เซอร์ไม่โหลด**: -- ตรวจสอบว่า manifest.json ถูกจัดรูปแบบอย่างถูกต้อง -- ตรวจสอบคอนโซลเบราว์เซอร์สำหรับข้อผิดพลาด -- ปฏิบัติตามคำแนะนำการติดตั้งส่วนขยายเฉพาะเบราว์เซอร์ +**ส่วนขยายเบราว์เซอร์โหลดไม่ได้**: +- ตรวจสอบว่า manifest.json ถูกฟอร์แมตอย่างถูกต้อง +- ตรวจดูคอนโซลเบราว์เซอร์ว่ามีข้อผิดพลาดหรือไม่ +- ปฏิบัติตามคำแนะนำการติดตั้งส่วนขยายสำหรับเบราว์เซอร์นั้น -**ปัญหาโปรเจกต์แชท Python**: -- ตรวจสอบว่าติดตั้งแพ็กเกจ OpenAI: `pip install openai` -- ตรวจสอบว่าได้ตั้งค่า GITHUB_TOKEN เป็นตัวแปรสภาพแวดล้อม -- ตรวจสอบสิทธิ์การเข้าถึง GitHub Models +**ปัญหาโครงการแชท Python**: +- ให้แน่ใจว่าได้ติดตั้งแพ็คเกจ OpenAI: `pip install openai` +- ตรวจสอบว่าตัวแปรสภาพแวดล้อม GITHUB_TOKEN ถูกตั้งค่าแล้ว +- ตรวจสอบสิทธิ์เข้าถึง GitHub Models **Docsify ไม่ให้บริการเอกสาร**: -- ติดตั้ง docsify-cli ทั่วโลก: `npm install -g docsify-cli` -- รันจากไดเรกทอรี root ของคลัง -- ตรวจสอบว่า `docs/_sidebar.md` มีอยู่ +- ติดตั้ง docsify-cli แบบ global: `npm install -g docsify-cli` +- รันจากโฟลเดอร์รากของคลัง +- ตรวจสอบว่าไฟล์ `docs/_sidebar.md` มีอยู่ ### เคล็ดลับสภาพแวดล้อมการพัฒนา -- ใช้ VS Code พร้อมส่วนขยาย Live Server สำหรับโปรเจกต์ HTML -- ติดตั้งส่วนขยาย ESLint และ Prettier เพื่อการจัดรูปแบบที่สม่ำเสมอ +- ใช้ VS Code พร้อมส่วนขยาย Live Server สำหรับโครงการ HTML +- ติดตั้งส่วนขยาย ESLint และ Prettier เพื่อความสม่ำเสมอในการจัดรูปแบบ - ใช้ DevTools ของเบราว์เซอร์สำหรับการดีบัก JavaScript -- สำหรับโปรเจกต์ Vue ให้ติดตั้งส่วนขยาย Vue DevTools ในเบราว์เซอร์ +- สำหรับโครงการ Vue ให้ติดตั้งส่วนขยาย Vue DevTools ในเบราว์เซอร์ ### ข้อควรพิจารณาด้านประสิทธิภาพ -- จำนวนไฟล์แปลที่มาก (50+ ภาษา) ทำให้การโคลนทั้งหมดมีขนาดใหญ่ -- ใช้การโคลนแบบตื้นหากทำงานเฉพาะเนื้อหา: `git clone --depth 1` -- ยกเว้นการแปลจากการค้นหาเมื่อทำงานกับเนื้อหาภาษาอังกฤษ -- กระบวนการสร้างอาจช้าในครั้งแรก (npm install, Vite build) +- ไฟล์แปลจำนวนมาก (50+ ภาษา) ทำให้โคลนเต็มขนาดใหญ่ +- ใช้ shallow clone หากทำงานเฉพาะเนื้อหา: `git clone --depth 1` +- ยกเว้นการแปลออกจากการค้นหาเมื่อทำงานกับเนื้อหาอังกฤษ +- กระบวนการสร้าง อาจช้าครั้งแรก (npm install, Vite build) -## ข้อควรพิจารณาด้านความปลอดภัย +## ข้อควรระวังด้านความปลอดภัย ### ตัวแปรสภาพแวดล้อม -- ห้ามคีย์ API ถูกคอมมิตในคลัง -- ใช้ไฟล์ `.env` (อยู่ใน `.gitignore` แล้ว) -- เอกสารตัวแปรสภาพแวดล้อมที่จำเป็นใน README ของโปรเจกต์ +- ห้ามส่งคีย์ API ขึ้นบนคลัง +- ใช้ไฟล์ `.env` (มีอยู่ใน `.gitignore` แล้ว) +- บันทึกตัวแปรสภาพแวดล้อมที่จำเป็นไว้ใน README โครงการ -### โปรเจกต์ Python +### โครงการ Python - ใช้ virtual environments: `python -m venv venv` - อัปเดต dependencies อย่างสม่ำเสมอ -- โทเค็น GitHub ควรมีสิทธิ์ที่จำเป็นขั้นต่ำ +- โทเค็น GitHub ควรมีสิทธิ์ขั้นต่ำที่จำเป็น ### การเข้าถึง GitHub Models - ต้องใช้ Personal Access Tokens (PAT) สำหรับ GitHub Models -- โทเค็นควรถูกเก็บเป็นตัวแปรสภาพแวดล้อม -- ห้ามคอมมิตโทเค็นหรือข้อมูลรับรอง +- เก็บโทเค็นเป็นตัวแปรสภาพแวดล้อม +- ห้ามส่งโทเค็นหรือข้อมูลเข้าสู่คลัง ## หมายเหตุเพิ่มเติม ### กลุ่มเป้าหมาย -- ผู้เริ่มต้นที่ไม่มีพื้นฐานการพัฒนาเว็บ +- ผู้เริ่มต้นใหม่ในการพัฒนาเว็บ - นักเรียนและผู้เรียนด้วยตนเอง -- ครูที่ใช้หลักสูตรในห้องเรียน -- เนื้อหาออกแบบมาเพื่อการเข้าถึงและการพัฒนาทักษะอย่างค่อยเป็นค่อยไป +- ครูใช้หลักสูตรในห้องเรียน +- เนื้อหาออกแบบสำหรับการเข้าถึงและเสริมทักษะทีละขั้น ### ปรัชญาการศึกษา -- แนวทางการเรียนรู้แบบโปรเจกต์ -- การตรวจสอบความรู้บ่อยครั้ง (แบบทดสอบ) +- วิธีการเรียนรู้ด้วยโครงการ +- ตรวจสอบความรู้บ่อยครั้ง (แบบทดสอบ) - แบบฝึกหัดการเขียนโค้ดเชิงปฏิบัติ -- ตัวอย่างการใช้งานในโลกจริง -- เน้นพื้นฐานก่อนเข้าสู่เฟรมเวิร์ก +- ตัวอย่างการใช้งานจริง +- มุ่งเน้นพื้นฐานก่อนใช้เฟรมเวิร์ก -### การดูแลคลัง +### การดูแลรักษาคลัง -- ชุมชนผู้เรียนและผู้ร่วมสร้างที่มีความกระตือรือร้น -- การอัปเดต dependencies และเนื้อหาอย่างสม่ำเสมอ -- ผู้ดูแลตรวจสอบปัญหาและการสนทนา -- การอัปเดตการแปลอัตโนมัติผ่าน GitHub Actions +- ชุมชนผู้เรียนและผู้ร่วมสร้างที่สดใส +- อัปเดต dependencies และเนื้อหาเป็นประจำ +- ติดตามปัญหาและอภิปรายโดยผู้ดูแล +- การอัปเดตแปลภาษาอัตโนมัติผ่าน GitHub Actions ### แหล่งข้อมูลที่เกี่ยวข้อง -- [Microsoft Learn modules](https://docs.microsoft.com/learn/) -- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/) +- [โมดูล Microsoft Learn](https://docs.microsoft.com/learn/) +- [ทรัพยากร Student Hub](https://docs.microsoft.com/learn/student-hub/) - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) แนะนำสำหรับผู้เรียน -- หลักสูตรเพิ่มเติม: Generative AI, Data Science, ML, IoT +- คอร์สเพิ่มเติม: AI สร้างสรรค์, วิทยาศาสตร์ข้อมูล, ML, หลักสูตร IoT -### การทำงานกับโปรเจกต์เฉพาะ +### การทำงานกับโครงการเฉพาะ -สำหรับคำแนะนำโดยละเอียดเกี่ยวกับโปรเจกต์แต่ละโปรเจกต์ โปรดดูไฟล์ README ใน: -- `quiz-app/README.md` - แอปแบบทดสอบ Vue 3 -- `7-bank-project/README.md` - แอปธนาคารพร้อมการยืนยันตัวตน +สำหรับคำแนะนำโดยละเอียดเกี่ยวกับโครงการเฉพาะ ดูไฟล์ README ใน: +- `quiz-app/README.md` - แอป quiz Vue 3 +- `7-bank-project/README.md` - แอปธนาคารพร้อมระบบยืนยันตัวตน - `5-browser-extension/README.md` - การพัฒนาส่วนขยายเบราว์เซอร์ -- `6-space-game/README.md` - การพัฒนาเกมบน Canvas -- `9-chat-project/README.md` - โปรเจกต์ผู้ช่วยแชท AI +- `6-space-game/README.md` - การพัฒนาเกมด้วย Canvas +- `9-chat-project/README.md` - โครงการผู้ช่วยแชท AI ### โครงสร้าง Monorepo -แม้จะไม่ใช่ Monorepo แบบดั้งเดิม คลังนี้ประกอบด้วยโปรเจกต์อิสระหลายโปรเจกต์: -- แต่ละบทเรียนเป็นแบบแยกตัว -- โปรเจกต์ไม่มีการแชร์ dependencies -- ทำงานกับโปรเจกต์เฉพาะโดยไม่กระทบโปรเจกต์อื่น -- โคลนคลังทั้งหมดเพื่อประสบการณ์หลักสูตรแบบครบวงจร +แม้ว่าไม่ใช่ monorepo แบบดั้งเดิม แต่คลังนี้ประกอบด้วยโครงการอิสระหลายโครงการ: +- แต่ละบทเรียนแยกตัว +- โครงการไม่แชร์ dependencies +- ทำงานกับโครงการรายตัวโดยไม่กระทบโครงการอื่น +- โคลนคลังทั้งหมดเพื่อประสบการณ์หลักสูตรครบถ้วน --- + **ข้อจำกัดความรับผิดชอบ**: -เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามนุษย์ที่เป็นมืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้ \ No newline at end of file +เอกสารฉบับนี้ได้รับการแปลโดยใช้บริการแปลด้วย AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้เราจะพยายามให้ความถูกต้องสูงสุด แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาต้นทางถือเป็นแหล่งข้อมูลที่น่าเชื่อถือที่สุด สำหรับข้อมูลที่มีความสำคัญ ควรใช้บริการแปลโดยมนุษย์ผู้เชี่ยวชาญ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดใด ๆ ที่เกิดจากการใช้การแปลนี้ + \ No newline at end of file diff --git a/translations/th/README.md b/translations/th/README.md index 134589371..7010e77cc 100644 --- a/translations/th/README.md +++ b/translations/th/README.md @@ -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 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) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) @@ -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) -ทำตามขั้นตอนเหล่านี้เพื่อเริ่มต้นใช้แหล่งข้อมูลเหล่านี้: -1. **ทำการ Fork ที่เก็บข้อมูล**: คลิก [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **โคลนที่เก็บข้อมูล**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**เข้าร่วม Azure AI Foundry Discord เพื่อพบปะผู้เชี่ยวชาญและนักพัฒนาร่วมกัน**](https://discord.com/invite/ByRwuEEgH4) +ทำตามขั้นตอนเหล่านี้เพื่อเริ่มใช้ทรัพยากรเหล่านี้: +1. **Fork ที่เก็บ**: คลิก [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +2. **โคลนที่เก็บ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**เข้าร่วม Azure AI Foundry Discord และพบปะผู้เชี่ยวชาญและนักพัฒนาร่วมกัน**](https://discord.com/invite/ByRwuEEgH4) -### 🌐 รองรับหลายภาษา +### 🌐 การสนับสนุนหลายภาษา -#### รองรับผ่าน GitHub Action (อัตโนมัติ & อัปเดตตลอดเวลา) +#### สนับสนุนผ่าน GitHub Action (อัตโนมัติ & อัปเดตเสมอ) [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](./README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) -> **ต้องการโคลนในเครื่อง?** +> **ต้องการโคลนแบบโลคัล?** -> ที่เก็บนี้รวมการแปลมากกว่า 50 ภาษา ซึ่งเพิ่มขนาดการดาวน์โหลดอย่างมาก หากต้องการโคลนโดยไม่มีการแปล ให้ใช้ sparse checkout: +> ที่เก็บนี้มีการแปลมากกว่า 50 ภาษา ซึ่งจะเพิ่มขนาดการดาวน์โหลดอย่างมาก หากต้องการโคลนโดยไม่มีการแปล ให้ใช้ sparse checkout: > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` -> จะให้ทุกอย่างที่คุณต้องใช้สำหรับทำหลักสูตรนี้ด้วยการดาวน์โหลดที่เร็วขึ้นมาก +> ซึ่งจะให้คุณทุกอย่างที่จำเป็นสำหรับหลักสูตรด้วยการดาวน์โหลดที่รวดเร็วขึ้นมาก -**หากคุณต้องการรองรับภาษาแปลเพิ่มเติม รายการภาษาที่รองรับอยู่ [ที่นี่](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 ใหม่ของเรา! @@ -65,60 +65,60 @@ ![Background](../../translated_images/th/background.148a8d43afde5730.webp) -- บทเรียนครอบคลุมทุกอย่างตั้งแต่พื้นฐานถึง RAG -- โต้ตอบกับตัวละครประวัติศาสตร์โดยใช้ GenAI และแอปเสริมของเรา -- เรื่องเล่าสนุกสนานและน่าติดตาม คุณจะได้เดินทางข้ามเวลา! +- บทเรียนครอบคลุมทุกอย่างตั้งแต่พื้นฐานจนถึง RAG +- โต้ตอบกับตัวละครประวัติศาสตร์โดยใช้ GenAI และแอปคู่ของเรา +- เนื้อเรื่องสนุกและน่าติดตาม คุณจะได้เดินทางข้ามเวลา! ![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" ที่มุมขวาบนของหน้านี้ -2. **โคลนที่เก็บข้อมูล**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +ทำตามขั้นตอนเหล่านี้: +1. **Fork ที่เก็บ**: คลิกที่ปุ่ม "Fork" ที่มุมบนขวาของหน้านี้ +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) -#### การรันหลักสูตรในเครื่องของคุณ +#### การใช้งานหลักสูตรในเครื่องของคุณ -หากคุณต้องการรันหลักสูตรนี้ในเครื่องของคุณ คุณจะต้องมีเครื่องมือแก้ไขข้อความ, เบราว์เซอร์ และเครื่องมือบรรทัดคำสั่ง บทเรียนแรกของเรา [บทนำสู่ภาษาโปรแกรมและเครื่องมือการพัฒนา](../../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) -จากนั้น เปิด [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) แล้วรันคำสั่งต่อไปนี้ โดยแทนที่ `` ด้วย 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) และรันคำสั่งต่อไปนี้ โดยแทนที่ `` ด้วย URL ที่คุณเพิ่งคัดลอกมา: ```bash git clone @@ -127,92 +127,91 @@ 2. เปิดโฟลเดอร์ใน Visual Studio Code คุณสามารถทำได้โดยคลิกที่ **File** > **Open Folder** และเลือกโฟลเดอร์ที่คุณเพิ่งโคลนมา -> ส่วนขยาย Visual Studio Code ที่แนะนำ: +> ส่วนขยายของ Visual Studio Code ที่แนะนำ: > > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - เพื่อดูตัวอย่างหน้า HTML ภายใน Visual Studio Code -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - เพื่อช่วยคุณเขียนโค้ดได้เร็วขึ้น +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - เพื่อช่วยให้คุณเขียนโค้ดได้เร็วขึ้น ## 📂 แต่ละบทเรียนประกอบด้วย: -- สเก็ตช์โน้ต (optional) -- วิดีโอเสริม (optional) -- แบบทดสอบวอร์มอัพก่อนบทเรียน -- บทเรียนที่เขียน -- สำหรับบทเรียนแบบโปรเจกต์ มีไกด์ทีละขั้นตอนในการสร้างโปรเจกต์ +- สเก็ตช์โน้ตเสริม (ถ้ามี) +- วิดีโอเสริม (ถ้ามี) +- แบบทดสอบก่อนเรียน +- บทเรียนเขียน +- สำหรับบทเรียนที่เป็นแบบโครงการ มีคำแนะนำทีละขั้นตอนในการสร้างโครงการ - การตรวจสอบความรู้ - ความท้าทาย - การอ่านเสริม -- งานมอบหมาย -- [แบบทดสอบหลังบทเรียน](https://ff-quizzes.netlify.app/web/) +- การบ้าน +- [แบบทดสอบหลังเรียน](https://ff-quizzes.netlify.app/web/) -> **หมายเหตุเกี่ยวกับแบบทดสอบ**: แบบทดสอบทั้งหมดถูกเก็บไว้ในโฟลเดอร์ Quiz-app รวม 48 แบบทดสอบ แต่ละชุดมีสามคำถาม คุณสามารถเข้าถึงได้ [ที่นี่](https://ff-quizzes.netlify.app/web/) แบบทดสอบสามารถรันได้ในเครื่องหรือจะดีพลอยที่ Azure ตามคำแนะนำในโฟลเดอร์ `quiz-app` +> **หมายเหตุเกี่ยวกับแบบทดสอบ**: แบบทดสอบทั้งหมดอยู่ในโฟลเดอร์ Quiz-app รวม 48 แบบทดสอบ แต่ละแบบมีสามคำถาม คุณสามารถเข้าถึงได้ที่ [นี่](https://ff-quizzes.netlify.app/web/) แอปแบบทดสอบสามารถรันแบบออฟไลน์หรือเผยแพร่บน Azure ได้; โปรดปฏิบัติตามคำแนะนำในโฟลเดอร์ `quiz-app` ## 🗃️ บทเรียน -| | ชื่อโปรเจกต์ | แนวคิดที่เรียนรู้ | วัตถุประสงค์การเรียนรู้ | บทเรียนที่เชื่อมโยง | ผู้แต่ง | +| | ชื่อโปรเจค | แนวคิดที่สอน | เป้าหมายการเรียนรู้ | บทเรียนที่เชื่อมโยง | ผู้เขียน | | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Getting Started | บทนำสู่การเขียนโปรแกรมและเครื่องมือการทำงาน | เรียนรู้พื้นฐานเบื้องต้นของภาษาการเขียนโปรแกรมส่วนใหญ่และเกี่ยวกับซอฟต์แวร์ที่ช่วยนักพัฒนามืออาชีพทำงานของพวกเขา | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Getting Started | พื้นฐานของ GitHub รวมถึงการทำงานร่วมกับทีม | วิธีใช้ GitHub ในโปรเจกต์ของคุณ วิธีการทำงานร่วมกับผู้อื่นบนฐานโค้ด | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Getting Started | การเข้าถึง | เรียนรู้พื้นฐานของการเข้าถึงเว็บไซต์ | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS Basics | ประเภทข้อมูลใน JavaScript | พื้นฐานของประเภทข้อมูลใน JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS Basics | ฟังก์ชันและเมธอด | เรียนรู้เกี่ยวกับฟังก์ชันและเมธอดเพื่อจัดการลำดับความคิดของแอปพลิเคชัน | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | -| 06 | JS Basics | การตัดสินใจใน JS | เรียนรู้วิธีสร้างเงื่อนไขในโค้ดของคุณโดยใช้วิธีการตัดสินใจ | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS Basics | อาร์เรย์และลูป | ทำงานกับข้อมูลโดยใช้ arrays และ loops ใน JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | การใช้งาน HTML | สร้าง HTML เพื่อสร้างเทอร์ราเรียมออนไลน์ โดยเน้นการสร้างเลย์เอาต์ | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | การใช้งาน CSS | สร้าง CSS เพื่อจัดแต่งเทอร์ราเรียมออนไลน์ โดยเน้นพื้นฐานของ CSS รวมถึงการทำให้หน้าเว็บตอบสนอง | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | สร้าง JavaScript เพื่อทำให้เทอร์ราเรียมทำงานเป็นอินเทอร์เฟซลากและวาง โดยเน้น closures และ DOM manipulation | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | สร้างเกมพิมพ์ | เรียนรู้วิธีใช้ keyboard events เพื่อขับเคลื่อนลอจิกของแอป JavaScript ของคุณ | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | การทำงานกับเบราว์เซอร์ | เรียนรู้วิธีการทำงานของเบราว์เซอร์ ประวัติ และวิธีตั้งโครงร่างองค์ประกอบแรกของส่วนขยายเบราว์เซอร์ | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | สร้างฟอร์ม เรียกใช้ API และจัดเก็บตัวแปรใน Local Storage | สร้างองค์ประกอบ JavaScript ของส่วนขยายเบราว์เซอร์ของคุณเพื่อเรียกใช้ API โดยใช้ตัวแปรที่เก็บใน Local Storage | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | กระบวนการพื้นหลังในเบราว์เซอร์ การแสดงผลเว็บ | ใช้กระบวนการพื้นหลังของเบราว์เซอร์เพื่อจัดการไอคอนส่วนขยาย เรียนรู้เกี่ยวกับการแสดงผลเว็บและการปรับแต่งเพื่อประสิทธิภาพที่ดีขึ้น | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Space Game](./6-space-game/solution/README.md) | การพัฒนาเกมขั้นสูงด้วย JavaScript | เรียนรู้เกี่ยวกับการสืบทอดโดยใช้ทั้ง Classes และ Composition รวมถึงรูปแบบ Pub/Sub เพื่อเตรียมตัวสำหรับการสร้างเกม | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Space Game](./6-space-game/solution/README.md) | การวาดลงบนแคนวาส | เรียนรู้เกี่ยวกับ Canvas API ที่ใช้สำหรับวาดองค์ประกอบลงบนหน้าจอ | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Space Game](./6-space-game/solution/README.md) | การเคลื่อนย้ายองค์ประกอบบนหน้าจอ | ค้นพบวิธีที่องค์ประกอบสามารถเคลื่อนที่ได้โดยใช้พิกัดคาร์ทีเซียนและ Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Space Game](./6-space-game/solution/README.md) | การตรวจจับการชน | ทำให้องค์ประกอบชนกันและตอบสนองต่อกันโดยใช้การกดปุ่มและเพิ่มฟังก์ชันเย็นตัวเพื่อประสิทธิภาพของเกม | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Space Game](./6-space-game/solution/README.md) | การเก็บคะแนน | คำนวณทางคณิตศาสตร์ตามสถานะและประสิทธิภาพของเกม | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Space Game](./6-space-game/solution/README.md) | การจบและเริ่มเกมใหม่ | เรียนรู้เกี่ยวกับการจบและเริ่มเกมใหม่ รวมถึงการจัดการกับทรัพยากรและรีเซ็ตค่าตัวแปร | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML Templates และ Routes ในเว็บแอป | เรียนรู้วิธีสร้างโครงสร้างของเว็บหลายหน้าโดยใช้ routing และ HTML templates | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Banking App](./7-bank-project/solution/README.md) | สร้างฟอร์มล็อกอินและลงทะเบียน | เรียนรู้เกี่ยวกับการสร้างฟอร์มและจัดการตรวจสอบความถูกต้อง | [Forms](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Banking App](./7-bank-project/solution/README.md) | วิธีการดึงและใช้ข้อมูล | วิธีการไหลของข้อมูลเข้าออกแอปของคุณ วิธีการดึงข้อมูล เก็บ และลบทิ้ง | [Data](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Banking App](./7-bank-project/solution/README.md) | แนวคิดการจัดการสถานะ | เรียนรู้ว่าแอปของคุณเก็บสถานะอย่างไร และการจัดการด้วยวิธีการเขียนโปรแกรม | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode Code](../../8-code-editor) | การใช้งานกับ VScode | เรียนรู้วิธีใช้ตัวแก้ไขโค้ด | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 01 | Getting Started | บทนำสู่การเขียนโปรแกรมและเครื่องมือที่ใช้ในการทำงาน | เรียนรู้พื้นฐานของภาษาการเขียนโปรแกรมส่วนใหญ่และเกี่ยวกับซอฟต์แวร์ที่ช่วยให้นักพัฒนามืออาชีพทำงานได้อย่างมีประสิทธิภาพ | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Getting Started | พื้นฐานของ GitHub รวมถึงการทำงานเป็นทีม | วิธีใช้ GitHub ในโปรเจคของคุณ วิธีการทำงานร่วมกับผู้อื่นบนฐานโค้ดเดียวกัน | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Getting Started | การเข้าถึง | เรียนรู้พื้นฐานของการเข้าถึงเว็บ | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS Basics | ประเภทข้อมูลใน JavaScript | พื้นฐานของประเภทข้อมูลใน JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS Basics | ฟังก์ชันและเมธอด | เรียนรู้เกี่ยวกับฟังก์ชันและเมธอดเพื่อจัดการการไหลของตรรกะในแอปพลิเคชัน | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | +| 06 | JS Basics | การตัดสินใจด้วย JS | เรียนรู้วิธีสร้างเงื่อนไขในโค้ดของคุณโดยใช้วิธีตัดสินใจ | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS Basics | อาเรย์และลูป | ทำงานกับข้อมูลโดยใช้ arrays และ loops ใน JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML ในการปฏิบัติ | สร้าง HTML เพื่อสร้างเทอร์ราเรียมออนไลน์ โดยเน้นการสร้างเลย์เอาต์ | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS ในการปฏิบัติ | สร้าง CSS เพื่อจัดแต่งเทอร์ราเรียมออนไลน์ โดยเน้นพื้นฐานของ CSS รวมถึงการทำให้หน้าเว็บตอบสนอง | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, การจัดการ DOM | สร้าง 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) | สร้างเกมพิมพ์ดีด | เรียนรู้วิธีใช้เหตุการณ์แป้นพิมพ์เพื่อควบคุมตรรกะของแอป JavaScript ของคุณ | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | การทำงานกับเว็บเบราว์เซอร์ | เรียนรู้วิธีการทำงานของเบราว์เซอร์ ประวัติศาสตร์ และวิธีสร้างส่วนแรกของส่วนขยายเบราว์เซอร์ | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | การสร้างฟอร์ม เรียก API และเก็บตัวแปรใน local storage | สร้างองค์ประกอบ JavaScript ของส่วนขยายเบราว์เซอร์ของคุณเพื่อเรียก API โดยใช้ตัวแปรที่เก็บใน local storage | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | กระบวนการพื้นหลังในเบราว์เซอร์, ประสิทธิภาพเว็บ | ใช้กระบวนการพื้นหลังของเบราว์เซอร์เพื่อจัดการไอคอนของส่วนขยาย; ศึกษาเกี่ยวกับประสิทธิภาพเว็บและการปรับแต่งบางอย่างเพื่อทำให้ | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](./6-space-game/solution/README.md) | การพัฒนาเกมขั้นสูงเพิ่มเติมด้วย JavaScript | เรียนรู้เกี่ยวกับการสืบทอดโดยใช้ทั้ง Classes และ Composition และรูปแบบ Pub/Sub เพื่อเตรียมพร้อมสำหรับการสร้างเกม | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Space Game](./6-space-game/solution/README.md) | การวาดบน canvas | เรียนรู้เกี่ยวกับ Canvas API ที่ใช้สำหรับวาดองค์ประกอบบนหน้าจอ | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](./6-space-game/solution/README.md) | การเคลื่อนย้ายองค์ประกอบบนหน้าจอ | ค้นพบว่าองค์ประกอบสามารถเคลื่อนที่โดยใช้พิกัดคาร์ทีเซียนและ Canvas API ได้อย่างไร | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | การตรวจจับการชน | ทำให้องค์ประกอบชนกันและตอบสนองต่อกันโดยใช้การกดปุ่ม แถมมีฟังก์ชัน 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 | +| 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 และเส้นทางในเว็บแอป | เรียนรู้วิธีสร้างโครงสร้างของเว็บไซต์หลายหน้าโดยใช้ 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 | +| 23 | [Banking App](./7-bank-project/solution/README.md) | วิธีการดึงและใช้ข้อมูล | วิธีที่ข้อมูลไหลเข้าและออกจากแอปของคุณ วิธีการดึงข้อมูล เก็บ และกำจัดข้อมูล | [Data](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banking App](./7-bank-project/solution/README.md) | แนวคิดการจัดการสถานะ | เรียนรู้ว่าแอปของคุณเก็บสถานะอย่างไรและวิธีการจัดการมันอย่างเป็นโปรแกรม | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Browser/VScode Code](../../8-code-editor) | การทำงานกับ VScode | เรียนรู้วิธีการใช้ตัวแก้ไขโค้ด| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | | 26 | [AI Assistants](./9-chat-project/README.md) | การทำงานกับ AI | เรียนรู้วิธีสร้างผู้ช่วย AI ของคุณเอง | [AI Assistant project](./9-chat-project/README.md) | Chris | -## 🏫 รูปแบบการสอน +## 🏫 วิธีการสอน -หลักสูตรของเราถูกออกแบบโดยมีหลักการสอนสำคัญสองประการ: -* การเรียนรู้ผ่านโปรเจกต์ +หลักสูตรของเราออกแบบโดยมีหลักการทางการสอนสองประการสำคัญ: +* การเรียนรู้ผ่านโครงการ * แบบทดสอบบ่อยครั้ง -โปรแกรมนี้สอนพื้นฐานของ 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 ของบทเรียนทั้งหมดสามารถดูได้ [ที่นี่](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). - +คุณสามารถดาวน์โหลด PDF ของบทเรียนทั้งหมดได้ที่ [นี่](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ## 🎒 หลักสูตรอื่น ๆ -ทีมของเราผลิตหลักสูตรอื่นๆ ด้วย! เชิญดูได้ที่: +ทีมของเราผลิตคอร์สอื่นๆ อีก! ลองดู: ### LangChain [![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) [![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) - +[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) --- ### Azure / Edge / MCP / Agents @@ -250,21 +249,21 @@ ## การขอความช่วยเหลือ -หากคุณติดขัดหรือมีคำถามเกี่ยวกับการสร้างแอป AI เข้าร่วมกับผู้เรียนและนักพัฒนาที่มีประสบการณ์ในการอภิปรายเกี่ยวกับ MCP นี่คือชุมชนที่สนับสนุนซึ่งยินดีต้อนรับคำถามและแบ่งปันความรู้กันอย่างเสรี +ถ้าคุณติดปัญหาหรือมีคำถามใดๆ เกี่ยวกับการสร้างแอป AI เข้าร่วมกับผู้เรียนและนักพัฒนาที่มีประสบการณ์ในการสนทนาเกี่ยวกับ MCP นี่คือชุมชนที่ให้กำลังใจ ที่ซึ่งคำถามเป็นที่ต้อนรับและความรู้ถูกแบ่งปันอย่างเสรี [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -หากคุณมีความคิดเห็นเกี่ยวกับผลิตภัณฑ์หรือเกิดข้อผิดพลาดระหว่างการสร้างโปรดไปที่: +ถ้าคุณมีความคิดเห็นเกี่ยวกับผลิตภัณฑ์หรือพบข้อผิดพลาดในขณะสร้างโปรเจกต์ เยี่ยมชม: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) -## สิทธิ์การใช้งาน +## ใบอนุญาต -ที่เก็บนี้ได้รับอนุญาตภายใต้ใบอนุญาต MIT ดูไฟล์ [LICENSE](../../LICENSE) สำหรับข้อมูลเพิ่มเติม +ที่เก็บนี้ได้รับอนุญาตภายใต้ใบอนุญาต MIT ดูไฟล์ [LICENSE](../../LICENSE) สำหรับข้อมูลเพิ่มเติม. --- **ข้อจำกัดความรับผิดชอบ**: -เอกสารนี้ได้รับการแปลโดยใช้บริการแปลด้วย AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้เราจะพยายามให้มีความถูกต้อง โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่แม่นยำ เอกสารต้นฉบับในภาษาต้นทางถือเป็นแหล่งข้อมูลที่ถูกต้องและน่าเชื่อถือ สำหรับข้อมูลที่สำคัญ ควรใช้การแปลโดยมนุษย์มืออาชีพ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดที่เกิดจากการใช้การแปลนี้ +เอกสารนี้ได้รับการแปลโดยใช้บริการแปลด้วย AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้ความถูกต้องสูงสุด โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาต้นฉบับควรถือเป็นแหล่งข้อมูลที่ถูกต้องและน่าเชื่อถือ สำหรับข้อมูลที่สำคัญ ควรใช้บริการแปลโดยมนุษย์ผู้เชี่ยวชาญ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดใด ๆ ที่เกิดจากการใช้การแปลนี้ \ No newline at end of file diff --git a/translations/th/Roadmap.md b/translations/th/Roadmap.md new file mode 100644 index 000000000..40bdc3a25 --- /dev/null +++ b/translations/th/Roadmap.md @@ -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](https://github.com/Azure/co-op-translator) แม้เราจะพยายามให้ความแม่นยำ แต่โปรดทราบว่าการแปลแบบอัตโนมัติอาจมีข้อผิดพลาดหรือตกหล่น ข้อมูลต้นฉบับในภาษาต้นฉบับควรถูกนับเป็นแหล่งที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลโดยมืออาชีพ เรายังไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้ + \ No newline at end of file