|
|
4 days ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 2 weeks ago | |
| 2-js-basics | 2 weeks ago | |
| 3-terrarium | 2 weeks ago | |
| 4-typing-game | 2 weeks ago | |
| 5-browser-extension | 2 weeks ago | |
| 6-space-game | 2 weeks ago | |
| 7-bank-project | 2 weeks ago | |
| 8-code-editor/1-using-a-code-editor | 2 weeks ago | |
| 9-chat-project | 2 weeks ago | |
| 10-ai-framework-project | 2 weeks ago | |
| Git-Basics | 2 weeks ago | |
| docs | 2 weeks ago | |
| lesson-template | 2 weeks ago | |
| memory-game | 2 weeks ago | |
| quiz-app | 2 weeks ago | |
| .co-op-translator.json | 4 days ago | |
| AGENTS.md | 4 days ago | |
| CODE_OF_CONDUCT.md | 2 weeks ago | |
| CONTRIBUTING.md | 2 weeks ago | |
| README.md | 4 days ago | |
| Roadmap.md | 4 days ago | |
| SECURITY.md | 2 weeks ago | |
| SUPPORT.md | 2 weeks ago | |
| _404.md | 2 weeks ago | |
| for-teachers.md | 2 weeks ago | |
README.md
Webutvikling for nybegynnere - en læreplan
Lær det grunnleggende om 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 quizzer, diskusjoner og praktiske oppgaver. Forbedre ferdighetene dine og optimaliser kunnskapsbevaringen med vår effektive prosjektbaserte pedagogikk. Start din kodingreise i dag!
Bli med i Azure AI Foundry Discord-fellesskapet
Følg disse trinnene for å komme i gang med disse ressursene:
- Lag en gaffel av repositoriet: Klikk
- Klon repositoriet:
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
🌐 Flerspråklig støtte
Støttet via GitHub Action (Automatisk og alltid oppdatert)
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 | 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 øker nedlastningsstørrelsen betydelig. For å klone uten oversettelser, bruk sparse checkout:
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 oversettelsesspråk skal støttes, er de oppført her
🧑🎓 Er du student?
Besøk Student Hub-side 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 ettersom vi bytter ut innhold månedlig.
📣 Kunngjøring - Nye GitHub Copilot Agent modus 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-modus. Om du ikke har brukt Agent-modus før, kan den ikke bare generere tekst, men også lage og redigere filer, kjøre kommandoer og mer.
📣 Kunngjøring - Nytt prosjekt å bygge med Generativ AI
Nytt AI Assistant-prosjekt nettopp lagt til, sjekk det ut prosjekt
📣 Kunngjøring - Ny læreplan om Generativ AI for JavaScript er nettopp lansert
Ikke gå glipp av vår nye Generativ AI læreplan!
Besøk https://aka.ms/genai-js-course for å komme i gang!
- Leksjoner som dekker alt fra grunnleggende til RAG.
- Kommuniser med historiske karakterer med GenAI og vår følgesvenn-app.
- Morsom og engasjerende fortelling, du vil reise i tid!
Hver leksjon inkluderer en oppgave å fullføre, en kunnskapstest og en utfordring for å veilede deg gjennom læringsemner som:
- Prompting og prompt-engineering
- Tekst- og bildeapp-generering
- 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 bruke denne læreplanen. Vi setter stor pris på din tilbakemelding i vår diskusjonsforum!
Lærende, for hver leksjon, start med en pre-forelesningsquiz og følg deretter med å lese forelesningsmaterialet, fullføre de ulike aktivitetene og sjekk forståelsen din med post-forelesningsquizen.
For å forbedre læringsopplevelsen din, koble deg sammen med dine jevnaldrende for å jobbe med prosjektene sammen! Diskusjoner oppfordres i vårt diskusjonsforum hvor vårt team av moderatorer vil være tilgjengelig for å svare på dine spørsmål.
For å videreutvikle utdannelsen din, anbefaler vi sterkt å utforske Microsoft Learn for tilleggsmateriell.
📋 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å din datamaskin ved bruk av en tekstredigerer 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 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:
- Lag en gaffel av repositoriet: Klikk på "Fork"-knappen øverst til høyre på denne siden.
- Klon repositoriet:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Kjøre læreplanen i en Codespace
I din kopi av dette repositoriet 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å datamaskinen din trenger du en tekstredigerer, en nettleser og et kommandolinjeverktøy. Vår første leksjon, Introduksjon til programmeringsspråk og verktøy, vil guide 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 redigerer, 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 Deretter åpner du Terminal i Visual Studio Code og kjører følgende kommando, og 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 Fil > Åpne mappe 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 inneholder:
- valgfri skisse
- valgfri supplerende video
- oppvarmingsquiz før leksjonen
- skriftlig leksjon
- for prosjektbaserte leksjoner, trinnvise guider for hvordan du bygger prosjektet
- kunnskapstester
- en utfordring
- supplerende lesing
- oppgave
- quiz etter leksjonen
En merknad om quizer: Alle quizer er samlet i Quiz-app mappen, totalt 48 quizer med tre spørsmål hver. De er tilgjengelige her. quiz-appen kan kjøres lokalt eller deployeres til Azure; følg instruksjonene i
quiz-app-mappen.
🗃️ Leksjoner
| Prosjektnavn | Konsepter som læres | Læringsmål | Tilknyttet leksjon | Forfatter | |
|---|---|---|---|---|---|
| 01 | Komme i gang | Introduksjon til programmering og verktøy for faget | Lær det grunnleggende bak de fleste programmeringsspråk og om programvare som hjelper profesjonelle utviklere å gjøre jobben sin | 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 på en kodebase | Introduksjon til GitHub | Floor |
| 03 | Komme i gang | Tilgjengelighet | Lær det grunnleggende om nettside-tilgjengelighet | Tilgjengelighet Grunnleggende | 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 å håndtere et 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 å bruke beslutningsmetoder | Ta beslutninger | Jasmine |
| 07 | JS Grunnleggende | Arrays og løkker | Arbeide med data ved bruk av arrays og løkker i JavaScript | Arrays og løkker | Jasmine |
| 08 | Terrarium | HTML i praksis | Bygg HTML for å lage et virtuelt terrarium, med fokus på å bygge en layout | Introduksjon til HTML | Jen |
| 09 | Terrarium | CSS i praksis | Bygg CSS for å style det virtuelle terrariet, med fokus på grunnleggende CSS inkludert making siden responsiv | Introduksjon til CSS | Jen |
| 10 | Terrarium | JavaScript closures, DOM-manipulering | Bygg JavaScript for å gjøre terrariet funksjonelt som et dra/slipp-grensesnitt, med fokus på closures og DOM-manipulering | JavaScript closures, DOM-manipulering | Jen |
| 11 | Typing Game | Lag et Skrivespill | Lær hvordan du bruker tastaturhendelser for å drive logikken i JavaScript-appen din | Hendelsesdrevet Programmering | Christopher |
| 12 | Green Browser Extension | Arbeide med nettlesere | Lær hvordan nettlesere fungerer, deres historie, og hvordan du bygger opp de første elementene i en nettleserutvidelse | Om nettlesere | Jen |
| 13 | Green Browser Extension | Lage et skjema, kalle et API og lagre variabler i lokal lagring | Bygg JavaScript-elementene til nettleserutvidelsen din for å kalle et API ved bruk av variabler lagret i lokal lagring | APIer, skjemautfylling og lokal lagring | Jen |
| 14 | Green Browser Extension | Bakgrunnsprosesser i nettleseren, web-ytelse | Bruk nettleserens bakgrunnsprosesser for å administrere utvidelsens ikon; lær om web-ytelse og noen optimaliseringer for å gjøre | Bakgrunnsoppgaver og ytelse | Jen |
| 15 | Space Game | Mer avansert spillutvikling med JavaScript | Lær om arv ved å bruke både klasser og komposisjon og Pub/Sub-mønsteret, som en forberedelse til å lage et spill | Introduksjon til avansert spillutvikling | Chris |
| 16 | Space Game | Tegning til lerret | Lær om Canvas API, som brukes til å tegne elementer på skjermen | Tegning til lerret | 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 | La elementer kollidere og reagere på hverandre ved hjelp av tastetrykk og implementer en cooldown-funksjon for å sikre spillytelse | Kollisjonsdeteksjon | Chris |
| 19 | Space Game | Hold styr på poeng | Utfør matematiske beregninger basert på spillets status og ytelse | Poengtelling | Chris |
| 20 | Space Game | Avslutte og starte spillet på nytt | Lær om å avslutte og restarte spillet, inkludert å rydde opp ressurser og tilbakestille variabelverdier | Avslutningsbetingelsen | Chris |
| 21 | Banking App | HTML-maler og ruter i et webapp | Lær hvordan du lager grunnstrukturen til en flersidig nettsides arkitektur ved bruk av routing og HTML-maler | HTML-maler og ruter | Yohan |
| 22 | Banking App | Lag en innloggings- og registreringsskjema | Lær om å lage skjemaer og håndtere valideringsrutiner | Skjemaer | Yohan |
| 23 | Banking App | Metoder for å hente og bruke data | Hvordan data flyter inn og ut av appen din, hvordan hente det, lagre det, og kvitte seg med det | Data | Yohan |
| 24 | Banking App | Begreper om tilstandsadministrasjon | Lær hvordan appen din beholder tilstand og hvordan du kan styre den programmessig | Tilstandsadministrasjon | Yohan |
| 25 | Browser/VScode Code | Arbeider med VScode | Lær hvordan du bruker en kode-editor | Bruk VScode Code Editor | Chris |
| 26 | AI Assistants | Arbeider med AI | Lær hvordan du bygger din egen AI-assistent | AI Assistent prosjekt | Chris |
🏫 Pedagogikk
Vårt pensum er designet 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. Studentene vil få muligheten til å utvikle praktisk erfaring ved å bygge et skrivespill, virtuelt terrarium, miljøvennlig nettleserutvidelse, rom-invader-stil spill og en bankapp 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, gjøres prosessen mer engasjerende for studentene og lagring av konsepter vil bli forbedret. Vi skrev også flere startleksjoner i JavaScript-grunnleggende for å introdusere konsepter, koblet med en video fra "Beginners Series to: JavaScript" samlingen av videotutorials, noen av forfatterne bidro til dette pensumet.
I tillegg setter en lavterskelquiz før en time intensjonen til studenten om å lære et tema, mens en andre quiz etter timen sikrer ytterligere lagring. 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 12-ukers syklusen.
Selv om vi med vilje har unngått å introdusere JavaScript-rammeverk for å fokusere på grunnleggende ferdigheter som trengs som webutvikler før man tar i bruk et rammeverk, vil et godt neste steg etter å ha fullført dette pensumet være å lære om Node.js via en annen samling videoer: "Beginner Series to: Node.js".
Besøk våre retningslinjer for Atferdskodeks og Bidra. Vi ønsker din konstruktive tilbakemelding velkommen!
🧭 Offline-tilgang
Du kan kjøre denne dokumentasjonen offline ved å bruke Docsify. Fork dette repoet, installer Docsify på din lokale maskin, og deretter i rotmappen til dette repoet, skriv docsify serve. Nettstedet vil serveres på port 3000 på din localhost: localhost:3000.
En PDF av alle leksjonene kan finnes her.
🎒 Andre Kurs
Teamet vårt produserer andre kurs! Sjekk ut:
LangChain
Azure / Edge / MCP / Agenter
Generativ AI-serie
Kjerneopplæring
Copilot-serie
Få hjelp
Hvis du sitter fast eller har noen spørsmål om å bygge 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 finner feil mens du bygger, besøk:
Lisens
Dette depotet er lisensiert under MIT-lisensen. Se LICENSE-filen for mer informasjon.
Ansvarsfraskrivelse: Dette dokumentet er oversatt ved bruk 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 originale dokumentet på dets opprinnelige språk skal betraktes som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.


