32 KiB

Raw Blame History

Webudvikling for begyndere - Et pensum

Lær grundprincipperne 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 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 repoet: Klik
Klon repoet: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Deltag i Azure AI Foundry Discord og mød eksperter og medudviklere

🌐 Multisprog Support

Understøttet via GitHub Action (Automatisk & Altid Opdateret)

Foretrækker du at klone lokalt?

Dette repository indeholder 50+ sprogoversættelser, hvilket markant øger downloadstørrelsen. For at klone uden oversættelser, brug sparse 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 langt hurtigere download.

Hvis du ønsker, at yderligere oversættelsessprog understøttes, er de listet her

🧑‍🎓 Er du studerende?

Besøg Student Hub-siden, hvor du finder begynderressourcer, Student-pakker og endda måder at få et gratis certifikatkupon på. 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, som du kan gennemføre ved at bruge GitHub Copilot og Agent mode. Hvis du ikke har brugt Agent mode før, kan den ikke blot generere tekst men også oprette og redigere filer, køre kommandoer og mere.

📣 Meddelelse - Nyt projekt at bygge ved brug af Generativ AI

Nyt AI Assistant projekt er lige tilføjet, tjek projektet ud her

📣 Meddelelse - Nyt pensum om Generativ AI for JavaScript blev lige udgivet

Gå ikke glip af vores nye Generative AI pensum!

Besøg https://aka.ms/genai-js-course for at komme i gang!

Lektioner der dækker alt fra det grundlæggende til RAG.
Interaktion med historiske personer ved brug af GenAI og vores companion app.
Sjov og engagerende fortælling, du rejser i tiden!

Hver lektion inkluderer en opgave, en videnscheck og en udfordring til at guide dig i at lære emner som:

Prompting og prompt engineering
Tekst- og billedapps-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 dette pensum kan bruges. Vi vil elske at få jeres feedback i vores diskussionsforum!

Lærende, for hver lektion, start med en præ-forelæsning quiz og fortsæt med at læse forelæsningsmaterialet, udføre de forskellige aktiviteter og tjek din forståelse med en post-forelæsnings quiz.

For at forbedre din læring, connect med dine jævnbyrdige for at arbejde sammen på projekterne! Diskussioner er opfordret i vores diskussionsforum, hvor vores team af moderatorer vil være til rådighed for at besvare dine spørgsmål.

For at videreuddanne dig 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 kommer i gang, kan du vælge at køre pensum i en Codespace (et browserbaseret miljø uden behov for 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 i din GitHub-konto med en kopi af pensum.

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 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 til dig at 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 handelsvæ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.

Vi anbefaler at bruge Visual Studio Code som din editor, som også har et integreret 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:

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 kopierede:
```
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 inden for Visual Studio Code

Copilot - til at hjælpe dig med at skrive kode hurtigere

📂 Hver lektion inkluderer:

valgfri sketchnote
valgfri supplerende video
varm-quiz før lektionen
skriftlig lektion
for projektbaserede lektioner, trin-for-trin vejledninger om, hvordan man bygger projektet
videnskontroller
en udfordring
supplerende læsning
opgave
quiz efter lektion

En note om quizzer: Alle quizzer findes i Quiz-app mappen, 48 quizzer med tre spørgsmål hver. De er tilgængelige her quiz-app'en kan køre lokalt eller udgives til Azure; følg instruktionerne i quiz-app mappen.

🗃️ Lektioner

	Projektnavn	Underviste Begreber	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, som hjælper professionelle udviklere	Introduktion til programmeringssprog og værktøjer	Jasmine
02	Kom godt i gang	Grundlæggende GitHub, inkl. arbejde i team	Hvordan man bruger GitHub i sit projekt, og hvordan man samarbejder med andre om kodebasis	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 et applikations logikflow	Funktioner og metoder	Jasmine og Christopher
06	JS Basics	Beslutningstagning med JS	Lær hvordan man skaber betingelser i din kode ved hjælp af beslutningstagsmetoder	Beslutningstagning	Jasmine
07	JS Basics	Arrays og løkker	Arbejd med data brugt arrays og løkker i JavaScript	Arrays og løkker	Jasmine
08	Terrarium	HTML i praksis	Byg HTML til at skabe et online terrarium med fokus på layout	Introduktion til HTML	Jen
09	Terrarium	CSS i praksis	Byg CSS til at style det online terrarium med fokus på CSS grundlæggende inklusive responsivt design	Introduktion til CSS	Jen
10	Terrarium	JavaScript closures, DOM-manipulation	Byg JavaScript til at gøre terrariet funktionelt som drag/drop-interface med fokus på closures og DOM-manipulation	JavaScript Closures, DOM-manipulation	Jen
11	Typing Game	Byg et Typing-spil	Lær hvordan keyboard events bruges 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 i en browser extension	Om browsere	Jen
13	Green Browser Extension	Bygge formular, kalde et API og gemme variabler i lokal lagring	Byg JavaScript-elementerne i din browser extension til at kalde et API ved hjælp af variabler i lokal lagring	APIs, formularer og lokal lagring	Jen
14	Green Browser Extension	Baggrundsprocesser i browseren, webperformance	Brug browserens baggrundsprocesser til at styre extensionens 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, som bruges til at tegne elementer på en skærm	Tegning på canvas	Chris
17	Space Game	Flytning af 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 ved hjælp af tastetryk og tilføj en cooldown-funktion for at sikre 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	Afslutte og genstarte spillet	Lær om at afslutte og genstarte spillet, inklusiv oprydning af ressourcer og nulstilling af variabler	Afslutningsbetingelsen	Chris
21	Banking App	HTML-skabeloner og ruter i en webapp	Lær hvordan man skaber skabelonen for en multipage hjemmesides arkitektur ved brug af routing og HTML-skabeloner	HTML-skabeloner og ruter	Yohan
22	Banking App	Byg en login- og registreringsformular	Lær om opbygning af formularer og håndtering af 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 det, gemmer og rydder op	Data	Yohan
24	Banking App	Begreber om tilstands-styring	Lær hvordan din app bevarer tilstand og hvordan man styrer det programmæssigt	Tilstands-styring	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 Assistant 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, som nutidens webudviklere bruger. Studerende får mulighed for at opnå praktisk erfaring ved at bygge et typing-spil, virtuelt terrarium, miljøvenlig browser extension, space-invader-stil spil og en bankapp til erhvervslivet. Ved slutningen af serien vil studerende have opnået en solid forståelse af 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 projekter, gøres processen mere engagerende for eleverne og fastholdelse af begreber vil blive øget. Vi har også skrevet flere starterlektioner i JavaScript basics for at introducere begreber, 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 lav-stakes quiz før en lektion elevens fokus 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 gennemføres helt eller delvist. Projekterne starter småt og bliver gradvist mere komplekse ved slutningen af 12-ugers cyklussen.

Mens vi bevidst har undgået at introducere JavaScript-rammer for at fokusere på de grundlæggende færdigheder som webudvikler, inden man tager en ramme i brug, vil et godt næste skridt til at fuldføre dette pensum være at lære om Node.js gennem en anden samling af videoer: "Beginner Series to: Node.js".

Besøg vores Adfærdskodeks og Bidragsvejledning. Vi byder din konstruktive 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 skriv derefter i roden af dette repo docsify serve. Hjemmesiden serveres på port 3000 på din localhost: localhost:3000.

📘 PDF

En PDF med alle lektionerne kan findes her.

🎒 Andre Kurser

Vores team producerer andre kurser! Tjek:

LangChain

Azure / Edge / MCP / Agents

Generativ AI Serie

Core Learning

Copilot Serie

Få Hjælp

Hvis du sidder fast eller har spørgsmål om at bygge AI-apps, så 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 fejl under bygning, besøg:

Licens

Dette depot 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.

32 KiB Raw Blame History