Web-Dev-For-Beginners/translations/sv

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

Lär dig grunderna i webbutveckling med vår omfattande 12-veckors kurs från 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. Delta i quiz, diskussioner och praktiska uppgifter. Förbättra dina färdigheter och optimera din kunskapsinhämtning med vår effektiva projektbaserade pedagogik. På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:

1. Forka 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 och andra utvecklare

🌐 Stöd för flera språk

Stöds via GitHub Action (Automatiserat & 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

Föredrar du att klona lokalt?

Detta arkiv innehåller över 50 språköversättningar vilket avsevärt ö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 genomföra kursen med en mycket snabbare nedladdning.

Om du önskar fler stödda översättningsspråk finns de listade 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 gratis certifikatgiltighetsbevis. Detta är sidan du vill bokmärka och kolla in då och då eftersom vi byter ut innehåll 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 hjälp av GitHub Copilot och Agent-läget. Om du inte har använt Agent-läget tidigare kan det inte bara generera text utan även skapa och redigera filer, köra kommandon med mera.

📣 Meddelande - Nytt projekt att bygga med Generativ AI

Nytt AI-assistentprojekt tillagt, kolla in 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 grunderna till RAG.
• Interagera med historiska karaktärer med GenAI och vår medföljande app.
• Rolig och engagerande berättelse, 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:

• Promptning och promptteknik
• Text- och bildappsgenerering
• 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 om hur ni kan använda denna läroplan. Vi tar gärna emot er 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 olika aktiviteter och kontrollera din förståelse med ett efterföreläsningsquiz.

För att förbättra din lärandeupplevelse, koppla ihop dig med dina kurskamrater 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.

📋 Konfigurera din miljö

Denna läroplan har en utvecklingsmiljö redo att användas! När du börjar kan du välja att köra läroplanen i en Codespace (en webbläsarbaserad miljö utan installationskrav), 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å knappen Use this template högst upp på sidan. Detta skapar ett nytt arkiv i ditt GitHub-konto med en kopia av läroplanen.

Följ dessa steg:

1. Forka arkivet: Klicka på knappen "Fork" 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 detta arkiv som du skapade, klicka på knappen Code 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 varje verktyg så att du kan välja det som passar dig bäst.

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

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

   CodeSpace Öppna sedan Terminal inom Visual Studio Code och kör följande kommando, byt ut <your-repository-url> mot den URL du precis kopierade:

   git clone <your-repository-url>
   

2. Öppna mappen i Visual Studio Code. Du kan göra detta genom att klicka på File > Open Folder och välj 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 att skriva kod snabbare

📂 Varje lektion innehåller:

• valfri sketchnote
• valfri kompletterande video
• förberedande quiz 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 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-app mappen.

🗃️ Lektioner

	Projektnamn	Begrepp som lärs ut	Lärandemål	Länkat lektion	Författare
01	Komma igång	Introduktion till programmering och verktyg	Lär dig de grundläggande principerna bakom de flesta programmeringsspråk och om mjukvara som hjälper professionella utvecklare	Intro to Programming Languages and Tools of the Trade	Jasmine
02	Komma igång	Grundläggande GitHub, inklusive att arbeta i team	Hur du använder GitHub i ditt projekt, hur man samarbetar med andra på en kodbas	Intro to GitHub	Floor
03	Komma igång	Tillgänglighet	Lär dig grunderna i webbtillgänglighet	Accessibility Fundamentals	Christopher
04	JS Grundläggande	JavaScript-datatyper	Grunderna i JavaScript-datatyper	Data Types	Jasmine
05	JS Grundläggande	Funktioner och metoder	Lär dig om funktioner och metoder för att hantera ett programs logikflöde	Functions and Methods	Jasmine och Christopher
06	JS Grundläggande	Beslutsfattande med JS	Lär dig skapa villkor i din kod med hjälp av beslutsfattandemetoder	Making Decisions	Jasmine
07	JS Grundläggande	Arrayer och loopar	Arbeta med data med arrayer och loopar i JavaScript	Arrays and Loops	Jasmine
08	Terrarium	HTML i praktiken	Bygg HTML för att skapa ett online-terrarie, med fokus på att bygga layout	Introduction to HTML	Jen
09	Terrarium	CSS i praktiken	Bygg CSS för att styla online-terrariet, med fokus på grundläggande CSS inklusive att göra sidan responsiv	Introduction to CSS	Jen
10	Terrarium	JavaScript Closures, DOM-manipulation	Bygg JavaScript för att göra terrariet som en drag/drop-gränssnitt, med fokus på closures och DOM-manipulation	JavaScript Closures, DOM manipulation	Jen
11	Typing Game	Skapa ett skrivspel	Lär dig hur man använder tangentbords-händelser för att driva logiken i din JavaScript-app	Event-Driven Programming	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	About Browsers	Jen
13	Green Browser Extension	Bygga ett formulär, anropa ett API och spara variabler lokalt	Bygg JavaScript-elementen i din webbläsartillägg för att anropa ett API med variabler som lagras lokalt	APIs, Forms, and Local Storage	Jen
14	Green Browser Extension	Bakgrundsprocesser i webbläsaren, webbprestanda	Använd webbläsarens bakgrundsprocesser för att hantera tilläggsikonen; lär dig om webbprestanda och optimeringar	Background Tasks and Performance	Jen
15	Space Game	Mer avancerad spelutveckling med JavaScript	Lär dig om arv med både klasser och sammansättning samt Pub/Sub-mönstret, som förberedelse för att bygga ett spel	Introduction to Advanced Game Development	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	Drawing to 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	Moving Elements Around	Chris
18	Space Game	Kollisiondetektion	Få element att kollidera och reagera på varandra med tangentryck samt tillhandahålla en cooldown-funktion för prestanda	Collision Detection	Chris
19	Space Game	Poängräkning	Utför matematiska beräkningar baserat på spelets status och prestanda	Keeping Score	Chris
20	Space Game	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	The Ending Condition	Chris
21	Banking App	HTML-mallar och rutter i en webbapp	Lär dig skapa grunden för en multipage-webbplats arkitektur med routing och HTML-mallar	HTML Templates and Routes	Yohan
22	Banking App	Bygg inloggning och registreringsformulär	Lär dig om att bygga formulär och hantera valideringsrutiner	Forms	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, lagrar och gör sig av med det	Data	Yohan
24	Banking App	Begrepp för tillståndshantering	Lär dig hur din app behåller tillstånd och hur man hanterar det programmässigt	State Management	Yohan
25	Browser/VScode Code	Arbeta med VScode	Lär dig hur man använder en kodredigerare	Use VScode Code Editor	Chris
26	AI Assistants	Arbeta med AI	Lär dig hur man bygger din egen AI-assistent	AI Assistant project	Chris

🏫 Pedagogik

Vårt 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 skapa ett skrivspel, virtuellt terrarium, miljövänlig webbläsartillägg, spel i rymdinvasionsstil 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 Learn Path på Microsoft Learn!

Genom att säkerställa att innehållet stämmer överens med projekten blir processen mer engagerande för studenter och retentionen av begrepp kommer att öka. Vi skrev också flera startlektioner i JavaScript-grunder för att introducera begrepp, parat 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ågintensivt quiz före en lektion studentens intention mot att lära sig ett ämne, medan ett andra quiz efter lektionen säkerställer ytterligare retention. Denna läroplan är designad att vara flexibel och rolig och kan tas i sin helhet eller delvis. Projekten startar små och blir mer komplexa vid slutet av den 12-veckors cykeln.

Medan vi medvetet undvikit att introducera JavaScript-ramverk för att koncentrera oss på de grundläggande färdigheter som behövs som webbutvecklare innan man tar 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 av videor: "Beginner Series to: Node.js".

Besök våra Uppförandekod och Bidragsriktlinjer. Vi välkomnar din konstruktiva feedback!

🧭 Offline-åtkomst

Du kan köra denna dokumentation offline genom att använda Docsify. Forka detta repo, installera Docsify på din lokala dator, och sedan i root-mappen av detta repo, skriv docsify serve. Webbplatsen kommer att serveras på port 3000 på din localhost: 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 / 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 samtal med andra lärande och erfarna utvecklare 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 vid bygget, besök:

Licens

Detta arkiv ä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 vänlig observera 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 vid användning av denna översättning.