[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
# Webudvikling for begyndere - Et kursusforløb
[](https://discord.com/invite/ByRwuEEgH4)
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 læring med vores effektive projektbaserede undervisningsmetode. Start din koderejse i dag!
Følg disse trin for at komme i gang med at bruge ressourcerne:
3. [**Deltag i Azure AI Foundry Discord og mød eksperter og andre udviklere**](https://discord.com/invite/ByRwuEEgH4)
#### 🧑🎓 _Er du studerende?_
# Webudvikling for begyndere - Et kursus
Besøg [**Student Hub-siden**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), hvor du finder ressourcer for begyndere, studenterpakker og endda måder at få en gratis certifikatvoucher. Dette er siden, du bør bogmærke og tjekke regelmæssigt, da vi opdaterer indholdet månedligt.
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. Engager dig med quizzer, diskussioner og praktiske opgaver. Forbedr dine færdigheder og optimer din viden med vores effektive projektbaserede undervisningsmetode. Start din koderejse i dag!
### 📣 Meddelelse - _Nyt kursusforløb_ om Generativ AI for JavaScript er netop udgivet
#### 🧑🎓 _Er du studerende?_
Gå ikke glip af vores nye kursusforløb om Generativ AI!
Besøg [**Student Hub-siden**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), hvor du finder ressourcer for begyndere, studenterpakker og endda måder at få en gratis certifikatvoucher. Dette er siden, du vil bogmærke og tjekke fra tid til anden, da vi skifter indhold månedligt.
Besøg [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for at komme i gang!
### 📣 Meddelelse - _Nyt kursus_ om Generativ AI for JavaScript er netop udgivet
<div>
<imgsrc="./images/background.png"width="600px"/>
</div>
Gå ikke glip af vores nye Generativ AI-kursus!
- Lektioner, der dækker alt fra det grundlæggende til RAG.
- Interager med historiske figurer ved hjælp af GenAI og vores ledsagerapp.
- Sjov og engagerende fortælling, hvor du rejser i tiden!
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 videnstest og en udfordring, der guider dig i at lære emner som:
- Prompting og prompt engineering
- Tekst- og billedapp-generering
- Søgeapps
> **Lærere**, vi har [inkluderet nogle forslag](for-teachers.md) til, hvordan man kan bruge dette kursusforløb. Vi vil meget gerne høre din feedback [i vores diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
Besøg [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) for at komme i gang!
**[Studerende](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for hver lektion, start med en quiz før lektionen, læs derefter undervisningsmaterialet, gennemfør de forskellige aktiviteter, og test din forståelse med quizzen efter lektionen.
## 🌱 Kom godt i gang
For at forbedre din læringsoplevelse, forbind med dine medstuderende for at arbejde på projekterne sammen! Diskussioner opfordres i vores [diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), hvor vores team af moderatorer vil være tilgængelige for at besvare dine spørgsmål.
> **Lærere**, vi har [inkluderet nogle forslag](for-teachers.md) til, hvordan man bruger dette kursus. Vi vil meget gerne høre din feedback [i vores diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
For at udvide din uddannelse 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.
**[Studerende](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for hver lektion, start med en quiz før lektionen og fortsæt med at læse materialet, fuldføre de forskellige aktiviteter og teste din forståelse med quizzen efter lektionen.
### 📋 Opsætning af dit miljø
For at forbedre din læringsoplevelse, forbind med dine medstuderende for at arbejde på projekterne sammen! Diskussioner opfordres i vores [diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), hvor vores team af moderatorer vil være tilgængelige for at besvare dine spørgsmål.
Dette kursusforløb har et udviklingsmiljø klar til brug! Når du starter, kan du vælge at køre kursusforløbet i en [Codespace](https://github.com/features/codespaces/) (_et browserbaseret miljø uden behov for installationer_) 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).
For at udvide din uddannelse 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.
#### Opret dit repository
For nemt at gemme dit arbejde anbefales det, at du opretter din egen kopi af dette repository. Du kan gøre dette ved at klikke på knappen **Use this template** øverst på siden. Dette vil oprette et nyt repository i din GitHub-konto med en kopi af kursusforløbet.
### 📋 Opsætning af dit miljø
Følg disse trin:
1. **Fork repositoryet**: Klik på "Fork"-knappen øverst til højre på denne side.
Dette kursus har et udviklingsmiljø klar til brug! Når du starter, kan du vælge at køre kurset i en [Codespace](https://github.com/features/codespaces/) (_et browserbaseret miljø uden behov for installationer_), 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).
#### Kør kursusforløbet i en Codespace
#### Opret dit repository
For nemt at gemme dit arbejde anbefales det, at du opretter din egen kopi af dette repository. Du kan gøre dette ved at klikke på knappen **Use this template** øverst på siden. Dette vil oprette et nyt repository i din GitHub-konto med en kopi af kurset.
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.
Følg disse trin:
1. **Fork repositoryet**: Klik på "Fork"-knappen øverst til højre på denne side.
I din kopi af dette repository, som du har oprettet, klik på **Code**-knappen og vælg **Open with Codespaces**. Dette vil oprette en ny Codespace, hvor du kan arbejde.
For at køre dette kursusforløb 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](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/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 det, der passer bedst til dig.
[!Codespace](../..)./images/createcodespace.png)
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).
#### Kør kurset lokalt på din computer
1. Klon dit repository til din computer. Du kan gøre dette ved at klikke på knappen **Code** og kopiere URL'en:
For at køre dette kursus 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 hvert af disse værktøjer, så du kan vælge det, der passer bedst til dig.
<imgsrc="./images/createcodespace.png"alt="Copy your repository URL"style="width:270px;"/>
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).
Å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 `<your-repository-url>` erstattes med den URL, du lige har kopieret:
1. Klon dit repository til din computer. Du kan gøre dette ved at klikke på **Code**-knappen 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 `<your-repository-url>` erstattes 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.
> 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
## 📂 Hver lektion inkluderer:
- Valgfri sketchnote
- Valgfri supplerende video
- Quiz før lektionen
- Skriftlig lektion
- For projektbaserede lektioner, trin-for-trin vejledninger til at bygge projektet
- Videnstests
- En udfordring
- Supplerende læsning
- Opgave
- Quiz efter lektionen
> **En note om quizzer**: Alle quizzer findes i Quiz-app-mappen, 48 quizzer i alt med tre spørgsmål hver. De er linket fra lektionerne, og quiz-appen kan køres lokalt eller implementeres på Azure; følg instruktionerne i `quiz-app`-mappen. Debliver gradvist lokaliseret.
| 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 i deres arbejde | [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, inkl. teamwork | Hvordan man bruger GitHub i dit projekt, og 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 | Det 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 logikflow | [Funktioner og metoder](/2-js-basics/2-functions-methods/README.md) | Jasmine og Christopher |
| 06 | JS Grundlæggende | Beslutningstagning med JS | Lær hvordan man skaber 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å 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 for at style det online terrarium med fokus på det grundlæggende i CSS, inkl. 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-grænseflade med fokus på closures og DOM-manipulation | [JavaScript Closures, DOM-manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](/4-typing-game/solution/README.md) | Byg et skrive-spil | Lær hvordan man bruger tastaturhændelser til at styre logikken i din JavaScript-app | [Event-drevet programmering](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Arbejde med browsere | Lær hvordan browsere fungerer, deres historie, og hvordan man opbygger 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 formular, kalde en API og gemme variabler i lokal storage | Byg JavaScript-elementerne i din browserudvidelse til at kalde en API ved hjælp af variabler gemt i lokal storage | [APIs, formularer og lokal storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Baggrundsprocesser i browseren, webpræstationer | Brug browserens baggrundsprocesser til at administrere udvidelsens ikon; lær om webpræstationer og nogle optimeringer | [Baggrundsopgaver og præstationer](/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 komposition samt Pub/Sub-mønsteret som forberedelse til at bygge et spil | [Introduktion til avanceret spiludvikling](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution/README.md) | Tegning på canvas | Lær om Canvas API, som 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 | [Flytte elementer rundt](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution/README.md) | Kollisionsdetektion | Få elementer til at kollidere og reagere på hinanden ved hjælp af tastetryk og tilføj en cooldown-funktion for at sikre spillets ydeevne | [Kollisionsdetektion](/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æstationer | [Holde styr på point](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution/README.md) | Afslutte og genstarte spillet | Lær om at afslutte og genstarte spillet, herunder oprydning af aktiver og nulstilling af variabelværdier | [Afslutningsbetingelse](/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 opbygger strukturen for en fler-sidet webside ved hjælp af routing og HTML-skabeloner | [HTML-skabeloner og ruter](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | Bygge 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 det, gemmer det og sletter det | [Data](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | Koncepter for tilstandsadministration | Lær hvordan din app bevarer tilstand og hvordan man administrerer den programmæssigt | [Tilstandsadministration](/7-bank-project/4-state-management/README.md) | Yohan |
```
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.
> Anbefalede Visual Studio Code-udvidelser:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - for at forhåndsvise HTML-sider i Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - for at hjælpe dig med at skrive kode hurtigere
## 📂 Hver lektion inkluderer:
- valgfri sketchnote
- valgfri supplerende video
- opvarmningsquiz før lektionen
- skriftlig lektion
- for projektbaserede lektioner, trin-for-trin vejledninger til at bygge projektet
- videnstest
- en udfordring
- supplerende læsning
- opgave
- [quiz efter lektionen](https://ff-quizzes.netlify.app/)
> **En note om quizzer**: Alle quizzer findes i Quiz-app-mappen, 48 quizzer i alt med tre spørgsmål hver. De er tilgængelige [her](https://ff-quizzes.netlify.app/), og quiz-appen kan køres lokalt eller implementeres på Azure; følg instruktionerne i `quiz-app`-mappen.
## 🗃️ Lektioner
| | Projekt Navn | Koncepter Lært | 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 i deres arbejde | [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 teamwork | Hvordan man bruger GitHub i dit projekt, og 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 | Det 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 logikflow | [Funktioner og Metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine og Christopher |
| 06 | JS Grundlæggende | Beslutningstagning med JS | Lær hvordan man skaber 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å 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 for 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 JavaScript-koden, der gør terrariet til en drag/drop-grænseflade, med fokus på closures og DOM-manipulation | [JavaScript Closures, DOM-manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Byg et Typingspil | Lær at bruge tastaturbegivenheder til at styre logikken i din JavaScript-app | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Arbejde med Browsere | Lær hvordan browsere fungerer, deres historie, og hvordan man opbygger de første elementer af en browserudvidelse | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bygning af en formular, kald til en API og lagring af variabler lokalt | Byg JavaScript-elementerne i din browserudvidelse til at kalde en API ved hjælp af variabler, der er gemt lokalt | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Baggrundsprocesser i browseren, webperformance | Brug browserens baggrundsprocesser til at administrere udvidelsens ikon; lær om webperformance og optimeringer | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Mere avanceret spiludvikling med JavaScript | Lær om arv ved hjælp af både klasser og komposition samt Pub/Sub-mønsteret som forberedelse til at bygge et spil | [Introduction to Advanced Game Development](./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, som bruges til at tegne elementer på en skærm | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Flytte elementer rundt på skærmen | Opdag hvordan elementer kan få bevægelse ved hjælp af kartesiske koordinater og Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Kollisionsdetektion | Få elementer til at kollidere og reagere på hinanden ved hjælp af tastetryk og tilføj en cooldown-funktion for at sikre performance | [Collision Detection](./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 performance | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Afslutte og genstarte spillet | Lær om at afslutte og genstarte spillet, herunder oprydning af aktiver og nulstilling af variabelværdier | [The Ending Condition](./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 opbygger strukturen for en fler-sidet webapps arkitektur ved hjælp af routing og HTML-skabeloner | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Byg en login- og registreringsformular | Lær om at bygge formularer og håndtere valideringsrutiner | [Forms](./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 det, gemmer det og sletter det | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Koncepter for tilstandsadministration | Lær hvordan din app bevarer tilstand og hvordan man administrerer den programmatisk | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
## 🏫 Pædagogik
@ -155,23 +158,23 @@ Vores pensum er designet med to centrale pædagogiske principper:
* projektbaseret læring
* hyppige quizzer
Programmet underviser i grundlæggende JavaScript, HTML og CSS samt de nyeste værktøjer og teknikker, som moderne webudviklere bruger. Studerende får mulighed for at opbygge praktisk erfaring ved at lave et skrive-spil, et virtuelt terrarium, en miljøvenlig browserudvidelse, et spil i stil med Space Invaders og en bankapp til virksomheder. Ved slutningen af serien vil de 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 moderne webudviklere bruger. Studerende får mulighed for at opbygge praktisk erfaring ved at udvikle et typingspil, et virtuelt terrarium, en miljøvenlig browserudvidelse, et space-invader-lignende spil og en bankapp til virksomheder. Ved afslutningen af serien vil de studerende have opnået en solid forståelse af webudvikling.
> 🎓 Du kan tage de første par lektioner i dette pensum som en [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn!
Ved at sikre, at indholdet er knyttet til projekter, bliver processen mere engagerende for de studerende, og fastholdelsen af koncepter vil blive forbedret. Vi har også skrevet 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, hvor nogle af forfatterne har bidraget til dette pensum.
Ved at sikre, at indholdet er projektorienteret, bliver processen mere engagerende for de studerende, og konceptforståelsen vil blive styrket. Vi har også skrevet flere introduktionslektioner i JavaScript-grundlæggende for at introducere begreber, ledsaget af 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 lav-stress quiz før en klasse intentionen hos den studerende 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å og bliver gradvist mere komplekse ved slutningen af den 12-ugers cyklus.
Derudover sætter en lav-stress quiz før en klasse fokus på emnet for de studerende, 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å og bliver gradvist mere komplekse i løbet af den 12-ugers cyklus.
Selvom vi bevidst har undgået at introducere JavaScript-frameworks for at fokusere på de grundlæggende færdigheder, der er nødvendige som webudvikler, før man adopterer et framework, ville et godt næste skridt efter at have gennemført dette pensum være at lære om Node.js via en anden samling af 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-frameworks for at koncentrere os om de grundlæggende færdigheder, der er nødvendige som webudvikler, før man adopterer et framework, ville et godt næste skridt efter at have gennemført dette pensum være at lære om Node.js via en anden samling af videoer: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Besøg vores [Code of Conduct](CODE_OF_CONDUCT.md) og [Contributing](CONTRIBUTING.md) retningslinjer. Vi byder din konstruktive feedback velkommen!
> Besøg vores [Code of Conduct](CODE_OF_CONDUCT.md) og [Contributing](CONTRIBUTING.md)-retningslinjer. Vi modtager gerne din konstruktive feedback!
## 🧭 Offline adgang
Du kan køre denne dokumentation offline ved at bruge [Docsify](https://docsify.js.org/#/). Fork denne repo, [installer Docsify](https://docsify.js.org/#/quickstart) på din lokale maskine, og skriv derefter `docsify serve` i rodmappen af denne repo. 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 denne repo, [installer Docsify](https://docsify.js.org/#/quickstart) på din lokale maskine, og skriv derefter `docsify serve` i rodmappen af denne repo. Websitet vil blive serveret på port 3000 på din localhost: `localhost:3000`.
## 📘 PDF
@ -182,26 +185,26 @@ En PDF af alle lektionerne kan findes [her](https://microsoft.github.io/Web-Dev-
Vores team producerer andre kurser! Tjek:
- [Generativ AI for begyndere](https://aka.ms/genai-beginners)
- [Generativ AI for begyndere .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
- [Generativ AI med JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
- [Generativ AI med Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
- [AI for begyndere](https://aka.ms/ai-beginners)
- [Data Science for begyndere](https://aka.ms/datascience-beginners)
- [ML for begyndere](https://aka.ms/ml-beginners)
- [Cybersikkerhed for begyndere](https://github.com/microsoft/Security-101)
- [Webudvikling for begyndere](https://aka.ms/webdev-beginners)
- [IoT for begyndere](https://aka.ms/iot-beginners)
- [XR-udvikling for begyndere](https://github.com/microsoft/xr-development-for-beginners)
- [Mastering GitHub Copilot til agentisk brug](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
- [Mastering GitHub Copilot for C#/.NET-udviklere](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
- [Vælg dit eget Copilot-eventyr](https://github.com/microsoft/CopilotAdventures)
- [Generative AI for Beginners](https://aka.ms/genai-beginners)
- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
- [Generative AI with JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
- [Generative AI with Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
- [AI for Beginners](https://aka.ms/ai-beginners)
- [Data Science for Beginners](https://aka.ms/datascience-beginners)
- [ML for Beginners](https://aka.ms/ml-beginners)
- [Cybersecurity for Beginners](https://github.com/microsoft/Security-101)
- [Web Dev for Beginners](https://aka.ms/webdev-beginners)
- [IoT for Beginners](https://aka.ms/iot-beginners)
- [XR Development for Beginners](https://github.com/microsoft/xr-development-for-beginners)
- [Mastering GitHub Copilot for Agentic use](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
- [Mastering GitHub Copilot for C#/.NET Developers](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
- [Choose Your Own Copilot Adventure](https://github.com/microsoft/CopilotAdventures)
## Licens
Dette repository er licenseret under MIT-licensen. Se [LICENSE](../../LICENSE)filen for mere information.
Dette repository er licenseret under MIT-licensen. Se [LICENSE](../../LICENSE)-filen 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 bestræber os på at opnå 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 ikke ansvar for eventuelle misforståelser eller fejltolkninger, der måtte opstå 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 er ikke ansvarlige for eventuelle misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://discord.com/invite/ByRwuEEgH4)
Følg disse stegene for å komme i gang med ressursene:
3. [**Bli med i Azure AI Foundry Discord og møt eksperter og andre utviklere**](https://discord.com/invite/ByRwuEEgH4)
# Webutvikling for nybegynnere - Et kurs
Lær grunnleggende webutvikling med vårt 12-ukers omfattende kurs fra Microsoft Cloud Advocates. Hver av de 24 leksjonene gir deg praktisk erfaring med JavaScript, CSS og HTML gjennom prosjekter som terrarier, nettleserutvidelser og romspill. Delta i quizzer, diskusjoner og praktiske oppgaver. Forbedre ferdighetene dine og optimaliser læringen med vår effektive prosjektbaserte tilnærming. Start din kode-reise i dag!
Lær det grunnleggende innen webutvikling med vårt 12-ukers omfattende kurs fra Microsoft Cloud Advocates. Hver av de 24 leksjonene går i dybden på JavaScript, CSS og HTML gjennom praktiske prosjekter som terrarier, nettleserutvidelser og romspill. Delta i quizzer, diskusjoner og praktiske oppgaver. Forbedre ferdighetene dine og optimaliser kunnskapsbeholdningen med vår effektive prosjektbaserte pedagogikk. Start din kode-reise i dag!
#### 🧑🎓 _Er du student?_
Besøk [**Student Hub-siden**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) hvor du finner ressurser for nybegynnere, studentpakker og til og med måter å få en gratis sertifikatkupong. Dette er siden du bør bokmerke og sjekke jevnlig, da vi bytter ut innhold månedlig.
Besøk [**Student Hub-siden**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) hvor du finner ressurser for nybegynnere, studentpakker og til og med måter å få en gratis sertifikatvoucher. Dette er siden du bør bokmerke og sjekke jevnlig, da vi bytter ut innhold månedlig.
### 📣 Kunngjøring - _Nytt kurs_ om Generativ AI for JavaScript er nettopp lansert
@ -35,22 +42,18 @@ Ikke gå glipp av vårt nye kurs om Generativ AI!
Besøk [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for å komme i gang!
Hver leksjon inkluderer en oppgave, en kunnskapssjekk og en utfordring for å lære emner som:
Hver leksjon inkluderer en oppgave, en kunnskapssjekk og en utfordring for å veilede deg i læring av emner som:
- Prompting og prompt engineering
- Generering av tekst- og bildeapplikasjoner
- Søkeapplikasjoner
- Tekst- og bildeapp-generering
- Søkeapper
Besøk [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for å komme i gang!
@ -58,38 +61,38 @@ Besøk [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for å k
> **Lærere**, vi har [inkludert noen forslag](for-teachers.md) om hvordan du kan bruke dette kurset. Vi vil gjerne ha tilbakemeldingen din [i vårt diskusjonsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Studenter](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for hver leksjon, start med en quiz før forelesningen og fortsett med å lese forelesningsmaterialet, fullføre de ulike aktivitetene og sjekke forståelsen din med quizen etter forelesningen.
**[Lærende](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for hver leksjon, start med en quiz før forelesningen og fortsett med å lese forelesningsmaterialet, fullføre de ulike aktivitetene og sjekke forståelsen din med quizen etter forelesningen.
For å forbedre læringsopplevelsen din, koble deg sammen med andre for å jobbe på prosjektene! Diskusjoner oppmuntres i vårt [diskusjonsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) hvor vårt team av moderatorer vil være tilgjengelige for å svare på spørsmålene dine.
For å forbedre læringsopplevelsen din, koble deg sammen med andre for å jobbe på prosjektene sammen! Diskusjoner oppmuntres i vårt [diskusjonsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) hvor vårt team av moderatorer vil være tilgjengelige for å svare på spørsmålene dine.
For å utvide utdanningen din, anbefaler vi sterkt å utforske [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for ekstra studiemateriale.
For å utvide utdanningen din, anbefaler vi sterkt å utforske [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for ytterligere studiemateriale.
### 📋 Sette opp miljøet ditt
Dette kurset har et utviklingsmiljø klart til bruk! Når du starter, kan du velge å kjøre kurset i en [Codespace](https://github.com/features/codespaces/) (_et nettleserbasert miljø uten behov for installasjoner_), eller lokalt på datamaskinen din ved hjelp av en teksteditor som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Opprett ditt eget repository
For å enkelt lagre arbeidet ditt, anbefales det at du oppretter en egen kopi av dette repositoryet. Du kan gjøre dette ved å klikke på **Use this template**-knappen øverst på siden. Dette vil opprette et nytt repository i din GitHub-konto med en kopi av kurset.
#### Opprett repositoryen din
For å enkelt lagre arbeidet ditt, anbefales det at du oppretter din egen kopi av denne repositoryen. Du kan gjøre dette ved å klikke på **Bruk denne malen**-knappen øverst på siden. Dette vil opprette en ny repository i GitHub-kontoen din med en kopi av kurset.
Følg disse stegene:
1. **Fork repositoryet**: Klikk på "Fork"-knappen øverst til høyre på denne siden.
I kopien av repositoryet du opprettet, klikk på **Code**-knappen og velg **Open with Codespaces**. Dette vil opprette en ny Codespace for deg å jobbe i.
I kopien av repositoryen du opprettet, klikk på **Code**-knappen og velg **Open with Codespaces**. Dette vil opprette en ny Codespace for deg å jobbe i.
For å kjøre dette kurset lokalt på datamaskinen din, trenger du en teksteditor, en nettleser og et kommandolinjeverktøy. Vår første leksjon, [Introduksjon til programmeringsspråk og verktøy](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), vil gå gjennom ulike alternativer for hvert av disse verktøyene slik at du kan velge det som passer best for deg.
For å kjøre dette kurset lokalt på datamaskinen din, trenger du en teksteditor, en nettleser og et kommandolinjeverktøy. Vår første leksjon, [Introduksjon til programmeringsspråk og verktøy](../../1-getting-started-lessons/1-intro-to-programming-languages), vil gå gjennom ulike alternativer for hvert av disse verktøyene slik at du kan velge det som passer best for deg.
Vi anbefaler å bruke [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) som teksteditor, som også har en innebygd [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Du kan laste ned Visual Studio Code [her](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Vår anbefaling er å bruke [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) som editor, som også har en innebygd [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Du kan laste ned Visual Studio Code [her](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klon repositoryet til datamaskinen din. Du kan gjøre dette ved å klikke på **Code**-knappen og kopiere URL-en:
1. Klon repositoryen til datamaskinen din. Du kan gjøre dette ved å klikke på **Code**-knappen og kopiere URL-en:
<imgsrc="./images/createcodespace.png"alt="Copy your repository URL"style="width:270px;"/>
[!CodeSpace](./images/createcodespace.png)
Deretter åpner du [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) i [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) og kjører følgende kommando, hvor `<your-repository-url>` erstattes med URL-en du nettopp kopierte:
@ -101,7 +104,7 @@ Vi anbefaler å bruke [Visual Studio Code](https://code.visualstudio.com/?WT.mc_
> Anbefalte Visual Studio Code-utvidelser:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - for å forhåndsvise HTML-sider direkte i Visual Studio Code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - for å forhåndsvise HTML-sider i Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - for å hjelpe deg med å skrive kode raskere
## 📂 Hver leksjon inkluderer:
@ -110,43 +113,43 @@ Vi anbefaler å bruke [Visual Studio Code](https://code.visualstudio.com/?WT.mc_
- valgfri tilleggsvideo
- oppvarmingsquiz før leksjonen
- skriftlig leksjon
- for prosjektbaserte leksjoner, steg-for-steg guider for å bygge prosjektet
- for prosjektbaserte leksjoner, steg-for-steg guider for hvordan man bygger prosjektet
- kunnskapssjekker
- en utfordring
- tilleggslesing
- oppgave
- quiz etter leksjonen
- [quiz etter leksjonen](https://ff-quizzes.netlify.app/)
> **En merknad om quizzer**: Alle quizzer er plassert i Quiz-app-mappen, totalt 48 quizzer med tre spørsmål hver. De er lenket fra leksjonene, og quiz-appen kan kjøres lokalt eller distribueres til Azure; følg instruksjonene i `quiz-app`-mappen. De blir gradvis oversatt.
> **En merknad om quizzer**: Alle quizzer er inkludert i Quiz-app-mappen, totalt 48 quizzer med tre spørsmål hver. De er tilgjengelige [her](https://ff-quizzes.netlify.app/) og quiz-appen kan kjøres lokalt eller distribueres til Azure; følg instruksjonene i `quiz-app`-mappen.
| 01 | Komme i gang | Introduksjon til programmering og verktøyene som brukes | Lær de grunnleggende prinsippene bak de fleste programmeringsspråk og om programvare som hjelper profesjonelle utviklere i jobben | [Introduksjon til programmeringsspråk og verktøy](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Komme i gang | Grunnleggende om GitHub, inkludert samarbeid i team | Hvordan bruke GitHub i prosjektet ditt, og hvordan samarbeide med andre om en kodebase | [Introduksjon til GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Komme i gang | Tilgjengelighet | Lær det grunnleggende om webtilgjengelighet | [Grunnleggende om tilgjengelighet](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Grunnleggende | JavaScript Datatyper | Det grunnleggende om JavaScript-datatyper | [Datatyper](/2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Grunnleggende | Funksjoner og metoder | Lær om funksjoner og metoder for å styre logikken i en applikasjon | [Funksjoner og metoder](/2-js-basics/2-functions-methods/README.md) | Jasmine og Christopher |
| 06 | JS Grunnleggende | Ta beslutninger med JS | Lær hvordan du lager betingelser i koden din ved hjelp av beslutningsmetoder | [Ta beslutninger](/2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Grunnleggende | Arrays og løkker | Jobb med data ved hjelp av arrays og løkker i JavaScript | [Arrays og løkker](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML i praksis | Bygg HTML for å lage et online terrarium, med fokus på å bygge et layout | [Introduksjon til HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS i praksis | Bygg CSS for å style det online terrariet, med fokus på det grunnleggende i CSS, inkludert å gjøre siden responsiv | [Introduksjon til CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](/3-terrarium/solution/README.md) | JavaScript Closures, DOM-manipulasjon | Bygg JavaScript for å få terrariet til å fungere som et dra/slipp-grensesnitt, med fokus på closures og DOM-manipulasjon | [JavaScript Closures, DOM-manipulasjon](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Skrivespill](/4-typing-game/solution/README.md) | Bygg et skrivespill | Lær hvordan du bruker tastaturhendelser for å styre logikken i JavaScript-appen din | [Hendelsesdrevet programmering](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Arbeide med nettlesere | Lær hvordan nettlesere fungerer, deres historie, og hvordan du kan sette opp de første elementene i en nettleserutvidelse | [Om nettlesere](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Bygge et skjema, kalle en API og lagre variabler i lokal lagring | Bygg JavaScript-elementene til nettleserutvidelsen din for å kalle en API ved hjelp av variabler lagret i lokal lagring | [API-er, skjemaer og lokal lagring](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Bakgrunnsprosesser i nettleseren, webytelse | Bruk nettleserens bakgrunnsprosesser for å administrere utvidelsens ikon; lær om webytelse og noen optimaliseringer | [Bakgrunnsoppgaver og ytelse](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution/README.md) | Mer avansert spillutvikling med JavaScript | Lær om arv ved bruk av både klasser og komposisjon, samt Pub/Sub-mønsteret, som forberedelse til å bygge et spill | [Introduksjon til avansert spillutvikling](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution/README.md) | Tegne på canvas | Lær om Canvas API, som brukes til å tegne elementer på en skjerm | [Tegne 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å skjermen | Oppdag hvordan elementer kan få bevegelse ved hjelp av kartesiske koordinater og Canvas API | [Flytte elementer rundt](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution/README.md) | Kollisjonsdeteksjon | Få elementer til å kollidere og reagere på hverandre ved hjelp av tastetrykk, og legg til en nedkjølingsfunksjon for ytelse | [Kollisjonsdeteksjon](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution/README.md) | Holde poeng | Utfør matematiske beregninger basert på spillets status og ytelse | [Holde poeng](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution/README.md) | Avslutte og starte spillet på nytt | Lær om å avslutte og starte spillet på nytt, inkludert opprydding av ressurser og tilbakestilling av variabelverdier | [Avslutningsbetingelse](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | HTML-maler og ruter i en webapp | Lær hvordan du lager grunnstrukturen til en flersides nettsidearkitektur ved hjelp av ruter og HTML-maler | [HTML-maler og ruter](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | Bygge et innloggings- og registreringsskjema | Lær om å bygge skjemaer og håndtere valideringsrutiner | [Skjemaer](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | Metoder for å hente og bruke data | Hvordan data flyter inn og ut av appen din, hvordan du henter, lagrer og sletter den | [Data](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | Konsepter for tilstandsadministrasjon | Lær hvordan appen din beholder tilstand og hvordan du administrerer den programmatisk | [Tilstandsadministrasjon](/7-bank-project/4-state-management/README.md) | Yohan |
| 01 | Komme i gang | Introduksjon til programmering og verktøyene som brukes | Lær det grunnleggende bak de fleste programmeringsspråk og om programvare som hjelper profesjonelle utviklere med jobben sin | [Introduksjon til programmeringsspråk og verktøy](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Komme i gang | Grunnleggende om GitHub, inkludert samarbeid i team | Hvordan bruke GitHub i prosjektet ditt, hvordan samarbeide med andre på en kodebase | [Introduksjon til GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Komme i gang | Tilgjengelighet | Lær det grunnleggende om webtilgjengelighet | [Grunnleggende om tilgjengelighet](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Grunnleggende | JavaScript Datatyper| Det grunnleggende om JavaScript-datatyper | [Datatyper](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Grunnleggende | Funksjoner og metoder | Lær om funksjoner og metoder for å håndtere logikkflyten i en applikasjon | [Funksjoner og metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine og Christopher |
| 06 | JS Grunnleggende | Ta beslutninger med JS | Lær hvordan du lager betingelser i koden din ved hjelp av metoder for beslutningstaking | [Ta beslutninger](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Grunnleggende | Arrays og løkker| Jobb med data ved hjelp av arrays og løkker i JavaScript | [Arrays og løkker](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML i praksis| Bygg HTML for å lage et online terrarium, med fokus på å bygge et layout | [Introduksjon til HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS i praksis | Bygg CSS for å style det online terrariet, med fokus på det grunnleggende i CSS, inkludert å gjøre siden responsiv | [Introduksjon til CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-manipulering | Bygg JavaScript som får terrariet til å fungere som et dra-og-slipp-grensesnitt, med fokus på closures og DOM-manipulering | [JavaScript Closures, DOM-manipulering](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Bygg et skrive-spill | Lær hvordan du bruker tastaturevents for å styre logikken i JavaScript-appen din | [Event-drevet programmering](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Arbeide med nettlesere | Lær hvordan nettlesere fungerer, deres historie, og hvordan du kan sette opp de første elementene i en nettleserutvidelse | [Om nettlesere](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bygge et skjema, kalle en API og lagre variabler i lokal lagring | Bygg JavaScript-elementene i nettleserutvidelsen din for å kalle en API ved hjelp av variabler lagret i lokal lagring | [API-er, skjemaer og lokal lagring](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bakgrunnsprosesser i nettleseren, ytelsesoptimalisering | Bruk nettleserens bakgrunnsprosesser til å administrere utvidelsens ikon; lær om webytelse og noen optimaliseringer | [Bakgrunnsoppgaver og ytelse](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Mer avansert spillutvikling med JavaScript | Lær om arv ved bruk av både klasser og komposisjon, samt Pub/Sub-mønsteret, som forberedelse til å bygge et spill | [Introduksjon til avansert spillutvikling](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Tegne på canvas | Lær om Canvas API, som brukes til å tegne elementer på skjermen | [Tegne 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å skjermen | Oppdag hvordan elementer kan få bevegelse ved hjelp av kartesiske koordinater og Canvas API | [Flytte elementer rundt](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Kollisjonsdeteksjon | Få elementer til å kollidere og reagere på hverandre ved hjelp av tastetrykk, og implementer en nedkjølingsfunksjon for ytelse | [Kollisjonsdeteksjon](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Holde styr på poeng | Utfør matematiske beregninger basert på spillets status og ytelse | [Holde styr på poeng](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Avslutte og starte spillet på nytt | Lær om hvordan du avslutter og starter spillet på nytt, inkludert opprydding av ressurser og tilbakestilling av variabler | [Avslutningsbetingelse](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-maler og ruter i en webapp | Lær hvordan du lager grunnstrukturen for en flersidet nettsides arkitektur ved hjelp av ruting og HTML-maler | [HTML-maler og ruter](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Bygge et innloggings- og registreringsskjema | Lær om å bygge skjemaer og håndtere valideringsrutiner | [Skjemaer](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metoder for å hente og bruke data | Hvordan data flyter inn og ut av appen din, hvordan du henter, lagrer og sletter den | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Konsepter for tilstandsadministrasjon | Lær hvordan appen din beholder tilstand og hvordan du administrerer den programmatisk | [Tilstandsadministrasjon](./7-bank-project/4-state-management/README.md) | Yohan |
## 🏫 Pedagogikk
@ -155,17 +158,17 @@ Vår læreplan er designet med to sentrale pedagogiske prinsipper i tankene:
* prosjektbasert læring
* hyppige quizer
Programmet lærer bort grunnleggende JavaScript, HTML og CSS, samt de nyeste verktøyene og teknikkene som brukes av dagens webutviklere. Studentene får muligheten til å utvikle praktisk erfaring ved å bygge et skriveøvelsesspill, et virtuelt terrarium, en miljøvennlig nettleserutvidelse, et spill i stil med Space Invaders og en bankapp for bedrifter. Ved slutten av serien vil studentene ha oppnådd en solid forståelse av webutvikling.
Programmet lærer bort grunnleggende JavaScript, HTML og CSS, samt de nyeste verktøyene og teknikkene som brukes av dagens webutviklere. Studentene får muligheten til å utvikle praktisk erfaring ved å bygge et skrive-spill, et virtuelt terrarium, en miljøvennlig nettleserutvidelse, et spill i stil med Space Invaders, og en bankapp for bedrifter. Ved slutten av serien vil studentene ha oppnådd en solid forståelse av webutvikling.
> 🎓 Du kan ta de første leksjonene i denne læreplanen som en [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn!
Ved å sørge for at innholdet er knyttet til prosjekter, blir prosessen mer engasjerende for studentene, og konseptene vil bli bedre husket. Vi har også skrevet flere innledende leksjoner i JavaScript-grunnleggende for å introdusere konsepter, sammen med en video fra "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"-samlingen av videotutorials, hvor noen av forfatterne bidro til denne læreplanen.
I tillegg setter en lavterskelquiz før en klasse studentens fokus på å lære et tema, mens en andre quiz etter klassen sikrer ytterligere forståelse. Denne læreplanen er designet for å være fleksibel og morsom og kan tas i sin helhet eller delvis. Prosjektene starter små og blir stadig mer komplekse mot slutten av den 12-ukers syklusen.
I tillegg setter en lavterskelquiz før en klasse studentens fokus mot å lære et tema, mens en andre quiz etter klassen sikrer ytterligere forståelse. Denne læreplanen er designet for å være fleksibel og morsom og kan tas i sin helhet eller delvis. Prosjektene starter små og blir stadig mer komplekse mot slutten av den 12-ukers syklusen.
Selv om vi bevisst har unngått å introdusere JavaScript-rammeverk for å fokusere på de grunnleggende ferdighetene som trengs som webutvikler før man tar i bruk et rammeverk, vil et godt neste steg etter å ha fullført denne læreplanen være å lære om Node.js via en annen samling videoer: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Selv om vi bevisst har unngått å introdusere JavaScript-rammeverk for å konsentrere oss om de grunnleggende ferdighetene som trengs som webutvikler før man tar i bruk et rammeverk, vil et godt neste steg etter å ha fullført denne læreplanen være å lære om Node.js via en annen samling videoer: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Besøk våre [Retningslinjer for oppførsel](CODE_OF_CONDUCT.md) og [Bidragsretningslinjer](CONTRIBUTING.md). Vi setter pris på din konstruktive tilbakemelding!
> Besøk våre [Retningslinjer for oppførsel](CODE_OF_CONDUCT.md) og [Bidragsveiledning](CONTRIBUTING.md). Vi ønsker dine konstruktive tilbakemeldinger velkommen!
## 🧭 Offline tilgang
@ -198,9 +201,9 @@ Vårt team produserer andre kurs! Sjekk ut:
## Lisens
Dette repositoriet er lisensiert under MIT-lisensen. Se [LISENS](../../LICENSE) for mer informasjon.
Dette repositoriet er lisensiert under MIT-lisensen. Se [LISENS](../../LICENSE)-filen for mer informasjon.
---
**Ansvarsfraskrivelse**:
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi streber etter nøyaktighet, vær oppmerksom på at automatiserte oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på sitt opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi streber etter nøyaktighet, vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på sitt opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://discord.com/invite/ByRwuEEgH4)
Följ dessa steg för att komma igång med att använda dessa resurser:
3. [**Gå med i Azure AI Foundry Discord och träffa experter och andra utvecklare**](https://discord.com/invite/ByRwuEEgH4)
# Webbutveckling för nybörjare - En kursplan
Lär dig grunderna i webbutveckling med vår omfattande 12-veckors kurs från Microsoft Cloud Advocates. Varje av de 24 lektionerna går igenom JavaScript, CSS och HTML genom praktiska projekt som terrarium, 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. Börja din kodningsresa idag!
Lär dig grunderna i webbutveckling med vår 12-veckors omfattande kurs från Microsoft Cloud Advocates. Varje av de 24 lektionerna går igenom JavaScript, CSS och HTML genom praktiska projekt som terrarium, webbläsartillägg och rymdspel. Delta i quiz, diskussioner och praktiska uppgifter. Förbättra dina färdigheter och optimera din kunskapsretention med vår effektiva projektbaserade pedagogik. Börja din kodningsresa idag!
#### 🧑🎓 _Ä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 resurser för nybörjare, studentpaket och till och med sätt att få en gratis certifikatkupong. Det här är sidan du vill bokmärka och kolla regelbundet eftersom vi byter innehåll 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 resurser för nybörjare, studentpaket och till och med sätt att få en gratis certifikatvoucher. Detta är sidan du vill bokmärka och kolla regelbundet eftersom vi byter innehåll varje månad.
### 📣 Meddelande - _Ny kursplan_ om Generativ AI för JavaScript har precis släppts
@ -35,24 +42,20 @@ Missa inte vår nya kursplan om Generativ AI!
Besök [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) för att komma igång!
Varje lektion innehåller en uppgift att slutföra, en kunskapskontroll och en utmaning för att guida dig i att lära dig ämnen som:
- Prompting och promptteknik
- Text- och bildappgenerering
- 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!
## 🌱 Kom igång
@ -60,7 +63,7 @@ Besök [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) för att
**[Studenter](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, för varje lektion, börja med ett quiz före föreläsningen och fortsätt med att läsa föreläsningsmaterialet, slutföra olika aktiviteter och kontrollera din förståelse med quiz efter föreläsningen.
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 tillgängliga för att svara på dina frågor.
För att förbättra din lärandeupplevelse, 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 kommer att finnas 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.
@ -69,27 +72,27 @@ För att fördjupa din utbildning rekommenderar vi starkt att utforska [Microsof
Denna kursplan har en utvecklingsmiljö redo att användas! När du börjar kan du välja att köra kursplanen i en [Codespace](https://github.com/features/codespaces/) (_en webbläsarbaserad miljö utan installationer_), eller lokalt på din dator med en textredigerare som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Skapa ditt repository
För att enkelt spara ditt arbete rekommenderas det att du skapar en egen kopia av detta repository. Du kan göra detta genom att klicka på **Use this template**-knappen högst upp på sidan. Detta skapar ett nytt repository i ditt GitHub-konto med en kopia av kursplanen.
För att enkelt spara ditt arbete rekommenderas det att du skapar en egen kopia av detta repository. Du kan göra detta genom att klicka på knappen **Use this template** högst upp på sidan. Detta kommer att skapa ett nytt repository i ditt GitHub-konto med en kopia av kursplanen.
Följ dessa steg:
1. **Forka repositoryt**: Klicka på "Fork"-knappen längst upp till höger på denna sida.
I din kopia av detta repository som du skapade, klicka på **Code**-knappen och välj **Open with Codespaces**. Detta skapar en ny Codespace för dig att arbeta i.
I din kopia av detta repository som du skapade, klicka på **Code**-knappen och välj **Open with Codespaces**. Detta kommer att skapa en ny Codespace för dig att arbeta i.
För att köra denna kursplan 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](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), går igenom olika alternativ för dessa verktyg så att du kan välja vad som fungerar bäst för dig.
För att köra denna kursplan 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), kommer att guida dig genom olika alternativ för dessa verktyg så att du kan välja det som passar dig bäst.
Vår rekommendation är att använda [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) som din redigerare, som också 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 repository till din dator. Du kan göra detta genom att klicka på **Code**-knappen och kopiera URL:en:
<imgsrc="./images/createcodespace.png"alt="Kopiera din repository-URL"style="width:270px;"/>
[!CodeSpace](./images/createcodespace.png)
Öppna sedan [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) inom [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) och kör följande kommando, ersätt `<your-repository-url>` med URL:en du just kopierade:
@ -115,38 +118,38 @@ Vår rekommendation är att använda [Visual Studio Code](https://code.visualstu
- en utmaning
- kompletterande läsning
- uppgift
- quiz efter lektionen
- [quiz efter lektionen](https://ff-quizzes.netlify.app/)
> **En notering om quiz**: Alla quiz finns i Quiz-app-mappen, totalt 48 quiz med tre frågor vardera. De är länkade från lektionerna och quiz-appen kan köras lokalt eller distribueras till Azure; följ instruktionerna i `quiz-app`-mappen. De lokaliseras gradvis.
> **En notering om quiz**: Alla quiz finns i mappen Quiz-app, totalt 48 quiz med tre frågor vardera. De är tillgängliga [här](https://ff-quizzes.netlify.app/) och quiz-appen kan köras lokalt eller distribueras till Azure; följ instruktionerna i mappen `quiz-app`.
## 🗃️ Lektioner
| | Projektets namn | Lärda koncept | Lärandemål | Länkad lektion | Författare |
| | Projekt Namn | Koncept som lärs ut | Lärandemål | Länkad Lektion | Författare |
| 01 | Komma igång | Introduktion till programmering och verktyg | Lär dig de grundläggande principerna bakom de flesta programmeringsspråk och om mjukvara som hjälper professionella utvecklare i deras arbete | [Introduktion till programmeringsspråk och verktyg](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Komma igång | Grunderna i GitHub, inklusive att arbeta i team | Hur man använder GitHub i ditt projekt, hur man samarbetar med andra på en kodbas | [Introduktion till GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Komma igång | Tillgänglighet | Lär dig grunderna i webbtillgänglighet | [Grunderna i 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 en applikations logikflöde | [Funktioner och metoder](/2-js-basics/2-functions-methods/README.md) | Jasmine och Christopher |
| 06 | JS Grunder | Att fatta beslut med JS | Lär dig hur man skapar villkor i din kod med hjälp av beslutsfattande metoder | [Att fatta beslut](/2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Grunder | Arrayer och loopar | Arbeta med data med hjälp av 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 en 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å grunderna i CSS inklusive att göra sidan responsiv | [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å terrarium 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 | [Skrivspel](/4-typing-game/solution/README.md) | Bygg ett skrivspel | Lär dig hur man använder tangentbordshändelser för att driva 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 bygger de första elementen i en webbläsartillägg | [Om webbläsare](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Bygga ett formulär, anropa en API och lagra variabler i lokal lagring | Bygg JavaScript-elementen i ditt webbläsartillägg för att anropa en API med hjälp av variabler som lagras i lokal lagring | [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 några 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 på skärmen | Upptäck hur element kan få rörelse med hjälp av kartesiska koordinater och Canvas API| [Flytta element](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution/README.md) | Kollisionsdetektering | Få element att kollidera och reagera på varandra med hjälp av tangenttryckningar och skapa en cooldown-funktion för att förbättra spelets prestanda | [Kollisionsdetektering](/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 starta om spelet | Lär dig om att avsluta och starta om spelet, inklusive att städa upp resurser och återstä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 rutter i en webbapp | Lär dig hur man skapar grunden för en flersidig webbplatsarkitektur med hjälp av routing och HTML-mallar | [HTML-mallar och rutter](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | Bygga ett inloggnings- och registreringsformulär | Lär dig om att bygga formulär och hantera valideringsrutiner | [Formulär](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | Metoder för att hämta och använda data | Hur data flödar in och ut ur din app, hur man hämtar, lagrar och hanterar den| [Data](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | Koncept för tillståndshantering | Lär dig hur din app behåller tillstånd och hur man hanterar det programmässigt | [Tillståndshantering](/7-bank-project/4-state-management/README.md) | Yohan |
| 01 | Komma igång | Introduktion till programmering och verktyg för utveckling | Lär dig de grundläggande principerna bakom de flesta programmeringsspråk och om mjukvara som hjälper professionella utvecklare | [Introduktion till programmeringsspråk och verktyg](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Komma igång | Grunderna i GitHub, inklusive att arbeta i team | Hur man använder GitHub i ditt projekt, hur man samarbetar med andra på en kodbas | [Introduktion till GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Komma igång | Tillgänglighet | Lär dig grunderna i webbtillgänglighet | [Grunderna i 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 en applikations logikflöde | [Funktioner och Metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine och Christopher |
| 06 | JS Grunder | Att fatta beslut med JS | Lär dig hur man skapar villkor i din kod med hjälp av beslutsmetoder | [Att fatta beslut](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Grunder | Arrayer och Loopar | Arbeta med data med hjälp av 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 en 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 det online terrarium, med fokus på grunderna i CSS inklusive att göra sidan responsiv | [Introduktion till CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript-slutna funktioner, DOM-manipulation | Bygg JavaScript för att få terrariet att fungera som ett drag-och-släpp-gränssnitt, med fokus på slutna funktioner och DOM-manipulation | [JavaScript-slutna funktioner, 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 tangentbordshä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 bygger de första elementen i en webbläsartillägg | [Om webbläsare](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bygga ett formulär, anropa en API och lagra variabler i lokal lagring | Bygg JavaScript-elementen i din webbläsartillägg för att anropa en API med variabler som lagras i lokal lagring | [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 några optimeringar för att förbättra | [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 på skärmen | Upptäck hur element kan få rörelse med hjälp av kartesiska koordinater och Canvas API | [Flytta element](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Kollisionsdetektering | Få element att kollidera och reagera på varandra med hjälp av tangenttryckningar och tillhandahåll en cooldown-funktion för att säkerställa spelets prestanda | [Kollisionsdetektering](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Hålla koll på poäng | Utför matematiska beräkningar baserat på spelets status och prestanda | [Hålla koll på poäng](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Avsluta och starta om spelet | Lär dig om att avsluta och starta om spelet, inklusive att städa upp resurser och återställa variabelvärden| [Avslutningsvillkor](./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 hur man skapar grunden för en flersidig webbplatsarkitektur med hjälp av 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 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 man hämtar, lagrar och hanterar den | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Koncept för tillståndshantering | Lär dig hur din app behåller tillstånd och hur man hanterar det programmässigt| [Tillståndshantering](./7-bank-project/4-state-management/README.md) | Yohan |
## 🏫 Pedagogik
@ -155,23 +158,23 @@ 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. Studenter får möjlighet att utveckla praktisk erfarenhet genom att bygga ett skrivspel, ett virtuellt terrarium, ett miljövänligt webbläsartillägg, ett spel i stil med Space Invaders och en bankapp för företag. Vid 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, ett miljövänligt webbläsartillägg, ett spel i stil med Space Invaders och en bankapp för företag. Vid slutet av serien kommer studenterna ha fått en gedigen förståelse för webbutveckling.
> 🎓 Du kan ta de första lektionerna i denna läroplan som en [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn!
Genom att säkerställa att innehållet är kopplat till projekt görs processen mer engagerande för studenter och koncepten blir lättare att komma ihåg. Vi har också skrivit flera startlektioner i JavaScript-grunder 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, där några av författarna bidragit till denna läroplan.
Dessutom sätter ett lågintensivt quiz före en klass studentens intention mot att lära sig ett ämne, medan ett andra quiz efter klassen säkerställer ytterligare retention. Denna läroplan är utformad för att vara flexibel och rolig och kan tas i sin helhet eller delvis. Projekten börjar små och blir alltmer komplexa vid slutet av den 12-veckors cykeln.
Dessutom sätter ett lågintensivt quiz före en klass studentens fokus på att lära sig ett ämne, medan ett andra quiz efter klassen säkerställer ytterligare retention. Denna läroplan är utformad för att vara flexibel och rolig och kan tas i sin helhet eller delvis. Projekten börjar små och blir alltmer komplexa vid slutet av den 12-veckors cykeln.
Även om vi medvetet har undvikit att introducera JavaScript-ramverk för att fokusera på de grundläggande färdigheter som behövs som webbutvecklare innan man antar ett ramverk, skulle ett bra nästa steg efter att ha slutfört denna läroplan vara att lära sig om Node.js via en annan samling av videor: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Ä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 antar ett ramverk, skulle ett bra nästa steg efter att ha avslutat denna läroplan vara att lära sig om Node.js via en annan samling av videor: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Besök våra [Code of Conduct](CODE_OF_CONDUCT.md) och [Contributing](CONTRIBUTING.md)-riktlinjer. Vi välkomnar din konstruktiva feedback!
## 🧭 Offlineåtkomst
Du kan köra denna dokumentation offline med hjälp av [Docsify](https://docsify.js.org/#/). Forka detta repo, [installera Docsify](https://docsify.js.org/#/quickstart) på din lokala maskin och skriv sedan `docsify serve` i root-mappen av detta repo. Webbplatsen kommer att serveras på port 3000 på din localhost: `localhost:3000`.
Du kan köra denna dokumentation offline med hjälp av [Docsify](https://docsify.js.org/#/). Forka detta repo, [installera Docsify](https://docsify.js.org/#/quickstart) på din lokala maskin och skriv sedan `docsify serve` i root-mappen av detta repo. Webbplatsen kommer att köras på port 3000 på din localhost: `localhost:3000`.
## 📘 PDF
@ -199,9 +202,9 @@ Vårt team producerar andra kurser! Kolla in:
## Licens
Detta repository är licensierat under MIT-licensen. Se [LICENSE](../../LICENSE)-filen för mer information.
Detta repo är licensierat under MIT-licensen. Se [LICENSE](../../LICENSE)-filen 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, bör det noteras att automatiserade översättningar kan innehålla fel eller brister. 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 kan uppstå vid användning av denna översättning.
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, bör det noteras att automatiska översättningar kan innehålla fel eller felaktigheter. 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 eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.