|
|
5 days ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 2 weeks ago | |
| 2-js-basics | 2 weeks ago | |
| 3-terrarium | 2 weeks ago | |
| 4-typing-game | 2 weeks ago | |
| 5-browser-extension | 2 weeks ago | |
| 6-space-game | 2 weeks ago | |
| 7-bank-project | 2 weeks ago | |
| 8-code-editor/1-using-a-code-editor | 2 weeks ago | |
| 9-chat-project | 2 weeks ago | |
| 10-ai-framework-project | 2 weeks ago | |
| Git-Basics | 2 weeks ago | |
| docs | 2 weeks ago | |
| lesson-template | 2 weeks ago | |
| memory-game | 2 weeks ago | |
| quiz-app | 2 weeks ago | |
| .co-op-translator.json | 5 days ago | |
| AGENTS.md | 5 days ago | |
| CODE_OF_CONDUCT.md | 2 weeks ago | |
| CONTRIBUTING.md | 2 weeks ago | |
| README.md | 5 days ago | |
| Roadmap.md | 5 days ago | |
| SECURITY.md | 2 weeks ago | |
| SUPPORT.md | 2 weeks ago | |
| _404.md | 2 weeks ago | |
| for-teachers.md | 2 weeks ago | |
README.md
Webudvikling for begyndere - Et pensum
Lær grundlæggende webudvikling med vores 12-ugers omfattende kursus fra Microsoft Cloud Advocates. Hver af de 24 lektioner dykker ned i JavaScript, CSS og HTML gennem praktiske projekter som terrarier, browserudvidelser og rumspil. Deltag i quizzer, diskussioner og praktiske opgaver. Forbedr dine færdigheder og optimer din viden med vores effektive projektbaserede pædagogik. Start din kodningsrejse i dag!
Deltag i Azure AI Foundry Discord-fællesskabet
Følg disse trin for at komme i gang med at bruge disse ressourcer:
- Fork depotet: Klik på
- Klon depotet:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Deltag i Azure AI Foundry Discord og mød eksperter og andre udviklere
🌐 Flersproget support
Understøttet via GitHub Action (Automatiseret & Altid Opdateret)
Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese
Foretrækker du at klone lokalt?
Dette repository indeholder 50+ sprogoversættelser, som betydeligt øger downloadstørrelsen. For at klone uden oversættelser, brug sparsomet udtjekning:
git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'Dette giver dig alt, hvad du behøver for at gennemføre kurset med en meget hurtigere download.
Hvis du ønsker at få tilføjet yderligere oversættelsessprog, findes de understøttede sprog her
🧑🎓 Er du studerende?
Besøg Student Hub siden, hvor du finder begynderressourcer, studentpakker og endda måder at få en gratis certifikatkupon på. Dette er siden, du vil bogmærke og tjekke fra tid til anden, da vi månedligt udskifter indhold.
📣 Meddelelse - Nye GitHub Copilot Agent mode udfordringer at gennemføre!
Ny udfordring tilføjet, kig efter "GitHub Copilot Agent Challenge 🚀" i de fleste kapitler. Det er en ny udfordring for dig at fuldføre ved at bruge GitHub Copilot og Agent mode. Hvis du ikke har brugt Agent mode før, kan den ikke bare generere tekst, men også skabe og redigere filer, køre kommandoer med mere.
📣 Meddelelse - Nyt projekt at bygge med Generativ AI
Nyt AI-assistent projekt lige tilføjet, tjek det ud projekt
📣 Meddelelse - Nyt pensum om Generativ AI for JavaScript er netop udgivet
Gå ikke glip af vores nye pensum om Generativ AI!
Besøg https://aka.ms/genai-js-course for at komme i gang!
- Lektioner, der dækker alt fra det grundlæggende til RAG.
- Interager med historiske karakterer ved hjælp af GenAI og vores følgesvend app.
- Sjov og engagerende fortælling, du vil rejse i tiden!
Hver lektion inkluderer en opgave, en videnstest og en udfordring for at guide dig i læringsemner som:
- Prompting og prompt engineering
- Tekst- og billedapp generation
- Søgeapps
Besøg https://aka.ms/genai-js-course for at komme i gang!
🌱 Kom godt i gang
Lærere, vi har inkluderet nogle forslag til, hvordan I kan bruge dette pensum. Vi modtager meget gerne jeres feedback i vores diskussionsforum!
Elever, for hver lektion, start med en quiz før lektion og følg op med at læse lektionens materiale, fuldføre de forskellige aktiviteter og tjek din forståelse med quiz efter lektionen.
For at forbedre din læringsoplevelse, forbind med dine kammerater og arbejd sammen om projekterne! Diskussioner opfordres i vores diskussionsforum, hvor vores moderatorhold vil være tilgængelige for at svare på dine spørgsmål.
For at udvikle din uddannelse yderligere anbefaler vi stærkt at udforske Microsoft Learn for yderligere studiematerialer.
📋 Opsætning af dit miljø
Dette pensum har et udviklingsmiljø klar til brug! Når du går i gang, kan du vælge at køre pensum i en Codespace (et browserbaseret miljø uden installation), eller lokalt på din computer ved hjælp af en teksteditor som Visual Studio Code.
Opret dit repository
For at du nemt kan gemme dit arbejde anbefales det, at du opretter din egen kopi af dette repository. Det kan du gøre ved at klikke på knappen Use this template øverst på siden. Dette vil oprette et nyt repository på din GitHub-konto med en kopi af pensum.
Følg disse trin:
- Fork depotet: Klik på knappen "Fork" øverst til højre på denne side.
- Klon depotet:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Kør pensum i en Codespace
I din kopi af dette repository, som du har oprettet, klik på knappen Code og vælg Open with Codespaces. Dette vil oprette en ny Codespace, som du kan arbejde i.
Kør pensum lokalt på din computer
For at køre dette pensum lokalt på din computer, skal du bruge en teksteditor, en browser og et kommandolinjeværktøj. Vores første lektion, Introduktion til programmeringssprog og værktøjer, vil guide dig gennem forskellige muligheder for hver af disse værktøjer, så du kan vælge det, der passer bedst til dig.
Vi anbefaler at bruge Visual Studio Code som din editor, som også har en indbygget Terminal. Du kan downloade Visual Studio Code her.
-
Klon dit repository til din computer. Det kan du gøre ved at klikke på knappen Code og kopiere URL’en:
CodeSpace Åbn derefter Terminal i Visual Studio Code, og kør følgende kommando, hvor du erstatter
<your-repository-url>med den URL, du lige har kopieret:git clone <your-repository-url> -
Åbn mappen i Visual Studio Code. Det kan du gøre ved at klikke på File > Open Folder og vælge den mappe, du lige har klonet.
Anbefalede Visual Studio Code-udvidelser:
- Live Server - for at forhåndsvise HTML-sider i Visual Studio Code
- Copilot - for at hjælpe dig med at skrive kode hurtigere
📂 Hver lektion inkluderer:
- valgfri sketchnote
- valgfri supplerende video
- forudgående opvarmningsquiz før lektion
- skriftlig lektion
- for projektbaserede lektioner, trin-for-trin vejledninger til, hvordan man bygger projektet
- vidensprøver
- en udfordring
- supplerende læsning
- opgave
- quiz efter lektionen
En note om quizzer: Alle quizzer findes i Quiz-app mappen, i alt 48 quizzer med tre spørgsmål hver. De er tilgængelige her. Quiz-appen kan køres lokalt eller implementeres til Azure; følg instruktionerne i
quiz-appmappen.
🗃️ Lektioner
| Projekt Navn | Koncepter undervist | Læringsmål | Linket Lektion | Forfatter | |
|---|---|---|---|---|---|
| 01 | Kom godt i gang | Introduktion til programmering og værktøjer | Lær de grundlæggende principper bag de fleste programmeringssprog og om software, der hjælper professionelle udviklere | Introduktion til programmeringssprog og værktøjer | Jasmine |
| 02 | Kom godt i gang | Grundlæggende om GitHub, inklusiv samarbejde i teams | Hvordan man bruger GitHub i sit projekt, hvordan man samarbejder med andre om en kodebase | Introduktion til GitHub | Floor |
| 03 | Kom godt i gang | Tilgængelighed | Lær det grundlæggende om webtilgængelighed | Grundlæggende om Tilgængelighed | Christopher |
| 04 | JS Grundlæggende | JavaScript datatyper | Grundlæggende om JavaScript-datatyper | Datatyper | Jasmine |
| 05 | JS Grundlæggende | Funktioner og metoder | Lær om funktioner og metoder til at styre en applikations logik | Funktioner og metoder | Jasmine og Christopher |
| 06 | JS Grundlæggende | Beslutninger med JS | Lær hvordan man laver betingelser i din kode ved hjælp af beslutningstagning | Beslutningstagning | Jasmine |
| 07 | JS Grundlæggende | Arrays og loops | Arbejd med data ved hjælp af arrays og loops i JavaScript | Arrays og loops | Jasmine |
| 08 | Terrarium | HTML i praksis | Byg HTML for at skabe et online terrarium med fokus på layout | Introduktion til HTML | Jen |
| 09 | Terrarium | CSS i praksis | Byg CSS for at style det online terrarium, med fokus på CSS-grundlæggende funktioner inklusiv at gøre siden responsiv | Introduktion til CSS | Jen |
| 10 | Terrarium | JavaScript Closures, DOM-manipulation | Byg JavaScript for at få terrariet til at fungere som en drag/drop interface, med fokus på closures og DOM-manipulation | JavaScript Closures, DOM-manipulation | Jen |
| 11 | Typing Game | Byg et skrive-spil | Lær hvordan du bruger tastaturhændelser til at styre logikken i din JavaScript-app | Begivenhedsdrevet programmering | Christopher |
| 12 | Green Browser Extension | Arbejde med browsere | Lær hvordan browsere fungerer, deres historie, og hvordan man scaffolder de første elementer i en browserudvidelse | Om browsere | Jen |
| 13 | Green Browser Extension | Bygge en form, kalde API og gemme variabler i lokal lagring | Byg JavaScript-elementerne i din browserudvidelse for at kalde en API ved hjælp af variabler gemt i lokal lagring | API'er, formularer og lokal lagring | Jen |
| 14 | Green Browser Extension | Baggrundsprocesser i browseren, web performance | Brug browserens baggrundsprocesser til at håndtere udvidelsens ikon; lær om webperformance og nogle optimeringer | Baggrundsopgaver og ydeevne | Jen |
| 15 | Space Game | Mere avanceret spiludvikling med JavaScript | Lær om arv ved hjælp af både klasser og sammensætning samt Pub/Sub-mønsteret, som forberedelse til at bygge et spil | Introduktion til avanceret spiludvikling | Chris |
| 16 | Space Game | Tegning på canvas | Lær om Canvas API, der bruges til at tegne elementer på en skærm | Tegning på Canvas | Chris |
| 17 | Space Game | Flytte elementer rundt på skærmen | Opdag, hvordan elementer kan få bevægelse ved hjælp af kartesiske koordinater og Canvas API | Flytning af elementer | Chris |
| 18 | Space Game | Kollisiondetektion | Få elementer til at kollidere og reagere på hinanden ved tastetryk og lav en cooldown-funktion for at sikre spillets ydeevne | Kollisiondetektion | Chris |
| 19 | Space Game | Holde styr på point | Udfør matematiske beregninger baseret på spillets status og præstation | Pointoptælling | Chris |
| 20 | Space Game | Afslutte og genstarte spillet | Lær om hvordan man afslutter og genstarter spillet, inklusiv oprydning af assets og nulstilling af variable | Afslutningsbetingelsen | Chris |
| 21 | Banking App | HTML-skabeloner og ruter i en webapp | Lær hvordan man skaber fundamentet for en multipages website-arkitektur med routing og HTML-skabeloner | HTML-skabeloner og ruter | Yohan |
| 22 | Banking App | Byg en Login og Registreringsformular | Lær om at bygge formularer og håndtere valideringsrutiner | Formularer | Yohan |
| 23 | Banking App | Metoder til at hente og bruge data | Hvordan data flyder ind og ud af din app, hvordan man henter, gemmer og bortskaffer det | Data | Yohan |
| 24 | Banking App | Koncepter om state management | Lær hvordan din app bevarer state og hvordan man styrer den programmatisk | State Management | Yohan |
| 25 | Browser/VScode Code | Arbejde med VScode | Lær hvordan man bruger en kodeeditor | Brug VScode Code Editor | Chris |
| 26 | AI Assistants | Arbejde med AI | Lær hvordan man bygger sin egen AI-assistent | AI Assistant projekt | Chris |
🏫 Pædagogik
Vores pensum er designet med to nøgleprincipper i pædagogik:
- projektbaseret læring
- hyppige quizzer
Programmet underviser i grundlæggende JavaScript, HTML og CSS samt de nyeste værktøjer og teknikker, som nutidens webudviklere bruger. Studerende får mulighed for at udvikle praktisk erfaring ved at bygge et skrive-spil, et virtuelt terrarium, en miljøvenlig browserudvidelse, et rum-invader stil-spil og en bank-app til virksomheder. Ved slutningen af serien vil eleverne have opnået en solid forståelse for webudvikling.
🎓 Du kan tage de første par lektioner i dette pensum som en Learn Path på Microsoft Learn!
Ved at sikre, at indholdet stemmer overens med projekterne, bliver processen mere engagerende for eleverne, og fastholdelsen af koncepterne forbedres. Vi har også skrevet flere introduktionslektioner i JavaScript grundlæggende for at introducere begreber, kombineret med en video fra "Beginners Series to: JavaScript" samlingen af videotutorials, hvor nogle af forfatterne har bidraget til dette pensum.
Derudover sætter en quiz med lav risiko før en klasse intentionen hos eleven mod at lære et emne, mens en anden quiz efter klassen sikrer yderligere fastholdelse. Dette pensum er designet til at være fleksibelt og sjovt og kan tages som helhed eller delvist. Projekterne starter småt og bliver gradvist mere komplekse ved slutningen af 12-ugers cyklussen.
Selvom vi bevidst har undgået at introducere JavaScript-rammer for at koncentrere os om de grundlæggende færdigheder, der er nødvendige som webudvikler, før man tager en ramme i brug, kunne et godt næste skridt efter at have gennemført dette pensum være at lære om Node.js via en anden samling videoer: "Beginner Series to: Node.js".
Besøg vores Code of Conduct og Contributing retningslinjer. Vi byder konstruktiv feedback velkommen!
🧭 Offline adgang
Du kan køre denne dokumentation offline ved at bruge Docsify. Fork dette repo, installer Docsify på din lokale maskine, og i rodmappen for dette repo, skriv docsify serve. Hjemmesiden vil blive serveret på port 3000 på din localhost: localhost:3000.
En PDF af alle lektionerne kan findes her.
🎒 Andre kurser
Vores team producerer andre kurser! Tjek dem ud:
LangChain
Azure / Edge / MCP / Agenter
Generativ AI Serie
Grundlæggende Læring
Copilot Serie
Få Hjælp
Hvis du går i stå eller har spørgsmål om at bygge AI-apps. Deltag sammen med andre elever og erfarne udviklere i diskussioner om MCP. Det er et støttende fællesskab, hvor spørgsmål er velkomne, og viden deles frit.
Hvis du har produktfeedback eller oplever fejl under byggeriet, besøg:
Licens
Dette repository er licenseret under MIT-licensen. Se filen LICENSE for mere information.
Ansvarsfraskrivelse: Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten 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.


