Web-Dev-For-Beginners/translations/sv

Webbprogrammering för nybörjare - En läroplan

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

1. Gaffla (Fork) arkivet: Klicka
2. Klona arkivet: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Gå med i Azure AI Foundry Discord och träffa experter samt andra utvecklare

🌐 Fler språkstöd

Stöds via GitHub Action (Automatiskt & Alltid uppdaterat)

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

Vill du hellre klona lokalt?

Det här arkivet inkluderar över 50 språköversättningar vilket betydligt ö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 önskar att få stöd för ytterligare översättningsspråk se listan här

🧑‍🎓 Är du student?

Besök Student Hub-sidan där du hittar nybörjarresurser, studentpaket och till och med sätt att få ett gratiscertifikat. Detta är sidan du vill bokmärka och kolla regelbundet eftersom innehållet byts ut varje månad.

📣 Meddelande - Nya GitHub Copilot Agent-lägesutmaningar 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 GitHub Copilot och Agent-läget. 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.

📣 Meddelande - Nytt projekt att bygga med generativ AI

Nytt AI-assistentprojekt precis tillagt, kolla in projektet

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

Missa inte vår nya Generative AI-läroplan!

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 resa i tiden!

Varje lektion inkluderar en uppgift att slutföra, en kunskapskontroll och en utmaning som guidar dig genom ämnen som:

• Prompting och prompt-engineering
• Text- och bildapplikationsgenerering
• Sökapplikationer

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 du kan använda den här läroplanen. 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, slutföra de olika aktiviteterna och kontrollera din förståelse med ett efterföreläsningsquiz.

För att förbättra din inlärningsupplevelse, anslut med dina kamrater för att arbeta på projekten tillsammans! Diskussioner uppmuntras i vårt diskussionsforum där vårt team av moderatorer finns till hands 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.

📋 Sätta upp din miljö

Den här läroplanen har en utvecklingsmiljö redo 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 behov av installationer), eller lokalt på din dator med en textredigerare som Visual Studio Code.

Skapa ditt arkiv

För att enkelt spara ditt arbete rekommenderas att du skapar din egen kopia av detta arkiv. Du kan göra det 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 stegen:

1. Gaffla arkivet: Klicka på "Fork"-knappen uppe till höger på denna sida.
2. Klona arkivet: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Köra läroplanen i en Codespace

I din kopia av arkivet som du skapade klickar du på knappen Code och väljer Open with Codespaces. Det skapar en ny Codespace där du kan arbeta.

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, guidar dig genom olika alternativ för var och en av dessa verktyg så att du kan välja det som passar dig bäst.

Vi rekommenderar att använda Visual Studio Code som din redigerare, som även har en inbyggd Terminal. Du kan ladda ner Visual Studio Code här.

1. Klona ditt arkiv till din dator. Du kan göra detta genom att klicka på Code-knappen och kopiera URL:en:

   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>
   

2. Öppna mappen i Visual Studio Code. Det kan du göra genom att klicka på Arkiv > Öppna mapp 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

📂 Varje lektion innehåller:

• valfri sketchnote
• valfri kompletterande video
• quiz som uppvärmning före lektion
• skriftlig lektion
• för projektbaserade lektioner, steg-för-steg-guider för att bygga projektet
• kunskapskontroller
• en utmaning
• kompletterande läsning
• uppgift
• quiz efter lektionen

En notis om quiz: Alla quiz finns i mappen Quiz-app, 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-app-mappen.

🗃️ Lektioner

	Projektnamn	Undervisade begrepp	Lärandemål	Länkad Lektion	Författare
01	Komma igång	Introduktion till programmering och verktyg	Lär dig grunderna bakom de flesta programmeringsspråk och om mjukvara 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 sitt 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åtkomst	Grundläggande tillgänglighet	Christopher
04	JS Basics	JavaScripts datatyper	Grunderna i JavaScripts datatyper	Datatyper	Jasmine
05	JS Basics	Funktioner och metoder	Lär dig om funktioner och metoder för att hantera applikationens logiska flöde	Funktioner och metoder	Jasmine och Christopher
06	JS Basics	Beslutsfattande med JS	Lär dig skapa villkor i din kod med beslutsfattande metoder	Beslutsfattande	Jasmine
07	JS Basics	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 layout	Introduktion till HTML	Jen
09	Terrarium	CSS i praktiken	Bygg CSS för att styla online-terrarium, med fokus på CSS-grunder inklusive responsiv design av sidan	Introduktion till CSS	Jen
10	Terrarium	JavaScript Closures, DOM-manipulation	Bygg JavaScript för att göra terrariet funktionellt som en 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 tangentbords-händelser 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 upp de första delarna av en webbläsartillägg	Om webbläsare	Jen
13	Green Browser Extension	Bygga formulär, anropa API och lagra variabler i lokal lagring	Bygg JavaScript-elementen i din webbläsartillägg för att anropa ett API med variabler lagrade lokalt	APIer, formulär och lokal lagring	Jen
14	Green Browser Extension	Bakgrundsprocesser i webbläsaren, webbutförande	Använd webbläsarens bakgrundsprocesser för att hantera tilläggsikonen; lär dig om webbutförande och optimeringar för att göra	Bakgrundsuppgifter och prestanda	Jen
15	Space Game	Mer avancerad spelutveckling med JavaScript	Lär dig om arv med både klasser och komposition och 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å 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 tangenttryckningar och ge en cooldown-funktion för att garantera spelets prestanda	Kollisionsdetektion	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 återstarta spelet	Lär dig om att avsluta och återstarta spelet, inklusive att rensa tillgångar och nollställa variabelvärden	Avslutningsvillkor	Chris
21	Banking App	HTML-mallar och routing i en webbapp	Lär dig skapa grunden för en flersidig webbplats arkitektur med routing och HTML-mallar	HTML-mallar och routing	Yohan
22	Banking App	Bygga inloggnings- och registreringsformulär	Lär dig om 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 du hämtar den, lagrar den och gör dig av med den	Data	Yohan
24	Banking App	Begrepp om state management	Lär dig hur din app behåller state och hur du hanterar det programmatiskt	State management	Yohan
25	Browser/VScode Code	Arbeta med VScode	Lär dig använda en kodredigerare	Använd VScode-kodredigerare	Chris
26	AI Assistants	Arbeta med AI	Lär dig bygga din egen AI-assistent	AI-assistentprojekt	Chris

🏫 Pedagogik

Vår läroplan är utformad med två centrala 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. Studenterna får möjlighet att utveckla praktisk erfarenhet genom att bygga ett skrivspel, virtuellt terrarium, miljövänlig webbläsartillägg, space-invader-stil spel, 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 detta läroprogram som en Lärväg på Microsoft Learn!

Genom att säkerställa att innehållet matchar projekt görs processen mer engagerande för studenter och konceptens retention ökar. Vi skrev också flera startlektioner i JavaScript-grunder för att introducera begrepp, ihopkopplade med en video från "Beginners Series to: JavaScript"-samlingen av videotutorials, där några av författarna bidragit till denna läroplan.

Dessutom sätter ett lågintensivt quiz före en lektion studentens intention att lära sig ett ämne, medan ett andra quiz efter lektion 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å och blir alltmer komplexa mot 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 man går vidare till ett ramverk, skulle ett bra nästa steg efter denna läroplan vara att lära sig om Node.js via en annan samling videor: "Beginner Series to: Node.js".

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

🧭 Offline-åtkomst

Du kan köra denna dokumentation offline med Docsify. Forka detta repo, installera Docsify på din lokala dator, och skriv sedan docsify serve i roten av detta repo. Webbplatsen kommer att serveras på port 3000 på din lokala värd: 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 gemenskapen av andra lärande 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 hittar fel under byggandet, besök:

Licens

Detta förvar ä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, vänligen var medveten om att automatiska översättningar kan innehålla fel eller brister. Det ursprungliga dokumentet på dess modersmål ska 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.