|
|
1 week ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 1 week ago | |
| 2-js-basics | 1 week ago | |
| 3-terrarium | 1 week ago | |
| 4-typing-game | 3 weeks ago | |
| 5-browser-extension | 1 week ago | |
| 6-space-game | 1 week ago | |
| 7-bank-project | 1 week ago | |
| 8-code-editor/1-using-a-code-editor | 1 week ago | |
| 9-chat-project | 1 week ago | |
| 10-ai-framework-project | 3 weeks ago | |
| Git-Basics | 4 months ago | |
| docs | 5 months ago | |
| lesson-template | 5 months ago | |
| memory-game | 4 months ago | |
| quiz-app | 5 months ago | |
| AGENTS.md | 4 months ago | |
| CODE_OF_CONDUCT.md | 5 months ago | |
| CONTRIBUTING.md | 5 months ago | |
| README.md | 1 week ago | |
| SECURITY.md | 5 months ago | |
| SUPPORT.md | 5 months ago | |
| _404.md | 5 months ago | |
| for-teachers.md | 1 week ago | |
README.md
Webudvikling for begyndere - Et læseplan
Lær det grundlæggende 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 viden med vores effektive projektbaserede undervisningsmetode. 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 Repository: Klik på
- Klon Repository:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Deltag i Azure AI Foundry Discord og mød eksperter og medudviklere
🌐 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 inkluderer 50+ sprogoversættelser, som markant øger downloadstørrelsen. For at klone uden oversættelser, brug sparse checkout:
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 yderligere oversættelser, er understøttede sprog listet her
🧑🎓 Er du studerende?
Besøg Student Hub-siden hvor du vil finde begynderguider, studentepakker 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-udfordringer til at gennemføre!
Ny udfordring tilføjet, kig efter "GitHub Copilot Agent Challenge 🚀" i de fleste kapitler. Det er en ny udfordring, du skal gennemføre ved brug af GitHub Copilot og Agent-tilstand. Hvis du ikke har brugt Agent-tilstand før, kan den ikke kun generere tekst, men også oprette og redigere filer, køre kommandoer og mere.
📣 Meddelelse - Nyt projekt at bygge med Generativ AI
Nyt AI-assistentprojekt lige tilføjet, tjek det ud projekt
📣 Meddelelse - Ny læseplan om Generativ AI for JavaScript er netop udgivet
Gå ikke glip af vores nye Generativ AI-læseplan!
Besøg https://aka.ms/genai-js-course for at komme i gang!
- Lektioner der dækker alt fra grundlæggende til RAG.
- Interager med historiske personer ved hjælp af GenAI og vores ledsagerapp.
- Sjov og engagerende fortælling, du kommer til at tidsrejse!
Hver lektion inkluderer en opgave, en vidensprøve og en udfordring, der guider dig gennem læring af emner som:
- Prompting og prompt engineering
- Tekst- og billedapp-generation
- Søg-apps
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 dette læseplan kan bruges. Vi vil meget gerne have din feedback i vores diskussionsforum!
Elever, for hver lektion start med en quiz før forelæsningen og fortsæt med at læse forelæsningsmaterialet, gennemføre de forskellige aktiviteter og tjek din forståelse med quizzen efter forelæsningen.
For at forbedre din læringsoplevelse, forbind dig med dine medstuderende for at arbejde på projekterne sammen! Diskussioner opfordres i vores diskussionsforum hvor vores team af moderatorer vil være tilgængelige for at besvare dine spørgsmål.
For at udvide din uddannelse anbefaler vi kraftigt at udforske Microsoft Learn for yderligere studiematerialer.
📋 Opsæt dit miljø
Dette 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 (et browserbaseret miljø uden behov for installation), eller lokalt på din computer ved brug af en teksteditor som Visual Studio Code.
Opret dit repository
For at du nemt kan gemme dit arbejde, anbefales det at du opretter en egen kopi af dette repository. Det kan du gøre ved at klikke på knappen Use this template øverst på siden. Det vil oprette et nyt repository på din GitHub-konto med en kopi af læseplanen.
Følg disse trin:
- Fork Repository: Klik på "Fork" knappen øverst til højre på denne side.
- Klon Repository:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Kør læseplanen i en Codespace
I din kopi af dette repository som du har oprettet, klik på Code knappen og vælg Open with Codespaces. Det vil oprette en ny Codespace til dig at arbejde i.
Kør læseplanen lokalt på din computer
For at køre dette 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 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 editor, der også har et indbygget Terminal. Du kan downloade Visual Studio Code her.
-
Klon dit repository til din computer. Det kan du gøre ved at klikke på Code knappen og kopiere URL’en:
CodeSpace Åbn derefter Terminal i Visual Studio Code og kør følgende kommando, hvor du udskifter
<your-repository-url>med den URL, du netop 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 netop har klonet.
Anbefalede Visual Studio Code-udvidelser:
- Live Server - til at forhåndsvise HTML-sider inden for Visual Studio Code
- Copilot - hjælper dig med at skrive kode hurtigere
📂 Hver lektion inkluderer:
- valgfri sketchnote
- valgfri supplerende video
- quiz som opvarmning før lektionen
- skreven lektion
- for projektbaserede lektioner, trin-for-trin vejledninger til at bygge projektet
- videnskontroller
- en udfordring
- supplerende læsning
- opgave
- quiz efter lektionen
En note om quizzer: Alle quizzer er indeholdt 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 deployes til Azure; følg instruktionerne i
quiz-appmappen.
🗃️ Lektioner
| Projektnavn | 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 elementer 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 GitHub, inkl. arbejde med et team | Hvordan man bruger GitHub i sit projekt, og 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 tilgængelighed | Christopher |
| 04 | JS Basics | JavaScript-datatyper | Det grundlæggende om JavaScript-datatyper | Datatyper | Jasmine |
| 05 | JS Basics | Funktioner og metoder | Lær om funktioner og metoder til at styre en applikations logik | Funktioner og metoder | Jasmine og Christopher |
| 06 | JS Basics | Beslutningstagning med JS | Lær hvordan man skaber betingelser i sin kode ved brug af beslutningstagning | Beslutningstagning | Jasmine |
| 07 | JS Basics | Arrays og løkker | Arbejd med data ved brug af arrays og løkker i JavaScript | Arrays og løkker | Jasmine |
| 08 | Terrarium | HTML i praksis | Byg HTML’en til at skabe et online terrarium med fokus på at bygge et layout | Introduktion til HTML | Jen |
| 09 | Terrarium | CSS i praksis | Byg CSS’en til at style det online terrarium med fokus på CSS’s grundlæggende, inkl. at gøre siden responsiv | Introduktion til CSS | Jen |
| 10 | Terrarium | JavaScript closures, DOM-manipulation | Byg JavaScript’en til at gøre terrariet funktionelt som et 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 man 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 skaber de første elementer af en browserudvidelse | Om browsere | Jen |
| 13 | Green Browser Extension | Byg en formular, kald et API og gem variabler i lokal lagring | Byg JavaScript-elementerne i din browserudvidelse for at kalde et API vha. variabler gemt i lokal lagring | API’er, formularer og lokal lagring | Jen |
| 14 | Green Browser Extension | Baggrundsprocesser i browseren, webperformance | Brug browserens baggrundsprocesser til at styre udvidelsens ikon; lær om webperformance og optimeringer | Baggrundsopgaver og performance | Jen |
| 15 | Space Game | 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 | Chris |
| 16 | Space Game | Tegning på canvas | Lær om Canvas API’et, der bruges til at tegne elementer på en skærm | Tegning på canvas | Chris |
| 17 | Space Game | Flyt elementer rundt på skærmen | Opdag hvordan elementer kan bevæge sig vha. kartesiske koordinater og Canvas API’et | Flyt elementer rundt | Chris |
| 18 | Space Game | Kollisiondetektion | Få elementer til at kollidere og reagere på hinanden ved brug af tastetryk og indfør en cooldown-funktion for spillets ydeevne | Kollisiondetektion | Chris |
| 19 | Space Game | Hold styr på point | Udfør matematiske beregninger baseret på spillets status og ydeevne | Hold styr på point | Chris |
| 20 | Space Game | Afslut og genstart spillet | Lær om at afslutte og genstarte spillet, inklusiv oprydning af ressourcer og nulstilling af variabelværdier | Afslutningsbetingelsen | Chris |
| 21 | Banking App | HTML-skabeloner og ruter i en webapp | Lær hvordan man skaber arkitekturen for et multipage-websted ved brug af 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 | Begreber inden for tilstandsstyring | Lær hvordan din app bevarer tilstand, og hvordan det styres programmatisk | Tilstandsstyring | Yohan |
| 25 | Browser/VScode Code | Arbejde med VScode | Lær hvordan man bruger en kodeeditor | Brug af VScode Code Editor | Chris |
| 26 | AI Assistants | Arbejde med AI | Lær hvordan du bygger din egen AI-assistent | AI Assistant projekt | Chris |
🏫 Pædagogik
Vores pensum er designet med to nøglepædagogiske principper for øje:
- 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 opnå praktisk erfaring ved at bygge et skrive-spil, et virtuelt terrarium, en miljøvenlig browserudvidelse, et rum-invader stil spil og en bankapp til virksomheder. Ved slutningen af serien vil studerende have opnået solid forståelse for webudvikling.
🎓 Du kan tage de første par lektioner i dette pensum som en læringssti på Microsoft Learn!
Ved at sikre, at indholdet knytter sig til projekter, bliver processen mere engagerende for eleverne, og fastholdelsen af koncepter vil blive forbedret. Vi har også skrevet flere startlektioner i JavaScript-basics for at introducere koncepter, parret 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 indsats før en lektion elevens intention mod at lære et emne, mens en anden quiz efter lektion 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 i løbet af den 12-ugers cyklus.
Selvom vi bevidst har undgået at indføre JavaScript-rammeværk for at koncentrere os om de grundlæggende færdigheder, der er nødvendige som webudvikler, før man tager et rammeværk i brug, vil 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 Adfærdskodeks og Bidrag retningslinjer. Vi sætter pris på din konstruktive feedback!
🧭 Offline adgang
Du kan køre denne dokumentation offline ved at bruge Docsify. Fork dette repo, installer Docsify på din lokale maskine, og skriv derefter docsify serve i rodmappen af dette repo. Webstedet vil blive serveret på port 3000 på din lokale computer: localhost:3000.
En PDF med alle lektionerne kan findes her.
🎒 Andre kurser
Vores team producerer andre kurser! Se dem her:
LangChain
Azure / Edge / MCP / Agenter
Generativ AI Serie
Kernelæring
Copilot Serie
Få hjælp
Hvis du sidder fast eller har spørgsmål om at bygge AI-apps. Deltag 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 fejl under udviklingen, besøg:
Licens
Dette repository er licenseret under MIT-licensen. Se LICENSE-filen for mere information.
Ansvarsfraskrivelse: Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten Co-op Translator. Selvom vi stræber efter nøjagtighed, bedes du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det oprindelige dokument på dets modersmål bør betragtes som den autoritative kilde. For kritiske oplysninger 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.


