28 KiB

Raw Blame History

Webudvikling for begyndere - Et kursus

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!

Bliv en del af Azure AI Foundry Discord-fællesskabet

Følg disse trin for at komme i gang med at bruge ressourcerne:

Fork repositoryet: Klik
Clone repositoryet: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Bliv medlem af Azure AI Foundry Discord og mød eksperter og andre udviklere

🌐 Understøttelse af flere sprog

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

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 bør bogmærke og tjekke fra tid til anden, da vi skifter indhold månedligt.

📣 Nyhed - Nyt projekt med Generativ AI

Et nyt AI-assistentprojekt er netop tilføjet, tjek det ud projekt

📣 Nyhed - Ny læseplan om Generativ AI for JavaScript er netop udgivet

Gå ikke glip af vores nye læseplan 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 ledsagerapp.
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 bruger denne læseplan. 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 lektionens materiale, fuldføre de forskellige aktiviteter og teste 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ø

Denne læseplan har et udviklingsmiljø klar til brug! Når du går i gang, kan du vælge at køre læseplanen i en Codespace (et browserbaseret miljø, hvor ingen installationer er nødvendige), eller lokalt på din computer ved hjælp af en teksteditor som Visual Studio Code.

Opret dit repository

For nemt at 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 læseplanen.

Følg disse trin:

Fork repositoryet: Klik på "Fork"-knappen øverst til højre på denne side.
Clone repositoryet: 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å knappen Code og vælg Open with Codespaces. Dette vil oprette en ny Codespace, som du kan arbejde i.

Kør 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 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.

Vi anbefaler at bruge Visual Studio Code som din editor, som også har en indbygget Terminal. Du kan downloade Visual Studio Code her.

Clone dit repository til din computer. Du kan gøre dette ved at klikke på knappen Code og kopiere URL'en:

CodeSpace

Åbn derefter Terminal i Visual Studio Code og kør følgende kommando, hvor <your-repository-url> erstattes 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 clonet.

Anbefalede Visual Studio Code-udvidelser:

Live Server - for at forhåndsvise HTML-sider i Visual Studio Code

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

📂 Hver lektion inkluderer:

valgfri sketchnote
valgfri supplerende video
opvarmningsquiz før lektionen
skriftlig lektion
for projektbaserede lektioner, trin-for-trin vejledninger til, hvordan man bygger projektet
videnskontroller
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

	Projekt Navn	Lærte Koncepter	Læringsmål	Linket Lektion	Forfatter
01	Kom godt i gang	Introduktion til programmering og værktøjer til faget	Lær de grundlæggende principper bag de fleste programmeringssprog og om software, der hjælper professionelle udviklere i deres arbejde	Introduktion til programmeringssprog og værktøjer til faget	Jasmine
02	Kom godt i gang	Grundlæggende om GitHub, herunder arbejde i et team	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 Løkker	Arbejd med data ved hjælp af arrays og løkker i JavaScript	Arrays og Løkker	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, herunder 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	Typing Game	Byg et Tastaturspil	Lær hvordan man bruger tastaturbegivenheder til at styre logikken i din JavaScript-app	Event-Drevet Programmering	Christopher
12	Green Browser Extension	Arbejde med Browsere	Lær hvordan browsere fungerer, deres historie, og hvordan man opbygger de første elementer af en browserudvidelse	Om Browsere	Jen
13	Green Browser Extension	Bygning af en formular, kald af en API og lagring af variabler i lokal storage	Byg JavaScript-elementerne i din browserudvidelse for at kalde en API ved hjælp af variabler, der er gemt i lokal storage	APIs, Formularer og Lokal Storage	Jen
14	Green Browser Extension	Baggrundsprocesser i browseren, webydelse	Brug browserens baggrundsprocesser til at administrere udvidelsens ikon; lær om webydelse og nogle optimeringer	Baggrundsopgaver og Ydelse	Jen
15	Space Game	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	Space Game	Tegning til canvas	Lær om Canvas API, der bruges til at tegne elementer på en skærm	Tegning til Canvas	Chris
17	Space Game	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	Space Game	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 ydelse	Kollisionsdetektion	Chris
19	Space Game	Holde styr på point	Udfør matematiske beregninger baseret på spillets status og ydelse	Holde Styr på Point	Chris
20	Space Game	Afslutte og genstarte spillet	Lær om at afslutte og genstarte spillet, herunder oprydning af aktiver og nulstilling af variabelværdier	Afslutningsbetingelse	Chris
21	Banking App	HTML-skabeloner og ruter i en webapp	Lær hvordan man opbygger arkitekturen for en hjemmeside med flere sider ved hjælp 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 det, gemmer det og sletter det	Data	Yohan
24	Banking App	Koncepter for Tilstandsadministration	Lær hvordan din app bevarer tilstand, og hvordan man administrerer det programmatisk	Tilstandsadministration	Yohan
25	Browser/VScode Code	Arbejde med VScode	Lær hvordan man bruger en kodeeditor	Brug VScode Kodeeditor	Chris
26	AI Assistants	Arbejde med AI	Lær hvordan man bygger sin 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, som nutidens webudviklere bruger. Studerende får mulighed for at opbygge praktisk erfaring ved at bygge et tastaturspil, et virtuelt terrarium, en miljøvenlig browserudvidelse, et 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 par lektioner i dette pensum som en Learn Path på Microsoft Learn!

Ved at sikre, at indholdet er i overensstemmelse med projekter, bliver processen mere engagerende for de studerende, og fastholdelsen af koncepter vil blive forbedret. Vi har også skrevet flere introduktionslektioner i JavaScript-grundlæggende 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 lav-stress quiz før en klasse intentionen hos den studerende mod at lære et emne, mens en anden quiz efter klassen sikrer yderligere fastholdelse. 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 ved afslutningen af den 12-ugers cyklus.

Mens vi bevidst har undgået at introducere JavaScript-frameworks for at koncentrere os om de grundlæggende færdigheder, der er nødvendige som webudvikler, før vi adopterer et framework, ville et godt næste skridt efter at have afsluttet dette pensum være at lære om Node.js via en anden samling af videoer: "Beginner Series to: Node.js".

Besøg vores Code of Conduct og Contributing retningslinjer. Vi byder din konstruktive feedback velkommen!

🧭 Offline adgang

Du kan køre denne dokumentation offline ved hjælp af 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.

📘 PDF

En PDF af alle lektionerne kan findes her.

🎒 Andre Kurser

Vores team producerer andre kurser! Tjek:

Få Hjælp

Hvis du går i stå 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 misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse.

28 KiB Raw Blame History