Lær det grunnleggende innen webutvikling med vårt 12-ukers omfattende kurs av Microsoft Cloud Advocates. Hver av de 24 leksjonene dykker inn i JavaScript, CSS og HTML gjennom praktiske prosjekter som terrarier, nettleserutvidelser og romspill. Engasjer deg med quizzer, diskusjoner og praktiske oppgaver. Forbedre ferdighetene dine og optimaliser kunnskapsinnhentingen med vår effektive prosjektbaserte pedagogikk. Start kodingen din i dag!
Bli med i Azure AI Foundry Discord-samfunnet
Følg disse trinnene for å komme i gang med disse ressursene:
- Fork repositoriet: Klikk
- Klone repositoriet:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Bli med i Azure AI Foundry Discord og møt eksperter og medutviklere
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 | Khmer | 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
Foretrekker du å klone lokalt?
Dette repositoriet inkluderer 50+ språkoversettelser som betydelig øker nedlastingsstørrelsen. For å klone uten oversettelser, bruk sparsom utsjekking:
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 en mye raskere nedlasting.
Hvis du ønsker at flere oversettelser skal støttes, er de oppført her
Besøk Student Hub-siden hvor du finner nybegynnerressurser, studentpakker og til og med måter å få et gratis sertifikatkupong på. Dette er siden du vil bokmerke og sjekke fra tid til annen da vi bytter ut innhold månedlig.
Ny utfordring lagt til, se etter "GitHub Copilot Agent Challenge 🚀" i de fleste kapitler. Det er en ny utfordring for deg å gjennomføre ved bruk av 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.
Nytt AI Assistant prosjekt lagt til, sjekk det ut prosjekt
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 tidsreise!
Hver leksjon inkluderer en oppgave som må fullføres, en kunnskapskontroll og en utfordring for å veilede deg i læringstemaer som:
- Prompting og prompt engineering
- Tekst- og bildeapp-generering
- Søkeapper
Besøk https://aka.ms/genai-js-course for å komme i gang!
Lærere, vi har inkludert noen forslag om hvordan bruke denne læreplanen. Vi setter pris på din tilbakemelding i vårt diskusjonsforum!
Lærende, for hver leksjon, start med en forhånds-quiz og følg opp med å lese forelesningsmaterialet, fullføre de ulike aktivitetene og sjekk forståelsen din med post-forelesningsquizen.
For å forbedre læringsopplevelsen, koble deg til med jevnaldrende for å jobbe sammen på prosjektene! Diskusjoner oppmuntres i vårt diskusjonsforum der vårt team av moderatorer er tilgjengelige for å svare på spørsmålene dine.
For å fremme utdanningen din anbefaler vi sterkt å utforske Microsoft Learn for ekstra studiemateriell.
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 maskin ved å bruke en teksteditor som Visual Studio Code.
For at du enkelt skal lagre arbeidet ditt, anbefales det at du lager din egen kopi av dette repositoriet. Du kan gjøre dette ved å klikke på Use this template-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 repositoriet: Klikk på "Fork"-knappen øverst til høyre på denne siden.
- Klone repositoriet:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
I din kopi av dette repositoriet som du laget, klikk på Code-knappen og velg Open with Codespaces. Dette oppretter en ny Codespace for deg å jobbe i.
For å kjøre denne læreplanen lokalt trenger du en teksteditor, 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 hver av disse verktøyene slik at du kan velge det som passer best for deg.
Vår anbefaling er å bruke Visual Studio Code som editor, som også har en innebygd Terminal. Du kan laste ned Visual Studio Code her.
-
Klon depotet ditt til datamaskinen. Du kan gjøre dette ved å klikke på Code-knappen og kopiere URL-en:
Åpne deretter Terminal i Visual Studio Code og kjør følgende kommando, og 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 med å skrive kode raskere
- valgfri sketchnote
- valgfri supplerende video
- oppvarmingsquiz før leksjonen
- skriftlig leksjon
- for prosjektbaserte leksjoner, trinnvise guider for hvordan bygge prosjektet
- kunnskapstester
- en utfordring
- supplerende lesing
- oppgave
- quiz etter leksjonen
En merknad om quizer: Alle quizene finnes 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.
| Prosjektnavn | Lærte konsept | Læringsmål | Tilknyttet leksjon | Forfatter | |
|---|---|---|---|---|---|
| 01 | Komme i gang | Introduksjon til programmering og verktøy | Lær de grunnleggende prinsippene bak de fleste programmeringsspråk og programvare som hjelper profesjonelle utviklere | Intro til programmeringsspråk og verktøy | Jasmine |
| 02 | Komme i gang | Grunnleggende GitHub, inklusive å jobbe i team | Hvordan bruke GitHub i prosjektet ditt, hvordan samarbeide med andre på en kodebase | Intro til GitHub | Floor |
| 03 | Komme i gang | Tilgjengelighet | Lær det grunnleggende om webtilgjengelighet | Tilgjengelighetsgrunnlag | Christopher |
| 04 | JS Grunnleggende | JavaScript datatyper | Grunnleggende om JavaScript-datatyper | Datatyper | Jasmine |
| 05 | JS Grunnleggende | Funksjoner og metoder | Lær om funksjoner og metoder for å styre logikkflyten i en applikasjon | Funksjoner og metoder | Jasmine og Christopher |
| 06 | JS Grunnleggende | Å ta beslutninger med JS | Lær hvordan du lager betingelser i koden ved å bruke metoder for beslutningstaking | Å 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å layout | Introduksjon til HTML | Jen |
| 09 | Terrarium | CSS i praksis | Bygg CSS for å style det online terrariet, med fokus på grunnleggende CSS inkludert å gjøre siden responsiv | Introduksjon til CSS | Jen |
| 10 | Terrarium | JavaScript closures, DOM-manipulasjon | Lag JavaScript for å gjøre terrariet funksjonelt som et dra/slipp-grensesnitt, med fokus på closures og DOM-manipulasjon | JavaScript Closures, DOM-manipulasjon | Jen |
| 11 | Typing Game | Lag et skrive-spill | Lær hvordan du bruker tastaturhendelser for å styre logikken i din JavaScript-app | Event-Drevet programmering | Christopher |
| 12 | Grønn Nettleserutvidelse | Arbeide med nettlesere | Lær hvordan nettlesere fungerer, deres historie, og hvordan du bygger de første elementene i en nettleserutvidelse | Om nettlesere | Jen |
| 13 | Grønn Nettleserutvidelse | Lage et skjema, kalle et API og lagre variabler lokalt | Bygg JavaScript-elementene i nettleserutvidelsen din for å kalle et API med variabler lagret i lokal lagring | APIer, skjemaer og lokal lagring | Jen |
| 14 | Grønn Nettleserutvidelse | Bakgrunnsprosesser i nettleseren, webytelse | Bruk nettleserens bakgrunnsprosesser til å styre utvidelsens ikon; lær om webytelse og noen optimaliseringer | Bakgrunnsprosesser 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 i 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å skjermen | Tegning til canvas | Chris |
| 17 | Space Game | Flytte elementer rundt på skjermen | Oppdag hvordan elementer kan få bevegelse ved bruk av kartesiske koordinater og Canvas API | Flytte elementer rundt | Chris |
| 18 | Space Game | Kollisjonsdeteksjon | Få elementer til å kollidere og reagere på hverandre ved bruk av tastetrykk og lag en nedkjølingsfunksjon for å sikre ytelse | Kollisjonsdeteksjon | Chris |
| 19 | Space Game | Holde poengsum | Utfør matematiske beregninger basert på spillets status og ytelse | Holde poengsum | Chris |
| 20 | Space Game | Avslutte og starte spillet på nytt | Lær om å avslutte og starte spillet på nytt, inkludert å rydde opp ressurser og tilbakestille variabler | Avslutningsbetingelsen | Chris |
| 21 | Bank App | HTML-maler og ruter i en webapp | Lær hvordan lage strukturen av en flersidig nettside ved bruk av ruting og HTML-maler | HTML-maler og ruter | Yohan |
| 22 | Bank App | Lag en innloggings- og registreringsskjema | Lær om å bygge skjemaer og håndtere valideringsrutiner | Skjemaer | Yohan |
| 23 | Bank App | Metoder for henting og bruk av data | Hvordan data flyter inn og ut av appen din, hvordan hente, lagre og kassere den | Data | Yohan |
| 24 | Bank App | Konsepter for 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 | Bruke VScode kodeeditor | Chris |
| 26 | AI Assistants | Arbeide med AI | Lær hvordan du bygger din egen AI-assistent | AI-assistentprosjekt | Chris |
Vår læreplan er designet med to viktige pedagogiske prinsipper i tankene:
- prosjektbasert læring
- hyppige quizer
Programmet underviser grunnleggende JavaScript, HTML og CSS, samt de nyeste verktøy og teknikker som dagens webutviklere bruker. Studentene får muligheten til å utvikle praktisk erfaring ved å bygge et skrive-spill, virtuelt terrarium, miljøvennlig nettleserutvidelse, et rom-invasjonsspill 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 Learn Path på Microsoft Learn!
Ved å sikre at innholdet samsvarer med prosjekter, blir prosessen mer engasjerende for studentene og konseptene blir lettere å huske. Vi har også skrevet flere introduksjonsleksjoner i JavaScript grunnleggende for å introdusere konsepter, sammen med en video fra "Beginners Series to: JavaScript" samling av videotutorials, hvorav noen av forfatterne bidro til denne læreplanen.
I tillegg setter en lavrisiko quiz før en klasse intensjonen til studenten mot å lære et emne, mens en andre quiz etter klassen sikrer videre innlæring. Denne læreplanen er designet for å være fleksibel og morsom og kan tas helt eller delvis. Prosjektene starter smått og blir gradvis mer kompliserte etter hvert som 12-ukers syklusen skrider frem.
Selv om vi bevisst har unngått å introdusere JavaScript-rammeverk for å konsentrere oss om grunnleggende ferdigheter som trengs som webutvikler før man tar i bruk et rammeverk, vil et godt neste steg for å fullføre denne læreplanen være å lære om Node.js via en annen videosamling: "Beginner Series to: Node.js".
Besøk våre retningslinjer for Atferdskodeks og Bidrag. Vi setter pris på konstruktive tilbakemeldinger!
Du kan kjøre denne dokumentasjonen offline ved å bruke Docsify. Fork dette repoet, installer Docsify på din lokale maskin, og skriv så docsify serve i rotmappen til dette repoet. Nettstedet vil bli servert på port 3000 på din localhost: localhost:3000.
En PDF av alle leksjonene kan finnes her.
Vårt team produserer andre kurs! Sjekk ut:
-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA){kind=icon}
-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC){kind=icon}
-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9){kind=icon}
Hvis du sitter fast eller har spørsmål om å lage AI-apper. Bli med andre lærende 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 produktfeedback eller feil mens du bygger, besøk:
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å sitt opprinnelige språk bør betraktes som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for misforståelser eller feiltolkninger som følge av bruk av denne oversettelsen.