|
|
1 day ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 1 day 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 | 1 month ago | |
| docs | 1 month ago | |
| lesson-template | 1 month ago | |
| memory-game | 1 month ago | |
| quiz-app | 1 month ago | |
| .co-op-translator.json | 1 day ago | |
| AGENTS.md | 1 day ago | |
| CODE_OF_CONDUCT.md | 1 month ago | |
| CONTRIBUTING.md | 1 month ago | |
| README.md | 1 day ago | |
| Roadmap.md | 4 weeks ago | |
| SECURITY.md | 1 month ago | |
| SUPPORT.md | 1 month ago | |
| _404.md | 1 month ago | |
| for-teachers.md | 1 month ago | |
README.md
Webudvikling for begyndere - en læseplan
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!
Deltag i Azure AI Foundry Discord-fællesskabet
Følg disse trin for at komme i gang med at bruge disse ressourcer:
- 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 medudviklere
🌐 Flersproget support
Understøttet via GitHub Action (Automatiseret og 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, hvilket øger downloadstørrelsen betydeligt. For at klone uden oversættelser skal du bruge 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 at få understøttelse af yderligere oversættelsessprog, er de listet her
🧑🎓 Er du studerende?
Besøg Student Hub siden, 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.
📣 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.
📣 Meddelelse - Nyt projekt at bygge ved hjælp af Generativ AI
Nyt AI Assistant projekt er netop tilføjet, tjek det ud projekt
📣 Meddelelse - Ny læseplan om Generativ AI for JavaScript er netop udgivet
Gå ikke glip af vores nye læseplan for 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.
- Interagér med historiske figurer 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 videnscheck og en udfordring, der guider dig i at lære emner som:
- Prompting og prompt engineering
- Tekst- og billedappgenerering
- 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 denne læseplan. Vi vil meget gerne have jeres feedback i vores diskussionsforum!
Lærende, 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.
For at forbedre din læringsoplevelse, forbind med dine jævnbyrdige 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 fremme din uddannelse, anbefaler vi kraftigt at udforske Microsoft Learn 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 (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.
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.
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øre 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. Dette opretter en ny Codespace til dig at arbejde i.
Køre læseplanen lokalt på din computer
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, vil guide dig gennem forskellige valgmuligheder for hvert af disse værktøjer, så du kan vælge, hvad der passer bedst til dig.
Vi anbefaler at bruge Visual Studio Code som din editor, som 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:
Å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 netop har klonet.
Anbefalede Visual Studio Code-udvidelser:
- Live Server - for at kunne forhåndsvise HTML-sider i Visual Studio Code
- Copilot - for at hjælpe dig med at skrive kode hurtigere
📂 Hver lektion inkluderer:
- valgfri skitsetegning
- valgfri supplerende video
- opvarmningsquiz før lektionen
- skreven lektion
- for projektbaserede lektioner, trin-for-trin vejledninger om, hvordan man bygger projektet
- videnschecks
- en udfordring
- supplerende læsning
- opgave
- quiz efter lektion
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; quiz-appen kan køres lokalt eller implementeres til Azure; følg instruktionerne i
quiz-appmappen.
🗃️ Lektioner
| Projektnavn | Gennemgåede Begreber | Læringsmål | Linket Lektion | Forfatter | |
|---|---|---|---|---|---|
| 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 | 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 | Floor |
| 03 | Kom I Gang | Tilgængelighed | Lær det grundlæggende om webtilgængelighed | Tilgængelighedsgrundlag | Christopher |
| 04 | JS Grundlæggende | JavaScript Datatyper | Grundlæggende JavaScript-datatyper | Datatyper | Jasmine |
| 05 | JS Grundlæggende | Funktioner og Metoder | Lær om funktioner og metoder til at styre et programs logik | Funktioner og Metoder | Jasmine og Christopher |
| 06 | JS Grundlæggende | Beslutningstagning med JS | Lær at skabe betingelser i din kode ved hjælp af beslutningsmetoder | Beslutningstagning | 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 | Jasmine |
| 08 | Terrarium | HTML i praksis | Byg HTML'en til at skabe et online terrarium med fokus på opbygning af 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 i CSS, inkl. responsivt design | Introduktion til CSS | Jen |
| 10 | Terrarium | 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 | Jen |
| 11 | Typing Game | Byg et Typingspil | Lær at bruge tastaturbegivenheder til at styre logikken i din JavaScript-app | Eventdrevet programmering | Christopher |
| 12 | Green Browser Extension | Arbejde med browsere | Lær hvordan browsere fungerer, deres historie og hvordan man laver de første elementer i en browser-udvidelse | Om browsere | Jen |
| 13 | Green Browser Extension | 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 | 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 via både klasser og komposition samt Pub/Sub-mønsteret som forberedelse til 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 bevæge sig vha. kartesiske koordinater og Canvas API | Flyt elementer rundt | Chris |
| 18 | Space Game | Kollisionregistrering | Få elementer til at kollidere og reagere på hinanden ved tastetryk og tilføj en cooldown-funktion for at sikre spillets ydeevne | Kollisionregistrering | Chris |
| 19 | Space Game | Hold styr på point | Udfør matematiske beregninger baseret på spillets status og præstation | Hold styr på point | Chris |
| 20 | Space Game | Afslutning og genstart af spillet | Lær om at afslutte og genstarte spillet, inkl. oprydning af ressourcer og nulstilling af variabler | Afslutningsbetingelsen | Chris |
| 21 | Banking App | 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 | Yohan |
| 22 | Banking App | Byg en login- og registreringsformular | Lær om hvordan man laver formularer og håndterer valideringsrutiner | Formularer | Yohan |
| 23 | Banking App | Metoder til hentning og brug af data | Hvordan data flyder ind og ud af din app, hvordan man henter, gemmer og bortskaffer det | Data | Yohan |
| 24 | Banking App | Koncepter for tilstandsadministration | Lær hvordan din app bevarer tilstand og hvordan man programmerer styring af denne | Tilstandsadministration | 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 Assistent projekt | Chris |
🏫 Pædagogik
Vores læreplan er designet med to centrale pædagogiske principper for øje:
- projektbaseret læring
- hyppige quizzes
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.
🎓 Du kan tage de første lektioner i denne læreplan som en Learn Path 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" samlingen af videotutorials, hvoraf nogle forfattere bidrog til denne læreplan.
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.
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".
Besøg vores Adfærdskodeks og Bidrag 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 af dette repo docsify serve. Websitet 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 Series
Core Learning
Copilot Series
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 har produktfeedback eller oplever fejl under udvikling, besøg:
Licens
Dette arkiv 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 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.


