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
leestott 7d81929ae6
🌐 Update translations via Co-op Translator
1 week ago
..
1-getting-started-lessons 🌐 Update translations via Co-op Translator 1 week ago
2-js-basics 🌐 Update translations via Co-op Translator 1 week ago
3-terrarium 🌐 Update translations via Co-op Translator 1 week ago
4-typing-game 🌐 Update translations via Co-op Translator 1 week ago
5-browser-extension 🌐 Update translations via Co-op Translator 1 week ago
6-space-game 🌐 Update translations via Co-op Translator 1 week ago
7-bank-project 🌐 Update translations via Co-op Translator 1 week ago
8-code-editor/1-using-a-code-editor 🌐 Update translations via Co-op Translator 1 week ago
docs 🌐 Update translations via Co-op Translator 1 week ago
lesson-template 🌐 Update translations via Co-op Translator 1 week ago
quiz-app 🌐 Update translations via Co-op Translator 1 week ago
CODE_OF_CONDUCT.md 🌐 Update translations via Co-op Translator 1 week ago
CONTRIBUTING.md 🌐 Update translations via Co-op Translator 1 week ago
README.md 🌐 Update translations via Co-op Translator 1 week ago
SECURITY.md 🌐 Update translations via Co-op Translator 1 week ago
SUPPORT.md 🌐 Update translations via Co-op Translator 1 week ago
_404.md 🌐 Update translations via Co-op Translator 1 week ago
for-teachers.md 🌐 Update translations via Co-op Translator 1 week ago

README.md

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

GitHub watchers
GitHub forks
GitHub stars

Open in Visual Studio Code

Microsoft Azure AI Foundry Discord

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

  1. Fork repositoryen: Klikk GitHub forks
  2. Klon repositoryen: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
  3. 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 kunnskapsbeholdningen med vår effektive prosjektbaserte pedagogikk. Start din kode-reise i dag!

🧑‍🎓 Er du student?

Besøk Student Hub-siden hvor du finner ressurser for nybegynnere, studentpakker og til og med måter å få en gratis sertifikatvoucher. Dette er siden du bør bokmerke og sjekke jevnlig, da vi bytter ut innhold månedlig.

📣 Kunngjøring - Nytt kurs om Generativ AI for JavaScript er nettopp lansert

Ikke gå glipp av vårt nye kurs om Generativ AI!

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

Bakgrunn

  • 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!

karakter

Hver leksjon inkluderer en oppgave, en kunnskapssjekk og en utfordring for å veilede deg i læring av emner som:

  • Prompting og prompt engineering
  • Tekst- og bildeapp-generering
  • 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 dette kurset. 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 sammen 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

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

Opprett repositoryen din

For å enkelt lagre arbeidet ditt, anbefales det at du oppretter din egen kopi av denne repositoryen. Du kan gjøre dette ved å klikke på Bruk denne malen-knappen øverst på siden. Dette vil opprette en ny repository i GitHub-kontoen din med en kopi av kurset.

Følg disse stegene:

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

Kjøre kurset i en Codespace

I kopien av repositoryen du opprettet, klikk på Code-knappen og velg Open with Codespaces. Dette vil opprette en ny Codespace for deg å jobbe i.

!Codespace./images/createcodespace.png)

Kjøre kurset lokalt på datamaskinen din

For å kjøre dette kurset 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 gå gjennom ulike 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 repositoryen til datamaskinen din. 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, hvor <your-repository-url> erstattes 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 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 merknad om quizzer: Alle quizzer er inkludert i Quiz-app-mappen, totalt 48 quizzer 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 Lenket leksjon Forfatter
01 Komme i gang Introduksjon til programmering og verktøyene som brukes Lær det grunnleggende bak de fleste programmeringsspråk og om programvare som hjelper profesjonelle utviklere med 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 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 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 din ved hjelp av metoder for beslutningstaking Ta beslutninger Jasmine
07 JS Grunnleggende Arrays og løkker Jobb 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å det grunnleggende i CSS, inkludert å gjøre siden responsiv Introduksjon til CSS Jen
10 Terrarium JavaScript Closures, DOM-manipulering Bygg JavaScript som får terrariet til å fungere som et dra-og-slipp-grensesnitt, med fokus på closures og DOM-manipulering JavaScript Closures, DOM-manipulering Jen
11 Typing Game Bygg et skrive-spill Lær hvordan du bruker tastaturevents for å styre logikken i JavaScript-appen din Event-drevet programmering Christopher
12 Green Browser Extension Arbeide med nettlesere Lær hvordan nettlesere fungerer, deres historie, og hvordan du kan sette opp de første elementene i en nettleserutvidelse Om nettlesere Jen
13 Green Browser Extension 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 Green Browser Extension Bakgrunnsprosesser i nettleseren, ytelsesoptimalisering Bruk nettleserens bakgrunnsprosesser til å administrere utvidelsens ikon; lær om webytelse 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, samt Pub/Sub-mønsteret, som forberedelse til å bygge et spill Introduksjon til avansert spillutvikling Chris
16 Space Game Tegne på canvas Lær om Canvas API, som brukes til å tegne elementer på skjermen Tegne på canvas 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 Få elementer til å kollidere og reagere på hverandre ved hjelp av tastetrykk, og implementer en nedkjølingsfunksjon for ytelse Kollisjonsdeteksjon Chris
19 Space Game Holde styr på poeng Utfør matematiske beregninger basert på spillets status og ytelse Holde styr på poeng Chris
20 Space Game Avslutte og starte spillet på nytt Lær om hvordan du avslutter og starter spillet på nytt, inkludert opprydding av ressurser og tilbakestilling av variabler Avslutningsbetingelse Chris
21 Banking App HTML-maler og ruter i en webapp Lær hvordan du lager grunnstrukturen for en flersidet nettsides arkitektur ved hjelp av ruting og HTML-maler HTML-maler og ruter Yohan
22 Banking App Bygge 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 du henter, lagrer og sletter den Data Yohan
24 Banking App Konsepter for tilstandsadministrasjon Lær hvordan appen din beholder tilstand og hvordan du administrerer den programmatisk Tilstandsadministrasjon Yohan

🏫 Pedagogikk

Vår læreplan er designet med to sentrale 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 får muligheten til å utvikle praktisk erfaring ved å bygge et skrive-spill, et virtuelt terrarium, en miljøvennlig nettleserutvidelse, et spill i stil med Space Invaders, 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 denne læreplanen som en Learn Path på Microsoft Learn!

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

I tillegg setter en lavterskelquiz før en klasse studentens fokus mot å lære et tema, 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 videoer: "Beginner Series to: Node.js".

Besøk våre Retningslinjer for oppførsel og Bidragsveiledning. Vi ønsker dine konstruktive tilbakemeldinger velkommen!

🧭 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.

📘 PDF

En PDF av alle leksjonene finner du her.

🎒 Andre kurs

Vårt team produserer andre kurs! Sjekk ut:

Lisens

Dette repositoriet er lisensiert under MIT-lisensen. Se LISENS-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å 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.