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.
Dette er et uddannelsesforløb-lager til undervisning i webudviklingsgrundlag for begyndere. Forløbet er et omfattende 12-ugers kursus udviklet af Microsoft Cloud Advocates, med 24 praktiske lektioner, der dækker JavaScript, CSS og HTML.
### Nøglekomponenter
### Hovedkomponenter
- **Uddannelsesindhold**: 24 strukturerede lektioner organiseret i projektbaserede moduler
- **Praktiske projekter**: Terrarium, Typingspil, Browserudvidelse, Rumspil, Bankapp, Kodeeditor og AI Chat-assistent
- **Interaktive quizzer**: 48 quizzer med 3 spørgsmål hver (før/efter lektion vurderinger)
- **Flersproget support**: Automatiserede oversættelser til 50+ sprog via GitHub Actions
- `9-chat-project/README.md` - AI chatassistent projekt
### Monorepo struktur
### Monorepo Struktur
Selvom det ikke er et traditionelt monorepo, indeholder dette repository flere uafhængige projekter:
- Hver lektion er selvstændig
- Projekter deler ikke afhængigheder
- Arbejd på individuelle projekter uden at påvirke andre
- Klon hele repo for fuld curriculum oplevelse
Selvom det ikke er et traditionelt monorepo, indeholder dette lager flere uafhængige projekter:
- Hver lektion er selvstændig
- Projekterne deler ikke afhængigheder
- Arbejd på individuelle projekter uden at påvirke andre
- Klon hele repo for fuldt forløbsoplevelse
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfraskrivelse**:
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.
**Ansvarsfraskrivelse**:
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, 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. Ved kritiske informationer anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for eventuelle misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse.
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!
Lær grundlæggende webudvikling med vores 12-ugers omfattende kursus af Microsoft Cloud Advocates. Hver af de 24 lektioner dykker ned i JavaScript, CSS og HTML gennem praktiske projekter som terrarier, browserudvidelser og rumspil. Deltag i quizzer, diskussioner og praktiske opgaver. Forbedr dine færdigheder og optimer din vidensfastholdelse med vores effektive projektbaserede pædagogik. Start din kodningsrejse i dag!
> Dette repository indeholder 50+ sprogoversættelser, som betydeligt øger downloadstørrelsen. For at klone uden oversættelser, brug sparsomet udtjekning:
>
> Dette repository indeholder 50+ sprogoversættelser, hvilket øger downloadstørrelsen betydeligt. For at klone uden oversættelser skal du bruge spars checkout:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Dette giver dig alt, hvad du behøver for at gennemføre kurset med en meget hurtigere download.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**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)**
**Hvis du ønsker at få understøttelse af yderligere oversættelsessprog, er de listet [her](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](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 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.
Besøg [**Student Hub siden**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), hvor du finder begynderressourcer, studenterpakker og endda muligheder for at få et gratis certifikatkupon. Dette er siden, du vil bogmærke og tjekke indimellem, da vi skifter indhold månedligt.
### 📣 Meddelelse - Nye GitHub Copilot Agent mode udfordringer at gennemføre!
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.
Ny udfordring tilføjet, kig efter "GitHub Copilot Agent Challenge 🚀" i de fleste kapitler. Det er en ny udfordring, som du skal gennemføre ved hjælp af GitHub Copilot og Agent mode. Hvis du ikke har brugt Agent mode før, kan den ikke kun generere tekst, men også oprette og redigere filer, køre kommandoer og mere.
### 📣 Meddelelse - _Nyt projekt at bygge med Generativ AI_
### 📣 Meddelelse - _Nyt projekt at bygge ved hjælp af Generativ AI_
Nyt AI-assistent projekt lige tilføjet, tjek det ud [projekt](./9-chat-project/README.md)
Nyt AI Assistant projekt er netop tilføjet, tjek det ud [projekt](./9-chat-project/README.md)
### 📣 Meddelelse - _Nyt pensum_ om Generativ AI for JavaScript er netop udgivet
### 📣 Meddelelse - _Ny læseplan_ om Generativ AI for JavaScript er netop udgivet
Gå ikke glip af vores nye pensum om Generativ AI!
Gå ikke glip af vores nye læseplan for 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 videnstest og en udfordring for at guide dig i læringsemner som:
Hver lektion inkluderer en opgave, en videnscheck og en udfordring, der guider dig i at lære emner som:
- Prompting og prompt engineering
- Tekst- og billedapp generation
- Tekst- og billedappgenerering
- Søgeapps
Besøg [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for at komme i gang!
@ -83,130 +93,129 @@ Besøg [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for at k
## 🌱 Kom godt i gang
> **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)!
> **Lærere**, vi har [inkluderet nogle forslag](for-teachers.md) til, hvordan I kan bruge denne læseplan. Vi vil meget gerne have 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 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.
**[Lærende](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for hver lektion, start med en pre-lecture quiz og følg op med at læse forelæsningsmaterialet, gennemføre de forskellige aktiviteter og tjek din forståelse med post-lecture quizzen.
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 forbedre din læringsoplevelse, forbind med dine jævnbyrdige 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.
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.
For at fremme din uddannelse, anbefaler vi kraftigt at udforske [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for yderligere studiematerialer.
### 📋 Opsætning af dit miljø
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).
Denne læseplan har et udviklingsmiljø klar til brug! Når du kommer i gang, kan du vælge at køre læseplanen i en [Codespace](https://github.com/features/codespaces/) (_et browser-baseret miljø, hvor ingen installation er nødvendig_), 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 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.
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å **Use this template**knappen øverst på siden. Dette vil oprette et nyt repository i din GitHub-konto med en kopi af læseplanen.
Følg disse trin:
1. **Fork depotet**: Klik på knappen "Fork" øverst til højre på denne side.
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.
I din kopi af dette repository, som du har oprettet, klik på **Code** knappen og vælg **Open with Codespaces**. Dette opretter en ny Codespace til dig at arbejde i.
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.
#### Køre læseplanen lokalt på din computer
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).
For at køre denne læseplan lokalt på din computer, skal du bruge en teksteditor, en browser og et kommandolinjeværktøj. Vores første lektion, [Introduktion til programmeringssprog og handelsværktøjer](../../1-getting-started-lessons/1-intro-to-programming-languages), vil guide dig gennem forskellige valgmuligheder for hvert af disse værktøjer, så du kan vælge, hvad der passer bedst til dig.
1. Klon dit repository til din computer. Det kan du gøre ved at klikke på knappen **Code** og kopiere URL’en:
Vi anbefaler at bruge [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) som din editor, som også har et 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 repository til din computer. Det kan du gøre 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 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. Det kan du gøre 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 netop 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
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - for at kunne 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 skitsetegning
- valgfri supplerende video
- forudgående opvarmningsquiz før lektion
- skriftlig lektion
- for projektbaserede lektioner, trin-for-trin vejledninger til, hvordan man bygger projektet
- vidensprøver
- opvarmningsquiz før lektionen
- skreven lektion
- for projektbaserede lektioner, trin-for-trin vejledninger om, hvordan man bygger projektet
- videnschecks
- en udfordring
- supplerende læsning
- opgave
- [quiz efter lektionen](https://ff-quizzes.netlify.app/web/)
- [quiz efter lektion](https://ff-quizzes.netlify.app/web/)
> **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.
> **En note om quizzes**: Alle quizzes findes i Quiz-app mappen, i alt 48 quizzes 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 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, webperformance | 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 |
| 01 | Kom I Gang | Introduktion til programmering og værktøjer | Lær de grundlæggende elementer 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, inkl. samarbejde i team | Hvordan man bruger GitHub i sit projekt, og 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 | [Tilgængelighedsgrundlag](./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 et programs logik | [Funktioner og Metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine og Christopher |
| 06 | JS Grundlæggende | Beslutningstagning med JS | Lær at skabe betingelser i din kode ved hjælp af beslutningsmetoder | [Beslutningstagning](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Grundlæggende | Arrays og Løkker | Arbejd med data ved brug af 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 | Byg HTML'en til at skabe et online terrarium med fokus på opbygning af 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, inkl. responsivt design | [Introduktion til CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-manipulation | Byg JavaScript til 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 Typingspil | Lær at bruge tastaturbegivenheder til at styre logikken i din JavaScript-app | [Eventdrevet 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 laver de første elementer i en browser-udvidelse | [Om browsere](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Byg et formular, kald et API og gem variabler i lokal lagring | Byg JavaScript-elementerne til din browserudvidelse for at kalde et API ved brug 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, webperformance | Brug browserens baggrundsprocesser til at styre udvidelsens ikon; lær om webperformance og nogle optimeringer for at forbedre | [Baggrundsopgaver og performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Mere avanceret spiludvikling med JavaScript | Lær om arv via både klasser og komposition samt Pub/Sub-mønsteret som forberedelse til et spil | [Introduktion til avanceret spiludvikling](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Tegning til canvas | Lær om Canvas API, som bruges til at tegne elementer på en skærm | [Tegning til canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Flyt elementer rundt på skærmen | Opdag hvordan elementer kan bevæge sig vha. kartesiske koordinater og Canvas API | [Flyt elementer rundt](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Kollisionregistrering | Få elementer til at kollidere og reagere på hinanden ved tastetryk og tilføj en cooldown-funktion for at sikre spillets ydeevne | [Kollisionregistrering](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Hold styr på point | Udfør matematiske beregninger baseret på spillets status og præstation | [Hold styr på point](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Afslutning og genstart af spillet | Lær om at afslutte og genstarte spillet, inkl. oprydning af ressourcer og nulstilling af variabler | [Afslutningsbetingelsen](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-skabeloner og routes i en webapp | Lær hvordan man skaber arkitekturen for et multipages website ved hjælp af routing og HTML-skabeloner | [HTML-skabeloner og 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 hvordan man laver formularer og håndterer valideringsrutiner | [Formularer](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metoder til hentning og brug af data | Hvordan data flyder ind og ud af din app, hvordan man henter, gemmer og bortskaffer 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 programmerer styring af denne | [Tilstandsadministration](./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 af 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 du bygger din egen AI-assistent | [AI Assistent projekt](./9-chat-project/README.md) | Chris |
## 🏫 Pædagogik
Vores pensum er designet med to nøgleprincipper i pædagogik:
Vores læreplan er designet med to centrale pædagogiske principper for øje:
* projektbaseret læring
* hyppige quizzer
* hyppige quizzes
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.
Programmet underviser i grundlæggende JavaScript, HTML og CSS samt de nyeste værktøjer og teknikker, som nutidens webudviklere bruger. Studerende vil få mulighed for at opnå praktisk erfaring ved at bygge et typing-spil, virtuelt terrarium, miljøvenligt browser-udvidelse, rum-invader-stil spil og en bankapp til virksomheder. Ved slutningen af serien vil 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!
> 🎓 Du kan tage de første lektioner i denne læreplan 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 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.
Ved at sikre, at indholdet er knyttet til projekter, bliver processen mere engagerende for studerende, og fastholdelsen af begreber styrkes. Vi har desuden skrevet flere introducerende lektioner i JavaScript grundlæggende for at introducere begreber, suppleret 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 denne læreplan.
Derudover sætter en quiz med lav risiko før en klasse intentionen hos eleven mod at lære et emne, mens en anden quiz efter klassen sikrer yderligere fastholdelse. Dette pensum er designet til at være fleksibelt og sjovt og kan tages som helhed eller delvist. Projekterne starter småt og bliver gradvist mere komplekse ved slutningen af 12-ugers cyklussen.
Derudover sætter en lavrisiko quiz før en klasse målrettet elevens intention om at lære et emne, mens en anden quiz efter klasse sikrer yderligere fastholdelse. Denne læreplan er designet til at være fleksibel og sjov og kan tages helt eller delvist. Projekterne starter småt og bliver gradvist mere komplekse hen imod slutningen af den 12-ugers cyklus.
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)".
Selvom vi har undgået at introducere JavaScript-rammeværk for at fokusere på de grundlæggende færdigheder, der kræves som webudvikler, før man tager et rammeværk i brug, vil et godt næste skridt i denne læreplans afslutning 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 byder konstruktiv feedback velkommen!
> Besøg vores [Adfærdskodeks](CODE_OF_CONDUCT.md) og [Bidrag](CONTRIBUTING.md) retningslinjer. Vi ser frem til din konstruktive feedback!
## 🧭 Offline adgang
Du kan køre denne dokumentation offline ved at bruge [Docsify](https://docsify.js.org/#/). Fork dette repo, [installer Docsify](https://docsify.js.org/#/quickstart) på din lokale maskine, og i rodmappen for 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 skriv derefter i rodmappen af dette repo `docsify serve`. Websitet vil blive serveret på port 3000 på din localhost: `localhost:3000`.
## 📘 PDF
En PDF med alle lektionerne kan findes [her](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
En PDF af alle lektionerne kan findes [her](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Andre Kurser
## 🎒 Andre kurser
Vores team producerer andre kurser! Tjek dem ud:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
@ -216,7 +225,7 @@ Vores team producerer andre kurser! Tjek dem ud:
[](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)
@ -224,7 +233,7 @@ Vores team producerer andre kurser! Tjek dem ud:
---
### 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)
@ -232,7 +241,7 @@ Vores team producerer andre kurser! Tjek dem ud:
---
### Grundlæggende Læring
### 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)
@ -243,7 +252,7 @@ Vores team producerer andre kurser! Tjek dem ud:
---
### 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)
@ -251,21 +260,21 @@ Vores team producerer andre kurser! Tjek dem ud:
## Få Hjælp
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.
Hvis du sidder fast eller har spørgsmål om at bygge AI-apps. Deltag sammen med andre lærende og erfarne udviklere i diskussioner om MCP. Det er et støttende fællesskab, hvor spørgsmål er velkomne, og viden deles frit.
Dette repository er licenseret under MIT-licensen. Se filen [LICENSE](../../LICENSE) for mere information.
Dette arkiv er licenseret under MIT-licensen. Se [LICENSE](../../LICENSE)-filen for mere information.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfraskrivelse**:
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi 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.
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 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 eventuelle misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse.
Tämä on opetuksellinen opetussuunnitelmarepositorio, joka on tarkoitettu web-kehityksen perusteiden opettamiseen aloittelijoille. Opetussuunnitelma on kattava 12 viikon kurssi, jonka ovat kehittäneet Microsoft Cloud Advocates, ja se sisältää 24 käytännön oppituntia, jotka kattavat JavaScriptin, CSS:n ja HTML:n.
Tämä on opetussisältöjen arkisto, joka on tarkoitettu aloittelijoiden web-kehityksen perusteiden opettamiseen. Opetussuunnitelma on kattava 12 viikon kurssi, jonka ovat kehittäneet Microsoft Cloud Advocates, ja se sisältää 24 käytännönläheistä oppituntia JavaScriptin, CSS:n ja HTML:n parissa.
Vaikka tämä ei ole perinteinen monorepo, tämä arkisto sisältää useita itsenäisiä projekteja:
- Jokainen oppitunti on itsenäinen
- Projektit eivät jaa riippuvuuksia
- Työskentele yksittäisten projektien parissa vaikuttamatta muihin
- Kloonaa koko arkisto saadaksesi koko opetussuunnitelman kokemuksen
Vaikka kyseessä ei ole perinteinen monorepo, tämä arkisto sisältää useita riippumattomia projekteja:
- Jokainen oppitunti on itsenäinen
- Projektit eivät jaa riippuvuuksia
- Työskentele yksittäisten projektien parissa ilman vaikutusta muihin
- Kloonaa koko arkisto saadaksesi koko opetussuunnitelman kokemuksen
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Vastuuvapauslauseke**:
Tämä asiakirja on käännetty käyttäen tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, on hyvä huomioida, että automaattiset käännökset saattavat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäiskielellä tulee pitää auktoritatiivisena lähteenä. Tärkeissä asioissa suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa mistään väärinymmärryksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, ota huomioon, että automaattiset käännökset saattavat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäiskielellä tulee pitää virallisena lähteenä. Tärkeiden tietojen osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa mahdollisista väärinymmärryksistä tai tulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
Opi verkkokehityksen perusteet kattavassa 12 viikon kurssissamme, jonka järjestävät Microsoft Cloud Advocates -tiimin jäsenet. Jokainen 24 oppitunnista sukeltaa JavaScriptiin, CSS:ään ja HTML:ään käytännön projektien, kuten terrarion, selaimen laajennusten ja avaruuspeliin, kautta. Osallistu tietokilpailuihin, keskusteluihin ja käytännön tehtäviin. Paranna taitojasi ja optimoi oppimisesi tehokkaalla projektipohjaisella opetuksellamme. Aloita koodausmatkasi tänään!
Opi verkkokehityksen perusteet Microsoft Cloud Advocatesin 12 viikon kattavan kurssin avulla. Jokaisessa 24 oppitunnissa perehdytään JavaScriptiin, CSS:ään ja HTML:ään käytännön projekteilla, kuten terrarioilla, selainlaajennuksilla ja avaruuspeleillä. Osallistu tietovisoihin, keskusteluihin ja käytännön tehtäviin. Kehitä taitojasi ja optimoi tiedon omaksumisesi tehokkaan projektipohjaisen opetustapamme avulla. Aloita koodausmatkasi tänään!
> Tämä arkisto sisältää yli 50 kielen käännöksiä, jotka lisäävät huomattavasti lataustiedoston kokoa. Jos haluat kloonata ilman käännöksiä, käytä sparse checkout:a:
> **Haluatko kloonata paikallisesti?**
>
> Tämä repositorio sisältää yli 50 kielen käännökset, mikä lisää merkittävästi latauskokoa. Jos haluat kloonata ilman käännöksiä, käytä sparse checkoutia:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Näin saat kaiken tarvitsemasi kurssin suorittamiseen nopeammalla latauksella.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Jos haluat lisätä lisää käännettyjä kieliä, tuetut kielet löytyvät [täältä](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Jos haluat, että muita kieliä tuetaan, ne löytyvät listattuna [täältä](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)
#### 🧑🎓 _Oletko opiskelija?_
Vieraile [**Student Hub -sivulla**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), josta löydät aloittelijan resurssit, opiskelijapaketit ja jopa tapoja saada ilmainen sertifikaattivoucher. Tämä on sivu, jonka haluat tallentaa kirjanmerkkeihin ja tarkistaa silloin tällöin, sillä sisältömme vaihtuu kuukausittain.
Vieraile [**Opiskelijakeskussivulla**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), josta löydät aloittelijoille tarkoitettuja materiaaleja, opiskelijapaketteja ja jopa tapoja saada ilmainen todistusvakuuttaja. Tämä sivu kannattaa lisätä kirjanmerkkeihin ja tarkistaa säännöllisesti, sillä päivitätämme sisältöä kuukausittain.
### 📣 Ilmoitus - Uudet GitHub Copilot Agent -tilahaasteet suoritettavaksi!
### 📣 Ilmoitus – Uudet GitHub Copilot Agent -tilahaasteet suoritettavaksi!
Uusi haaste lisätty, etsi "GitHub Copilot Agent Challenge 🚀" useimmista luvuista. Tämä on uusi haaste sinulle, joka suoritetaan käyttämällä GitHub Copilotia ja Agent-tilaa. Jos et ole käyttänyt Agent-tilaa aiemmin, se pystyy paitsi tuottamaan tekstiä, myös luomaan ja muokkaamaan tiedostoja, suorittamaan komentoja ja muuta.
Uusi haaste lisätty, etsi "GitHub Copilot Agent Challenge 🚀" useimmista luvuista. Tämä on uusi haaste, jonka voit suorittaa käyttämällä GitHub Copilotia ja Agent-tilaa. Jos et ole käyttänyt Agent-tilaa aiemmin, se ei vain luo tekstiä, vaan voi myös luoda ja muokata tiedostoja, suorittaa komentoja ja muuta.
### 📣 Ilmoitus - _Uusi Generatiivisen tekoälyn projekti rakennettavaksi_
> **Opettajat**, olemme [sisällyttäneet joitain ehdotuksia](for-teachers.md) tämän opetussuunnitelman käytöstä. Haluaisimme saada palautettanne [keskustelufoorumissamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Opettajat**, olemme [sisällyttäneet joitain ehdotuksia](for-teachers.md) opetussuunnitelman käyttöön. Haluaisimme kuulla palautettanne [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Oppijat](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, aloita jokainen oppitunti ennakkotietovisalla ja jatka sitten luentomateriaalin lukemiseen, erilaisten aktiviteettien suorittamiseen ja ymmärryksesi tarkistamiseen luennon jälkeisellä visalla.
**[Oppijat](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, aloita jokainen oppitunti esiluennon tietovisalla ja jatka lukemalla luentomateriaali, suorittamalla erilaisia aktiviteetteja ja testaa ymmärryksesi jälkiluennon tietovisalla.
Parantaaksesi oppimiskokemustasi, ota yhteyttä muihin oppijoihin työskennelläksesi projekteissa yhdessä! Keskusteluja kannustetaan [keskustelufoorumissamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), jossa moderaattoritiimimme on valmiina vastaamaan kysymyksiisi.
Paranna oppimiskokemustasi tekemällä projekteja yhdessä muiden kanssa! Keskustelua suositellaan [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), jossa moderaattoritiimimme on käytettävissä vastaamaan kysymyksiisi.
Tässä opetussuunnitelmassa on kehitysympäristö valmiina käyttöön! Alkaessasi voit valita suorittaa opetussuunnitelman [Codespacessa](https://github.com/features/codespaces/) (selainsovellus, johon ei tarvitse asentaa mitään) tai paikallisesti tietokoneella tekstieditorilla, kuten [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Tässä opetussuunnitelmassa on valmis kehitysympäristö! Voit aloittaa käyttämällä kurssia [Codespacessa](https://github.com/features/codespaces/) (_selaimessa toimiva, ilman asennuksia toimiva ympäristö_) tai paikallisesti tietokoneellasi tekstieditorilla, kuten [Visual Studio Codella](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Luo oma repositoriosi
Jotta voit helposti tallentaa työsi, on suositeltavaa luoda oma kopiosi tästä repositoriosta. Voit tehdä tämän napsauttamalla sivun yläreunassa olevaa **Use this template** -painiketta. Tämä luo uuden repositorion GitHub-tilillesi opetussuunnitelman kopion kera.
Jotta voit helposti tallentaa työsi, suosittelemme, että luot oman kopion tästä repositoriosta. Voit tehdä tämän klikkaamalla sivun yläosassa olevaa **Use this template** -painiketta. Tämä luo uuden repositorion GitHub-tilillesi kopiona opetussuunnitelmasta.
Noudata näitä ohjeita:
1. **Forkkaa Repository**: Klikkaa "Fork" -painiketta tämän sivun oikeassa yläkulmassa.
Oman kopiosi repositoriosta, jonka loit, klikkaa **Code** -painiketta ja valitse **Open with Codespaces**. Tämä luo uuden Codespacen, jossa voit työskennellä.
Omaasi luodussa kopiossa klikkaa **Code** -painiketta ja valitse **Open with Codespaces**. Tämä luo sinulle uuden Codespace-ympäristön työskentelyä varten.
Suorittaaksesi opetussuunnitelman paikallisesti tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, [Ohjelmointikielien ja työkalujen perusasioiden esittely](../../1-getting-started-lessons/1-intro-to-programming-languages), opastaa sinua erilaisten näiden työkalujen vaihtoehtojen valinnassa.
Suosituksemme on käyttää tekstieditorina [Visual Studio Codea](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon), jossa on myös sisäänrakennettu [Komentorivi](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Voit ladata Visual Studio Coden [tästä](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Kurssin ajamiseen paikallisesti tietokoneellasi tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, [Ohjelmointikielten ja työkalujen esittely](../../1-getting-started-lessons/1-intro-to-programming-languages), esittelee eri vaihtoehtoja näille työkaluilla, jotta voit valita sinulle parhaiten sopivat.
1. Kloonaa oma repositoriosi tietokoneellesi. Voit tehdä tämän napsauttamalla **Code** -painiketta ja kopioimalla URL-osoitteen:
Suosittelemme käyttämään tekstieditorina [Visual Studio Codea](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon), jossa on myös sisäänrakennettu [Pääte](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Voit ladata Visual Studio Coden [tästä](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Kloonaa varastosi tietokoneellesi. Voit tehdä tämän napsauttamalla **Code**-painiketta ja kopioimalla URL-osoitteen:
[CodeSpace](./images/createcodespace.png)
Avaa sitten [Terminaali](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Codessa](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ja suorita seuraava komento korvaten `<your-repository-url>` juuri kopioimallasi URL-osoitteella:
Sitten avaa [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Codessa](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ja suorita seuraava komento, korvaten `<your-repository-url>` juuri kopioimallasi URL-osoitteella:
```bash
git clone <your-repository-url>
```
2. Avaa kansio Visual Studio Codessa. Voit tehdä tämän napsauttamalla **Tiedosto** > **Avaa kansio** ja valitsemalla juuri kloonaamasi kansion.
2. Avaa kansio Visual Studio Codessa. Voit tehdä tämän napsauttamalla **File** > **Open Folder** ja valitsemalla juuri kloonaamasi kansion.
> Suositellut Visual Studio Code -laajennukset:
> Suositellut Visual Studio Code -laajennukset:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML-sivujen esikatseluun Visual Studio Codessa
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - esikatsella HTML-sivuja Visual Studio Codessa
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - auttaa sinua kirjoittamaan koodia nopeammin
## 📂 Jokainen oppitunti sisältää:
- valinnaisen luonnosmuistiinpanon
- valinnaisen lisävideon
- ennakkolämmittelykyselyn
- kirjoitetun oppitunnin
- lämmittelykyselyn ennen oppituntia
- kirjallisen oppitunnin
- projektipohjaisissa oppitunneissa vaiheittaiset ohjeet projektin rakentamiseen
> **Huomautus kyselyistä**: Kaikki kyselyt on koottu Quiz-app-kansioon, yhteensä 48 kyselyä, joissa kullakin on kolme kysymystä. Ne ovat saatavilla [tässä](https://ff-quizzes.netlify.app/web/). Kyselysovelluksen voi suorittaa paikallisesti tai ottaa käyttöön Azureen; noudata `quiz-app`-kansion ohjeita.
> **Muistutus tietovisoista**: Kaikki tietovisat löytyvät Quiz-app-kansiosta, yhteensä 48 tietovisaa, joissa jokaisessa on kolme kysymystä. Ne ovat saatavilla [tässä](https://ff-quizzes.netlify.app/web/). Tietovisasovellus voidaan suorittaa paikallisesti tai ottaa käyttöön Azureen; seuraa ohjeita `quiz-app`-kansiossa.
## 🗃️ Oppitunnit
| | Projektin nimi | Opitut käsitteet | Oppimistavoitteet | Linkitetty oppitunti | Tekijä |
| 01 | Aloittaminen | Johdatus ohjelmointiin ja työkaluihin | Opit ohjelmointikielten perustan ja ohjelmistot, jotka auttavat ammattilaiskehittäjiä työssään | [Johdatus ohjelmointikieliin ja työkaluihin](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Aloittaminen | GitHubin perusteet, tiimityöskentely | Kuinka käyttää GitHubia projektissasi ja tehdä yhteistyötä muiden kanssa koodipohjassa | [Johdatus GitHubiin](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 07 | JS Perusteet | Taulukot ja silmukat | Työskentele tietojen kanssa taulukoiden ja silmukoiden avulla JavaScriptissä | [Taulukot ja silmukat](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML käytännössä | Rakenna HTML luodaksesi online-terraariumin, keskittyen asettelun tekemiseen | [Johdatus HTML:ään](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS käytännössä | Rakenna CSS tietoystävän terraariumin tyylittelyä varten, keskittyen CSS:n perusteisiin mukaan lukien responsiivisuus | [Johdatus CSS:ään](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript sulkeet, DOM-manipulointi | Rakenna JavaScript, joka mahdollistaa terraariumin toiminnan drag/drop-käyttöliittymänä, keskittyen sulkeisiin ja DOM-manipulointiin | [JavaScript sulkeet ja DOM-manipulointi](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Kirjoituspelin rakentaminen | Opit käyttämään näppäimistötapahtumia JavaScript-sovelluksesi logiikan ohjaamiseen | [Tapahtumapohjainen ohjelmointi](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Selainten toiminta | Opit miten selaimet toimivat, niiden historian ja miten rakentaa ensimmäiset elementit selainlaajennukseen | [Tietoa selaimista](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Lomakkeen rakentaminen, API-kutsut ja muuttujien tallennus | Rakenna selainlaajennukseesi JavaScript-elementit API-kutsuihin paikallisesti tallennettujen muuttujien avulla |[APIt, lomakkeet ja paikallinen tallennus](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Selaintaustaprosessit, verkkosuorituskyky | Käytä selaimen taustaprosesseja hallitsemaan laajennuksen kuvaketta; opi verkkosuorituskyvystä ja optimointikeinoista | [Taustatehtävät ja suorituskyky](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Edistyneempi pelinkehitys JavaScriptillä | Opit periytymisestä luokkien ja komposition avulla sekä Pub/Sub-kuvioista valmistautuessasi pelin rakentamiseen | [Johdatus edistyneeseen pelinkehitykseen](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Piirtäminen kankaalle | Opit Canvas API:stä, jota käytetään elementtien piirtämiseen näytölle | [Piirtäminen kankaalle](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Elementtien liikuttaminen näytöllä | Tutustu, miten elementit saavat liikkeen käyttäen karteesisia koordinaatteja ja Canvas API:ta | [Elementtien liikuttaminen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Törmäyksentunnistus | Tee, että elementit törmäävät ja reagoivat toisiinsa näppäinyhdistelmillä ja tarjoavat jäähdytystoiminnon pelin suorituskyvyn turvaamiseksi | [Törmäyksentunnistus](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Pisteiden laskeminen | Tee matemaattisia laskelmia pelin tilan ja suorituksen perusteella | [Pisteiden laskeminen](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Pelin lopettaminen ja uudelleenkäynnistys | Opit pelin lopettamisesta ja uudelleenkäynnistämisestä, mukaan lukien resurssien siivous ja muuttujien arvojen nollaus | [Lopetusehto](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Pankkisovellus](./7-bank-project/solution/README.md) | HTML-mallit ja reitit web-sovelluksessa | Opit luomaan monisivuisen verkkosivuston arkkitehtuurin runkoa reitityksen ja HTML-mallien avulla | [HTML-mallit ja reitit](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Pankkisovellus](./7-bank-project/solution/README.md) | Kirjautumis- ja rekisteröitymislomakkeen rakentaminen | Opit lomakkeiden rakentamisesta ja validointirutiinien käsittelystä | [Lomakkeet](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Pankkisovellus](./7-bank-project/solution/README.md) | Datan hakeminen ja käyttö | Kuinka data virtaa sovellukseesi, miten hakea, tallentaa ja poistaa sitä |[Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Pankkisovellus](./7-bank-project/solution/README.md) | Tilanhallinnan käsitteet | Opit, miten sovelluksesi säilyttää tilan ja miten hallita sitä ohjelmallisesti | [Tilanhallinta](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Selain/VScode-koodi](../../8-code-editor) | Työskentely VScoden kanssa | Opit käyttämään koodieditoria | [Käytä VScode-koodieditoria](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Työskentely tekoälyn kanssa | Opit rakentamaan oman tekoälyavustajan | [AI-avustajaprojekti](./9-chat-project/README.md) | Chris |
| 01 | Aloittaminen | Johdatus ohjelmointiin ja työkaluihin | Opit useimpien ohjelmointikielten perusteet ja ohjelmistot, jotka auttavat ammattilaiskehittäjiä työssään | [Johdatus ohjelmointikieliin ja työkaluihin](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Aloittaminen | GitHubin perusteet, mukaan lukien tiimityö | Kuinka käyttää GitHubia projektissasi, miten tehdä yhteistyötä muiden kanssa koodipohjassa | [Johdatus GitHubiin](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 07 | JS Perusteet | Taulukot ja silmukat | Työskentele tietojen kanssa taulukoiden ja silmukoiden avulla JavaScriptissä| [Taulukot ja silmukat](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML käytännössä | Rakenna HTML verkossa toimivan terrariumin luomiseen keskittyen asettelun rakentamiseen |[Johdatus HTML:ään](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS käytännössä | Rakenna CSS tyylitämään verkossa olevaa terrariumia, keskittyen CSS:n perusteisiin ja sivun responsiivisuuden tekemiseen | [Johdatus CSS:ään](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript-sulkeet, DOM-manipulointi | Rakenna JavaScript, joka mahdollistaa terrariumin toiminnan drag & drop -käyttöliittymänä, keskittyen sulkeisiin ja DOM-manipulointiin | [JavaScript-sulkeet, DOM-manipulointi](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Rakennetaan kirjoituspeli | Opit käyttämään näppäimistötapahtumia JavaScript-sovelluksesi logiikan ohjaamiseen | [Tapahtumapohjainen ohjelmointi](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Työskentely selainten kanssa | Opi miten selaimet toimivat, niiden historiasta ja miten rakennetaan selaimen laajennuksen ensimmäiset osat | [Tietoa selaimista](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Lomakkeen rakentaminen, API-kutsu ja muuttujien tallennus paikalliseen tallennustilaan | Rakenna JavaScript-selaimen laajennuksen osat, jotka käyttävät API-kutsua paikalliseen tallennustilaan tallennettujen muuttujien avulla | [API:t, lomakkeet ja paikallinen tallennustila](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Taustaprosessit selaimessa, web-suorituskyky | Käytä selaimen taustaprosesseja laajennuksen kuvakkeen hallintaan; opi web-suorituskyvystä ja joistakin optimoinneista | [Taustatehtävät ja suorituskyky](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Edistyneempi pelikehitys JavaScriptillä | Opit perinnöstä käyttäen sekä luokkia että koostetta sekä julkaisija-tilaaja-mallia pelin rakentamisen valmisteluna | [Johdatus edistyneeseen pelikehitykseen](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Piirtäminen canvas-elementtiin | Opit Canvas API:n, jota käytetään elementtien piirtämiseen näyttöön | [Piirtäminen canvas-elementtiin](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Elementtien liikuttaminen näytöllä | Tutustu miten elementeille saadaan liikettä kartesiakkoordinaattien ja Canvas API:n avulla | [Elementtien liikuttaminen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Törmäyksentunnistus | Tee elementtien törmäyksiä ja reagoi niihin käyttämällä näppäimistön painalluksia ja tarjoa cooldown-toiminto pelin suorituskyvyn turvaamiseksi | [Törmäyksentunnistus](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Pisteiden laskeminen | Suorita laskelmia pelin tilan ja suorituskyvyn pohjalta | [Pisteiden laskeminen](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Pelin lopettaminen ja uudelleenkäynnistäminen | Opit pelin lopettamisesta ja uudelleenkäynnistämisestä, mukaan lukien resurssien siivous ja muuttujien arvon nollaaminen | [Lopetusehto](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-mallipohjat ja reitit web-sovelluksessa | Opit luomaan monisivuisen verkkosivuston arkkitehtuurin rungon reitityksen ja HTML-mallipohjien avulla | [HTML-mallipohjat ja reitit](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Kirjautumis- ja rekisteröintilomakkeen rakentaminen | Opit lomakkeiden rakentamisesta ja validointirutiinien käsittelystä | [Lomakkeet](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Tietojen hakemisen ja käyttämisen menetelmät | Miten tiedot virtaavat sovellukseesi ja siitä ulos, miten hakea, tallentaa ja poistaa niitä | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Tilanhallinnan käsitteet | Opit miten sovelluksesi säilyttää tilan ja miten hallita sitä ohjelmallisesti | [Tilanhallinta](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Työskentely VScoden kanssa | Opit käyttämään koodieditoria | [Käytä VScode-koodieditoria](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Työskentely tekoälyn kanssa | Opit rakentamaan oman tekoälyavustajan | [Tekoälyavustajan projekti](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogiikka
Oppimateriaalimme on suunniteltu kahden keskeisen pedagogisen periaatteen pohjalta:
* projektioppiminen
* usein toistuvat kyselyt
Opetussuunnitelmamme on suunniteltu kahden keskeisen pedagogisen periaatteen mukaisesti:
* projektipohjainen oppiminen
* usein toistuvat tietovisat
Ohjelma opettaa JavaScriptin, HTML:n ja CSS:n perusteet sekä nykyaikaisten web-kehittäjien käyttämiä työkaluja ja tekniikoita. Oppilailla on mahdollisuus kehittää käytännön taitoja rakentamalla kirjoituspeli, virtuaaliterraario, ympäristöystävällinen selainlaajennus, avaruustyyppinen peli ja liiketoiminta-pankkisovellus. Sarjan lopussa opiskelijoilla on vankka ymmärrys web-kehityksestä.
Ohjelma opettaa JavaScriptin, HTML:n ja CSS:n perusasiat sekä viimeisimmät työkalut ja tekniikat, joita nykypäivän web-kehittäjät käyttävät. Opiskelijat saavat käytännön kokemusta rakentamalla kirjoituspelin, virtuaalisen terrariumin, ympäristöystävällisen selainlaajennuksen, avaruustyyppisen pelin ja yrityksille tarkoitetun pankkisovelluksen. Sarjan lopussa opiskelijat ovat saaneet vahvan ymmärryksen web-kehityksestä.
> 🎓 Voit suorittaa tämän oppilaitoksen ensimmäiset oppitunnit [Oppimispolku](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)-muodossa Microsoft Learnissa!
> 🎓 Voit suorittaa tämän opetussuunnitelman ensimmäiset oppitunnit Microsoft Learnin [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) -kurssina!
Varmistamalla sisällön yhteensopivuuden projektien kanssa prosessi tulee opiskelijoille mielekkäämmäksi ja käsitteiden omaksuminen tehostuu. Kirjoitimme myös useita aloitusoppitunteja JavaScript-perusteista käynnistämään kokonaisuuden, jotka on yhdistetty videosarjaan "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", joiden tekijät osallistuivat tähän oppimateriaalin kokoamiseen.
Varmistamalla, että sisältö vastaa projekteja, prosessi on opiskelijoille kiinnostavampi ja käsitteiden oppiminen parantuu. Kirjoitimme myös useita JavaScriptin perusteiden aloitusoppitunteja käsitteiden esittelemiseksi, parina videona "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" -videosarjasta, jonka osan tekijöistä osallistui tähän opetussuunnitelmaan.
Lisäksi aloituskysely luokkahuoneen edellä asettaa opiskelijan tavoitteen aiheeseen tutustumiselle, ja luokan jälkeinen toinen kysely tukee oppien säilymistä. Tämä oppimateriaali on suunniteltu joustavaksi ja hauskaksi, ja se voidaan suorittaa kokonaisuudessaan tai osittain. Projektit alkavat pienestä ja monimutkaistuvat viimeistään 12 viikon syklin loppuun mennessä.
Lisäksi ennen luokkaa suoritettava pieni tietovisa asettaa opiskelijan tavoitteeksi aiheen oppimisen, ja toinen tietovisa luokan jälkeen varmistaa syvemmän oppimisen. Tämä opetussuunnitelma on suunniteltu joustavaksi ja hauskaksi, ja se voidaan suorittaa kokonaan tai osittain. Projektit alkavat pieninä ja kasvavat monimutkaisemmiksi 12 viikon jakson loppua kohden.
Vaikka olemme tietoisesti välttäneet JavaScript-kehysten käyttöönottoa keskittyäksemme web-kehittäjän perusvalmiuksiin ennen kehysten omaksumista, hyvä seuraava askel tämän oppimateriaalin suorittamisen jälkeen on oppia Node.js:stä toisen videosarjan avulla: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Vaikka olemme tietoisesti välttäneet JavaScript-kehysten esittelyä keskittyäksemme perusosaamiseen web-kehittäjänä ennen kehysten käyttöönottoa, hyvä seuraava askel tämän opetussuunnitelman jälkeen olisi Node.js:n opettelu toisen videosarjan avulla: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Tutustu myös [käytösohjeisiimme](CODE_OF_CONDUCT.md) ja [osallistumisohjeisiin](CONTRIBUTING.md). Otamme mielellämme vastaan rakentavaa palautettasi!
> Tutustu [käyttäytymissääntöihimme](CODE_OF_CONDUCT.md) ja [osallistumisohjeisiin](CONTRIBUTING.md). Otamme mielellämme vastaan rakentavaa palautettasi!
## 🧭 Offline-käyttö
Voit käyttää tätä dokumentaatiota offline-tilassa käyttämällä [Docsifya](https://docsify.js.org/#/). Haarauta tämä repo, [asenna Docsify](https://docsify.js.org/#/quickstart) paikallisesti ja kirjoita tämän repokansion juurikansiossa komento `docsify serve`. Verkkosivusto toimii portissa 3000 paikallisessa koneessasi: `localhost:3000`.
Voit käyttää tätä dokumentaatiota offline-tilassa käyttämällä [Docsify](https://docsify.js.org/#/). Haarauta tämä repo, asenna [Docsify](https://docsify.js.org/#/quickstart) paikalliselle koneellesi ja kirjoita tämän reposton juurikansiossa `docsify serve`. Verkkosivusto palvelee portissa 3000 paikallisessa isäntäkoneessasi: `localhost:3000`.
## 📘 PDF
Kaikkien oppituntien PDF löytyy [täältä](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Kaikkien oppituntien PDF löytyy täältä [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Muut kurssit
Tiimimme tuottaa muitakin kursseja! Tutustu:
Tiimimme tuottaa myös muita kursseja! Tutustu:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -223,7 +233,7 @@ Tiimimme tuottaa muitakin kursseja! Tutustu:
---
### Generatiivisen tekoälyn sarja
### 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)
@ -231,7 +241,7 @@ Tiimimme tuottaa muitakin kursseja! Tutustu:
---
### Perusteet
### 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)
@ -242,29 +252,29 @@ Tiimimme tuottaa muitakin kursseja! Tutustu:
---
### Copilot-sarja
### 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)
Jos jumitut tai sinulla on kysyttävää tekoälysovellusten rakentamisesta, liity muiden oppijoiden ja kokeneiden kehittäjien keskusteluihin MCP:stä. Se on tukeva yhteisö, jossa kysymyksiä saa esittää ja tietoa jaetaan vapaasti.
Jos jäät jumiin tai sinulla on kysyttävää tekoälysovellusten rakentamisesta, liity oppijoiden ja kokeneiden kehittäjien keskusteluihin MCP:stä. Se on kannustava yhteisö, jossa kysymykset ovat tervetulleita ja tieto jaetaan vapaasti.
Tämä arkisto on lisensoitu MIT-lisenssillä. Lisätietoja löytyy tiedostosta [LICENSE](../../LICENSE).
Tämä arkisto on lisensoitu MIT-lisenssillä. Lisätietoja saat tiedostosta [LICENSE](../../LICENSE).
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Vastuuvapauslauseke**:
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, ole hyvä ja huomioi, että automaattikäännöksissä saattaa esiintyä virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäiskielellä tulisi pitää virallisena lähteenä. Tärkeissä tiedoissa suositellaan ammattilaisten tekemää ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä johtuvista väärinymmärryksistä tai tulkinnoista.
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, ota huomioon, että automaattikäännökset saattavat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja omalla kielellään on virallinen ja luotettava lähde. Tärkeissä asioissa suosittelemme ammattimaista ihmis kääntäjän tekemää käännöstä. Emme ole vastuussa mahdollisista väärinymmärryksistä tai tulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
Dette er et utdanningsrepository for å lære bort grunnleggende webutvikling til nybegynnere. Pensumet er et omfattende 12-ukers kurs utviklet av Microsoft Cloud Advocates, med 24 praktiske leksjoner som dekker JavaScript, CSS og HTML.
Dette er et utdanningspensum-repositorium for å lære webutviklingsgrunnlag til nybegynnere. Pensumet er et omfattende 12-ukers kurs utviklet av Microsoft Cloud Advocates, med 24 praktiske leksjoner som dekker JavaScript, CSS og HTML.
### Nøkkelkomponenter
### Hovedkomponenter
- **Utdanningsinnhold**: 24 strukturerte leksjoner organisert i prosjektbaserte moduler
- **Praktiske prosjekter**: Terrarium, Typing Game, Nettleserutvidelse, Space Game, Banking App, Code Editor og AI Chat Assistant
- **Interaktive quizzer**: 48 quizzer med 3 spørsmål hver (før og etterleksjon)
- **Flerspråklig støtte**: Automatiserte oversettelser for 50+ språk via GitHub Actions
- **Praktiske prosjekter**: Terrarium, Typing Game, Nettleserutvidelse, Space Game, Bankapp, Kodeeditor og AI Chat-assistent
- **Interaktive quizzer**: 48 quizzer med 3 spørsmål hver (før- og etterleksjon vurderinger)
- **Flerspråklig støtte**: Automatiske oversettelser til 50+ språk via GitHub Actions
- `9-chat-project/README.md` - AI chatassistent prosjekt
- `9-chat-project/README.md` - AI chat-assistent prosjekt
### Monorepo-struktur
Selv om det ikke er et tradisjonelt monorepo, inneholder dette repository flere uavhengige prosjekter:
Selv om dette ikke er et tradisjonelt monorepo, inneholder dette repositoriet flere uavhengige prosjekter:
- Hver leksjon er selvstendig
- Prosjektene deler ikke avhengigheter
- Jobb med individuelle prosjekter uten å påvirke andre
- Arbeid på individuelle prosjekter uten å påvirke andre
- Klon hele repo for full pensumopplevelse
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**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, vennligst vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på dets opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle 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, vennligst vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det opprinnelige dokumentet på dets originale språk bør betraktes som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.
Lær det grunnleggende om webutvikling med vårt 12-ukers omfattende kurs av Microsoft Cloud Advocates. Hver av de 24 leksjonene dykker ned i JavaScript, CSS og HTML gjennom praktiske prosjekter som terrarier, nettleserutvidelser og romspill. Delta i quizzer, diskusjoner og praktiske oppgaver. Forbedre ferdighetene dine og optimaliser kunnskapsbevaringen med vår effektive prosjektbaserte pedagogikk. Start din kodingreise i dag!
Lær grunnleggende webutvikling med vårt 12-ukers omfattende kurs av Microsoft Cloud Advocates. Hver av de 24 leksjonene dykker ned i JavaScript, CSS og HTML gjennom praktiske prosjekter som terrarier, nettleserutvidelser og romspill. Delta i quizer, diskusjoner og praktiske oppgaver. Forbedre ferdighetene dine og optimaliser kunnskapsretensjonen med vår effektive prosjektbaserte pedagogikk. Start din kode-reise i dag!
Følg disse trinnene for å komme i gang med disse ressursene:
1. **Lag en gaffel av repositoriet**: Klikk [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
> Dette repositoriet inkluderer 50+ språkoversettelser som øker nedlastningsstørrelsen betydelig. For å klone uten oversettelser, bruk sparse checkout:
>
> Dette repoet inkluderer 50+ språkoversettelser som øker nedlastingsstørrelsen betydelig. For å klone uten oversettelser, bruk sparse checkout:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Dette gir deg alt du trenger for å fullføre kurset med mye raskere nedlasting.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Hvis du ønsker at flere oversettelsesspråk skal støttes, er de oppført [her](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Hvis du ønsker at flere oversettelsesspråk skal støttes, er disse oppført [her](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Er du student?_
Besøk [**Student Hub-side**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) hvor du finner nybegynnerressurser, studentpakker og til og med måter å få et gratis sertifikatkupong på. Dette er siden du vil bokmerke og sjekke fra tid til annen ettersom 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 nybegynnerressurser, studentpakker og til og med måter å få en gratis sertifikatkupong på. Dette er siden du bør bokmerke og sjekke fra tid til annen da vi bytter ut innhold månedlig.
### 📣 Kunngjøring - Nye GitHub Copilot Agent modus utfordringer å fullføre!
### 📣 Annonsering - Nye utfordringer i GitHub Copilot Agent-modus å fullføre!
Ny utfordring lagt til, se etter "GitHub Copilot Agent Challenge 🚀" i de fleste kapitler. Det er en ny utfordring for deg å fullføre ved hjelp av GitHub Copilot og Agent-modus. Om du ikke har brukt Agent-modus før, kan den ikke bare generere tekst, men også lage og redigere filer, kjøre kommandoer og mer.
Ny utfordring lagt til, se etter "GitHub Copilot Agent Challenge 🚀" i de fleste kapitlene. Det er en ny utfordring du kan fullføre ved å bruke GitHub Copilot og Agent-modus. Hvis du ikke har brukt Agent-modus før, kan den ikke bare generere tekst, men også opprette og redigere filer, kjøre kommandoer og mer.
### 📣 Kunngjøring - _Nytt prosjekt å bygge med Generativ AI_
### 📣 Annonsering - _Nytt prosjekt å bygge med Generativ AI_
Nytt AI Assistant-prosjekt nettopp lagt til, sjekk det ut [prosjekt](./9-chat-project/README.md)
Nytt AI-assistentprosjekt nettopp lagt til, sjekk det ut [prosjekt](./9-chat-project/README.md)
### 📣 Kunngjøring - _Ny læreplan_ om Generativ AI for JavaScript er nettopp lansert
### 📣 Annonsering - _Ny læreplan_ om Generativ AI for JavaScript ble nettopp utgitt
Ikke gå glipp av vår nye Generativ AI læreplan!
Ikke gå glipp av vår nye læreplan for 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 å fullføre, en kunnskapstest og en utfordring for å veilede deg gjennom læringsemner som:
- Prompting og prompt-engineering
- Tekst- og bildeapp-generering
Hver leksjon inkluderer en oppgave å fullføre, en kunnskapskontroll og en utfordring for å veilede deg i læring av temaer som:
- Prompting og promptengineering
- Tekst- og bildeappgenerering
- Søkeapper
Besøk [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for å komme i gang!
@ -83,131 +93,130 @@ Besøk [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for å k
## 🌱 Komme i gang
> **Lærere**, vi har [inkludert noen forslag](for-teachers.md) til hvordan bruke denne læreplanen. Vi setter stor pris på din tilbakemelding [i vår diskusjonsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Lærere**, vi har [inkludert noen forslag](for-teachers.md) til hvordan du kan bruke denne læreplanen. Vi vil gjerne ha tilbakemeldinger [i vårt diskusjonsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Lærende](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for hver leksjon, start med en pre-forelesningsquiz og følg deretter med å lese forelesningsmaterialet, fullføre de ulike aktivitetene og sjekk forståelsen din med post-forelesningsquizen.
**[Elever](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for hver leksjon, start med en for-forelesningsquiz og følg opp med å lese forelesningsmaterialet, fullføre de ulike aktivitetene og sjekke forståelsen med etter-forelesningsquiz.
For å forbedre læringsopplevelsen din, koble deg sammen med dine jevnaldrende for å jobbe med prosjektene sammen! Diskusjoner oppfordres i vårt [diskusjonsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) hvor vårt team av moderatorer vil være tilgjengelig for å svare på dine spørsmål.
For å forbedre læringsopplevelsen, koble deg sammen med dine medstudenter for å jobbe på prosjektene sammen! Diskusjoner oppfordres i vårt [diskusjonsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) hvor vårt team av moderatorer vil være tilgjengelig for å svare på spørsmålene dine.
For å videreutvikle utdannelsen din, anbefaler vi sterkt å utforske [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for tilleggsmateriell.
For å utvide utdannelsen anbefaler vi sterkt å utforske [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for ekstra studiemateriell.
### 📋 Sette opp miljøet ditt
Denne læreplanen har et utviklingsmiljø klart til bruk! Når du kommer i gang kan du velge å kjøre læreplanen i en [Codespace](https://github.com/features/codespaces/) (_et nettleserbasert miljø uten behov for installasjoner_), eller lokalt på din datamaskin ved bruk av en tekstredigerer som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Denne læreplanen har et utviklingsmiljø klart til bruk! Når du kommer i gang kan du velge å kjøre læreplanen i en [Codespace](https://github.com/features/codespaces/) (_et nettleserbasert miljø uten behov for installasjoner_), eller lokalt på datamaskinen din ved å bruke en teksteditor som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Opprett ditt eget repository
For at du enkelt skal kunne lagre arbeidet ditt, anbefales det at du oppretter din egen kopi av dette repositoriet. 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 læreplanen.
For at du enkelt skal kunne lagre arbeidet ditt, anbefales det at du oppretter din egen kopi av dette repoet. Du kan gjøre dette ved å klikke på **Use this template**-knappen øverst på siden. Dette vil lage et nytt repository i din GitHub-konto med en kopi av læreplanen.
Følg disse trinnene:
1. **Lag en gaffel av repositoriet**: Klikk på "Fork"-knappen øverst til høyre på denne siden.
I din kopi av dette repositoriet du opprettet, klikk på **Code**-knappen og velg **Open with Codespaces**. Dette vil opprette en ny Codespace for deg å jobbe i.
I din kopi av repoet som du opprettet, klikk på **Code**-knappen og velg **Open with Codespaces**. Dette vil opprette en ny Codespace for deg å jobbe i.
For å kjøre denne læreplanen lokalt på datamaskinen din trenger du en tekstredigerer, 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 guide deg gjennom ulike alternativer for hver av disse verktøyene slik at du kan velge det som passer best for deg.
Vår anbefaling er å bruke [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) som redigerer, 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).
For å kjøre denne læreplanen lokalt på din datamaskin 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 lede deg gjennom ulike valg 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 din 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 ditt repository til din datamaskin. Du kan gjøre dette ved å klikke på **Code**-knappen og kopiere URL-en:
[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, og erstatter `<your-repository-url>` med URL-en du nettopp kopierte:
Åpne deretter [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ør følgende kommando, erstatt `<your-repository-url>` med URL-en du nettopp kopierte:
```bash
git clone <your-repository-url>
```
2. Åpne mappen i Visual Studio Code. Du kan gjøre dette ved å klikke **Fil** > **Åpne mappe** og velge mappen du nettopp klonet.
2. Åpne mappen i Visual Studio Code. Du kan gjøre dette ved å klikke **File** > **Open Folder** og velge mappen du nettopp klonet.
> 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 i Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - for å hjelpe deg å skrive kode raskere
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - for å hjelpe deg skrive kode raskere
## 📂 Hver leksjon inneholder:
## 📂 Hver leksjon inkluderer:
- valgfri skisse
- valgfri supplerende video
- valgfri skisse-notat
- valgfri tilleggsvideo
- oppvarmingsquiz før leksjonen
- skriftlig leksjon
- for prosjektbaserte leksjoner, trinnvise guider for hvordan du bygger prosjektet
- for prosjektrelaterte leksjoner, steg-for-steg guider for hvordan bygge prosjektet
- kunnskapstester
- en utfordring
- supplerende lesing
- tilleggslesning
- oppgave
- [quiz etter leksjonen](https://ff-quizzes.netlify.app/web/)
> **En merknad om quizer**: Alle quizer er samlet i Quiz-app mappen, totalt 48 quizer med tre spørsmål hver. De er tilgjengelige [her](https://ff-quizzes.netlify.app/web/). quiz-appen kan kjøres lokalt eller deployeres til Azure; følg instruksjonene i `quiz-app`-mappen.
> **En merknad om quizer**: Alle quizer ligger i Quiz-app-mappen, totalt 48 quizer med tre spørsmål hver. De er tilgjengelige [her](https://ff-quizzes.netlify.app/web/) 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øy for faget | Lær det grunnleggende bak de fleste programmeringsspråk og om programvare som hjelper profesjonelle utviklere å gjøre 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 nettside-tilgjengelighet | [Tilgjengelighet Grunnleggende](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 05 | JS Grunnleggende | Funksjoner og metoder | Lær om funksjoner og metoder for å håndtere et applikasjons logikkflyt | [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 å bruke beslutningsmetoder | [Ta beslutninger](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Grunnleggende | Arrays og løkker | Arbeide med data ved bruk 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 virtuelt terrarium, med fokus på å bygge en 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 virtuelle terrariet, med fokus på grunnleggende CSS inkludert making 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 for å gjøre terrariet funksjonelt som et dra/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) | Lag et Skrivespill | Lær hvordan du bruker tastaturhendelser for å drive 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 bygger 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) | Lage et skjema, kalle et API og lagre variabler i lokal lagring | Bygg JavaScript-elementene til nettleserutvidelsen din for å kalle et API ved bruk av variabler lagret i lokal lagring | [APIer, skjemautfylling 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, web-ytelse | Bruk nettleserens bakgrunnsprosesser for å administrere utvidelsens ikon; lær om web-ytelse og noen optimaliseringer for å gjøre | [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 å bruke både klasser og komposisjon og Pub/Sub-mønsteret, som en forberedelse til å lage et spill | [Introduksjon til avansert spillutvikling](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Tegning til lerret | Lær om Canvas API, som brukes til å tegne elementer på skjermen | [Tegning til lerret](./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 | La elementer kollidere og reagere på hverandre ved hjelp av tastetrykk og implementer en cooldown-funksjon for å sikre spillytelse | [Kollisjonsdeteksjon](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Hold styr på poeng | Utfør matematiske beregninger basert på spillets status og ytelse | [Poengtelling](./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 restarte spillet, inkludert å rydde opp ressurser og tilbakestille variabelverdier | [Avslutningsbetingelsen](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-maler og ruter i et webapp | Lær hvordan du lager grunnstrukturen til en flersidig nettsides arkitektur ved bruk av routing 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) | Lag en innloggings- og registreringsskjema | Lær om å lage 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 hente det, lagre det, og kvitte seg med det | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Begreper om tilstandsadministrasjon | Lær hvordan appen din beholder tilstand og hvordan du kan styre den programmessig | [Tilstandsadministrasjon](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Arbeider med VScode | Lær hvordan du bruker en kode-editor| [Bruk VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Arbeider med AI | Lær hvordan du bygger din egen AI-assistent | [AI Assistent prosjekt](./9-chat-project/README.md) | Chris |
| 01 | Komme i gang | Introduksjon til programmering og verktøy i faget | Lær grunnlaget bak de fleste programmeringsspråk og programvare som hjelper profesjonelle utviklere | [Introduksjon til programmeringsspråk og verktøy i faget](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Komme i gang | Grunnleggende GitHub, inkludert arbeid i teamet | Hvordan bruke GitHub i ditt prosjekt, og 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 nettilgjengelighet | [Grunnleggende tilgjengelighet](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 05 | JS Grunnleggende | Funksjoner og metoder | Lær om funksjoner og metoder for å styre en applikasjons logikk | [Funksjoner og metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine og Christopher |
| 06 | JS Grunnleggende | Å ta beslutninger med JS | Lær hvordan lage betingelser i koden din ved hjelp av beslutningsmetoder | [Beslutningstaking](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Grunnleggende | Lister og løkker | Arbeid med data ved bruk av lister og løkker i JavaScript | [Lister 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å 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å grunnleggende CSS inkludert responsiv side | [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 å gjøre terrariet til en drag/drop-grensesnitt, med fokus på closures og DOM-manipulasjon | [JavaScript Closures, DOM-manipulasjon](./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 ditt JavaScript-app | [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 skissere 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) | Bygging av skjema, kalle et API og lagre variabler i lokal lagring | Bygg JavaScript-elementer i nettleserutvidelsen din som kaller et API ved bruk 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, web-ytelse | Bruk nettleserens bakgrunnsprosesser til å styre utvidelsens ikon; lær om web-ytelse 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 og 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) | Tegning til canvas | Lær om Canvas API, brukt for å tegne elementer på en skjerm | [Tegning til 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 tilby en cooldown-funksjon for å sikre 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 å avslutte og starte spillet på nytt, inkludert opprydding av ressurser og tilbakestilling av variabler | [Sluttbetingelsen](./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 lage strukturen for en nettsides arkitektur med routing 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 påloggings- og registreringsskjema | Lær om bygging av skjemaer og håndtering av valideringsrutiner | [Skjemaer](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metoder for henting og bruk av data | Hvordan data flyter inn og ut av appen din, hvordan hente, lagre og kvitte seg med den | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Konsepter innen tilstandshåndtering | Lær hvordan appen din beholder tilstand og hvordan styre den programmatisk | [Tilstandshåndtering](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Arbeide med VScode | Lær hvordan du bruker en kodeeditor| [Bruk VScode kodeeditor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Arbeide med AI | Lær hvordan bygge din egen AI-assistent | [AI Assistant-prosjekt](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogikk
Vårt pensum er designet med to viktige pedagogiske prinsipper i tankene:
Vårt pensum er utformet med to viktige pedagogiske prinsipper i tankene:
* prosjektbasert læring
* hyppige quizer
Programmet lærer grunnleggende JavaScript, HTML og CSS, samt de nyeste verktøyene og teknikkene som dagens webutviklere bruker. Studentene vil få muligheten til å utvikle praktisk erfaring ved å bygge et skrivespill, virtuelt terrarium, miljøvennlig nettleserutvidelse, rom-invader-stil spill og en bankapp for bedrifter. Ved slutten av serien vil studentene ha oppnådd en solid forståelse av webutvikling.
Programmet lærer grunnleggende JavaScript, HTML, og CSS, samt de nyeste verktøyene og teknikkene som dagens webutviklere bruker. Studenter får muligheten til å utvikle praktisk erfaring ved å bygge et skrive-spill, virtuelt terrarium, miljøvennlig nettleserutvidelse, et Space Invaders-inspirert spill og en bank-app 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 dette pensumet som en [Læringssti](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn!
Ved å sikre at innholdet stemmer overens med prosjektene, gjøres prosessen mer engasjerende for studentene og lagring av konsepter vil bli forbedret. Vi skrev også flere startleksjoner i JavaScript-grunnleggende for å introdusere konsepter, koblet 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, noen av forfatterne bidro til dette pensumet.
Ved å sikre at innholdet stemmer overens med prosjektene, blir prosessen mer engasjerende for studentene og konseptene blir bedre husket. Vi skrev også flere oppstartleksjoner i JavaScript-grunnleggende for å introdusere konsepter, kombinert 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 dette pensumet.
I tillegg setter en lavterskelquiz før en time intensjonen til studenten om å lære et tema, mens en andre quiz etter timen sikrer ytterligere lagring. Dette pensumet er designet for å være fleksibelt og morsomt og kan tas i sin helhet eller delvis. Prosjektene starter smått og blir stadig mer komplekse innen slutten av 12-ukers syklusen.
I tillegg setter en lavterskel-quiz før en klasse intensjonen for studenten mot å lære et tema, mens en andre quiz etter klassen sikrer videre hukommelse. Dette pensumet er designet for å være fleksibelt og morsomt, og kan tas i sin helhet eller delvis. Prosjektene starter smått og blir stadig mer komplekse innen slutten av en 12-ukers syklus.
Selv om vi med vilje har unngått å introdusere JavaScript-rammeverk for å fokusere på grunnleggende ferdigheter som trengs som webutvikler før man tar i bruk et rammeverk, vil et godt neste steg etter å ha fullført dette pensumet 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 å fokusere på grunnleggende ferdigheter som kreves som webutvikler før du tar i bruk et rammeverk, vil et godt neste steg etter dette pensumet være å lære om Node.js via en annen videosamling: "[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 [Atferdskodeks](CODE_OF_CONDUCT.md) og [Bidra](CONTRIBUTING.md). Vi ønsker din konstruktive tilbakemelding velkommen!
> Besøk våre retningslinjer for [Adferdskodeks](CODE_OF_CONDUCT.md) og [Bidrag](CONTRIBUTING.md). Vi setter pris på din konstruktive tilbakemelding!
## 🧭 Offline-tilgang
## 🧭 Frakoblet tilgang
Du kan kjøre denne dokumentasjonen offline ved å bruke [Docsify](https://docsify.js.org/#/). Fork dette repoet, [installer Docsify](https://docsify.js.org/#/quickstart) på din lokale maskin, og deretter i rotmappen til dette repoet, skriv `docsify serve`. Nettstedet vil serveres på port 3000 på din localhost: `localhost:3000`.
Du kan kjøre denne dokumentasjonen frakoblet ved å bruke [Docsify](https://docsify.js.org/#/). Fork dette repoet, [installer Docsify](https://docsify.js.org/#/quickstart) på din lokale maskin, og så i rotmappen av dette repoet, skriv `docsify serve`. Nettstedet vil bli servert på port 3000 på din localhost: `localhost:3000`.
## 📘 PDF
En PDF av alle leksjonene kan finnes [her](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
[](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)
[](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)
[](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)
[](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)
Hvis du sitter fast eller har noen spørsmål om å bygge AI-apper. Bli med andre lærende og erfarne utviklere i diskusjoner om MCP. Det er et støttende fellesskap hvor spørsmål er velkomne og kunnskap deles fritt.
Hvis du sitter fast eller har spørsmål om å bygge AI-apper. Bli med andre elever og erfarne utviklere i diskusjoner om MCP. Det er et støttende fellesskap hvor spørsmål er velkomne, og kunnskap deles fritt.
Dette depotet er lisensiert under MIT-lisensen. Se [LICENSE](../../LICENSE)-filen for mer informasjon.
Dette depotet er lisensiert under MIT-lisensen. Se [LICENSE](../../LICENSE)filen for mer informasjon.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfraskrivelse**:
Dette dokumentet er oversatt ved bruk av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi streber etter nøyaktighet, vennligst vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på dets opprinnelige språk skal betraktes som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle 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, vennligst vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det opprinnelige dokumentet på dets opprinnelige språk skal betraktes som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi påtar oss ikke ansvar for eventuelle misforståelser eller feiltolkninger som følge av bruken av denne oversettelsen.
localizeflow[bot]
1 day ago