32 KiB

Raw Blame History

Webutvikling for nybegynnere - Et læreplan

Lær grunnleggende webutvikling med vårt 12-ukers omfattende kurs av Microsoft Cloud Advocates. Hver av de 24 leksjonene dykker ned i JavaScript, CSS og HTML gjennom praktiske prosjekter som terrarier, nettleserutvidelser og romspill. Delta i quizer, diskusjoner og praktiske oppgaver. Forbedre ferdighetene dine og optimaliser kunnskapsretensjonen med vår effektive prosjektbaserte pedagogikk. Start din kode-reise i dag!

Bli med i Azure AI Foundry Discord-fellesskapet

Følg disse trinnene for å komme i gang med disse ressursene:

Fork repoet: Klikk
Klon repoet: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Bli med i Azure AI Foundry Discord og møt eksperter og medutviklere

🌐 Flerspråklig støtte

Støttes via GitHub Action (Automatisk og alltid oppdatert)

Foretrekker du å klone lokalt?

Dette repoet inkluderer 50+ språkoversettelser som øker nedlastingsstørrelsen betydelig. For å klone uten oversettelser, bruk 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 gir deg alt du trenger for å fullføre kurset med mye raskere nedlasting.

Hvis du ønsker at flere oversettelsesspråk skal støttes, er disse oppført her

🧑‍🎓 Er du student?

Besøk Student Hub-siden hvor du finner nybegynnerressurser, studentpakker og til og med måter å få en gratis sertifikatkupong på. Dette er siden du bør bokmerke og sjekke fra tid til annen da vi bytter ut innhold månedlig.

📣 Annonsering - Nye utfordringer i GitHub Copilot Agent-modus å fullføre!

Ny utfordring lagt til, se etter "GitHub Copilot Agent Challenge 🚀" i de fleste kapitlene. Det er en ny utfordring du kan fullføre ved å bruke GitHub Copilot og Agent-modus. Hvis du ikke har brukt Agent-modus før, kan den ikke bare generere tekst, men også opprette og redigere filer, kjøre kommandoer og mer.

📣 Annonsering - Nytt prosjekt å bygge med Generativ AI

Nytt AI-assistentprosjekt nettopp lagt til, sjekk det ut prosjekt

📣 Annonsering - Ny læreplan om Generativ AI for JavaScript ble nettopp utgitt

Ikke gå glipp av vår nye læreplan for Generativ AI!

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

Leksjoner som dekker alt fra grunnleggende til RAG.
Samhandle med historiske personer ved hjelp av GenAI og vår følgesvenn-app.
Moro og engasjerende fortelling, du vil reise i tid!

Hver leksjon inkluderer en oppgave å fullføre, en kunnskapskontroll og en utfordring for å veilede deg i læring av temaer som:

Prompting og prompt engineering
Tekst- og bildeappgenerering
Søkeapper

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

🌱 Komme i gang

Lærere, vi har inkludert noen forslag til hvordan du kan bruke denne læreplanen. Vi vil gjerne ha tilbakemeldinger i vårt diskusjonsforum!

Elever, for hver leksjon, start med en for-forelesningsquiz og følg opp med å lese forelesningsmaterialet, fullføre de ulike aktivitetene og sjekke forståelsen med etter-forelesningsquiz.

For å forbedre læringsopplevelsen, koble deg sammen med dine medstudenter for å jobbe på prosjektene sammen! Diskusjoner oppfordres i vårt diskusjonsforum hvor vårt team av moderatorer vil være tilgjengelig for å svare på spørsmålene dine.

For å utvide utdannelsen anbefaler vi sterkt å utforske Microsoft Learn for ekstra studiemateriell.

📋 Sette opp miljøet ditt

Denne læreplanen har et utviklingsmiljø klart til bruk! Når du kommer i gang kan du velge å kjøre læreplanen i en Codespace (et nettleserbasert miljø uten behov for installasjoner), eller lokalt på datamaskinen din ved å bruke en teksteditor som Visual Studio Code.

Opprett ditt eget repository

For at du enkelt skal kunne lagre arbeidet ditt, anbefales det at du oppretter din egen kopi av dette repoet. Du kan gjøre dette ved å klikke på Use this template-knappen øverst på siden. Dette vil lage et nytt repository i din GitHub-konto med en kopi av læreplanen.

Følg disse trinnene:

Fork repoet: Klikk på "Fork"-knappen øverst til høyre på denne siden.
Klon repoet: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Kjøre læreplanen i en Codespace

I din kopi av repoet som du opprettet, klikk på Code-knappen og velg Open with Codespaces. Dette vil opprette en ny Codespace for deg å jobbe i.

Kjøre læreplanen lokalt på din datamaskin

For å kjøre denne læreplanen lokalt på din datamaskin trenger du en teksteditor, en nettleser og et kommandolinjeverktøy. Vår første leksjon, Introduksjon til programmeringsspråk og verktøy, vil lede deg gjennom ulike valg for hvert av disse verktøyene slik at du kan velge det som passer best for deg.

Vi anbefaler å bruke Visual Studio Code som din editor, som også har en innebygd Terminal. Du kan laste ned Visual Studio Code her.

Klon ditt repository til din datamaskin. Du kan gjøre dette ved å klikke på Code-knappen og kopiere URL-en:

CodeSpace

Åpne deretter Terminal i Visual Studio Code og kjør følgende kommando, erstatt <your-repository-url> med URL-en du nettopp kopierte:
```
git clone <your-repository-url>
```
Åpne mappen i Visual Studio Code. Du kan gjøre dette ved å klikke File > Open Folder og velge mappen du nettopp klonet.

Anbefalte Visual Studio Code-utvidelser:

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

Copilot - for å hjelpe deg skrive kode raskere

📂 Hver leksjon inkluderer:

valgfri skisse-notat
valgfri tilleggsvideo
oppvarmingsquiz før leksjonen
skriftlig leksjon
for prosjektrelaterte leksjoner, steg-for-steg guider for hvordan bygge prosjektet
kunnskapstester
en utfordring
tilleggslesning
oppgave
quiz etter leksjonen

En merknad om quizer: Alle quizer ligger i Quiz-app-mappen, totalt 48 quizer med tre spørsmål hver. De er tilgjengelige her quiz-appen kan kjøres lokalt eller distribueres til Azure; følg instruksjonene i quiz-app-mappen.

🗃️ Leksjoner

	Prosjektnavn	Konsepter som læres	Læringsmål	Lenket leksjon	Forfatter
01	Komme i gang	Introduksjon til programmering og verktøy i faget	Lær grunnlaget bak de fleste programmeringsspråk og programvare som hjelper profesjonelle utviklere	Introduksjon til programmeringsspråk og verktøy i faget	Jasmine
02	Komme i gang	Grunnleggende GitHub, inkludert arbeid i teamet	Hvordan bruke GitHub i ditt prosjekt, og hvordan samarbeide med andre på en kodebase	Introduksjon til GitHub	Floor
03	Komme i gang	Tilgjengelighet	Lær det grunnleggende om nettilgjengelighet	Grunnleggende tilgjengelighet	Christopher
04	JS Grunnleggende	JavaScript datatype	Grunnleggende om JavaScript-datatyper	Datatyper	Jasmine
05	JS Grunnleggende	Funksjoner og metoder	Lær om funksjoner og metoder for å styre en applikasjons logikk	Funksjoner og metoder	Jasmine og Christopher
06	JS Grunnleggende	Å ta beslutninger med JS	Lær hvordan lage betingelser i koden din ved hjelp av beslutningsmetoder	Beslutningstaking	Jasmine
07	JS Grunnleggende	Lister og løkker	Arbeid med data ved bruk av lister og løkker i JavaScript	Lister og løkker	Jasmine
08	Terrarium	HTML i praksis	Bygg HTML for å lage et online terrarium, med fokus på layout	Introduksjon til HTML	Jen
09	Terrarium	CSS i praksis	Bygg CSS for å style det online terrariet, med fokus på grunnleggende CSS inkludert responsiv side	Introduksjon til CSS	Jen
10	Terrarium	JavaScript Closures, DOM-manipulasjon	Bygg JavaScript for å gjøre terrariet til en drag/drop-grensesnitt, med fokus på closures og DOM-manipulasjon	JavaScript Closures, DOM-manipulasjon	Jen
11	Typing Game	Bygg et skrive-spill	Lær hvordan du bruker tastaturevents for å styre logikken i ditt JavaScript-app	Event-drevet programmering	Christopher
12	Green Browser Extension	Arbeide med nettlesere	Lær hvordan nettlesere fungerer, deres historie og hvordan skissere de første elementene i en nettleserutvidelse	Om nettlesere	Jen
13	Green Browser Extension	Bygging av skjema, kalle et API og lagre variabler i lokal lagring	Bygg JavaScript-elementer i nettleserutvidelsen din som kaller et API ved bruk av variabler lagret i lokal lagring	API-er, skjemaer og lokal lagring	Jen
14	Green Browser Extension	Bakgrunnsprosesser i nettleseren, web-ytelse	Bruk nettleserens bakgrunnsprosesser til å styre utvidelsens ikon; lær om web-ytelse og noen optimaliseringer	Bakgrunnsoppgaver og ytelse	Jen
15	Space Game	Mer avansert spillutvikling med JavaScript	Lær om arv ved bruk av både klasser og komposisjon og Pub/Sub-mønsteret, som forberedelse til å bygge et spill	Introduksjon til avansert spillutvikling	Chris
16	Space Game	Tegning til canvas	Lær om Canvas API, brukt for å tegne elementer på en skjerm	Tegning til Canvas	Chris
17	Space Game	Flytte elementer rundt på skjermen	Oppdag hvordan elementer kan få bevegelse ved hjelp av kartesiske koordinater og Canvas API	Flytte elementer rundt	Chris
18	Space Game	Kollisjonsdeteksjon	Få elementer til å kollidere og reagere på hverandre ved hjelp av tastetrykk og tilby en cooldown-funksjon for å sikre ytelse	Kollisjonsdeteksjon	Chris
19	Space Game	Holde styr på poeng	Utfør matematiske beregninger basert på spillets status og ytelse	Holde styr på poeng	Chris
20	Space Game	Avslutte og starte spillet på nytt	Lær om å avslutte og starte spillet på nytt, inkludert opprydding av ressurser og tilbakestilling av variabler	Sluttbetingelsen	Chris
21	Banking App	HTML-maler og ruter i en webapp	Lær hvordan lage strukturen for en nettsides arkitektur med routing og HTML-maler	HTML-maler og ruter	Yohan
22	Banking App	Bygge påloggings- og registreringsskjema	Lær om bygging av skjemaer og håndtering av valideringsrutiner	Skjemaer	Yohan
23	Banking App	Metoder for henting og bruk av data	Hvordan data flyter inn og ut av appen din, hvordan hente, lagre og kvitte seg med den	Data	Yohan
24	Banking App	Konsepter innen tilstandshåndtering	Lær hvordan appen din beholder tilstand og hvordan styre den programmatisk	Tilstandshåndtering	Yohan
25	Browser/VScode Code	Arbeide med VScode	Lær hvordan du bruker en kodeeditor	Bruk VScode kodeeditor	Chris
26	AI Assistants	Arbeide med AI	Lær hvordan bygge din egen AI-assistent	AI Assistant-prosjekt	Chris

🏫 Pedagogikk

Vårt pensum er utformet med to viktige pedagogiske prinsipper i tankene:

prosjektbasert læring
hyppige quizer

Programmet lærer grunnleggende JavaScript, HTML, og CSS, samt de nyeste verktøyene og teknikkene som dagens webutviklere bruker. Studenter får muligheten til å utvikle praktisk erfaring ved å bygge et skrive-spill, virtuelt terrarium, miljøvennlig nettleserutvidelse, et Space Invaders-inspirert spill og en bank-app for bedrifter. Ved slutten av serien vil studentene ha oppnådd en solid forståelse av webutvikling.

🎓 Du kan ta de første leksjonene i dette pensumet som en Læringssti på Microsoft Learn!

Ved å sikre at innholdet stemmer overens med prosjektene, blir prosessen mer engasjerende for studentene og konseptene blir bedre husket. Vi skrev også flere oppstartleksjoner i JavaScript-grunnleggende for å introdusere konsepter, kombinert med en video fra "Beginners Series to: JavaScript"-samlingen av videotutorials, hvor noen av forfatterne bidro til dette pensumet.

I tillegg setter en lavterskel-quiz før en klasse intensjonen for studenten mot å lære et tema, mens en andre quiz etter klassen sikrer videre hukommelse. Dette pensumet er designet for å være fleksibelt og morsomt, og kan tas i sin helhet eller delvis. Prosjektene starter smått og blir stadig mer komplekse innen slutten av en 12-ukers syklus.

Selv om vi bevisst har unngått å introdusere JavaScript-rammeverk for å fokusere på grunnleggende ferdigheter som kreves som webutvikler før du tar i bruk et rammeverk, vil et godt neste steg etter dette pensumet være å lære om Node.js via en annen videosamling: "Beginner Series to: Node.js".

Besøk våre retningslinjer for Adferdskodeks og Bidrag. Vi setter pris på din konstruktive tilbakemelding!

🧭 Frakoblet tilgang

Du kan kjøre denne dokumentasjonen frakoblet ved å bruke Docsify. Fork dette repoet, installer Docsify på din lokale maskin, og så i rotmappen av dette repoet, skriv docsify serve. Nettstedet vil bli servert på port 3000 på din localhost: localhost:3000.

📘 PDF

En PDF av alle leksjonene kan finnes her.

🎒 Andre kurs

Vårt team produserer andre kurs! Sjekk ut:

LangChain

Azure / Edge / MCP / Agents

Generative AI Series

Core Learning

Copilot Series

Få hjelp

Hvis du sitter fast eller har spørsmål om å bygge AI-apper. Bli med andre elever og erfarne utviklere i diskusjoner om MCP. Det er et støttende fellesskap hvor spørsmål er velkomne, og kunnskap deles fritt.

Hvis du har produktinnspill eller feil under bygging, besøk:

Lisens

Dette depotet er lisensiert under MIT-lisensen. Se LICENSE filen for mer informasjon.

Ansvarsfraskrivelse: Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten Co-op Translator. Selv om vi streber etter nøyaktighet, vennligst vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det opprinnelige dokumentet på dets opprinnelige språk skal betraktes som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi påtar oss ikke ansvar for eventuelle misforståelser eller feiltolkninger som følge av bruken av denne oversettelsen.

32 KiB Raw Blame History