Lär dig grunderna i webbplatsutveckling med vår 12-veckors omfattande kurs av Microsoft Cloud Advocates. Varje av de 24 lektionerna går på djupet i JavaScript, CSS och HTML genom praktiska projekt som terrarier, webbläsartillägg och rymdspel. Engagera dig i quiz, diskussioner och praktiska uppgifter. Förbättra dina färdigheter och optimera din kunskapsbehållning med vår effektiva projektbaserade pedagogik. Starta din kodningsresa idag!
Gå med i Azure AI Foundry Discord Community
Följ dessa steg för att komma igång med att använda dessa resurser:
- Fork:a repot: Klicka
- Klona repot:
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
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 | Khmer | 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
Föredrar du att klona lokalt?
Detta repo inkluderar 50+ språköversättningar vilket avsevärt ökar storleken på nedladdningen. För att klona utan översättningar, använd sparsamt incheckning:
Bash / macOS / Linux:
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'CMD (Windows):
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 önskar stöd för flera översättningsspråk finns listade här
Besök Student Hub-sidan där du hittar nybörjarresurser, studentpaket och till och med sätt att få en gratis certifikatkupong. Detta är sidan du vill bokmärka och kolla av med jämna mellanrum eftersom vi byter ut innehåll varje månad.
Ny utmaning tillagd, leta efter "GitHub Copilot Agent Challenge 🚀" i de flesta kapitel. Det är en ny utmaning för dig att klara av med GitHub Copilot och Agent-läge. Om du inte har använt Agent-läget tidigare kan det inte bara generera text utan också skapa och redigera filer, köra kommandon med mera.
Nytt AI Assistant-projekt precis tillagt, kolla in det projekt
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öljeslagar-app.
- Roligt och engagerande berättande, du kommer att tidsresa!
Varje lektion inkluderar en uppgift att slutföra, en kunskapskontroll och en utmaning för att guida dig i ämnen som:
- Prompting och prompt-engineering
- Text- och bildappsgenerering
- Sökningsappar
Besök https://aka.ms/genai-js-course för att komma igång!
Lärare, vi har inkluderat några förslag på hur man kan använda denna läroplan. Vi vill gärna ha din feedback i vårt diskussionsforum!
Studenter, för varje lektion, börja med ett för-quiz och fortsätt sedan med att läsa lektionsmaterialet, slutföra olika aktiviteter och kontrollera din förståelse med efter-quizet.
För att förbättra din lärandeupplevelse, koppla ihop dig med dina kamrater för att arbeta på projekten tillsammans! Diskussioner uppmuntras i vårt diskussionsforum där vårt team av moderatorer kommer att finnas tillgängliga för att svara på dina frågor.
För att fördjupa din utbildning rekommenderar vi starkt att du utforskar Microsoft Learn för ytterligare studiematerial.
Denna läroplan har en utvecklingsmiljö klar att använda! När du kommer igång kan du välja att köra läroplanen i en Codespace (en webbläsarbaserad miljö utan krav på installation), eller lokalt på din dator med en textredigerare som Visual Studio Code.
För att du enkelt ska kunna spara ditt arbete rekommenderas det att du skapar en egen kopia av detta arkiv. Det kan du göra genom att klicka på knappen Use this template högst upp på sidan. Detta skapar ett nytt arkiv på ditt GitHub-konto med en kopia av läroplanen.
Följ dessa steg:
- Fork:a arkivet: Klicka på "Fork"-knappen i övre högra hörnet på denna sida.
- Klona arkivet:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
I din kopia av detta arkiv som du skapade, klicka på Code-knappen och välj Open with Codespaces. Detta kommer att skapa en ny Codespace för dig att arbeta i.
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, kommer att guida dig genom olika alternativ för varje 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 repository till din dator. Du kan göra detta genom att klicka på Code-knappen och kopiera URL:en:
Öppna sedan Terminal i Visual Studio Code och kör följande kommando, ersätt
<your-repository-url>med URL:en du precis 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 den mapp 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
- valfri sketchnote
- valfri kompletterande video
- uppvärmningsquiz före lektionen
- skriftlig lektion
- steg-för-steg guider för projektbaserade lektioner om hur man bygger projektet
- kunskapskontroller
- en utmaning
- kompletterande läsning
- uppgift
- quiz efter lektionen
En notis om quiz: Alla quiz finns i Quiz-app mappen, totalt 48 quiz med tre frågor vardera. De finns tillgängliga här. Quiz-appen kan köras lokalt eller distribueras till Azure; följ instruktionerna i
quiz-appmappen.
| Projektnamn | Undervisade Begrepp | Läromål | Länkad lektion | Författare | |
|---|---|---|---|---|---|
| 01 | Komma igång | Introduktion till programmering och verktyg | Lära sig grunderna bakom de flesta programmeringsspråk och om programvara som hjälper professionella utvecklare i deras arbete | Intro till programmeringsspråk och verktyg | Jasmine |
| 02 | Komma igång | Grunderna i GitHub, inklusive samarbete i team | Hur man använder GitHub i ditt projekt och samarbetar med andra på en kodbas | Introduktion till GitHub | Floor |
| 03 | Komma igång | Tillgänglighet | Lära sig grunderna i webbtillgänglighet | Grundläggande tillgänglighet | Christopher |
| 04 | JS Grunder | JavaScript-datatyper | Grunderna för JavaScript datatyper | Datatyper | Jasmine |
| 05 | JS Grunder | Funktioner och Metoder | Lära sig om funktioner och metoder för att hantera en applikations logik | Funktioner och Metoder | Jasmine och Christopher |
| 06 | JS Grunder | Beslutsfattande med JS | Lära sig skapa villkor i koden med beslutsfattandemetoder | Beslutsfattande | Jasmine |
| 07 | JS Grunder | Arrayer och Loopar | Arbeta med data genom arrayer och loopar i JavaScript | Arrayer och Loopar | Jasmine |
| 08 | Terrarium | HTML i praktiken | Bygga HTML för att skapa ett online-terrarium, med fokus på layoutbygge | Introduktion till HTML | Jen |
| 09 | Terrarium | CSS i praktiken | Bygga CSS för att styla online-terrarium, med fokus på grundläggande CSS och responsiv design | Introduktion till CSS | Jen |
| 10 | Terrarium | JavaScript closures och DOM-manipulation | Bygga JavaScript för att göra terrariet funktionellt med drag/drop, med fokus på closures och DOM-manipulation | JavaScript closures och DOM-manipulation | Jen |
| 11 | Typing Game | Bygga ett skrivspel | Lära sig använda tangentbords-händelser för att driva logiken i JavaScript-appen | Händelsestyrd programmering | Christopher |
| 12 | Grönt webbläsartillägg | Arbeta med webbläsare | Lära sig hur webbläsare fungerar, deras historia och bygga de första elementen i en tillägg | Om webbläsare | Jen |
| 13 | Grönt webbläsartillägg | Bygga ett formulär, anropa API och lagra variabler i lokal lagring | Bygga JavaScript-elementen i ditt tillägg för att anropa ett API med variabler sparade i lokal lagring | API:er, formulär och lokal lagring | Jen |
| 14 | Grönt webbläsartillägg | Bakgrundsprocesser i webbläsaren, webbprestanda | Använd webbläsarens bakgrundsprocesser för att hantera tilläggets ikon; lära sig om webbprestanda och optimeringar | Bakgrundsprocesser och prestanda | Jen |
| 15 | Rymdspel | Mer avancerad spelutveckling med JavaScript | Lära sig om arv med både klasser och komposition och Pub/Sub-mönstret inför spelbyggande | Introduktion till avancerad spelutveckling | Chris |
| 16 | Rymdspel | Rita på canvas | Lära sig 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 | Kollisiondetektion | Få element att kollidera och reagera på varandra med knapptryckningar och ge en cooldown-funktion för att säkerställa prestanda | Kollisiondetektion | Chris |
| 19 | Rymdspel | Hålla poäng | Utför matematiska beräkningar baserat på spelets status och prestation | Hålla poäng | Chris |
| 20 | Rymdspel | Avsluta och starta om spelet | Lära sig om att avsluta och starta om spelet, inklusive städning av resurser och återställning av variabler | Avslutningsvillkor | Chris |
| 21 | Bankapp | HTML-mallar och rutthantering i en webbapp | Lära sig skapa stommen för en flersidig webbplats arkitektur med routing och HTML-mallar | HTML-mallar och routing | Yohan |
| 22 | Bankapp | Bygga inloggning och registreringsformulär | Lära sig 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 appen, hur man hämtar, sparar och gör sig av med den | Data | Yohan |
| 24 | Bankapp | Begrepp för state-hantering | Lära sig hur appen behåller state och hur man hanterar detta programmässigt | State-hantering | Yohan |
| 25 | Browser/VScode Code | Arbeta med VScode | Lära dig använda en kodeditor | Använd VScode Code Editor | Chris |
| 26 | AI Assistants | Arbeta med AI | Lära dig bygga din egen AI-assistent | AI Assistant project | Chris |
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 får möjlighet att utveckla praktisk erfarenhet genom att bygga ett skrivspel, ett virtuellt terrarium, ett miljövänligt webbläsartillägg, ett rymdinvasionsspel och en bankapp för företag. I slutet av serien kommer studenterna ha fått en solid förståelse för webbutveckling.
🎓 Du kan ta de första lektionerna i denna läroplan som en Lärandeväg på Microsoft Learn!
Genom att säkerställa att innehållet är kopplat till projekt görs processen mer engagerande för studenter och retentionen av koncept förstärks. Vi har också skapat flera startlektioner i JavaScript-grunder för att introducera koncept, kombinerade med en video från "Beginners Series to: JavaScript" samling av videotutorials, varav flera författare bidrog till denna läroplan.
Dessutom sätter ett låginsats-quiz före en lektion studentens fokus på 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 genomföras helt eller delvis. Projekten börjar små och blir alltmer komplexa under den 12-veckorscykeln.
Medan vi medvetet har undvikit att introducera JavaScript-ramverk för att koncentrera oss på grundläggande färdigheter som krävs som webbutvecklare innan ett ramverk tas i bruk, är ett bra nästa steg efter 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!
Du kan köra denna dokumentation offline med hjälp av Docsify. Forka detta repo, installera Docsify på din lokala maskin och skriv sedan docsify serve i roten av detta repo. Webbplatsen tjänstgörs på port 3000 på din localhost: localhost:3000.
En PDF av alla lektioner finns här.
Vårt team producerar andra kurser! Kolla in:
-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA){kind=icon}
-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC){kind=icon}
-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9){kind=icon}
Om du kör fast eller har några frågor om att bygga AI-appar. Gå med i diskussioner med andra elever och erfarna utvecklare om MCP. Det är en stödjande gemenskap där frågor välkomnas och kunskap delas fritt.
Om du har produktfeedback eller fel vid byggande, besök:
Det här arkivet ä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. Även om vi strävar efter noggrannhet, vänligen 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 kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för några missförstånd eller feltolkningar som uppstår vid användning av denna översättning.