Web-Dev-For-Beginners/translations/sv

Webbuteckling för nybörjare - Ett läroplan

Lär dig grunderna i webbuteckling med vår 12-veckors omfattande kurs av Microsoft Cloud Advocates. Varje av de 24 lektionerna dyker ner 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 kunskapsbevaring med vår effektiva projektbaserade pedagogik. Börja din kodningsresa idag!

Gå med i Azure AI Foundry Discord och möt experter och andra utvecklare.

Följ dessa steg för att komma igång med att använda dessa resurser:

1. Fork:a Repositoriet: Klicka
2. Klona Repositoriet: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Gå med i Azure AI Foundry Discord och möt experter och andra utvecklare

🌐 Flerspråkigt stöd

Stöds via GitHub Action (Automatiserat och 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 | 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 repository inkluderar 50+ språköversättningar vilket avsevärt ökar nedladdningsstorleken. För att klona utan översättningar, använd sparsamt checkout:

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 fler översättningar, finns de stödda språken 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 certifikat-voucher. Detta är sidan du vill bokmärka och kolla av då och då eftersom vi byter 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 GitHub Copilot och Agent-läget. Om du inte har använt Agent-läget tidigare kan det inte bara generera text utan kan även skapa och redigera filer, köra kommandon och mer.

📣 Meddelande - Nytt projekt att bygga med Generativ AI

Nytt AI-assistentprojekt precis tillagt, kolla in det projektet

📣 Meddelande - Ny läroplan om Generativ AI för JavaScript släpptes just

Missa inte vår nya Generativ 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öljeslagarapp.
• Rolig och engagerande berättelse, du kommer tidsresa!

Varje lektion inkluderar en uppgift att slutföra, en kunskapskontroll och en utmaning för att guida dig i att lära dig ämnen som:

• Prompting och promptengineering
• 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 på hur ni kan använda denna läroplan. Vi tar gärna emot er feedback i vårt diskussionsforum!

Studerande, för varje lektion, börja med ett för-lektionsquiz och fortsätt sedan med att läsa föreläsningsmaterialet, slutföra de olika aktiviteterna och kontrollera din förståelse med ett efter-lektionsquiz.

För att förbättra din inlärningsupplevelse, koppla samman med dina kamrater för att samarbeta med projekten! 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.

📋 Sätta upp 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 installationer), eller lokalt på din dator med en textredigerare som Visual Studio Code.

Skapa ditt repository

För att du enkelt ska kunna spara ditt arbete rekommenderas det att du skapar en egen kopia av detta repository. Du kan göra det 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 läroplanen.

Följ dessa steg:

1. Fork:a Repositoriet: Klicka på knappen "Fork" längst upp till höger på sidan.
2. Klona Repositoriet: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Köra läroplanen 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 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 för yrket, går igenom olika val för varje av dessa verktyg så att du kan välja vad som passar dig bäst.

Vår rekommendation är 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 repository 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, ersätt <your-repository-url> med URL:en du just 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ä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 skissnote
• valfri kompletterande video
• för-lektions uppvärmningsquiz
• skriftlig lektion
• för projektbaserade lektioner, steg-för-steg guiden om hur man bygger projektet
• kunskapskontroller
• en utmaning
• kompletterande läsning
• uppgift
• post-lektionsquiz

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

	Projekt Namn	Begrepp som lärs ut	Lärandemål	Länkad Lektion	Författare
01	Komma igång	Introduktion till programmering och verktyg	Lära sig de grundläggande principerna 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	Grundläggande GitHub, inklusive samarbete i team	Hur man använder GitHub i sitt projekt, hur man samarbetar med andra i 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 Grundläggande	JavaScript datatyper	Grunderna i JavaScript-datatyper	Datatyper	Jasmine
05	JS Grundläggande	Funktioner och metoder	Lär dig om funktioner och metoder för att hantera applikationens logik	Funktioner och Metoder	Jasmine och Christopher
06	JS Grundläggande	Beslutsfattande med JS	Lär dig att skapa villkor i din kod med hjälp av beslutsfattandemetoder	Beslutsfattande	Jasmine
07	JS Grundläggande	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å 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 responsiv sida	Introduktion till CSS	Jen
10	Terrarium	JavaScript Closures, DOM-manipulation	Bygg JavaScript för att göra terrariet som ett drag/drop-gränssnitt, med fokus på closures och DOM-manipulation	JavaScript Closures, DOM-manipulation	Jen
11	Skrivspel	Bygg ett skrivspel	Lär dig använda tangentbordevenemang för att styra logiken i din JavaScript-app	Händelsestyrd programmering	Christopher
12	Grön webbläsartillägg	Arbeta med webbläsare	Lär dig hur webbläsare fungerar, deras historia och hur man skapar de första elementen i ett webbläsartillägg	Om webbläsare	Jen
13	Grön webbläsartillägg	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 lagrade i lokal lagring	API:er, formulär och lokal lagring	Jen
14	Grön webbläsartillägg	Bakgrundsprocesser i webbläsaren, webbprestanda	Använd webbläsarens bakgrundsprocesser för att hantera tilläggets ikon; lär dig om webbprestanda och optimeringar	Bakgrundsuppgifter och prestanda	Jen
15	Rymdspel	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	Rymdspel	Rita på canvas	Lär dig om Canvas API, som används för att rita element på skärmen	Rita på Canvas	Chris
17	Rymdspel	Flytta element runt på skärmen	Upptäck hur element kan få rörelse med kartesiska koordinater och Canvas API	Flytta element	Chris
18	Rymdspel	Kollisiondetektion	Få element att kollidera och reagera på varandra med tangenttryckningar och ge en cooldown-funktion för att säkra prestanda i spelet	Kollisiondetektion	Chris
19	Rymdspel	Poängräkning	Utför matematiska beräkningar baserade på spelets status och prestation	Poängräkning	Chris
20	Rymdspel	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	Avslutningsvillkor	Chris
21	Bankapp	HTML-mallar och rutter i en webbapp	Lär dig hur man skapar stommen för en flersidig webbplats arkitektur med routing och HTML-mallar	HTML-mallar och rutter	Yohan
22	Bankapp	Bygg inloggnings- och registreringsformulär	Lär dig om att 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 din app, hur man hämtar, lagrar och kassera det	Data	Yohan
24	Bankapp	Begrepp om 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 bygga din egen AI-assistent	AI Assistant projekt	Chris

🏫 Pedagogik

Vårt läroplan är utformat med två viktiga pedagogiska principer:

• projektbaserat lärande
• frekventa quiz

Programmet lär ut grunderna i JavaScript, HTML och CSS, samt de senaste verktyg och tekniker som webb utvecklare använder idag. Studenter kommer att få möjlighet att utveckla praktisk erfarenhet genom att skapa ett skrivspel, virtuellt terrarium, miljövänligt webbläsartillägg, rymdinspirerat spel och en bankapp för företag. I slutet av serien kommer studenterna att ha fått en gedigen förståelse för webbutveckling.

🎓 Du kan ta de första lektionerna i detta läroplan som en Lärstig på Microsoft Learn!

Genom att säkerställa att innehållet är kopplat till projekt blir processen mer engagerande för elever och konceptbevarandet stärks. Vi har också skrivit flera introduktionslektioner i JavaScript-grunder för att introducera koncepten, ihop med en video från "Beginners Series to: JavaScript" samling av videotutorials, där några av författarna bidragit till detta läroplan.

Dessutom sätter ett lågintensivt quiz före en klassning elevens intention att lära sig ett ämne, medan ett andra quiz efter klassen säkerställer ytterligare beständighet. Detta läroplan är designat för att vara flexibelt och roligt och kan tas i sin helhet eller delvis. Projekten börjar små och blir alltmer komplexa mot slutet av en 12-veckors cykel.

Vi har medvetet undvikit att introducera JavaScript-ramverk för att koncentrera oss på de grundläggande färdigheter som behövs som webb utvecklare innan man tar till sig ett ramverk, ett bra nästa steg efter att ha slutfört detta läroplan är att lära sig om Node.js via en annan samling videor: "Beginner Series to: Node.js".

Besök våra riktlinjer för Uppförandekod och Bidrag. Vi välkomnar din konstruktiva feedback!

🧭 Offline tillgång

Du kan köra denna dokumentation offline genom att använda Docsify. Fork'a detta repo, installera Docsify på din lokala maskin, och kör sedan docsify serve i rotmappen i detta repo. 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

---

Kärninlärning

---

Copilot-serie

Få hjälp

Om du kör fast eller har några frågor om att bygga AI-appar. Gå med andra elever och erfarna utvecklare i diskussioner om MCP. Det är en stöttande gemenskap där frågor är välkomna och kunskap delas fritt.

Om du har produktfeedback eller hittar fel under utvecklingen besök:

Licens

Detta arkiv ä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, var vänlig notera 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 kan uppstå vid användning av denna översättning.