Dette er et uddannelsesmæssigt kursuslager for undervisning i grundlæggende webudvikling for begyndere. Læreplanen er et omfattende 12-ugers kursus udviklet af Microsoft Cloud Advocates, der indeholder 24 praktiske lektioner om JavaScript, CSS og HTML.
Dette er et uddannelses-kursuslager til undervisning i grundlæggende webudvikling for begyndere. Pensum er et omfattende 12-ugers kursus udviklet af Microsoft Cloud Advocates, med 24 praktiske lektioner, der dækker JavaScript, CSS og HTML.
### Centrale komponenter
### Vigtige komponenter
- **Uddannelsesindhold**: 24 strukturerede lektioner organiseret i projektbaserede moduler
- **Læremateriale**: 24 strukturerede lektioner organiseret i projektbaserede moduler
- **Praktiske projekter**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor og AI Chat Assistant
- **Interaktive quizzer**: 48 quizzer med 3 spørgsmål hver (før/efter-lektion vurderinger)
- **Multisprogunderstøttelse**: Automatiserede oversættelser til 50+ sprog via GitHub Actions
- **Interaktive quizzer**: 48 quizzer med 3 spørgsmål hver (før/efter lektion evalueringer)
- **Flersproget support**: Automatiske oversættelser til 50+ sprog via GitHub Actions
- `9-chat-project/README.md` - AI chat assistent projekt
@ -398,11 +398,11 @@ Selvom det ikke er et traditionelt monorepo, indeholder dette lager flere uafhæ
- Hver lektion er selvstændig
- Projekter deler ikke afhængigheder
- Arbejd på individuelle projekter uden at påvirke andre
- Klon hele repoet for den fulde kursusoplevelse
- Klon hele lageret for den fulde kursusoplevelse
---
<!-- 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, bedes 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 eventuelle 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, bedes du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det oprindelige dokument på dets modersmål bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for 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 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!
Lær grundprincipperne i 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, hvilket øger downloadstørrelsen betydeligt. For at klone uden oversættelser skal du bruge spars checkout:
> Dette repository indeholder 50+ sprogoversættelser, hvilket markant øger downloadstørrelsen. For at klone uden oversættelser, brug sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,43 +48,43 @@ Følg disse trin for at komme i gang med at bruge disse ressourcer:
> 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.
> Dette giver dig alt, hvad du behøver for at gennemføre kurset med en langt hurtigere download.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**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)**
**Hvis du ønsker, at yderligere oversættelsessprog understøttes, 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 Hubsiden**](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.
Besøg [**Student Hub-siden**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), hvor du finder begynderressourcer, Student-pakker og endda måder at få et gratis certifikatkupon på. Dette er siden, du vil bogmærke og tjekke fra tid til anden, 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, 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.
Ny udfordring tilføjet, se efter "GitHub Copilot Agent Challenge 🚀" i de fleste kapitler. Det er en ny udfordring, som du kan gennemføre ved at bruge GitHub Copilot og Agent mode. Hvis du ikke har brugt Agent mode før, kan den ikke blot generere tekst men også oprette og redigere filer, køre kommandoer og mere.
### 📣 Meddelelse - _Nyt projekt at bygge ved hjælp af Generativ AI_
### 📣 Meddelelse - _Nyt projekt at bygge ved brug af Generativ AI_
Nyt AI Assistant projekt er netop tilføjet, tjek det ud [projekt](./9-chat-project/README.md)
Nyt AI Assistant projekt er lige tilføjet, tjek projektet ud [her](./9-chat-project/README.md)
### 📣 Meddelelse - _Ny læseplan_ om Generativ AI for JavaScript er netop udgivet
### 📣 Meddelelse - _Nyt pensum_ om Generativ AI for JavaScript blev lige udgivet
Gå ikke glip af vores nye læseplan for Generativ AI!
Gå ikke glip af vores nye Generative AI pensum!
Besøg [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for at komme i gang!
Hver lektion inkluderer en opgave, en videnscheck og en udfordring, der guider dig i at lære emner som:
Hver lektion inkluderer en opgave, en videnscheck og en udfordring til at guide dig i at lære emner som:
- Prompting og prompt engineering
- Tekst- og billedappgenerering
- Tekst- og billedapps-generering
- Søgeapps
Besøg [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for at komme i gang!
@ -93,122 +93,122 @@ 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 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)!
> **Lærere**, vi har [inkluderet nogle forslag](for-teachers.md) til, hvordan dette pensum kan bruges. Vi vil elske at få jeres feedback [i vores diskussionsforum](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 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.
**[Lærende](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for hver lektion, start med en præ-forelæsning quiz og fortsæt med at læse forelæsningsmaterialet, udføre de forskellige aktiviteter og tjek din forståelse med en post-forelæsnings quiz.
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 forbedre din læring, connect med dine jævnbyrdige for at arbejde sammen på projekterne! Diskussioner er opfordret i vores [diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), hvor vores team af moderatorer vil være til rådighed for at besvare dine spørgsmål.
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.
For at videreuddanne dig anbefaler vi stærkt at udforske [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for yderligere studiematerialer.
### 📋 Opsætning af dit miljø
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).
Dette pensum har et udviklingsmiljø klar til brug! Når du kommer i gang, kan du vælge at køre pensum i en [Codespace](https://github.com/features/codespaces/) (_et browserbaseret miljø uden behov for installation_), eller lokalt på din computer ved hjælp af en teksteditor som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Opret dit 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å **Use this template**knappen øverst på siden. Dette vil oprette et nyt repository i din GitHub-konto med en kopi af læseplanen.
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 i din GitHub-konto med en kopi af pensum.
Følg disse trin:
1. **Fork Repositoryet**: Klik på "Fork" knappen øverst til højre på denne side.
I din kopi af dette repository, som du har oprettet, klik på **Code** knappen og vælg **Open with Codespaces**. Dette opretter en ny Codespace til dig at arbejde i.
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 til dig at arbejde i.
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.
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 handelsværktøjer](../../1-getting-started-lessons/1-intro-to-programming-languages), vil guide dig gennem forskellige muligheder for hvert af disse værktøjer, så du kan vælge det, der passer bedst til dig.
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:
Vi anbefaler at bruge [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) som din editor, som også har et integreret [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. Du kan gøre dette ved at klikke på **Code**knappen og kopiere URL'en:
[CodeSpace](./images/createcodespace.png)
Åbn derefter [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) i [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) og kør følgende kommando, hvor 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 kopierede:
```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 netop har klonet.
2. Åbn mappen i Visual Studio Code. Du kan gøre dette ved at klikke på **File** > **Open Folder** og vælge den mappe, du lige har klonet.
> Anbefalede Visual Studio Code-udvidelser:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - for at 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
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - til at forhåndsvise HTML-sider inden for Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - til at hjælpe dig med at skrive kode hurtigere
## 📂 Hver lektion inkluderer:
- valgfri skitsetegning
- valgfri sketchnote
- valgfri supplerende video
- opvarmningsquiz før lektionen
- skreven lektion
- varm-quiz før lektionen
- skriftlig lektion
- for projektbaserede lektioner, trin-for-trin vejledninger om, hvordan man bygger projektet
- videnschecks
- videnskontroller
- en udfordring
- supplerende læsning
- opgave
- [quiz efter lektion](https://ff-quizzes.netlify.app/web/)
> **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.
> **En note om quizzer**: Alle quizzer findes i Quiz-app mappen, 48 quizzer med tre spørgsmål hver. De er tilgængelige [her](https://ff-quizzes.netlify.app/web/) quiz-app'en kan køre lokalt eller udgives til Azure; følg instruktionerne i `quiz-app` mappen.
| 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 |
| 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, som 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 GitHub, inkl. arbejde i team | Hvordan man bruger GitHub i sit projekt, og hvordan man samarbejder med andre om kodebasis | [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 tilgængelighed](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScript-datatyper | Det grundlæggende om JavaScript-datatyper | [Datatyper](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Funktioner og metoder | Lær om funktioner og metoder til at styre et applikations logikflow | [Funktioner og metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine og Christopher |
| 06 | JS Basics | Beslutningstagning med JS | Lær hvordan man skaber betingelser i din kode ved hjælp af beslutningstagsmetoder | [Beslutningstagning](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Arrays og løkker | Arbejd med data brugt 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 til 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 til at style det online terrarium med fokus på CSS grundlæggende inklusive 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 gøre terrariet funktionelt som 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 Typing-spil | Lær hvordan keyboard events bruges 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 skaber de første elementer i en browser extension | [Om browsere](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bygge formular, kalde et API og gemme variabler i lokal lagring | Byg JavaScript-elementerne i din browser extension til at kalde et API ved hjælp af variabler i lokal lagring | [APIs, 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 extensionens ikon; lær om webperformance og optimeringer | [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 ved brug af både klasser og komposition og Pub/Sub mønsteret som forberedelse til at bygge et spil | [Introduktion til avanceret spiludvikling](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Tegning på canvas | Lær om Canvas API, som bruges til at tegne elementer på en skærm | [Tegning på canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Flytning af elementer rundt på skærmen | Opdag hvordan elementer kan få bevægelse ved hjælp af 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) | Kollisiondetektion | Få elementer til at kollidere og reagere på hinanden ved hjælp af tastetryk og tilføj en cooldown-funktion for at sikre ydeevne | [Kollisiondetektion](./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 ydeevne | [Hold styr på point](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Afslutte og genstarte spillet | Lær om at afslutte og genstarte spillet, inklusiv 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 ruter i en webapp | Lær hvordan man skaber skabelonen for en multipage hjemmesides arkitektur ved brug af routing og HTML-skabeloner | [HTML-skabeloner og ruter](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Byg en login- og registreringsformular | Lær om opbygning af formularer og håndtering af 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 det, gemmer og rydder op | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Begreber om tilstands-styring | Lær hvordan din app bevarer tilstand og hvordan man styrer det programmæssigt | [Tilstands-styring](./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 du bygger din egen AI-assistent | [AI Assistant projekt](./9-chat-project/README.md) | Chris |
## 🏫 Pædagogik
Vores læreplan er designet med to centrale pædagogiske principper for øje:
Vores pensum er designet med to centrale pædagogiske principper i tankerne:
* projektbaseret læring
* hyppige quizzes
* hyppige quizzer
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.
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 opnå praktisk erfaring ved at bygge et typing-spil, virtuelt terrarium, miljøvenlig browser extension, space-invader-stil spil og en bankapp til erhvervslivet. Ved slutningen af serien vil studerende have opnået en solid forståelse af webudvikling.
> 🎓 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!
> 🎓 Du kan tage de første par lektioner i dette pensum som en [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn!
Ved at sikre, at indholdet er knyttet til projekter, bliver processen mere engagerende for 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.
Ved at sikre at indholdet stemmer overens med projekter, gøres processen mere engagerende for eleverne og fastholdelse af begreber vil blive øget. Vi har også skrevet flere starterlektioner i JavaScript basics for at introducere begreber, parret med en video fra "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" samlingen af videotutorials, hvor nogle af forfatterne har bidraget til dette pensum.
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.
Derudover sætter en lav-stakes quiz før en lektion elevens fokus mod at lære et emne, mens en anden quiz efter lektionen sikrer yderligere fastholdelse. Dette pensum er designet til at være fleksibelt og sjovt og kan gennemføres helt eller delvist. Projekterne starter småt og bliver gradvist mere komplekse ved slutningen af 12-ugers cyklussen.
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)".
Mens vi bevidst har undgået at introducere JavaScript-rammer for at fokusere på de grundlæggende færdigheder som webudvikler, inden man tager en ramme i brug, vil et godt næste skridt til at fuldføre dette pensum være at lære om Node.js gennem en anden samling af videoer: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Besøg vores [Adfærdskodeks](CODE_OF_CONDUCT.md) og [Bidrag](CONTRIBUTING.md) retningslinjer. Vi ser frem til din konstruktive feedback!
> Besøg vores [Adfærdskodeks](CODE_OF_CONDUCT.md) og [Bidragsvejledning](CONTRIBUTING.md). Vi byder din konstruktive feedback velkommen!
## 🧭 Offline adgang
Du kan køre denne dokumentation offline ved at bruge [Docsify](https://docsify.js.org/#/). Fork dette repo, [installer Docsify](https://docsify.js.org/#/quickstart) på din lokale maskine, og skriv derefter i rodmappen af dette repo `docsify serve`. Websitet 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 roden af dette repo `docsify serve`. Hjemmesiden serveres 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).
@ -216,7 +216,7 @@ En PDF med alle lektionerne kan findes [her](https://microsoft.github.io/Web-Dev
## 🎒 Andre Kurser
Vores team producerer andre kurser! Tjek dem ud:
Vores team producerer andre kurser! Tjek:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -233,7 +233,7 @@ Vores team producerer andre kurser! Tjek dem ud:
---
### Generative AI Series
### Generativ AI Serie
[](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)
@ -252,7 +252,7 @@ Vores team producerer andre kurser! Tjek dem ud:
---
### Copilot Series
### Copilot Serie
[](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)
@ -260,21 +260,21 @@ Vores team producerer andre kurser! Tjek dem ud:
## Få Hjælp
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.
Hvis du sidder fast eller har spørgsmål om at bygge AI-apps, så 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 arkiv er licenseret under MIT-licensen. Se [LICENSE](../../LICENSE)-filen for mere information.
Dette depot er licenseret under MIT-licensen. Se filen [LICENSE](../../LICENSE) for mere information.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfraskrivelse**:
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi 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.
**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.
Tämä on opetussisältövarasto, joka on tarkoitettu verkkokehityksen perusteiden opettamiseen aloittelijoille. Opetussuunnitelma on kattava 12 viikon kurssi, jonka ovat kehittäneet Microsoft Cloud Advocates, ja se sisältää 24 käytännönläheistä oppituntia JavaScriptistä, CSS:stä ja HTML:stä.
Tämä on opetuskokonaisuus, joka sisältää verkkokehityksen perusteiden opettamisen aloittelijoille. Opetussuunnitelma on kattava 12 viikon kurssi, jonka ovat kehittäneet Microsoft Cloud Advocates -tiimin jäsenet. Kurssi koostuu 24 käytännön oppitunnista, joissa käydään läpi JavaScriptiä, CSS:ää ja HTML:ää.
### Keskeiset osat
- **Opetussisältö**: 24 rakenteellista oppituntia, jotka on järjestetty projektipohjaisiksi moduuleiksi
- **Koulutussisältö**: 24 jäsenneltyä oppituntia, jotka on järjestetty projektipohjaisiin moduuleihin
- **Käytännön projektit**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor ja AI Chat Assistant
- **Interaktiiviset monivalintakyselyt**: 48 kyselyä, joissa on 3 kysymystä jokaisessa (ennen ja jälkeen oppitunnin arvioinnit)
- **Monikielinen tuki**: Automaattiset käännökset yli 50 kielelle GitHub Actionsin avulla
Vaikka tämä ei ole perinteinen monorepo, varastossa on useita itsenäisiä projekteja:
Vaikka tämä ei ole perinteinen monorepo, arkistossa on useita itsenäisiä projekteja:
- Jokainen oppitunti on itsenäinen kokonaisuus
- Projektit eivät jaa riippuvuuksia
- Työskentele yksittäisten projektien parissa vaikuttamatta muihin
- Kloonaa koko varasto saadaksesi koko opetussuunnitelmakokemuksen
- Työskentele projekteissa erikseen toinen toisiinsa vaikuttamatta
- Kloonaa koko arkisto saadaksesi täyden opetuskokemuksen
---
<!-- 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, otathan huomioon, että automaattiset käännökset saattavat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäiskielisenä versiona tulee pitää auktoritatiivisena lähteenä. Tärkeissä tiedoissa suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä johtuvista väärinymmärryksistä tai tulkinnoista.
**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, ole hyvä ja huomioi, että automaattikäännökset saattavat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja alkuperäiskielellä tulee pitää auktoriteettisena lähteenä. Tärkeiden tietojen osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä aiheutuvista väärinymmärryksistä tai tulkinnoista.
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!
Opi verkkokehityksen perusteet kattavalla 12 viikon kurssillamme, jonka on laatinut Microsoft Cloud Advocates. Jokainen 24 oppitunnista syventyy JavaScriptiin, CSS:ään ja HTML:ään käytännön projektien, kuten terraarioiden, selaimen laajennusten ja avaruuspelien kautta. Osallistu tietokilpailuihin, keskusteluihin ja käytännön tehtäviin. Kehitä taitojasi ja optimoi tietojesi omaksuminen tehokkaan projektilähtöisen pedagogiikkamme avulla. Aloita koodausmatkasi tänään!
> 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:
> Tämä repositorio sisältää yli 50 kieliversiota, mikä lisää huomattavasti latauskokoa. Kloonataksesi ilman käännöksiä, käytä sparse checkoutia:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,86 +48,85 @@ Seuraa näitä vaiheita aloittaaksesi näiden resurssien käytön:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Näin saat kaiken tarvitsemasi kurssin suorittamiseen nopeammalla latauksella.
> Saat kaiken tarvittavan kurssin suorittamiseen paljon nopeammalla latauksella.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**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)**
**Jos haluat, että muita käännöskieliä tuetaan, ne löytyvät [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 [**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.
Vieraile [**Student Hub -sivulla**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), josta löydät aloittelijoille suunnattuja resursseja, opiskelijapaketit ja jopa tapoja saada ilmainen todistuksen voucher. Tämä sivu kannattaa lisätä kirjanmerkkeihin ja tarkistaa säännöllisesti, koska sisältö vaihtuu 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, 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.
Uusi haaste lisätty, etsi "GitHub Copilot Agent Challenge 🚀" useimmista luvuista. Tämä on uusi haaste, jonka voit suorittaa käyttäen GitHub Copilotia ja Agent-tilaa. Jos et ole aiemmin käyttänyt Agent-tilaa, se pystyy tuottamaan ei pelkästään tekstiä, vaan myös luomaan ja muokkaamaan tiedostoja, suorittamaan komentoja ja muuta.
> **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)!
> **Opettajat**, olemme lisänneet [joitakin ehdotuksia](for-teachers.md) tämän opetussuunnitelman käyttöön. Arvostamme 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 esiluennon tietovisalla ja jatka lukemalla luentomateriaali, suorittamalla erilaisia aktiviteetteja ja testaa ymmärryksesi jälkiluennon tietovisalla.
**[Oppijat](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, jokaiselle oppitunnille, aloita ennakko-oppitentin tekemisellä ja etene lukemalla luentomateriaali, suorittamalla erilaiset tehtävät ja tarkista ymmärryksesi jälkitentin avulla.
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.
Parantaaksesi oppimiskokemustasi, yhdistä voimasi vertaistesi kanssa projektien parissa! Keskusteluja suositaan [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), jossa moderaattoritiimimme on valmiina vastaamaan kysymyksiisi.
Koulutuksesi syventämiseksi suosittelemme lämpimästi tutustumaan [Microsoft Learniin](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) lisäoppimateriaaleja varten.
### 📋 Ympäristön käyttöönotto
### 📋 Ympäristön asennus
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).
Tässä opetussuunnitelmassa on kehitysympäristö valmiina käytettäväksi! Aloittaessasi voit valita opetussuunnitelman ajamisen [Codespace](https://github.com/features/codespaces/) -ympäristössä (_selainpohjainen, ei asennuksia tarvitseva ympäristö_) tai paikallisesti tietokoneellasi käyttämällä tekstieditoria, kuten [Visual Studio Codea](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Luo oma repositoriosi
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.
Jotta voit helposti tallentaa työsi, on suositeltavaa luoda oma kopio tästä repositoriosta. Voit tehdä sen klikkaamalla sivun ylälaidassa olevaa **Use this template** -painiketta. Tämä luo uuden repositorion GitHub-tilillesi, jossa on kopio opetussuunnitelmasta.
Noudata näitä ohjeita:
1. **Forkkaa repositorio**: Klikkaa sivun oikeassa yläkulmassa "Fork" -painiketta.
Seuraa nämä vaiheet:
1. **Forkkaa repositorio**: Klikkaa "Fork" -painiketta tämän sivun oikeassa yläkulmassa.
Omaasi luodussa kopiossa klikkaa **Code** -painiketta ja valitse **Open with Codespaces**. Tämä luo sinulle uuden Codespace-ympäristön työskentelyä varten.
Luo omaan kopioosi tästä repositoriosta, jonka teit, klikkaa **Code** -painiketta ja valitse **Open with Codespaces**. Tämä luo sinulle uuden Codespace-ympäristön työskentelyä varten.
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.
Suorittaaksesi tämän opetussuunnitelman paikallisesti tietokoneellasi tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, [Johdanto ohjelmointikieliin ja työkaluihin](../../1-getting-started-lessons/1-intro-to-programming-languages), opastaa sinua erilaisten työkaluvaihtoehtojen läpi, joista voit valita sinulle parhaiten sopivat.
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:
Suosittelemme käyttämään editorina [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).
1. Kloonaa arkistosi tietokoneellesi. Voit tehdä tämän napsauttamalla **Code**-painiketta ja kopioimalla URL-osoitteen:
[CodeSpace](./images/createcodespace.png)
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:
Avaa sitten [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>
@ -138,80 +137,80 @@ Suosittelemme käyttämään tekstieditorina [Visual Studio Codea](https://code.
> Suositellut Visual Studio Code -laajennukset:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - esikatsella HTML-sivuja Visual Studio Codessa
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML-sivujen esikatselua varten 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
- valinnaisen sketchnoten
- valinnaisen tukevan videon
- lämmittelykyselyn ennen oppituntia
- kirjallisen oppitunnin
- projektipohjaisissa oppitunneissa vaiheittaiset ohjeet projektin rakentamiseen
> **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.
> **Huomio kyselyistä**: Kaikki kyselyt ovat Quiz-app-kansiossa, yhteensä 48 kyselyä, joissa jokaisessa on kolme kysymystä. Ne ovat saatavilla [tästä](https://ff-quizzes.netlify.app/web/). Kyselysovellusta voi käyttää paikallisesti tai ottaa käyttöön Azuren kautta; noudata ohjeita `quiz-app`-kansiossa.
## 🗃️ Oppitunnit
| | Projektin nimi | Opitut käsitteet | Oppimistavoitteet | Linkitetty oppitunti | Tekijä |
| 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 |
| | Projektin nimi | Käsitellyt käsitteet | Oppimistavoitteet | Linkitetty oppitunti | Tekijä |
| 01 | Getting Started | Ohjelmoinnin perusteet ja työkalut | Opi useimpien ohjelmointikielten perustukset 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 | Getting Started | GitHubin perusteet, sisältää yhteistyön tiimissä | Kuinka käyttää GitHubia projektissasi, miten tehdä yhteistyötä muiden kanssa koodikannan parissa | [Johdatus GitHubiin](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Esteettömyys | Opi verkkosisällön saavutettavuuden perusteet | [Esteettömyyden perusteet](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 07 | JS Basics | Taulukot ja silmukat | Työskentele datan 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 verkkoterraarion 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ä | Luo CSS tyylitelläksesi verkkoterraariota, keskittyen CSS:n perusteisiin ja sivun responsiivisuuteen | [Johdatus CSS:ään](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closuret, DOM-manipulointi | Rakenna JavaScript, joka tekee terrariumin toimivaksi drag/drop-käyttöliittymänä, keskittyen closureihin ja DOM-manipulointiin | [JavaScript Closuret, DOM-manipulointi](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Typing-pelin rakentaminen | Opi käyttämään näppäimistötapahtumia JavaScript-sovelluksesi logiikan ohjaamiseen | [Tapahtumaohjautuva ohjelmointi](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Toimiminen selaimissa | Opi, miten selaimet toimivat, niiden historia ja miten rakentaa selaimien laajennuksen ensimmäiset elementit | [Tietoa selaimista](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Lomakkeen rakentaminen, API:n käyttäminen ja muuttujien tallentaminen paikalliseen muistiin | Rakenna selainlaajennuksen JavaScript-elementit API-kutsujen tekemiseen käyttäen paikalliseen muistiin tallennettuja muuttujia | [API:t, lomakkeet ja paikallinen muisti](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Taustaprosessit selaimessa ja verkkosuorituskyky | Käytä selaimen taustaprosesseja laajennuksen kuvakkeen hallintaan; opi verkkosuorituskyvystä 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 pelinkehitys JavaScriptillä | Opi perinnäisyydestä käyttäen sekä luokkia että koostetta sekä Pub/Sub-mallista pelin rakentamista varten | [Johdatus edistyneeseen pelinkehitykseen](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Piirtäminen canvakselle | Opi Canvas API:sta, jota käytetään elementtien piirtämiseen näytölle | [Piirtäminen canvakselle](./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 elementtejä voi liikuttaa käyttäen karteesisia koordinaatteja ja Canvas API:a | [Elementtien liikuttaminen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Törmäysten havaitseminen | Tee elementtien törmäämisestä ja reagoimisesta toisiinsa näppäinpainallusten avulla ja lisää cooldown-toiminto pelin suorituskyvyn varmistamiseksi | [Törmäysten havaitseminen](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Pisteiden seuranta | Tee matemaattisia laskelmia pelin tilan ja suorituskyvyn perusteella | [Pisteiden seuranta](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Pelin lopetus ja uudelleen käynnistys | Opi pelin lopettamisesta ja uudelleenkäynnistyksestä, mukaan lukien resurssien siivouksesta ja muuttujien nollauksesta | [Lopetusehto](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-mallit ja reititys web-sovelluksessa | Opi luomaan monisivuisen verkkosivuston runko reitityksen ja HTML-mallien avulla | [HTML-mallit ja reititys](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Kirjautumis- ja rekisteröitymislomakkeen rakentaminen | Opi lomakkeiden rakentamisesta ja validoinnin käsittelystä | [Lomakkeet](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Tietojen hakemisen ja käytön menetelmät | Kuinka tieto virtaa sovelluksessasi, miten sitä haetaan, tallennetaan ja hävitetään | [Tieto](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Tilanhallinnan käsitteet | Opi, miten sovelluksesi säilyttää tilaa ja hallinnoi sitä ohjelmallisesti | [Tilanhallinta](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Työskentely VScoden kanssa | Opi 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 | Opi rakentamaan oma tekoälyavustajasi | [Tekoälyavustajaprojekti](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogiikka
Opetussuunnitelmamme on suunniteltu kahden keskeisen pedagogisen periaatteen mukaisesti:
Oppimateriaalimme on suunniteltu kahden keskeisen pedagogisen periaatteen pohjalta:
* projektipohjainen oppiminen
* usein toistuvat tietovisat
* säännölliset kyselyt
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ä.
Ohjelma opettaa JavaScriptin, HTML:n ja CSS:n perusteet sekä uusimmat 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 terrarion, ympäristöystävällisen selainlaajennuksen, avaruuslajin pelin sekä pankkisovelluksen yrityksille. Sarjan lopuksi opiskelijoilla on vankka ymmärrys web-kehityksestä.
> 🎓 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!
> 🎓 Voit suorittaa tämän oppimateriaalin ensimmäiset oppitunnit osana [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) -opintopolkua Microsoft Learnissä!
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.
Sisällön linkittäminen projekteihin tekee prosessista opiskelijalle mielekkäämpää ja käsitteiden muistaminen paranee. Kirjoitimme myös useita aloittavia JavaScriptin perusteisiin keskittyviä oppitunteja, joissa perehdytään käsitteisiin, ja ne ovat parina videon kanssa "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" kokoelmasta, jonka osa tekijöistä osallistui tämän oppimateriaalin laadintaan.
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.
Lisäksi kevyt kysely ennen luentoa asettaa opiskelijan opiskelutavoitetta ja toinen kysely luennon jälkeen varmistaa sisällön parempaa omaksumista. Tämä oppimateriaali on tarkoitettu joustavaksi ja hauskaksi, ja sen voi suorittaa kokonaan tai osittain. Projektit alkavat yksinkertaisista ja monimutkaistuvat 12 viikon jaksolla.
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)".
Vaikka tarkoituksella vältimme JavaScript-kirjastojen esittelyä keskittyäksemme verkkokehittäjän perustaitoihin ennen kirjastoihin siirtymistä, seuraava hyvä askel tämän oppimateriaalin jälkeen olisi Node.js:n opiskelu toisen videosarjan avulla: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Tutustu [käyttäytymissääntöihimme](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 [osallistumisohjeisiimme](CONTRIBUTING.md). Otamme mielellämme vastaan rakentavaa palautettasi!
## 🧭 Offline-käyttö
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`.
Voit käyttää tätä dokumentaatiota offline-tilassa käyttämällä [Docsify](https://docsify.js.org/#/). Haarauta tämä arkisto, [asenna Docsify](https://docsify.js.org/#/quickstart) paikallisesti koneellesi, ja kirjoita tämän arkiston juurikansiossa `docsify serve`. Sivusto palvelee portissa 3000 paikallisessa ympäristössä: `localhost:3000`.
## 📘 PDF
Kaikkien oppituntien PDF löytyy täältä [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Kaikkiin oppitunteihin liittyvän PDF:n löydät täältä [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Muut kurssit
@ -233,7 +232,7 @@ Tiimimme tuottaa myös muita kursseja! Tutustu:
---
### Generative AI Series
### Generatiivinen tekoäly -sarja
[](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)
@ -241,7 +240,7 @@ Tiimimme tuottaa myös muita kursseja! Tutustu:
---
### Core Learning
### Perusopiskelu
[](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)
@ -252,7 +251,7 @@ Tiimimme tuottaa myös muita kursseja! Tutustu:
---
### Copilot Series
### Copilot-sarja
[](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)
@ -260,21 +259,21 @@ Tiimimme tuottaa myös muita kursseja! Tutustu:
## Apua
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.
Jos juutut tai sinulla on kysyttävää tekoälysovellusten rakentamisesta, liity muiden 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 saat tiedostosta [LICENSE](../../LICENSE).
Tämä arkisto on lisensoitu MIT-lisenssillä. Katso lisätietoja [LICENSE](../../LICENSE)-tiedostosta.
---
<!-- 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, 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ä.
**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, ota huomioon, että automaattikäännöksissä saattaa esiintyä virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen omalla kielellä tulisi pitää virallisena lähteenä. Tärkeiden tietojen osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä johtuvista väärinymmärryksistä tai tulkinnoista.
Dette er et pedagogisk pensum-repositorium for å lære 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 grunnleggende webutvikling til nybegynnere. Pensumet er et omfattende 12-ukers kurs utviklet av Microsoft Cloud Advocates, som inneholder 24 praktiske leksjoner om JavaScript, CSS og HTML.
### Nøkkelkomponenter
- **Pedagogisk innhold**: 24 strukturerte leksjoner organisert i prosjektbaserte moduler
- `9-chat-project/README.md` - AI chatassistentprosjekt
### Monorepo-struktur
Selv om det ikke er et tradisjonelt monorepo, inneholder dette repositoriet flere uavhengige prosjekter:
- Hver leksjon er selvstendig
- Prosjektene deler ikke avhengigheter
- Arbeid med individuelle prosjekter uten å påvirke andre
- Klon hele repoet for full pensumopplevelse
Selv om dette ikke er et tradisjonelt monorepo, inneholder repositoriet flere uavhengige prosjekter:
- Hver leksjon er selvstendig
- Prosjekter deler ikke avhengigheter
- Jobb med 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 opprinnelige dokumentet på sitt morsmål 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.
**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 automatiserte oversettelser kan inneholde feil eller unøyaktigheter. Det opprinnelige dokumentet på dets morsmål 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 fra bruk av denne oversettelsen.
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!
Lær det grunnleggende innen webutvikling med vårt 12-ukers omfattende kurs av Microsoft Cloud Advocates. Hver av de 24 leksjonene dykker inn i JavaScript, CSS og HTML gjennom praktiske prosjekter som terrarier, nettleserutvidelser og romspill. Engasjer deg med quizzer, diskusjoner og praktiske oppgaver. Forbedre ferdighetene dine og optimaliser kunnskapsinnhentingen med vår effektive prosjektbaserte pedagogikk. Start kodingen din i dag!
> Dette repoet inkluderer 50+ språkoversettelser som øker nedlastingsstørrelsen betydelig. For å klone uten oversettelser, bruk sparse checkout:
> Dette repositoriet inkluderer 50+ språkoversettelser som betydelig øker nedlastingsstørrelsen. For å klone uten oversettelser, bruk sparsom utsjekking:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,43 +48,43 @@ Følg disse trinnene for å komme i gang med disse ressursene:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Dette gir deg alt du trenger for å fullføre kurset med mye raskere nedlasting.
> Dette gir deg alt du trenger for å fullføre kurset med en mye raskere nedlasting.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**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)**
**Hvis du ønsker at flere oversettelser skal støttes, er de 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-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.
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å et gratis sertifikatkupong på. Dette er siden du vil bokmerke og sjekke fra tid til annen da vi bytter ut innhold månedlig.
### 📣 Annonsering - Nye utfordringer i GitHub Copilot Agent-modus å fullføre!
### 📣 Kunngjøring - Nye utfordringer i GitHub Copilot Agent-modus å fullføre!
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.
Ny utfordring lagt til, se etter "GitHub Copilot Agent Challenge 🚀" i de fleste kapitler. Det er en ny utfordring for deg å gjennomføre ved bruk av 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.
### 📣 Annonsering - _Nytt prosjekt å bygge med Generativ AI_
### 📣 Kunngjøring - _Nytt prosjekt å bygge med generativ AI_
Nytt AI-assistentprosjekt nettopp lagt til, sjekk det ut [prosjekt](./9-chat-project/README.md)
Nytt AI Assistant prosjekt lagt til, sjekk det ut [prosjekt](./9-chat-project/README.md)
### 📣 Annonsering - _Ny læreplan_ om Generativ AI for JavaScript ble nettopp utgitt
### 📣 Kunngjøring - _Ny læreplan_ om generativ AI for JavaScript ble nettopp lansert
Ikke gå glipp av vår nye læreplan for Generativ AI!
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 kunnskapskontroll og en utfordring for å veilede deg i læring av temaer som:
Hver leksjon inkluderer en oppgave som må fullføres, en kunnskapskontroll og en utfordring for å veilede deg i læringstemaer som:
- Prompting og prompt engineering
- Tekst- og bildeappgenerering
- Tekst- og bildeapp-generering
- Søkeapper
Besøk [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for å komme i gang!
@ -93,41 +93,41 @@ 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 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ærere**, vi har [inkludert noen forslag](for-teachers.md) om hvordan bruke denne læreplanen. Vi setter pris på din tilbakemelding [i vårt diskusjonsforum](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 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.
**[Lærende](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for hver leksjon, start med en forhånds-quiz og følg opp med å lese forelesningsmaterialet, fullføre de ulike aktivitetene og sjekk forståelsen din med post-forelesningsquizen.
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 å forbedre læringsopplevelsen, koble deg til med jevnaldrende for å jobbe sammen på prosjektene! Diskusjoner oppmuntres i vårt [diskusjonsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) der vårt team av moderatorer er tilgjengelige for å svare på spørsmålene dine.
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.
For å fremme utdanningen din 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
### 📋 Sette opp ditt miljø
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).
Denne læreplanen har et utviklingsmiljø klart til bruk! Når du starter 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 maskin 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 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.
For at du enkelt skal lagre arbeidet ditt, anbefales det at du lager 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.
Følg disse trinnene:
1. **Fork repoet**: Klikk på "Fork"-knappen øverst til høyre på denne siden.
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.
I din kopi av dette repositoriet som du laget, klikk på **Code**-knappen og velg **Open with Codespaces**. Dette oppretter en ny Codespace for deg å jobbe i.
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.
For å kjøre denne læreplanen lokalt 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 veilede deg gjennom ulike alternativer for hver 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:
Vår anbefaling er å bruke [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) som editor, som også har en innebygd [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Du kan laste ned Visual Studio Code [her](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klon depotet ditt til datamaskinen. Du kan gjøre dette ved å klikke på **Code**-knappen og kopiere URL-en:
[CodeSpace](./images/createcodespace.png)
Å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:
Å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, og erstatt `<your-repository-url>` med URL-en du nettopp kopierte:
```bash
git clone <your-repository-url>
@ -139,82 +139,82 @@ Vi anbefaler å bruke [Visual Studio Code](https://code.visualstudio.com/?WT.mc_
> Anbefalte Visual Studio Code-utvidelser:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - for å forhåndsvise HTML-sider 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 med å skrive kode raskere
## 📂 Hver leksjon inkluderer:
- valgfri skisse-notat
- valgfri tilleggsvideo
- valgfri sketchnote
- valgfri supplerende video
- oppvarmingsquiz før leksjonen
- skriftlig leksjon
- for prosjektrelaterte leksjoner, steg-for-steg guider for hvordan bygge prosjektet
- for prosjektbaserte leksjoner, trinnvise guider for hvordan bygge prosjektet
- kunnskapstester
- en utfordring
- tilleggslesning
- supplerende lesing
- oppgave
- [quiz etter leksjonen](https://ff-quizzes.netlify.app/web/)
> **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.
> **En merknad om quizer**: Alle quizene finnes 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 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 |
| 01 | Komme i gang | Introduksjon til programmering og verktøy | Lær de grunnleggende prinsippene bak de fleste programmeringsspråk og programvare som hjelper profesjonelle utviklere | [Intro til programmeringsspråk og verktøy](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Komme i gang | Grunnleggende GitHub, inklusive å jobbe i team | Hvordan bruke GitHub i prosjektet ditt, hvordan samarbeide med andre på en kodebase | [Intro til GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Komme i gang | Tilgjengelighet | Lær det grunnleggende om webtilgjengelighet | [Tilgjengelighetsgrunnlag](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 05 | JS Grunnleggende | Funksjoner og metoder | Lær om funksjoner og metoder for å styre logikkflyten i en applikasjon | [Funksjoner og metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine og Christopher |
| 06 | JS Grunnleggende | Å ta beslutninger med JS | Lær hvordan du lager betingelser i koden ved å bruke metoder for beslutningstaking | [Å ta beslutninger](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Grunnleggende | Arrays og løkker | Arbeid med data ved hjelp av arrays og løkker i JavaScript | [Arrays og løkker](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML i praksis | Bygg HTML for å lage et online terrarium, med fokus på 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 å gjøre siden responsiv | [Introduksjon til CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript closures, DOM-manipulasjon | Lag JavaScript for å gjøre terrariet funksjonelt som et dra/slipp-grensesnitt, med fokus på closures og DOM-manipulasjon | [JavaScript Closures, DOM-manipulasjon](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Lag et skrive-spill | Lær hvordan du bruker tastaturhendelser for å styre logikken i din JavaScript-app | [Event-Drevet programmering](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Grønn Nettleserutvidelse](./5-browser-extension/solution/README.md) | Arbeide med nettlesere | Lær hvordan nettlesere fungerer, deres historie, og hvordan du bygger de første elementene i en nettleserutvidelse | [Om nettlesere](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Grønn Nettleserutvidelse](./5-browser-extension/solution/README.md) | Lage et skjema, kalle et API og lagre variabler lokalt | Bygg JavaScript-elementene i nettleserutvidelsen din for å kalle et API med variabler lagret i lokal lagring | [APIer, skjemaer og lokal lagring](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Grønn Nettleserutvidelse](./5-browser-extension/solution/README.md) | Bakgrunnsprosesser i nettleseren, webytelse | Bruk nettleserens bakgrunnsprosesser til å styre utvidelsens ikon; lær om webytelse og noen optimaliseringer | [Bakgrunnsprosesser 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 i 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å skjermen | [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 bruk 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 bruk av tastetrykk og lag en nedkjølingsfunksjon for å sikre ytelse | [Kollisjonsdeteksjon](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Holde poengsum | Utfør matematiske beregninger basert på spillets status og ytelse | [Holde poengsum](./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 å rydde opp ressurser og tilbakestille variabler | [Avslutningsbetingelsen](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bank App](./7-bank-project/solution/README.md) | HTML-maler og ruter i en webapp | Lær hvordan lage strukturen av en flersidig nettside ved bruk av ruting og HTML-maler | [HTML-maler og ruter](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bank App](./7-bank-project/solution/README.md) | Lag en innloggings- og registreringsskjema | Lær om å bygge skjemaer og håndtere valideringsrutiner | [Skjemaer](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bank 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 kassere den | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bank App](./7-bank-project/solution/README.md) | Konsepter for 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| [Bruke 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 du bygger din egen AI-assistent | [AI-assistentprosjekt](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogikk
Vårt pensum er utformet med to viktige pedagogiske prinsipper i tankene:
Vår læreplan er designet 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. 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.
Programmet underviser grunnleggende JavaScript, HTML og CSS, samt de nyeste verktøy og teknikker som dagens webutviklere bruker. Studentene får muligheten til å utvikle praktisk erfaring ved å bygge et skrive-spill, virtuelt terrarium, miljøvennlig nettleserutvidelse, et rom-invasjonsspill og en bankapp for bedrifter. Ved slutten av serien vil studentene ha fått 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!
> 🎓 Du kan ta de første leksjonene i denne læreplanen som en [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn!
Ved å 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.
Ved å sikre at innholdet samsvarer med prosjekter, blir prosessen mer engasjerende for studentene og konseptene blir lettere å huske. Vi har også skrevet flere introduksjonsleksjoner i JavaScript grunnleggende for å introdusere konsepter, sammen med en video fra "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" samling av videotutorials, hvorav noen av forfatterne bidro til denne læreplanen.
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.
I tillegg setter en lavrisiko quiz før en klasse intensjonen til studenten mot å lære et emne, mens en andre quiz etter klassen sikrer videre innlæring. Denne læreplanen er designet for å være fleksibel og morsom og kan tas helt eller delvis. Prosjektene starter smått og blir gradvis mer kompliserte etter hvert som 12-ukers syklusen skrider frem.
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)".
Selv om vi bevisst har unngått å introdusere JavaScript-rammeverk for å konsentrere oss om grunnleggende ferdigheter som trengs som webutvikler før man tar i bruk et rammeverk, vil et godt neste steg for å fullføre denne læreplanen 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 [Adferdskodeks](CODE_OF_CONDUCT.md) og [Bidrag](CONTRIBUTING.md). Vi setter pris på din konstruktive tilbakemelding!
> Besøk våre retningslinjer for [Atferdskodeks](CODE_OF_CONDUCT.md) og [Bidrag](CONTRIBUTING.md). Vi setter pris på konstruktive tilbakemeldinger!
## 🧭 Frakoblet tilgang
## 🧭 Offline-tilgang
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`.
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 skriv så `docsify serve` i rotmappen til dette repoet. 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).
## 🎒 Andre kurs
## 🎒 Andre Kurs
Vårt team produserer andre kurs! Sjekk ut:
@ -225,7 +225,7 @@ Vårt team produserer andre kurs! Sjekk ut:
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
### Azure / Edge / MCP / Agenter
[](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)
@ -233,7 +233,7 @@ Vårt team produserer andre kurs! Sjekk ut:
---
### Generative AI Series
### Generativ AI Serie
[](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)
@ -241,7 +241,7 @@ Vårt team produserer andre kurs! Sjekk ut:
---
### Core Learning
### Kjerne Læring
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -252,7 +252,7 @@ Vårt team produserer andre kurs! Sjekk ut:
---
### Copilot Series
### Copilot Serie
[](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)
@ -260,21 +260,21 @@ Vårt team produserer andre kurs! Sjekk ut:
## Få hjelp
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.
Hvis du sitter fast eller har spørsmål om å lage 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.
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 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.
**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 opprinnelige dokumentet på sitt opprinnelige språk bør betraktes som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for misforståelser eller feiltolkninger som følge av bruk av denne oversettelsen.
localizeflow[bot]
6 days ago