|
|
1 month ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 2 months ago | |
| 2-js-basics | 4 months ago | |
| 3-terrarium | 4 months ago | |
| 4-typing-game | 4 months ago | |
| 5-browser-extension | 4 months ago | |
| 6-space-game | 4 months ago | |
| 7-bank-project | 4 months ago | |
| 8-code-editor/1-using-a-code-editor | 4 months ago | |
| 9-chat-project | 4 months ago | |
| 10-ai-framework-project | 4 months ago | |
| Git-Basics | 4 months ago | |
| docs | 4 months ago | |
| lesson-template | 1 month ago | |
| memory-game | 4 months ago | |
| quiz-app | 4 months ago | |
| .co-op-translator.json | 1 month ago | |
| AGENTS.md | 1 month ago | |
| CODE_OF_CONDUCT.md | 4 months ago | |
| CONTRIBUTING.md | 4 months ago | |
| README.md | 1 month ago | |
| Roadmap.md | 4 months ago | |
| SECURITY.md | 4 months ago | |
| SUPPORT.md | 4 months ago | |
| _404.md | 4 months ago | |
| for-teachers.md | 4 months ago | |
README.md
Webudvikling for Begyndere - En Læreplan
Lær det grundlæggende inden for 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 vidensindlæring med vores effektive projektbaserede pædagogik. Start din kodningsrejse i dag!
Deltag i Azure AI Foundry Discord og mød eksperter og andre udviklere.
Følg disse trin for at komme i gang med at bruge disse ressourcer:
- Fork Repoet: Klik på
- Klon Repoet:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Deltag i Azure AI Foundry Discord og mød eksperter og andre udviklere
🌐 Understøttelse af flere sprog
Understøttet via GitHub Action (Automatisk & 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 | Khmer | 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, hvilket betydeligt øger download-størrelsen. For at klone uden oversættelser, brug spars checkout:
Bash / macOS / Linux:
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'CMD (Windows):
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 de understøttede sprog listet her. her
🧑🎓 Er du studerende?
Besøg Student Hub siden, hvor du vil finde begynderressourcer, studenterpakker og endda måder at få et gratis certifikat-voucher. 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, se efter "GitHub Copilot Agent Challenge 🚀" i de fleste kapitler. Det er en ny udfordring for dig at gennemføre ved brug af 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 Assistentprojekt lige tilføjet, tjek det ud projekt
📣 Meddelelse - Ny læreplan om Generativ AI for JavaScript er netop udgivet
Gå ikke glip af vores nye Generative AI læreplan!
Besøg https://aka.ms/genai-js-course for at komme i gang!
- Lektioner som dækker alt fra grundlæggende til RAG.
- Interager med historiske personer ved hjælp af GenAI og vores companion-app.
- Sjov og engagerende fortælling, du kommer til at rejse i tiden!
Hver lektion inkluderer en opgave at gennemføre, en videnscheck og en udfordring for at guide dig i at lære emner som:
- Prompting og prompt engineering
- Tekst- og billedapp-generering
- 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 du kan bruge denne læreplan. Vi vil meget gerne have din feedback i vores diskussionsforum!
Lærende, for hver lektion, start med en pre-forelæsningsquiz og følg op med at læse forelæsningsmaterialet, udfør de forskellige aktiviteter og tjek din forståelse med post-forelæsningsquizzen.
For at forbedre din læringsoplevelse, forbind med dine jævnaldrende for at arbejde sammen på projekterne! Diskussioner opfordres i vores diskussionsforum, hvor vores team af moderatorer vil være tilgængelige for at besvare dine spørgsmål.
For at fremme din uddannelse anbefaler vi stærkt at udforske Microsoft Learn for yderligere studiematerialer.
📋 Opsæt dit miljø
Denne læreplan har et udviklingsmiljø klar til brug! Når du går i gang, kan du vælge at køre læreplanen i en Codespace (et browser-baseret, ingen installation nødvendig miljø), eller lokalt på din computer ved at bruge 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 opretter et nyt repository på din GitHub konto med en kopi af læreplanen.
Følg disse trin:
- Fork Repoet: Klik på "Fork" knappen øverst til højre på denne side.
- Klon Repoet:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Kør læreplanen i en Codespace
I din kopi af dette repository, som du har oprettet, klik på Code knappen og vælg Open with Codespaces. Dette vil oprette en ny Codespace for dig at arbejde i.
Kør læreplanen lokalt på din computer
For at køre denne læreplan 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 igennem forskellige muligheder for hver af disse værktøjer, så du kan vælge det, der fungerer bedst for dig.
Vores anbefaling er 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. Du kan gøre dette ved at klikke på Code-knappen og kopiere URL'en:
Åbn derefter Terminal i Visual Studio Code og kør følgende kommando, hvor du udskifter
<your-repository-url>med den URL, du lige har kopieret:git clone <your-repository-url> -
Åbn mappen i Visual Studio Code. Du kan gøre dette ved at klikke File > Open Folder og vælge den mappe, du lige har klonet.
Anbefalede Visual Studio Code-udvidelser:
- Live Server - til at forhåndsvise HTML-sider i Visual Studio Code
- Copilot - til at hjælpe 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 guider til, hvordan man bygger projektet
- videnscheck
- 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øre lokalt eller implementeres til Azure; følg instruktionerne i
quiz-appmappen.
🗃️ Lektioner
| Projektnavn | Undervisede begreber | Læringsmål | Link til 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 med deres arbejde | Intro til programmeringssprog og værktøjer | Jasmine |
| 02 | Kom godt i gang | Grundlæggende GitHub, inkluderer samarbejde | Hvordan du bruger GitHub i dit projekt, og hvordan du samarbejder med andre om en kodebase | Intro 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 | Grundlæggende 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 du opretter betingelser i din kode ved hjælp af beslutningstagning | Beslutningstagning | Jasmine |
| 07 | JS Basics | 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’en til at skabe et online terrarium med fokus på layout | Introduktion til HTML | Jen |
| 09 | Terrarium | CSS i praksis | Byg CSS’en til at style det online terrarium med fokus på det grundlæggende CSS inklusive 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 en træk og slip-grænseflade med fokus på closures og DOM-manipulation | JavaScript closures, DOM-manipulation | Jen |
| 11 | Typing Game | Byg et typespil | Lær hvordan du bruger tastaturhændelser til at drive logikken i din JavaScript-app | Event-Driven Programming | Christopher |
| 12 | Green Browser Extension | Arbejde med browsere | Lær hvordan browsere fungerer, deres historie, og hvordan man skitserer de første elementer i en browserudvidelse | Om browsere | Jen |
| 13 | Green Browser Extension | Byg et form, kald et API og gem variabler i lokal lagerplads | Byg JavaScript-elementerne i din browserudvidelse til at kalde et API ved brug af variabler gemt i lokal lagerplads | 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 nogle optimeringer for at forbedre | Baggrundsopgaver og performance | Jen |
| 15 | Space Game | Mere avanceret spiludvikling med JavaScript | Lær om arv ved brug 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 til canvas | Lær om Canvas API, som bruges til at tegne elementer på en skærm | Tegning til Canvas | Chris |
| 17 | Space Game | Flyt elementer rundt på skærmen | Opdag hvordan elementer kan få bevægelse ved hjælp af kartesiske koordinater og Canvas API | Flyt elementer rundt | Chris |
| 18 | Space Game | Kollisiondetektion | Få elementer til at kollidere og reagere på hinanden via tastetryk og tilføj en cooldown-funktion for at sikre spillets ydeevne | Kollisiondetektion | Chris |
| 19 | Space Game | Hold styr på point | Udfør matematiske beregninger baseret på spillets tilstand og performance | Pointtælling | Chris |
| 20 | Space Game | Afslutning og genstart af spillet | Lær om hvordan man afslutter og genstarter spillet, inklusive oprydning af assets og nulstilling af variabler | Afslutningsbetingelsen | Chris |
| 21 | Banking App | HTML-skabeloner og ruter i en webapp | Lær hvordan man skaber grundstrukturen til en multipage websides arkitektur 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 den | Data | Yohan |
| 24 | Banking App | Begreber i state management | Lær hvordan din app opretholder tilstand og administrerer den programmæssigt | 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 du bygger din egen AI-assistent | AI-assistent projekt | Chris |
🏫 Pædagogik
Vores pensum er designet med to centrale pædagogiske principper i tankerne:
- projektbaseret læring
- hyppige quizzer
Programmet underviser i grundlæggende JavaScript, HTML og CSS samt de nyeste værktøjer og teknikker, der anvendes af nutidens webudviklere. Studerende får mulighed for praktisk erfaring ved at bygge et typespil, virtuelt terrarium, miljøvenlig browserudvidelse, space-invader-stil spil og en bankapp til virksomheder. Ved afslutningen af serien vil de studerende have opnået en solid forståelse af webudvikling.
🎓 Du kan tage de første lektioner i dette pensum som en Læringssti på Microsoft Learn!
Ved at sikre, at indholdet stemmer overens med projekter, bliver processen mere engagerende for de studerende, og fastholdelsen af begreber vil blive forbedret. Vi skrev også flere startlektioner i JavaScript-begreber for at introducere koncepter, parret med en video fra "Beginners Series to: JavaScript" samlingen af videotutorials, hvor nogle af forfatterne bidrog til dette pensum.
Desuden sætter en lavrisiko-quiz før en lektion elevens intention 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 tages helt eller delvist. Projekterne starter småt og bliver gradvist mere komplekse ved slutningen af den 12-ugers cyklus.
Selvom vi bevidst har undgået at introducere JavaScript-rammeværk for at fokusere på de grundlæggende færdigheder, der er nødvendige som webudvikler, før man går videre til et rammeværk, vil et godt næste skridt for at fuldføre 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 ser frem til 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 i rodmappen i dette repo docsify serve. Hjemmesiden vil blive serveret på port 3000 på din localhost: localhost:3000.
En PDF med alle lektionerne kan findes her.
🎒 Andre kurser
Vores team producerer andre kurser! Tjek dem ud:
LangChain
Azure / Edge / MCP / Agents
Generative AI Serie
Kerne Læring
Copilot Serie
Få hjælp
Hvis du sidder fast 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 udvikling, 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 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 ikke ansvar for eventuelle misforståelser eller fejltolkninger, der opstår ved brug af denne oversættelse.


