Lär dig grunderna i webbutveckling med vår 12-veckors omfattande kurs av Microsoft Cloud Advocates. Varje av de 24 lektionerna fördjupar sig i JavaScript, CSS och HTML genom praktiska projekt som terrarier, webbläsartillägg och rymdspel. Delta i frågesporter, diskussioner och praktiska uppgifter. Förbättra dina färdigheter och optimera din kunskapsbevarande med vår effektiva projektbaserade pedagogik. Börja din kodningsresa idag!
Gå med i Azure AI Foundry Discord Community
Följ dessa steg för att komma igång med dessa resurser:
- Forka FÖrrådet: Klicka
- Klona FÖrrådet:
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 | 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 förråd inkluderar över 50 språköversättningar som betydligt ökar nedladdningsstorleken. För att klona utan översättningar, använd sparsamt utläsning:
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ödjs dessa här
Besök Student Hub-sidan där du hittar nybörjarresurser, studentpaket och även sätt att få ett gratis certifikat-voucher. Detta är sidan du vill bokmärka och kolla då och då eftersom vi byter ut innehållet 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 slutföra med GitHub Copilot och Agent-läge. Om du inte har använt Agent-läge tidigare kan det inte bara generera text utan kan också skapa och redigera filer, köra kommandon med mera.
Nytt AI Assistant-projekt nyligen 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 app.
- Rolig och engagerande berättelse, du kommer att resa i tiden!
Varje lektion innehåller en uppgift att slutföra, en kunskapskontroll och en utmaning som vägleder dig genom ämnen som:
- Frågeteknik och promptteknik
- Text- och bildappsgenerering
- Sökappar
Besök https://aka.ms/genai-js-course för att komma igång!
Lärare, vi har inkluderat några förslag om hur du kan använda denna läroplan. Vi skulle uppskatta din feedback i vårt diskussionsforum!
Lärande, för varje lektion, börja med en för-foreläsningsfrågesport och fortsätt med att läsa föreläsningsmaterialet, komplettera de olika aktiviteterna och kontrollera din förståelse med post-foreläsningsfrågesporten.
För att förbättra din inlärningsupplevelse, 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 vidareutbilda dig rekommenderar vi starkt att utforska Microsoft Learn för ytterligare studiematerial.
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, ingen installation behövs-miljö), eller lokalt på din dator med en textredigerare som Visual Studio Code.
För att du enkelt ska kunna spara ditt arbete rekommenderas att du skapar din egen kopia av detta förråd. Du kan göra detta genom att klicka på knappen Use this template högst upp på sidan. Detta skapar ett nytt förråd i ditt GitHub-konto med en kopia av läroplanen.
Följ dessa steg:
- Forka FÖrrådet: Klicka på "Fork"-knappen i det övre högra hörnet på denna sida.
- Klona FÖrrådet:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
I din kopia av detta förråd som du skapade, klicka på Code-knappen och välj Open with Codespaces. Detta skapar 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, guidar dig genom olika alternativ för varje av dessa verktyg så att du kan välja det som passar dig bäst.
Vårt rekommenderade redigeringsprogram är Visual Studio Code som även har en inbyggd Terminal. Du kan ladda ner Visual Studio Code här.
-
Klona ditt förråd till din dator. Du kan göra detta genom att klicka på Code-knappen och kopiera URL:
CodeSpace Öppna sedan Terminal i Visual Studio Code och kör följande kommando, byt ut
<your-repository-url>mot URL:en du just kopierade:git clone <your-repository-url>
-
Öppna mappen i Visual Studio Code. Det kan du göra 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 i Visual Studio Code
- Copilot - för att hjälpa dig skriva kod snabbare
- valfri sketchnote
- valfri kompletterande video
- förberedande quiz före 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 lektionen
En notering 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 mappen
quiz-app.
| Projektnamn | Undervisade koncept | Lärandemål | Länkad lektion | Författare | |
|---|---|---|---|---|---|
| 01 | Kom igång | Introduktion till programmering och verktyg | Lär dig de grundläggande principerna bakom de flesta programmeringsspråk och programvara som hjälper professionella utvecklare | Introduktion till programmeringsspråk och verktyg | Jasmine |
| 02 | Kom igång | Grunder i GitHub, inklusive samarbete i team | Hur man använder GitHub i sitt projekt, och hur man samarbetar med andra i en kodbas | Introduktion till GitHub | Floor |
| 03 | Kom igång | Tillgänglighet | Lär dig grunderna i webbtillgänglighet | Grundläggande tillgänglighet | Christopher |
| 04 | JS Grunder | JavaScript-datatyper | Grunderna i JavaScript-datatyper | Datatyper | Jasmine |
| 05 | JS Grunder | Funktioner och metoder | Lär dig om funktioner och metoder för att hantera applikationens logik | Funktioner och metoder | Jasmine och Christopher |
| 06 | JS Grunder | Beslutsfattande med JS | Lär dig att skapa villkor i din kod med hjälp av 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 | Bygg HTML:en för att skapa ett online-terrarium, med fokus på layout | Introduktion till HTML | Jen |
| 09 | Terrarium | CSS i praktiken | Bygg CSS:en för att styla online-terrarium, med fokus på CSS-grunder, inklusive responsivt webbdesign | Introduktion till CSS | Jen |
| 10 | Terrarium | JavaScript-closures, DOM-manipulation | Bygg JavaScript för att få terrariet att fungera som ett drag/drop-gränssnitt, med fokus på closures och DOM-manipulation | JavaScript-closures, DOM-manipulation | Jen |
| 11 | Typing Game | Bygg ett skrivspel | Lär dig använda tangentbordevenemang för att styra logiken i din JavaScript-app | Händelsestyrd programmering | Christopher |
| 12 | Green Browser Extension | Arbeta med webbläsare | Lär dig hur webbläsare fungerar, deras historia och hur man skissar de första elementen i en webbläsartillägg | Om webbläsare | Jen |
| 13 | Green Browser Extension | Bygg ett formulär, anropa en API och lagra variabler lokalt | Bygg JavaScript-komponenterna i din webbläsartillägg för att anropa en API med hjälp av variabler lagrade lokalt | API:er, formulär och lokal lagring | Jen |
| 14 | Green Browser Extension | Bakgrundsprocesser i webbläsaren, webbprestanda | Använd webbläsarens bakgrundsprocesser för att hantera tilläggets ikon; lär dig om webbprestanda och vissa optimeringar | Bakgrundsuppgifter och prestanda | Jen |
| 15 | Space Game | 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 | Space Game | 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 | Space Game | Flytta element runt på skärmen | Upptäck hur element kan få rörelse med kartesiska koordinater och Canvas API | Flytta element runt | Chris |
| 18 | Space Game | Kollisionsdetektion | Få element att kollidera och reagera på varandra med hjälp av knapptryckningar och ge en cooldown-funktion för spelets prestanda | Kollisionsdetektion | Chris |
| 19 | Space Game | Poängräkning | Utför matematiska beräkningar baserat på spelets status och prestanda | Poängräkning | Chris |
| 20 | Space Game | Avsluta och starta om spelet | Lär dig om att avsluta och starta om spelet, inklusive att rensa tillgångar och återställa variabelvärden | Avslutsvillkor | Chris |
| 21 | Banking App | HTML-mallar och rutter i en webbapp | Lär dig skapa grunden till en multipages webbplats arkitektur med routing och HTML-mallar | HTML-mallar och rutter | Yohan |
| 22 | Banking App | Bygg ett inloggnings- och registreringsformulär | Lär dig om att bygga formulär och hantera valideringsrutiner | Formulär | Yohan |
| 23 | Banking App | Sätt att hämta och använda data | Hur data flyter in och ut ur din app, hur man hämtar, lagrar och gör sig av med det | Data | Yohan |
| 24 | Banking App | Begrepp i tillståndshantering | Lär dig hur din app behåller tillstånd och hur du hanterar det programmässigt | Tillståndshantering | Yohan |
| 25 | Browser/VScode Code | Arbeta med VScode | Lär dig hur man använder en kodredigerare | Använd VScode Code Editor | Chris |
| 26 | AI Assistants | Arbeta med AI | Lär dig hur du bygger din egen AI-assistent | AI Assistentprojekt | 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 används av dagens webbutvecklare. Studenter får möjlighet att utveckla praktisk erfarenhet genom att bygga ett skrivspel, ett virtuellt terrarium, en miljövänlig webbläsartillägg, ett rymd-invaderarspel och en bankapp för företag. I slutet av serien kommer studenter att ha en gedigen förståelse för webbutveckling.
🎓 Du kan ta de första lektionerna i denna läroplan som en Lärväg på Microsoft Learn!
Genom att säkerställa att innehållet överensstämmer med projekten blir processen mer engagerande för studenterna och konceptens bestående förstärks. Vi skrev också flera grundläggande lektioner i JavaScript för att introducera koncept, tillsammans med en video från "Beginners Series to: JavaScript" samlingen av videotutorials, vars några författare bidrog till denna läroplan.
Dessutom sätter ett lågrisk-quiz före en lektion studentens fokus mot att lära sig ett ämne, medan ett andra quiz efter lektionen säkerställer ytterligare bestående förståelse. 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 successivt mer komplexa vid slutet av 12-veckorscykeln.
Medan vi medvetet har undvikit att introducera JavaScript-ramverk för att fokusera på grundläggande färdigheter som webbutvecklare innan ett ramverk används, är ett bra nästa steg efter att ha genomfö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 Bidrag. Vi välkomnar din konstruktiva feedback!
Du kan köra denna dokumentation offline genom att använda Docsify. Forka detta repo, installera Docsify på din lokala maskin, och sedan i rotmappen av detta repo skriver du docsify serve. Webbplatsen kommer att serveras på port 3000 på din localhost: localhost:3000.
En PDF med 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 fastnar eller har några frågor om att bygga AI-appar. Gå med andra studenter och erfarna utvecklare i diskussioner om MCP. 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 under byggandet, besök:
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. Även om vi strävar efter noggrannhet, var god notera att automatiska översättningar kan innehålla fel eller brister. Det ursprungliga dokumentet på dess ursprungliga språk 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 till följd av användningen av denna översättning.