28 KiB

Raw Blame History

Webutvikling for nybegynnere - Et læreplan

Lær det grunnleggende om webutvikling med vårt 12-ukers omfattende kurs fra Microsoft Cloud Advocates. Hver av de 24 leksjonene går i dybden på JavaScript, CSS og HTML gjennom praktiske prosjekter som terrarier, nettleserutvidelser og romspill. Delta i quizzer, diskusjoner og praktiske oppgaver. Forbedre ferdighetene dine og optimaliser kunnskapsbevaringen 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 ressursene:

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

🌐 Støtte for flere språk

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

Hvis du ønsker å ha flere oversettelsesspråk, er støttede språk listet opp her

🧑‍🎓 Er du student?

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

📣 Kunngjøring - Nye GitHub Copilot Agent mode-utfordringer å fullføre!

Ny utfordring lagt til, se etter "GitHub Copilot Agent Challenge 🚀" i de fleste kapitler. Det er en ny utfordring for deg å fullføre ved hjelp av GitHub Copilot og Agent mode. Hvis du ikke har brukt Agent mode før, er det i stand til ikke bare å generere tekst, men kan også opprette og redigere filer, kjøre kommandoer og mer.

📣 Kunngjøring - Nytt prosjekt å bygge ved hjelp av Generativ AI

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

📣 Kunngjøring - Ny læreplan om Generativ AI for JavaScript er 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.
Interager med historiske karakterer ved hjelp av GenAI og vår følgesvenn-app.
Morsom og engasjerende fortelling, du vil reise i tid!

Hver leksjon inkluderer en oppgave å fullføre, en kunnskapssjekk og en utfordring for å veilede deg i å lære emner som:

Prompting og prompt engineering
Generering av tekst- og bildeapper
Søkeapper

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

🌱 Kom i gang

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

Lærende, for hver leksjon, start med en quiz før forelesningen og fortsett med å lese forelesningsmaterialet, fullføre de ulike aktivitetene og sjekke forståelsen din med quizen etter forelesningen.

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

For å utvide utdanningen din, anbefaler vi sterkt å utforske Microsoft Learn for ytterligere studiemateriell.

📋 Sette opp ditt miljø

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

Opprett ditt repository

For å enkelt lagre arbeidet ditt, anbefales det at du oppretter din egen kopi av dette repositoryet. Du kan gjøre dette ved å klikke på Bruk denne malen-knappen øverst på siden. Dette vil opprette et nytt repository i din GitHub-konto med en kopi av læreplanen.

Følg disse trinnene:

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

Kjøre læreplanen i en Codespace

I kopien av dette repositoryet 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 tekstredigerer, en nettleser og et kommandolinjeverktøy. Vår første leksjon, Introduksjon til programmeringsspråk og verktøy, vil veilede deg gjennom ulike alternativer for hvert av disse verktøyene, slik at du kan velge det som fungerer best for deg.

Vår anbefaling er å bruke Visual Studio Code som din redigerer, som også har en innebygd Terminal. Du kan laste ned Visual Studio Code her.

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

CodeSpace

Deretter åpner du Terminal i Visual Studio Code og kjører følgende kommando, der du erstatter <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 med å skrive kode raskere

📂 Hver leksjon inkluderer:

valgfri sketchnote
valgfri tilleggsvideo
oppvarmingsquiz før leksjonen
skriftlig leksjon
for prosjektbaserte leksjoner, steg-for-steg guider for hvordan man bygger prosjektet
kunnskapssjekker
en utfordring
tilleggslesing
oppgave
quiz etter leksjonen

En kommentar om quizene: Alle quizene finnes i Quiz-app-mappen, totalt 48 quizer med tre spørsmål hver. De er tilgjengelige her, og 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	Lenke til leksjon	Forfatter
01	Komme i gang	Introduksjon til programmering og verktøyene som brukes	Lær de grunnleggende prinsippene bak de fleste programmeringsspråk og om programvare som hjelper profesjonelle utviklere i jobben	Introduksjon til programmeringsspråk og verktøy	Jasmine
02	Komme i gang	Grunnleggende om GitHub, inkludert samarbeid i team	Hvordan bruke GitHub i prosjektet ditt, hvordan samarbeide med andre om en kodebase	Introduksjon til GitHub	Floor
03	Komme i gang	Tilgjengelighet	Lær det grunnleggende om webtilgjengelighet	Grunnleggende om tilgjengelighet	Christopher
04	JS Grunnleggende	JavaScript Datatyper	Det grunnleggende om JavaScript-datatyper	Datatyper	Jasmine
05	JS Grunnleggende	Funksjoner og metoder	Lær om funksjoner og metoder for å håndtere en applikasjons logikkflyt	Funksjoner og metoder	Jasmine og Christopher
06	JS Grunnleggende	Ta beslutninger med JS	Lær hvordan du lager betingelser i koden din ved hjelp av beslutningsmetoder	Ta beslutninger	Jasmine
07	JS Grunnleggende	Arrays og løkker	Arbeid med data ved hjelp av arrays og løkker i JavaScript	Arrays og løkker	Jasmine
08	Terrarium	HTML i praksis	Bygg HTML for å lage et online terrarium, med fokus på å lage et layout	Introduksjon til HTML	Jen
09	Terrarium	CSS i praksis	Bygg CSS for å style det online terrariet, med fokus på det grunnleggende i CSS, inkludert å gjøre siden responsiv	Introduksjon til CSS	Jen
10	Terrarium	JavaScript Closures, DOM-manipulering	Bygg JavaScript for å få terrariet til å fungere som en dra/slipp-grensesnitt, med fokus på closures og DOM-manipulering	JavaScript Closures, DOM-manipulering	Jen
11	Skrivespill	Bygg et skrivespill	Lær hvordan du bruker tastaturevents for å drive logikken i JavaScript-appen din	Event-drevet programmering	Christopher
12	Grønn nettleserutvidelse	Arbeid med nettlesere	Lær hvordan nettlesere fungerer, deres historie, og hvordan du lager de første elementene i en nettleserutvidelse	Om nettlesere	Jen
13	Grønn nettleserutvidelse	Bygge et skjema, kalle en API og lagre variabler i lokal lagring	Bygg JavaScript-elementene i nettleserutvidelsen din for å kalle en API ved hjelp av variabler lagret i lokal lagring	API-er, skjemaer og lokal lagring	Jen
14	Grønn nettleserutvidelse	Bakgrunnsprosesser i nettleseren, webytelse	Bruk nettleserens bakgrunnsprosesser for å administrere utvidelsens ikon; lær om webytelse og noen optimaliseringer	Bakgrunnsoppgaver og ytelse	Jen
15	Romspill	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 å lage et spill	Introduksjon til avansert spillutvikling	Chris
16	Romspill	Tegne til canvas	Lær om Canvas API, som brukes til å tegne elementer på en skjerm	Tegne til canvas	Chris
17	Romspill	Flytte elementer rundt på skjermen	Oppdag hvordan elementer kan få bevegelse ved bruk av kartesiske koordinater og Canvas API	Flytte elementer rundt	Chris
18	Romspill	Kollisjonsdeteksjon	Få elementer til å kollidere og reagere på hverandre ved hjelp av tastetrykk og gi en cooldown-funksjon for å sikre ytelsen til spillet	Kollisjonsdeteksjon	Chris
19	Romspill	Holde poeng	Utfør matematiske beregninger basert på spillets status og ytelse	Holde poeng	Chris
20	Romspill	Avslutte og starte spillet på nytt	Lær om å avslutte og starte spillet på nytt, inkludert å rydde opp i ressurser og tilbakestille variabelverdier	Avslutningsbetingelse	Chris
21	Bankapp	HTML-maler og ruter i en webapp	Lær hvordan du lager strukturen til en flersidig nettsides arkitektur ved bruk av ruting og HTML-maler	HTML-maler og ruter	Yohan
22	Bankapp	Bygg et innloggings- og registreringsskjema	Lær om å bygge skjemaer og håndtere valideringsrutiner	Skjemaer	Yohan
23	Bankapp	Metoder for henting og bruk av data	Hvordan data flyter inn og ut av appen din, hvordan du henter den, lagrer den og kvitter deg med den	Data	Yohan
24	Bankapp	Konsepter for tilstandsadministrasjon	Lær hvordan appen din beholder tilstand og hvordan du administrerer den programmatisk	Tilstandsadministrasjon	Yohan
25	Nettleser/VScode Kode	Arbeid med VScode	Lær hvordan du bruker en kodeeditor	Bruk VScode Kodeeditor	Chris
26	AI Assistenter	Arbeid med AI	Lær hvordan du bygger din egen AI-assistent	AI Assistent-prosjekt	Chris

🏫 Pedagogikk

Vår læreplan er designet med to viktige pedagogiske prinsipper i tankene:

prosjektbasert læring
hyppige quizer

Programmet lærer bort det grunnleggende i JavaScript, HTML og CSS, samt de nyeste verktøyene og teknikkene som brukes av dagens webutviklere. Studentene vil få muligheten til å utvikle praktisk erfaring ved å bygge et skrivespill, et virtuelt terrarium, en miljøvennlig nettleserutvidelse, et rom-invader-stil spill og en bankapp for bedrifter. Ved slutten av serien vil studentene ha fått en solid forståelse av webutvikling.

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

Ved å sikre at innholdet er knyttet til prosjekter, blir prosessen mer engasjerende for studentene, og konseptene vil bli bedre husket. Vi har også skrevet flere startleksjoner i JavaScript-grunnleggende for å introdusere konsepter, sammen med en video fra "Beginners Series to: JavaScript" samlingen av videotutorials, hvor noen av forfatterne har bidratt til denne læreplanen.

I tillegg setter en lavterskel quiz før en klasse studentens intensjon mot å lære et emne, mens en andre quiz etter klassen sikrer ytterligere forståelse. Denne læreplanen er designet for å være fleksibel og morsom og kan tas i sin helhet eller delvis. Prosjektene starter små og blir stadig mer komplekse mot slutten av den 12-ukers syklusen.

Selv om vi bevisst har unngått å introdusere JavaScript-rammeverk for å konsentrere oss om de grunnleggende ferdighetene som trengs som webutvikler før man tar i bruk et rammeverk, vil et godt neste steg etter å ha fullført denne læreplanen være å lære om Node.js via en annen samling av videoer: "Beginner Series to: Node.js".

Besøk våre Retningslinjer for oppførsel og Bidragsveiledning. Vi setter pris på din konstruktive tilbakemelding!

🧭 Offline tilgang

Du kan kjøre denne dokumentasjonen offline ved å bruke Docsify. Fork denne repoen, installer Docsify på din lokale maskin, og deretter i rotmappen til denne repoen, 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:

Få hjelp

Hvis du står fast eller har spørsmål om å bygge AI-apper, bli med:

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

Lisens

Dette repositoriet 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 tilstreber nøyaktighet, vær oppmerksom på at automatiserte oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på sitt opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.

28 KiB Raw Blame History