You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Web-Dev-For-Beginners/translations/no
localizeflow[bot] cd773d3e60
chore(i18n): sync translations with latest source changes (chunk 1/1, 9 changes)
3 months ago
..
1-getting-started-lessons
2-js-basics
3-terrarium
4-typing-game
5-browser-extension
6-space-game
7-bank-project
8-code-editor/1-using-a-code-editor
9-chat-project
10-ai-framework-project
Git-Basics
docs
lesson-template
memory-game
quiz-app
.co-op-translator.json chore(i18n): sync translations with latest source changes (chunk 1/1, 9 changes) 3 months ago
AGENTS.md chore(i18n): sync translations with latest source changes (chunk 1/1, 9 changes) 3 months ago
CODE_OF_CONDUCT.md
CONTRIBUTING.md
README.md chore(i18n): sync translations with latest source changes (chunk 1/1, 9 changes) 3 months ago
SECURITY.md
SUPPORT.md
_404.md
for-teachers.md

README.md

GitHub license GitHub contributors GitHub issues GitHub pull-requests PRs Welcome

GitHub watchers GitHub forks GitHub stars

Microsoft Foundry Discord

Webutvikling for nybegynnere - Et læreplan

Lær det grunnleggende innen webutvikling med vårt 12-ukers omfattende kurs av Microsoft Cloud Advocates. Hvert 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 kunnskapsbevaringen med vår effektive prosjektbaserte pedagogikk. Start din koding reise i dag!

Bli med i Azure AI Foundry Discord Community

Microsoft Foundry Discord

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

  1. Fork depotet: Klikk GitHub forks
  2. Klone depotet: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
  3. Bli med i Azure AI Foundry Discord og møt eksperter og medutviklere

🌐 Flerspråklig støtte

Støttet via GitHub Action (Automatisert 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 depotet inkluderer 50+ språkoversettelser som betydelig øker nedlastingsstørrelsen. 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 listet opp her

Open in Visual Studio Code

🧑‍🎓 Er du student?

Besøk Student Hub-siden hvor du vil finne nybegynnerressurser, studentpakker og til og med måter å få en gratis sertifikatkupong på. Dette er siden du ønsker å bokmerke og sjekke fra tid til annen da 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 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.

📣 Kunngjøring - Nytt prosjekt å bygge med generativ AI

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

📣 Kunngjøring - Ny læreplan om Generativ AI for JavaScript ble nettopp lansert

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

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

Background

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

character

Hver leksjon inkluderer en oppgave som skal fullføres, en kunnskapssjekk og en utfordring som veileder deg i læring av emner som:

  • Prompting og prompt-ingeniørkunst
  • 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 om hvordan bruke denne læreplanen. Vi vil gjerne ha tilbakemeldinger i vårt diskusjonsforum!

Lærende, for hver leksjon, start med en pre-forelesningsquiz og følg opp med å lese forelesningsmaterialet, fullføre de forskjellige aktivitetene og sjekk forståelsen din med post-forelesningsquiz.

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

For å videreutvikle utdannelsen anbefaler vi sterkt å utforske Microsoft Learn for tilleggsstudie-materialer.

📋 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, uten behov for installasjoner, miljø), eller lokalt på datamaskinen din ved bruk av en teksteditor som Visual Studio Code.

Lag ditt eget depot

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

Følg disse trinnene:

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

Kjøre læreplanen i en Codespace

I din kopi av dette depotet som du har laget, klikk på Code-knappen og velg Open with Codespaces. Dette vil lage en ny Codespace for deg å jobbe i.

Codespace

Kjøre læreplanen lokalt på datamaskinen din

For å kjøre denne læreplanen lokalt på datamaskinen din, 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 forskjellige alternativer for hvert 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.

  1. Klon depotet ditt til datamaskinen. 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>
    
  2. Å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 sketchnote
  • valgfri supplerende video
  • quiz som oppvarming før leksjonen
  • skriftlig leksjon
  • for prosjektbaserte leksjoner, trinn-for-trinn guider for hvordan bygge prosjektet
  • kunnskapssjekker
  • en utfordring
  • supplerende lesning
  • 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 deployeres 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 i faget Lær det grunnleggende bak de fleste programmeringsspråk og programvare som hjelper profesjonelle utviklere å gjøre jobben sin Intro til programmeringsspråk og verktøy Jasmine
02 Komme i gang Grunnleggende om GitHub, inkludert arbeid i team Hvordan bruke GitHub i prosjektet, og hvordan samarbeide med andre om en kodebase Intro til GitHub Floor
03 Komme i gang Tilgjengelighet Lær det grunnleggende om webtilgjengelighet Tilgjengelighet Grunnprinsipper 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 å styre programmets logikk Funksjoner og metoder Jasmine og Christopher
06 JS Grunnleggende Å ta beslutninger med JS Lær hvordan lage betingelser i koden din ved bruk av beslutningstakningsmetoder Å ta beslutninger Jasmine
07 JS Grunnleggende Arrays og løkker Arbeid med data ved bruk av arrayer 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å CSS-grunnprinsipper inklusiv responsiv side Introduksjon til CSS Jen
10 Terrarium JavaScript Closures, DOM-manipulering Bygg JavaScript for å gjøre terrariet funksjonelt som drag/drop-grensesnitt, fokus på closures og DOM-manipulering JavaScript Closures, DOM-manipulering Jen
11 Typing Game Bygg et skrive-spill Lær hvordan bruke tastaturhendelser til å drive logikken i JavaScript-appen din Hendelsesdrevet programmering Christopher
12 Green Browser Extension Arbeide med nettlesere Lær hvordan nettlesere fungerer, historien deres og hvordan lage grunnstruktur for en nettleserutvidelse Om nettlesere Jen
13 Green Browser Extension Lage et skjema, kalle et API og lagre variabler i lokal lagring Bygg JavaScript-elementene for nettleserutvidelsen din for å kalle et API ved bruk av variabler lagret i lokal lagring APIer, skjemaer og lokal lagring Jen
14 Green Browser Extension Bakgrunnsprosesser i nettleseren, nettleserytelse Bruk nettleserens bakgrunnsprosesser for å styre ikonet til utvidelsen; lær om nettleserytelse 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 spillutvikling Introduksjon til avansert spillutvikling Chris
16 Space Game Tegning på canvas Lær om Canvas API, brukt for å tegne elementer på en skjerm Tegning på Canvas Chris
17 Space Game Flytting av elementer rundt 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 hjelp av knappetrykk og tilby en nedkjølingsfunksjon for å sikre ytelse Kollisjonsdeteksjon Chris
19 Space Game Poengtelling Utfør matematiske beregninger basert på spillstatus og ytelse Poengtelling Chris
20 Space Game Avslutte og starte spillet på nytt Lær om å avslutte og starte spillet på nytt, inkludert å rydde opp eiendeler og tilbakestille variabelverdier Sluttbetingelsen Chris
21 Banking App HTML-maler og ruter i en webapp Lær hvordan lage grunnstrukturen til en fler-sides nettsides arkitektur ved bruk av ruting og HTML-maler HTML-maler og ruter Yohan
22 Banking App Bygg et innloggings- og registreringsskjema Lær om å bygge 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, lagre og kaste data Data Yohan
24 Banking App Konsepter for tilstandsadministrasjon Lær hvordan appen din beholder tilstand og hvordan å styre det programmert Tilstandsadministrasjon Yohan
25 Browser/VScode Code Arbeide med VScode Lær hvordan bruke en kodeeditor Bruke VScode Code Editor Chris
26 AI Assistants Arbeide med AI Lær hvordan bygge din egen AI-assistent AI Assistant prosjekt Chris

🏫 Pedagogikk

Vårt pensum er designet med to nøkkelprinsipper for pedagogikk i tankene:

  • prosjektbasert læring
  • hyppige quizer

Programmet lærer grunnleggende om JavaScript, HTML og CSS, samt de nyeste verktøyene og teknikkene som brukes av dagens webutviklere. Studentene vil få mulighet til å utvikle praktisk erfaring ved å bygge et skrive-spill, et virtuelt terrarium, en miljøvennlig nettleserutvidelse, et space-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 dette pensum som en Læringssti på Microsoft Learn!

Ved å sikre at innholdet samsvarer med prosjektene, gjøres prosessen mer engasjerende for studentene, og forståelsen av konseptene vil bli forbedret. Vi skrev også flere startleksjoner 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 lavterskelquiz før undervisning hensikten til studenten mot å lære et tema, mens en heldagsquiz etter undervisning sikrer videre forståelse. Dette pensum 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 ved slutten av 12-ukers syklusen.

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 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 bidrag. Vi ønsker dine konstruktive tilbakemeldinger velkommen!

🧭 Tilgang offline

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 skriver du docsify serve. Nettstedet vil bli servert på port 3000 på din localhost: localhost:3000.

📘 PDF

En PDF av alle leksjonene finnes her.

🎒 Andre kurs

Teamet vårt produserer andre kurs! Sjekk ut:

LangChain

LangChain4j for Beginners LangChain.js for Beginners LangChain for Beginners

Azure / Edge / MCP / Agenter

AZD for Beginners Edge AI for Beginners MCP for Beginners AI Agents for Beginners


Generativ AI-serie

Generative AI for Beginners Generative AI (.NET) Generative AI (Java) Generative AI (JavaScript)


Grunnleggende læring

ML for Beginners Data Science for Beginners AI for Beginners Cybersecurity for Beginners Web Dev for Beginners IoT for Beginners XR Development for Beginners


Copilot-serie

Copilot for AI Paired Programming Copilot for C#/.NET Copilot Adventure

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.

Microsoft Foundry Discord

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

Microsoft Foundry Developer Forum

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, vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på originalsproget skal 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.