|
|
2 months ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 2 months ago | |
| 2-js-basics | 2 months ago | |
| 3-terrarium | 2 months ago | |
| 4-typing-game | 3 months ago | |
| 5-browser-extension | 3 months ago | |
| 6-space-game | 3 months ago | |
| 7-bank-project | 3 months ago | |
| 8-code-editor/1-using-a-code-editor | 2 months ago | |
| 9-chat-project | 3 months ago | |
| docs | 3 months ago | |
| lesson-template | 3 months ago | |
| memory-game | 2 months ago | |
| quiz-app | 3 months ago | |
| AGENTS.md | 2 months ago | |
| CODE_OF_CONDUCT.md | 3 months ago | |
| CONTRIBUTING.md | 3 months ago | |
| README.md | 2 months ago | |
| SECURITY.md | 3 months ago | |
| SUPPORT.md | 3 months ago | |
| _404.md | 3 months ago | |
| for-teachers.md | 2 months ago | |
README.md
Følg disse stegene 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
Webutvikling for nybegynnere - Et kurs
Lær det grunnleggende innen 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!
🌐 Støtte for flere språk
Støttet via GitHub Action (Automatisk og alltid oppdatert)
Fransk | Spansk | Tysk | Russisk | Arabisk | Persisk (Farsi) | Urdu | Kinesisk (forenklet) | Kinesisk (tradisjonell, Macau) | Kinesisk (tradisjonell, Hong Kong) | Kinesisk (tradisjonell, Taiwan) | Japansk | Koreansk | Hindi | Bengali | Marathi | Nepali | Punjabi (Gurmukhi) | Portugisisk (Portugal) | Portugisisk (Brasil) | Italiensk | Polsk | Tyrkisk | Gresk | Thai | Svensk | Dansk | Norsk | Finsk | Nederlandsk | Hebraisk | Vietnamesisk | Indonesisk | Malayisk | Tagalog (Filippinsk) | Swahili | Ungarsk | Tsjekkisk | Slovakisk | Rumensk | Bulgarsk | Serbisk (kyrillisk) | Kroatisk | Slovensk | Ukrainsk | Burmesisk (Myanmar)
Hvis du ønsker å få støtte for flere oversettelser, er språkene som støttes 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 - Nytt prosjekt med generativ AI
Nytt AI-assistentprosjekt er 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 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 tilhørende 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æring av emner som:
- Prompting og prompt engineering
- Generering av tekst- og bildeapplikasjoner
- Søkeapplikasjoner
Besøk https://aka.ms/genai-js-course for å komme i gang!
🌱 Komme 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 andre for å jobbe på prosjektene sammen! 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 studiemateriale.
📋 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 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 GitHub-kontoen din med en kopi av læreplanen.
Følg disse stegene:
- 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 Åpne med Codespaces. Dette vil opprette en ny Codespace for deg å jobbe i.
Kjøre læreplanen lokalt på datamaskinen din
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 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 redigeringsverktøy, som også har en innebygd Terminal. Du kan laste ned Visual Studio Code her.
-
Klon repositoryet til datamaskinen din. Du kan gjøre dette ved å klikke på Code-knappen og kopiere URL-en:
Deretter åpner du Terminal i Visual Studio Code og kjører følgende kommando, der
<your-repository-url>erstattes 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 med å skrive kode raskere
📂 Hver leksjon inkluderer:
- valgfri sketchnote
- valgfri tilleggsvideo
- oppvarmingsquiz før leksjonen
- skriftlig leksjon
- for prosjektbaserte leksjoner, trinnvise guider for hvordan du bygger prosjektet
- kunnskapssjekker
- en utfordring
- tilleggslesing
- oppgave
- quiz etter leksjonen
En merknad om quizer: Alle quizer 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.
🗃️ Leksjoner
| Prosjektnavn | Konsepter som læres | Læringsmål | Lenket 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 arbeidet | 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, og 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 | Grunnleggende om JavaScript-datatyper | Datatyper | Jasmine |
| 05 | JS Grunnleggende | Funksjoner og metoder | Lær om funksjoner og metoder for å styre logikken i en applikasjon | 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å å bygge et 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-manipulering | Bygg JavaScript for å få terrariet til å fungere som et 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 å styre 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 | Bygg et skjema, kall 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 til å 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, samt Pub/Sub-mønsteret, som forberedelse til å bygge 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 ytelse | 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-assistentprosjekt | Chris |
🏫 Pedagogikk
Vår læreplan er designet med to viktige pedagogiske prinsipper i tankene:
- prosjektbasert læring
- hyppige quizer
Programmet lærer bort grunnleggende 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 romspill i stil med Space Invaders, 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 er knyttet til prosjekter, blir prosessen mer engasjerende for studentene, og begrepsforståelsen vil bli styrket. Vi har også skrevet flere startleksjoner i grunnleggende JavaScript 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 lavterskelquiz før en klasse studentens intensjon mot å lære et emne, mens en andre quiz etter klassen sikrer ytterligere begrepsforstå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 Retningslinjer for bidrag. 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 skriv deretter docsify serve i rotmappen til denne repoen. Nettstedet vil bli servert på port 3000 på din localhost: localhost:3000.
En PDF av alle leksjonene kan finnes her.
🎒 Andre kurs
Vårt team produserer andre kurs! Sjekk ut:
- Generativ AI for nybegynnere
- Generativ AI for nybegynnere .NET
- Generativ AI med JavaScript
- Generativ AI med Java
- AI for nybegynnere
- Data Science for nybegynnere
- ML for nybegynnere
- Cybersikkerhet for nybegynnere
- Webutvikling for nybegynnere
- IoT for nybegynnere
- XR-utvikling for nybegynnere
- Mastering GitHub Copilot for Agentic use
- Mastering GitHub Copilot for C#/.NET Developers
- Velg ditt eget Copilot-eventyr
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å dets opprinnelige språk bør anses 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.


