30 KiB

Raw Blame History Unescape Escape

Webbutveckling för nybörjare - Ett läroplan

Lär dig grunderna i webbutveckling med vår omfattande 12-veckors kurs av Microsoft Cloud Advocates. Varje av de 24 lektionerna djupdyker i JavaScript, CSS och HTML genom praktiska projekt som terrarier, webbläsartillägg och rymdspel. Delta i quizzer, diskussioner och praktiska uppgifter. Förbättra dina färdigheter och optimera din kunskapsbehållning med vår effektiva projektbaserade pedagogik. Börja din kodningsresa idag!

Gå med i Azure AI Foundry Discord-communityn

Följ dessa steg för att komma igång med dessa resurser:

Forka arkivet: Klicka
Klona arkivet: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Gå med i Azure AI Foundry Discord och träffa experter och andra utvecklare

🌐 Flerspråkigt stöd

Stöds via GitHub Action (Automatiserad & Alltid aktuell)

Föredrar du att klona lokalt?

Detta arkiv inkluderar 50+ språköversättningar som kraftigt ökar nedladdningsstorleken. För att klona utan översättningar, använd 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'
Detta ger dig allt du behöver för att slutföra kursen med en mycket snabbare nedladdning.

Om du vill ha ytterligare översättningsspråk stöds de som listas här

🧑‍🎓 Är du student?

Besök Studenthubbsidan där du hittar resurser för nybörjare, studentpaket och till och med sätt att få ett gratis certifikatkupong. Detta är sidan du vill bokmärka och kolla från tid till annan eftersom vi byter ut innehåll varje månad.

📣 Meddelande - Nya utmaningar i GitHub Copilot Agent-läge att slutföra!

Ny utmaning tillagd, leta efter "GitHub Copilot Agent Challenge 🚀" i de flesta kapitel. Det är en ny utmaning för dig att slutföra med hjälp av GitHub Copilot och Agent-läge. Om du inte har använt Agent-läge tidigare kan det inte bara generera text utan också skapa och redigera filer, köra kommandon med mera.

📣 Meddelande - Nytt projekt att bygga med generativ AI

Nytt AI-assistentprojekt just tillagt, kika på det projekt

📣 Meddelande - Ny läroplan om Generativ AI för JavaScript har precis släppts

Missa inte vår nya läroplan för Generativ AI!

Besök https://aka.ms/genai-js-course för att komma igång!

Lektioner som täcker allt från grunder till RAG.
Interagera med historiska karaktärer med GenAI och vår följeslagsapp.
Rolig och engagerande berättelse, du kommer att tidsresande!

Varje lektion inkluderar en uppgift att slutföra, en kunskapskontroll och en utmaning för att guida dig i att lära dig ämnen som:

Promptning och promptteknik
Text- och bildappsgenerering
Sökappar

Besök https://aka.ms/genai-js-course för att komma igång!

🌱 Komma igång

Lärare, vi har inkluderat några förslag på hur man använder denna läroplan. Vi skulle uppskatta din feedback i vårt diskussionsforum!

Studenter, för varje lektion, börja med ett förföreläsningsquiz och fortsätt sedan med att läsa föreläsningsmaterialet, genomföra de olika aktiviteterna och kontrollera din förståelse med efterföreläsningsquizet.

För att förbättra din lärandeupplevelse, anslut med dina kamrater för att arbeta med projekten tillsammans! Diskussioner uppmuntras i vårt diskussionsforum där vårt team av moderatorer finns tillgängliga för att svara på dina frågor.

För att fördjupa din utbildning rekommenderar vi starkt att utforska Microsoft Learn för ytterligare studiematerial.

📋 Ställa in din miljö

Denna läroplan har en utvecklingsmiljö redo att användas! När du kommer igång kan du välja att köra läroplanen i en Codespace (en webbläsarbaserad, inga installationer behövs-miljö), eller lokalt på din dator med en textredigerare som Visual Studio Code.

Skapa ditt arkiv

För att enkelt kunna spara ditt arbete rekommenderas det att du skapar en egen kopia av detta arkiv. Det kan du göra genom att klicka på Använd den här mallen-knappen högst upp på sidan. Detta skapar ett nytt arkiv i ditt GitHub-konto med en kopia av läroplanen.

Följ dessa steg:

Forka arkivet: Klicka på "Fork"-knappen uppe till höger på den här sidan.
Klona arkivet: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Köra läroplanen i en Codespace

I din kopia av detta arkiv som du skapade, klicka på Code-knappen och välj Open with Codespaces. Detta skapar en ny Codespace för dig att arbeta i.

Köra läroplanen lokalt på din dator

För att köra denna läroplan lokalt på din dator behöver du en textredigerare, en webbläsare och ett kommandoradsverktyg. Vår första lektion, Introduktion till programmeringsspråk och verktyg, leder dig genom olika alternativ för var och en av dessa verktyg så att du kan välja det som passar dig bäst.

Vår rekommendation är att använda Visual Studio Code som din redigerare, som också har en inbyggd Terminal. Du kan ladda ner Visual Studio Code här.

Klona ditt arkiv till din dator. Det kan du göra genom att klicka på Code-knappen och kopiera URL:

CodeSpace Öppna sedan Terminal inom Visual Studio Code och kör följande kommando, byt ut <your-repository-url> med URL:en du nyss kopierade:
```
git clone <your-repository-url>
```
Öppna mappen i Visual Studio Code. Du kan göra detta genom att klicka på File > Open Folder och välja mappen du just klonade.

Rekommenderade Visual Studio Code-tillägg:

Live Server – för att förhandsgranska HTML-sidor inom Visual Studio Code

Copilot – för att hjälpa dig skriva kod snabbare

📂 Varje lektion innehåller:

valfri skissanteckning
valbar kompletterande video
quiz som förberedelse inför lektionen
skriftlig lektion
för projektbaserade lektioner, steg-för-steg guider för hur man bygger projektet
kunskapskontroller
en utmaning
kompletterande läsning
uppgift
quiz efter lektion

En notis om quiz: Alla quiz finns i Quiz-app-mappen, totalt 48 quiz med tre frågor i varje. De är tillgängliga här quiz-appen kan köras lokalt eller distribueras till Azure; följ instruktionerna i quiz-app-mappen.

🗃️ Lektioner

	Projektets namn	Inlärda koncept	Lärandemål	Länkad lektion	Författare
01	Komma igång	Introduktion till programmering och verktyg	Lär dig de grundläggande principerna bakom de flesta programspråk och om mjukvara som hjälper professionella utvecklare	Intro till programmeringsspråk och verktyg	Jasmine
02	Komma igång	Grunderna i GitHub, inkluderar att arbeta i team	Hur man använder GitHub i ditt projekt, hur man samarbetar med andra på en kodbas	Intro till GitHub	Floor
03	Komma igång	Tillgänglighet	Lär dig grunderna i webb-tillgänglighet	Grundläggande tillgänglighet	Christopher
04	JS Grundläggande	JavaScript-datatyper	Grunderna i JavaScript-datatyper	Datatyper	Jasmine
05	JS Grundläggande	Funktioner och metoder	Lär dig om funktioner och metoder för att hantera en applikations logik	Funktioner och metoder	Jasmine och Christopher
06	JS Grundläggande	Göra beslut med JS	Lär dig hur man skapar villkor i din kod med beslutsfattande metoder	Göra beslut	Jasmine
07	JS Grundläggande	Arrayer och loopar	Arbeta med data med arrayer och loopar i JavaScript	Arrayer och loopar	Jasmine
08	Terrarium	HTML i praktiken	Bygg HTML för att skapa ett online-terrarium, med fokus på att bygga upp en layout	Intro till HTML	Jen
09	Terrarium	CSS i praktiken	Bygg CSS för att styla det online-terrarium, med fokus på grunderna i CSS inklusive responsiv webbdesign	Intro till CSS	Jen
10	Terrarium	JavaScript-closures, DOM-manipulation	Bygg JavaScript för att göra terrariet till en drag och släpp-gränssnitt, med fokus på closures och DOM-manipulation	JavaScript-closures, DOM-manipulation	Jen
11	Skrivspel	Bygg ett skrivspel	Lär dig använda tangentbords-händelser för att styra logiken i din JavaScript-applikation	Händelsestyrd programmering	Christopher
12	Green Browser Extension	Arbeta med webbläsare	Lär dig hur webbläsare fungerar, deras historia och hur man bygger upp de första elementen i en webbläsarförlängning	Om webbläsare	Jen
13	Green Browser Extension	Bygga ett formulär, anropa API och lagra variabler i lokal lagring	Bygg JavaScript-elementen i din webbläsarförlängning för att anropa ett API med variabler lagrade i lokal lagring	API, formulär och lokal lagring	Jen
14	Green Browser Extension	Bakgrundsprocesser i webbläsare, webbprestanda	Använd webbläsarens bakgrundsprocesser för att hantera förlängningens ikon; lär dig om webbprestanda och optimeringar	Bakgrundsuppgifter och prestanda	Jen
15	Rymdspel	Mer avancerad spelutveckling med JavaScript	Lär dig om arv med både klasser och komposition samt Pub/Sub-mönstret, som förberedelse för att bygga ett spel	Introduktion till avancerad spelutveckling	Chris
16	Rymdspel	Rita på canvas	Lär dig om Canvas API, som används för att rita element på en skärm	Rita på Canvas	Chris
17	Rymdspel	Flytta element runt på skärmen	Upptäck hur element kan få rörelse med hjälp av kartesiska koordinater och Canvas API	Flytta element runt	Chris
18	Rymdspel	Kollisionsdetektion	Få element att kollidera och reagera på varandra med knapptryckningar samt tillhandahåll en cooldown-funktion för spelets prestanda	Kollisionsdetektion	Chris
19	Rymdspel	Poängräkning	Gör matematiska beräkningar baserade på spelets status och prestation	Poängräkning	Chris
20	Rymdspel	Avsluta och starta om spelet	Lär dig om att avsluta och starta om spelet, inklusive att städa upp resurser och återställa variabelvärden	Avslutningsvillkor	Chris
21	Bankapp	HTML-mallar och rutter i en webbapp	Lär dig skapa grunden för en webbplats arkitektur med routing och HTML-mallar	HTML-mallar och rutter	Yohan
22	Bankapp	Bygg ett inloggnings- och registreringsformulär	Lär dig om att bygga formulär och hantera valideringsrutiner	Formulär	Yohan
23	Bankapp	Metoder för att hämta och använda data	Hur data flödar in och ut ur din app, hur man hämtar, lagrar och rensar den	Data	Yohan
24	Bankapp	Begrepp inom tillståndshantering	Lär dig hur din app behåller state och hur du hanterar det programmatiskt	Tillståndshantering	Yohan
25	Browser/VScode-kod	Arbeta med VScode	Lär dig använda en kodredigerare	Använd VScode Code Editor	Chris
26	AI Assistenter	Arbeta med AI	Lär dig bygga din egen AI-assistent	AI Assistant project	Chris

🏫 Pedagogik

Vår läroplan är utformad med två viktiga pedagogiska principer i åtanke:

projektbaserat lärande
frekventa quiz

Programmet lär ut grunderna i JavaScript, HTML och CSS, samt de senaste verktygen och teknikerna som dagens webbutvecklare använder. Studenter kommer att få möjlighet att utveckla praktisk erfarenhet genom att bygga ett skrivspel, ett virtuellt terrarium, en miljövänlig webbläsarförlängning, ett rymdinvasions-spel och en bankapp för företag. I slutet av serien kommer studenterna att ha fått en gedigen förståelse för webbprogrammering.

🎓 Du kan ta de första lektionerna i denna läroplan som en Learn Path på Microsoft Learn!

Genom att säkerställa att innehållet stämmer överens med projekten blir processen mer engagerande för studenterna och möjligheten att behålla koncepten ökar. Vi skrev också flera inledande lektioner i JavaScript-grunder för att introducera koncept, tillsammans med en video från "Beginners Series to: JavaScript" samling av videotutorials, där några av författarna bidrog till denna läroplan.

Dessutom sätter ett lågrisk-quiz före en lektion studentens intention att lära sig ett ämne, medan ett andra quiz efter lektionen säkerställer ytterligare retention. Denna läroplan är designad för att vara flexibel och rolig och kan tas i sin helhet eller delvis. Projekten börjar smått och blir allt mer komplexa fram till slutet av en 12-veckors cykel.

Medan vi medvetet undvikit att introducera JavaScript-ramverk för att fokusera på de grundläggande färdigheter som behövs som webbutvecklare innan man tar till ett ramverk, är ett bra nästa steg efter att ha slutfört denna läroplan att lära sig om Node.js via en annan videosamling: "Beginner Series to: Node.js".

Besök våra riktlinjer för uppförandekod och bidragande. Vi välkomnar din konstruktiva feedback!

🧭 Obegränsad åtkomst offline

Du kan köra denna dokumentation offline genom att använda Docsify. Forka detta repo, installera Docsify på din lokala maskin och skriv sedan i rotmappen för detta repo docsify serve. Webbplatsen kommer att serveras på port 3000 på din lokala dator: localhost:3000.

📘 PDF

En PDF med alla lektioner finns här.

🎒 Andra kurser

Vårt team producerar andra kurser! Kolla in:

LangChain

Azure / Edge / MCP / Agenter

Generativ AI-serie

Kärninlärning

Copilot-serie

Få hjälp

Om du fastnar eller har frågor om att bygga AI-appar. Gå med i diskussioner om MCP med andra lärande och erfarna utvecklare. Det är en stödjande gemenskap där frågor är välkomna och kunskap delas fritt.

Om du har produktfeedback eller stöter på fel när du bygger, besök:

Licens

Detta förråd är licensierat under MIT-licensen. Se filen LICENSE för mer information.

Ansvarsfriskrivning: Detta dokument har översatts med hjälp av AI-översättningstjänsten Co-op Translator. Vi strävar efter noggrannhet, men var medveten om att automatiska översättningar kan innehålla fel eller brister. Det ursprungliga dokumentet på dess modersmål bör betraktas som den auktoritativa källan. För viktig information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för några missförstånd eller feltolkningar som uppstår till följd av användningen av denna översättning.

30 KiB Raw Blame History Unescape Escape