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
- `9-chat-project/README.md` - AI chat assistent projekt
### Monorepo-struktur
### Monorepostruktur
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 curriculumoplevelse
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfraskrivelse**:
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på at sikre nøjagtighed, skal det bemærkes, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os ikke ansvar for eventuelle misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.
Dette dokument er oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det oprindelige dokument på dets modersmål bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.
# 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:
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:
@ -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.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Hvis du ønsker yderligere understøttede oversættelsessprog er listet [her](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Hvis du ønsker at få tilføjet yderligere oversættelsessprog, findes de understøttede sprog [her](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](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!
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.
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.
#### 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 `<your-repository-url>` med den URL, du lige har kopieret:
Åbn derefter [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) i [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon), og kør følgende kommando, hvor du erstatter `<your-repository-url>` med den URL, du lige har kopieret:
```bash
git clone <your-repository-url>
```
2. Åbn mappen i Visual Studio Code. Du kan gøre dette ved at klikke på **File** > **Open Folder** og vælge den mappe, du lige har klonet.
2. Åbn mappen i Visual Studio Code. Det kan du gøre ved at klikke på **File** > **Open Folder** og vælge den mappe, du lige har klonet.
> Anbefalede Visual Studio Code-udvidelser:
>
> * [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 |
| 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) | Kollisiondetektion | 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 |
| 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 lavrisiko 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:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](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
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](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.
Dette repository er licenseret under MIT-licensen. Se [LICENSE](../../LICENSE) filen for flere oplysninger.
Dette repository er licenseret under MIT-licensen. Se filen [LICENSE](../../LICENSE) for mere information.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**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.
# Vejkort for Microsofts Web-Dev-For-Beginners Repository
**Dette repository giver et vejkort til at lære webudviklingsgrundlag med fokus på JavaScript, HTML og CSS. Pensum er fleksibelt og kan tages helt eller delvist, med 24 lektioner fordelt over 12 uger.**
## Vigtige Milepæle
* **Uger 1-3:**
* Introduktion til programmeringssprog og værktøjer i faget
* Grundlæggende om GitHub
* Tilgængelighed
* JS grundlæggende: datatyper, funktioner og metoder
* At træffe beslutninger med JS
* **Uger 4-6:**
* Arrays og løkker
* Terrarium: HTML i praksis
* CSS i praksis
* JavaScript closures
* DOM-manipulation
* **Uger 7-9:**
* Typing Game: Begivenhedsdrevet programmering
* Green Browser Extension: Arbejde med browsere
* Bygning af en formular, kald til en API og lagring af variabler i local storage
* Baggrundsprocesser i browseren
* Webperformance
* **Uger 10-12:**
* Space Game: Mere avanceret spiludvikling med JavaScript
* Tegning på canvas
* Flytning af elementer rundt på skærmen
* Kollisionsdetektion
* Holde styr på point, afslutte og genstarte spillet
* Banking App: HTML-skabeloner og ruter i en webapp
* Bygning af login- og registreringsformular
* Metoder til at hente og bruge data
* Begreber om state management
## Læringsudbytte
**Ved at gennemføre dette vejkort, vil studerende få praktisk erfaring med at bygge et tastaturspil, virtuelt terrarium, miljøvenlig browserudvidelse, space-invader-stil spil og en banking app for virksomheder. De vil også opbygge en solid forståelse af webudviklingsgrundlag.**
## Yderligere Ressourcer
* Dette repository tilbyder en masse ressourcer til videre læring, inklusive tutorials, kodeeksempler og udfordringer.
* Microsoft Learn-platformen tilbyder en række webudviklingskurser og læringsstier.
* Online fællesskaber som Stack Overflow og MDN Web Docs giver værdifuld støtte og ressourcer til webudviklere.
**Jeg håber, at dette vejkort hjælper dig på din webudviklingsrejse!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfraskrivelse**:
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiske oversættelser kan indeholde fejl eller unøjagtigheder. Det oprindelige dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritiske oplysninger anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.
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
Även om det inte är en traditionell monorepo, innehåller detta repository flera oberoende projekt:
Även om detta inte är ett traditionellt monorepo, innehåller detta bibliotek flera oberoende projekt:
- Varje lektion är självständig
- Projekt delar inte beroenden
- Arbeta med individuella projekt utan att påverka andra
- Klona hela repositoryt för hela kursupplevelsen
- Projekt delar inga beroenden
- Arbeta med enskilda projekt utan att påverka andra
- Klona hela repot för full utbildningsupplevelse
---
**Ansvarsfriskrivning**:
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, vänligen notera att automatiska översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess originalspråk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfriskrivning**:
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet 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.
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!
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!
> 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:
@ -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.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Om du önskar att få stöd för ytterligare översättningsspråk se listan [här](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Om du vill ha ytterligare översättningsspråk stödjs dessa [här](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](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!
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.
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.
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 `<your-repository-url>` mot URL:en du just kopierade:
@ -107,82 +123,82 @@ Vi rekommenderar att använda [Visual Studio Code](https://code.visualstudio.com
git clone <your-repository-url>
```
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`.
| 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 |
| 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 beslutsfattandemetoder | [Beslutsfattande](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Arrayer och loopar | Arbeta med data med arrayer och loopar i JavaScript | [Arrayer och loopar](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 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 |
| 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 responsivtwebbdesign | [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
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agenter
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](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
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-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
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](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
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?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.
Detta förvar är licensierat under MIT-licensen. Se [LICENSE](../../LICENSE)-filen för mer information.
Detta förråd är licensierat under MIT-licensen. Se filen [LICENSE](../../LICENSE) för mer information.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**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.
# Färdplan för Microsofts Web-Dev-For-Beginners Repository
**Detta repository erbjuder en färdplan för att lära sig grunderna i webbutveckling med fokus på JavaScript, HTML och CSS. Läroplanen är flexibel och kan genomföras helt eller delvis, med 24 lektioner spridda över 12 veckor.**
## Viktiga milstolpar
* **Veckor 1-3:**
* Introduktion till programmeringsspråk och verktyg för yrket
* Grunderna i GitHub
* Tillgänglighet
* JS-grunder: datatyper, funktioner och metoder
* Att fatta beslut med JS
* **Veckor 4-6:**
* Arrayer och loopar
* Terrarium: HTML i praktiken
* CSS i praktiken
* JavaScript-closures
* DOM-manipulation
* **Veckor 7-9:**
* Typningsspel: Händelsestyrd programmering
* Green Browser Extension: Arbeta med webbläsare
* Bygga ett formulär, anropa ett API och lagra variabler i lokal lagring
* Bakgrundsprocesser i webbläsaren
* Webbprestanda
* **Veckor 10-12:**
* Space Game: Mer avancerad spelutveckling med JavaScript
* Rita på canvas
* Flytta element runt på skärmen
* Kollisiondetektion
* Hålla poäng, avsluta och starta om spelet
* Banking App: HTML-mallar och rutter i en webbapp
* Bygga inloggnings- och registreringsformulär
* Metoder för hämtning och användning av data
* Begrepp för tillståndshantering
## Lärandemål
**Genom att fullfölja denna färdplan får studenter praktisk erfarenhet av att bygga ett typningsspel, virtuellt terrarium, miljövänligt webbläsartillägg, space-invader-liknande spel och en bankapp för företag. De kommer också att utveckla en gedigen förståelse för webbutvecklingens grunder.**
## Ytterligare resurser
* Detta repository erbjuder en mängd resurser för vidare lärande, inklusive handledningar, kodexempel och utmaningar.
* Microsoft Learn-plattformen erbjuder olika kurser och lärvägar inom webbutveckling.
* Online-communityn som Stack Overflow och MDN Web Docs tillhandahåller värdefullt stöd och resurser för webbutvecklare.
**Jag hoppas att denna färdplan hjälper dig på din resa inom webbutveckling!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfriskrivning**:
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi eftersträvar noggrannhet, var vänlig uppmärksam på att automatiska översättningar kan innehålla fel eller brister. Det ursprungliga dokumentet på dess ursprungliga språk bör anses vara den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för några missförstånd eller feltolkningar som uppstår från användningen av denna översättning.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
| 01 | Getting Started | บทนำสู่การเขียนโปรแกรมและเครื่องมือการทำงาน | เรียนรู้พื้นฐานเบื้องต้นของภาษาการเขียนโปรแกรมส่วนใหญ่และเกี่ยวกับซอฟต์แวร์ที่ช่วยนักพัฒนามืออาชีพทำงานของพวกเขา | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | การใช้งาน HTML | สร้าง HTML เพื่อสร้างเทอร์ราเรียมออนไลน์ โดยเน้นการสร้างเลย์เอาต์ | [Introduction to HTML](./3-terrarium/1-intro-to-html/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 |
| 01 | Getting Started | บทนำสู่การเขียนโปรแกรมและเครื่องมือที่ใช้ในการทำงาน | เรียนรู้พื้นฐานของภาษาการเขียนโปรแกรมส่วนใหญ่และเกี่ยวกับซอฟต์แวร์ที่ช่วยให้นักพัฒนามืออาชีพทำงานได้อย่างมีประสิทธิภาพ | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML ในการปฏิบัติ | สร้าง HTML เพื่อสร้างเทอร์ราเรียมออนไลน์ โดยเน้นการสร้างเลย์เอาต์ | [Introduction to HTML](./3-terrarium/1-intro-to-html/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 |
แม้ว่าเราจะตั้งใจไม่แนะนำ 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) ของเรา เรายินดีรับฟังความคิดเห็นในการพัฒนาของคุณ!
ไฟล์ PDF ของบทเรียนทั้งหมดสามารถดูได้ [ที่นี่](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
คุณสามารถดาวน์โหลด PDF ของบทเรียนทั้งหมดได้ที่ [นี่](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)
## 🎒 หลักสูตรอื่น ๆ
ทีมของเราผลิตหลักสูตรอื่นๆ ด้วย! เชิญดูได้ที่:
ทีมของเราผลิตคอร์สอื่นๆ อีก! ลองดู:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](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 นี่คือชุมชนที่ให้กำลังใจ ที่ซึ่งคำถามเป็นที่ต้อนรับและความรู้ถูกแบ่งปันอย่างเสรี
localizeflow[bot]
2 days ago