32 KiB

Raw Blame History

Webbutveckling för nybörjare - En kursplan

Lär dig grunderna i webbutveckling med vår 12-veckors omfattande kurs från Microsoft Cloud Advocates. Varje av de 24 lektionerna går igenom JavaScript, CSS och HTML genom praktiska projekt som terrarium, webbläsartillägg och rymdspel. Delta i quiz, diskussioner och praktiska uppgifter. Förbättra dina färdigheter och optimera din kunskapsretention 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 att använda dessa resurser:

Forka 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

🌐 Stöd för flera språk

Stöds via GitHub Action (Automatiserat & Alltid Uppdaterat)

Om du vill ha ytterligare översättningar finns stödda språk listade här

🧑‍🎓 Är du student?

Besök Student Hub-sidan där du hittar resurser för nybörjare, studentpaket och till och med sätt att få en gratis certifikatvoucher. Detta är sidan du vill bokmärka och kolla regelbundet eftersom vi byter innehåll varje månad.

📣 Meddelande - Nya GitHub Copilot Agent mode-utmaningar 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 mode. Om du inte har använt Agent mode tidigare kan det inte bara generera text utan också skapa och redigera filer, köra kommandon och mycket mer.

📣 Meddelande - Nytt projekt att bygga med Generativ AI

Nytt AI-assistentprojekt just tillagt, kolla in det projekt

📣 Meddelande - Ny kursplan om Generativ AI för JavaScript har just släppts

Missa inte vår nya kursplan 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öljeslagarapp.
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 för att guida dig i att lära dig ämnen som:

Prompting och promptteknik
Text- och bildappgenerering
Sökappar

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

🌱 Kom igång

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

Studenter, för varje lektion, börja med ett quiz före föreläsningen och fortsätt med att läsa föreläsningsmaterialet, slutföra de olika aktiviteterna och kontrollera din förståelse med quiz efter föreläsningen.

För att förbättra din lärandeupplevelse, anslut 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 utforska Microsoft Learn för ytterligare studiematerial.

📋 Ställa in din miljö

Denna kursplan har en utvecklingsmiljö redo att användas! När du börjar kan du välja att köra kursplanen i en Codespace (en webbläsarbaserad miljö utan behov av installationer), eller lokalt på din dator med en textredigerare som Visual Studio Code.

Skapa ditt repository

För att enkelt spara ditt arbete rekommenderas det att du skapar en egen kopia av detta repository. Du kan göra detta genom att klicka på knappen Use this template högst upp på sidan. Detta skapar ett nytt repository i ditt GitHub-konto med en kopia av kursplanen.

Följ dessa steg:

Forka repot: Klicka på "Fork"-knappen längst upp till höger på denna sida.
Klona repot: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Köra kursplanen i en Codespace

I din kopia av detta repository 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 kursplanen lokalt på din dator

För att köra denna kursplan 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 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 repository till din dator. Du kan göra detta genom att klicka på Code-knappen och kopiera URL:en:

CodeSpace

Öppna sedan Terminal inom Visual Studio Code och kör följande kommando, ersätt <your-repository-url> med URL:en du just 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 tillägg för Visual Studio Code:

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

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

📂 Varje lektion innehåller:

valfri sketchnote
valfri kompletterande video
uppvärmningsquiz före lektionen
skriftlig lektion
för projektbaserade lektioner, steg-för-steg-guider om hur man bygger projektet
kunskapskontroller
en utmaning
kompletterande läsning
uppgift
quiz efter lektionen

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

🗃️ Lektioner

	Projektets namn	Lärda koncept	Lärandemål	Länkad lektion	Författare
01	Komma igång	Introduktion till programmering och verktyg för yrket	Lär dig grunderna bakom de flesta programmeringsspråk och om programvara som hjälper professionella utvecklare att utföra sitt arbete	Introduktion till programmeringsspråk och verktyg för yrket	Jasmine
02	Komma igång	Grunderna i GitHub, inklusive att arbeta i team	Hur man använder GitHub i ditt projekt, hur man samarbetar med andra på en kodbas	Introduktion till GitHub	Floor
03	Komma 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 en applikations logikflöde	Funktioner och metoder	Jasmine och Christopher
06	JS Grunder	Att fatta beslut med JS	Lär dig hur du skapar villkor i din kod med hjälp av beslutsmetoder	Att fatta beslut	Jasmine
07	JS Grunder	Arrayer och loopar	Arbeta med data med hjälp av 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 en layout	Introduktion till HTML	Jen
09	Terrarium	CSS i praktiken	Bygg CSS för att styla online-terrarium, med fokus på grunderna i CSS inklusive att göra sidan responsiv	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 hur du använder tangentbordshändelser för att driva logiken i din JavaScript-app	Händelsedriven programmering	Christopher
12	Green Browser Extension	Arbeta med webbläsare	Lär dig hur webbläsare fungerar, deras historia och hur man skapar de första elementen i en webbläsartillägg	Om webbläsare	Jen
13	Green Browser Extension	Bygga ett formulär, anropa ett API och lagra variabler i lokal lagring	Bygg JavaScript-elementen i ditt webbläsartillägg för att anropa ett API med variabler som lagras i lokal lagring	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 några optimeringar för att förbättra	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 hjälp av kartesiska koordinater och Canvas API	Flytta element runt	Chris
18	Space Game	Kollisionsdetektering	Få element att kollidera och reagera på varandra med hjälp av tangenttryckningar och tillhandahåll en cooldown-funktion för att säkerställa spelets prestanda	Kollisionsdetektering	Chris
19	Space Game	Hålla poäng	Utför matematiska beräkningar baserat på spelets status och prestanda	Hålla poäng	Chris
20	Space Game	Avsluta och starta om spelet	Lär dig om att avsluta och starta om spelet, inklusive att städa upp tillgångar och återställa variabelvärden	Slutvillkor	Chris
21	Banking App	HTML-mallar och rutter i en webbapp	Lär dig hur du skapar grunden för en flersidig webbplats arkitektur med hjälp av routing och HTML-mallar	HTML-mallar och rutter	Yohan
22	Banking App	Bygg ett inloggnings- och registreringsformulär	Lär dig att bygga formulär och hantera valideringsrutiner	Formulär	Yohan
23	Banking App	Metoder för att hämta och använda data	Hur data flödar in och ut ur din app, hur man hämtar den, lagrar den och hanterar den	Data	Yohan
24	Banking App	Koncept för tillståndshantering	Lär dig hur din app behåller tillstånd och hur man hanterar det programmässigt	Tillståndshantering	Yohan
25	Browser/VScode Code	Arbeta med VScode	Lär dig att använda en kodredigerare	Använd VScode Code Editor	Chris
26	AI Assistants	Arbeta med AI	Lär dig att bygga din egen AI-assistent	AI-assistentprojekt	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 används av dagens webbutvecklare. Studenter kommer att få möjlighet att utveckla praktisk erfarenhet genom att bygga ett skrivspel, ett virtuellt terrarium, ett miljövänligt webbläsartillägg, ett spel i stil med Space Invaders och en bankapp för företag. Vid slutet av serien kommer studenterna att ha fått en solid förståelse för webbutveckling.

🎓 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 är kopplat till projekt görs processen mer engagerande för studenter och koncepten blir lättare att komma ihåg. Vi har också skrivit flera startlektioner i JavaScript-grunder för att introducera koncept, tillsammans med en video från "Beginners Series to: JavaScript" samlingen av videotutorials, några av vars författare bidrog till denna läroplan.

Dessutom sätter ett lågintensivt quiz före en klass studentens intention mot att lära sig ett ämne, medan ett andra quiz efter klassen säkerställer ytterligare retention. Denna läroplan är utformad för att vara flexibel och rolig och kan tas i sin helhet eller delvis. Projekten börjar små och blir alltmer komplexa vid slutet av den 12-veckors cykeln.

Även om vi medvetet har undvikit att introducera JavaScript-ramverk för att koncentrera oss på de grundläggande färdigheter som behövs som webbutvecklare innan vi antar ett ramverk, skulle ett bra nästa steg efter att ha slutfört denna läroplan vara att lära sig om Node.js via en annan samling av videor: "Beginner Series to: Node.js".

Besök våra Code of Conduct och Contributing riktlinjer. Vi välkomnar din konstruktiva feedback!

🧭 Offlineåtkomst

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 root-mappen av detta repo. Webbplatsen kommer att serveras på port 3000 på din localhost: localhost:3000.

📘 PDF

En PDF av alla lektioner finns här.

🎒 Andra kurser

Vårt team producerar andra kurser! Kolla in:

Azure / Edge / MCP / Agents

Generativ AI-serie

Grundläggande lärande

Copilot-serie

Få hjälp

Om du fastnar eller har frågor om att bygga AI-appar, gå med i:

Om du har produktfeedback eller stöter på problem under utvecklingen, besök:

Licens

Detta repository är licensierat under MIT-licensen. Se LICENSE-filen 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, bör det noteras att automatiserade översättningar kan innehålla fel eller felaktigheter. 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 eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.

32 KiB Raw Blame History