|
|
1 month ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 1 month ago | |
| 2-js-basics | 1 month ago | |
| 3-terrarium | 1 month ago | |
| 4-typing-game | 1 month ago | |
| 5-browser-extension | 1 month ago | |
| 6-space-game | 1 month ago | |
| 7-bank-project | 1 month ago | |
| 8-code-editor/1-using-a-code-editor | 1 month ago | |
| 9-chat-project | 1 month ago | |
| 10-ai-framework-project | 1 month ago | |
| Git-Basics | ||
| docs | ||
| lesson-template | ||
| memory-game | ||
| quiz-app | ||
| AGENTS.md | ||
| CODE_OF_CONDUCT.md | ||
| CONTRIBUTING.md | ||
| README.md | 1 month ago | |
| SECURITY.md | ||
| SUPPORT.md | ||
| _404.md | ||
| for-teachers.md | ||
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 undervisningsmetode. Start din koderejse i dag!
Deltag i Azure AI Foundry Discord-fællesskabet
Følg disse trin for at komme i gang med at bruge ressourcerne:
- Fork repositoryet: Klik
- Klon repositoryet:
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)
Arabisk | Bengali | Bulgarsk | Burmesisk (Myanmar) | Kinesisk (Forenklet) | Kinesisk (Traditionelt, Hong Kong) | Kinesisk (Traditionelt, Macau) | Kinesisk (Traditionelt, Taiwan) | Kroatisk | Tjekkisk | Dansk | Hollandsk | Estisk | Finsk | Fransk | Tysk | Græsk | Hebraisk | Hindi | Ungarsk | Indonesisk | Italiensk | Japansk | Koreansk | Litauisk | Malaysisk | Marathi | Nepalesisk | Norsk | Persisk (Farsi) | Polsk | Portugisisk (Brasilien) | Portugisisk (Portugal) | Punjabi (Gurmukhi) | Rumænsk | Russisk | Serbisk (Kyrillisk) | Slovakisk | Slovensk | Spansk | Swahili | Svensk | Tagalog (Filippinsk) | Tamil | Thai | Tyrkisk | Ukrainsk | Urdu | Vietnamesisk
Hvis du ønsker yderligere oversættelser, er understøttede sprog listet her
🧑🎓 Er du studerende?
Besøg Student Hub-siden, hvor du finder ressourcer for begyndere, studenterpakker og endda måder at få en gratis certifikatvoucher. Dette er siden, du vil bogmærke og tjekke fra tid til anden, da vi skifter indholdet månedligt.
📣 Meddelelse - Nye GitHub Copilot Agent mode-udfordringer at fuldfø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 hjælp af GitHub Copilot og Agent mode. Hvis du ikke har brugt Agent mode før, kan det ikke kun generere tekst, men også oprette og redigere filer, køre kommandoer og meget mere.
📣 Meddelelse - Nyt projekt at bygge med Generativ AI
Nyt AI-assistentprojekt lige tilføjet, tjek det ud projekt
📣 Meddelelse - Nyt pensum om Generativ AI for JavaScript er netop blevet 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 grundlæggende til RAG.
- Interager med historiske figurer ved hjælp af GenAI og vores ledsager-app.
- Sjov og engagerende fortælling, du vil rejse i tiden!
Hver lektion inkluderer en opgave, en videnstest og en udfordring, der guider 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 man kan bruge dette pensum. Vi vil meget gerne høre din feedback i vores diskussionsforum!
Studerende, for hver lektion, start med en quiz før lektionen og fortsæt med at læse undervisningsmaterialet, fuldføre de forskellige aktiviteter og tjek din forståelse med quizzen efter lektionen.
For at forbedre din læringsoplevelse, forbind 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 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ø, hvor installation ikke er nødvendig), 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. Du kan gøre dette 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 pensummet.
Følg disse trin:
- Fork repositoryet: Klik på "Fork"-knappen øverst til højre på denne side.
- Klon repositoryet:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Kør pensummet i en Codespace
I din kopi af dette repository, som du har oprettet, skal du klikke på knappen Code og vælge Open with Codespaces. Dette vil oprette en ny Codespace, som du kan arbejde i.
Kør pensummet 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 hvert af disse værktøjer, så du kan vælge det, der passer bedst til 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å knappen Code og kopiere URL'en:
Derefter skal du åbne Terminal inden for Visual Studio Code og køre 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. 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 - 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
- skriftlig lektion
- for projektbaserede lektioner, trin-for-trin vejledninger til at bygge projektet
- videnschecks
- 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 på Azure; følg instruktionerne i
quiz-app-mappen.
🗃️ Lektioner
| Projektnavn | Lærte koncepter | Læringsmål | Linket lektion | Forfatter | |
|---|---|---|---|---|---|
| 01 | Kom godt i gang | Introduktion til programmering og værktøjer i branchen | Lær de grundlæggende principper bag de fleste programmeringssprog og om software, der hjælper professionelle udviklere med deres arbejde | Introduktion til programmeringssprog og værktøjer i branchen | Jasmine |
| 02 | Kom godt i gang | Grundlæggende om GitHub, inklusiv teamwork | Hvordan man bruger GitHub i dit 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 om tilgængelighed | Christopher |
| 04 | JS Grundlæggende | JavaScript Datatyper | Det 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 logikflow | Funktioner og metoder | Jasmine og Christopher |
| 06 | JS Grundlæggende | At træffe beslutninger med JS | Lær hvordan man skaber betingelser i din kode ved hjælp af beslutningsmetoder | At træffe beslutninger | 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å at bygge et layout | Introduktion til HTML | Jen |
| 09 | Terrarium | CSS i praksis | Byg CSS for at style det online terrarium med fokus på det grundlæggende i CSS, 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-grænseflade med fokus på closures og DOM-manipulation | JavaScript Closures, DOM-manipulation | Jen |
| 11 | Skrivespil | Byg et skrivespil | Lær hvordan man bruger tastaturhændelser til at styre logikken i din JavaScript-app | Hændelsesdrevet programmering | Christopher |
| 12 | Grøn browserudvidelse | Arbejde med browsere | Lær hvordan browsere fungerer, deres historie, og hvordan man opbygger de første elementer i en browserudvidelse | Om browsere | Jen |
| 13 | Grøn browserudvidelse | Bygge en formular, kalde en 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 | Grøn browserudvidelse | Baggrundsprocesser i browseren, webpræstation | Brug browserens baggrundsprocesser til at styre udvidelsens ikon; lær om webpræstation og nogle optimeringer for at forbedre den | Baggrundsopgaver og præstation | Jen |
| 15 | Rumspil | Mere avanceret spiludvikling med JavaScript | Lær om arv ved hjælp af både klasser og komposition samt Pub/Sub-mønsteret som forberedelse til at bygge et spil | Introduktion til avanceret spiludvikling | Chris |
| 16 | Rumspil | Tegning på canvas | Lær om Canvas API, der bruges til at tegne elementer på en skærm | Tegning på canvas | Chris |
| 17 | Rumspil | Flytte elementer rundt på skærmen | Opdag hvordan elementer kan få bevægelse ved hjælp af kartesiske koordinater og Canvas API | Flytte elementer rundt | Chris |
| 18 | Rumspil | Kollisionsdetektion | Få elementer til at kollidere og reagere på hinanden ved hjælp af tastetryk og tilføj en cooldown-funktion for at sikre spillets ydeevne | Kollisionsdetektion | Chris |
| 19 | Rumspil | Holde styr på point | Udfør matematiske beregninger baseret på spillets status og præstation | Holde styr på point | Chris |
| 20 | Rumspil | Afslutte og genstarte spillet | Lær om at afslutte og genstarte spillet, inklusiv oprydning af ressourcer og nulstilling af variabelværdier | Afslutningsbetingelse | Chris |
| 21 | Bankapp | HTML-skabeloner og ruter i en webapp | Lær hvordan man skaber strukturen for en fler-sidet hjemmesides arkitektur ved hjælp af routing og HTML-skabeloner | HTML-skabeloner og ruter | Yohan |
| 22 | Bankapp | Byg en login- og registreringsformular | Lær om at bygge formularer og håndtere valideringsrutiner | Formularer | Yohan |
| 23 | Bankapp | Metoder til at hente og bruge data | Hvordan data flyder ind og ud af din app, hvordan man henter det, gemmer det og sletter det | Data | Yohan |
| 24 | Bankapp | Koncepter for tilstandsadministration | Lær hvordan din app bevarer tilstand og hvordan man administrerer det programmæssigt | Tilstandsadministration | Yohan |
| 25 | Browser/VScode Code | Arbejde med VScode | Lær hvordan man bruger en kodeeditor | Brug VScode kodeeditor | Chris |
| 26 | AI-assistenter | Arbejde med AI | Lær hvordan man bygger sin egen AI-assistent | AI-assistentprojekt | 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 skrivespil, et virtuelt terrarium, en miljøvenlig browserudvidelse, et rumspil 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 par lektioner i dette pensum som en Læringssti på Microsoft Learn!
Ved at sikre, at indholdet er tilpasset projekter, bliver processen mere engagerende for de studerende, og forståelsen af koncepterne vil blive styrket. Vi har også skrevet flere introduktionslektioner i JavaScript-grundlæggende for at introducere koncepter, 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 lavrisiko-quiz før en lektion fokus for den studerende på at lære et emne, mens en anden quiz efter lektionen sikrer yderligere forståelse. Dette pensum er designet til at være fleksibelt og sjovt og kan tages helt eller delvist. Projekterne starter små og bliver gradvist mere komplekse i løbet 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 tager et rammeværk i brug, ville et godt næste skridt efter at have gennemført dette pensum være at lære om Node.js via en anden samling af videoer: "Beginner Series to: Node.js".
Besøg vores Adfærdskodeks og Bidragsretningslinjer. Vi værdsætter din konstruktive feedback!
🧭 Offline adgang
Du kan køre denne dokumentation offline ved at bruge Docsify. Fork denne repo, installer Docsify på din lokale maskine, og skriv derefter docsify serve i rodmappen af denne repo. 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:
- MCP for begyndere
- Edge AI for begyndere
- AI-agenter for begyndere
- Generativ AI for begyndere .NET
- Generativ AI med JavaScript
- Generativ AI med Java
- AI for begyndere
- Data Science for begyndere
- ML for begyndere
- Cybersikkerhed for begyndere
- Webudvikling for begyndere
- IoT for begyndere
- XR-udvikling for begyndere
- Mestre GitHub Copilot til agentisk brug
- Mestre GitHub Copilot for C#/.NET-udviklere
- Vælg dit eget Copilot-eventyr
Få hjælp
Hvis du sidder fast eller har spørgsmål om at bygge AI-apps, så deltag i:
Hvis du har produktfeedback eller oplever 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 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 er ikke ansvarlige for eventuelle misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse.


