Web-Dev-For-Beginners/translations/sv

Webb utveckling för nybörjare - En läroplan

Lär dig grunderna i webb utveckling med vår 12-veckors omfattande kurs av Microsoft Cloud Advocates. Var och en 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 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 att använda dessa resurser:

1. Forka Repositoryt: Klicka
2. Klona Repositoryt: 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 repository innehåller över 50 språköversättningar vilket ökar nedladdningsstorleken avsevärt. För att klona utan översättningar, använd sparsamt utcheckning:

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 vill ha ytterligare språkstöd 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 certifikatvoucher. Detta är sidan du vill bokmärka och kolla in då och då eftersom vi uppdaterar 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 använt Agent-läget tidigare kan det inte bara generera text, utan även skapa och redigera filer, köra kommandon och mer.

📣 Meddelande - Nytt projekt att bygga med Generativ AI

Nytt AI-assistentprojekt just tillagt, kolla in det projektet

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

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 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 som guidar dig i att lära dig ämnen som:

• Prompting och promptteknik
• Text- och bildappsgenerering
• Sökappar

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 man använder denna läroplan. 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 efterföreläsningsquizet.

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

📋 Ställa in din miljö

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 miljö utan behov av installation), 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 läroplanen.

Följ dessa steg:

1. Forka Repositoryt: Klicka på knappen "Fork" uppe i högra hörnet på denna sida.
2. Klona Repositoryt: 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å knappen Code och välj Open with Codespaces. Detta kommer att skapa 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, 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.

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, där du byter ut <your-repository-url> mot 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 tillägg för Visual Studio Code:

• 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:

• valfritt skissnotat
• valfri kompletterande video
• värmande quiz före lektionen
• skriven 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 notering om quiz: Alla quiz finns i Quiz-app-mappen, totalt 48 quiz med tre frågor vardera. De finns tillgängliga här och quizappen kan köras lokalt eller distribueras till Azure; följ instruktionerna i quiz-app-mappen.

🗃️ Lektioner

	Projektnamn	Undervisade koncept	Lärandemål	Länkad lektion	Författare
01	Kom igång	Introduktion till programmering och verktyg	Lär dig grundläggande principer bakom de flesta programmeringsspråk och om programvara som hjälper professionella utvecklare	Introduktion till programmeringsspråk och verktyg	Jasmine
02	Kom igång	Grundläggande GitHub, inkluderar arbete i team	Hur du använder GitHub i ditt projekt och samarbetar med andra på en kodbas	Introduktion till GitHub	Floor
03	Kom igång	Tillgänglighet	Lär dig grunderna i webbåtkomst	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 logiken i en applikation	Funktioner och metoder	Jasmine och Christopher
06	JS-grunder	Beslutsfattande med JS	Lär dig skapa villkor i din kod med beslutsmetoder	Beslutsfattande	Jasmine
07	JS-grunder	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å layout	Introduktion till HTML	Jen
09	Terrarium	CSS i praktiken	Bygg CSS för att styla online-terrarium, med fokus på grunder i CSS inklusive responsiv design	Introduktion till CSS	Jen
10	Terrarium	JavaScript closures, DOM-manipulering	Bygg JavaScript för att göra terrariet till en drag-och-släpp-gränssnitt, med fokus på closures och DOM-manipulering	JavaScript-closures, DOM-manipulering	Jen
11	Typing Game	Bygg ett skrivspel	Lär dig använda tangentbords-event 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 skapar basen för ett webbläsartillägg	Om webbläsare	Jen
13	Green Browser Extension	Skapa ett formulär, anropa en API och lagra variabler i lokal lagring	Bygg JavaScript-element i ditt webbläsartillägg för att anropa en API med variabler lagrade i lokal lagring	API:er, formulär och lokal lagring	Jen
14	Green Browser Extension	Bakgrundsprocesser i webbläsaren, webbsida prestanda	Använd webbläsarens bakgrundsprocesser för att hantera tilläggets ikon; lär dig om webbprestanda och vissa optimeringar för att förbättra	Bakgrundsprocesser 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	Kollisiondetektion	Få element att kollidera och reagera på varandra med tangenttryckningar samt skapa en cooldown-funktion för att säkerställa spelets prestanda	Kollisiondetektion	Chris
19	Space Game	Poängräkning	Utför matematiska beräkningar baserade på spelets status och prestation	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 variabler	Avslutsvillkor	Chris
21	Banking App	HTML-mallar och rutter i en webbapp	Lär dig skapa skalmallen för en webbplats med flera sidor med routing och HTML-mallar	HTML-mallar och rutter	Yohan
22	Banking App	Bygg ett inloggnings- och registreringsformulär	Lär dig 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, lagrar och slänger den	Data	Yohan
24	Banking App	Begrepp kring 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 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 i åtanke:

• projektbaserat lärande
• frekventa quiz

Programmet lär ut grunderna i JavaScript, HTML och CSS, samt de senaste verktyg och tekniker som dagens webbutvecklare använder. Studenter får möjlighet att utveckla praktisk erfarenhet genom att bygga ett skrivspel, virtuellt terrarium, miljövänligt webbläsartillägg, rymdinvasionsspel och en bankapp för företag. I slutet av serien kommer studenter att ha fått 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 projekt blir processen mer engagerande för studenter och behållning av koncept förstärks. 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, där några författare bidragit till denna läroplan.

Dessutom sätter ett låginsats-quiz före en lektion studentens avsikt mot att lära sig ett ämne, medan ett andra quiz efter lektionen säkerställer vidare retention. Denna läroplan är designad för att vara flexibel och rolig och kan tas helt eller delvis. Projekten startar små och blir successivt mer komplexa under 12-veckorscykeln.

Även om vi med avsikt undvikit att introducera JavaScript-ramverk för att fokusera på de grundläggande färdigheter som behövs som webbutvecklare innan man tar till sig 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 Uppförandekod och Bidragsgivare 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 dator, och skriv sedan docsify serve i rotmappen för 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ärnlärande

---

Copilot-serie

Få hjälp

Om du fastnar eller har några frågor om att bygga AI-appar. Gå med andra som lär sig och erfarna utvecklare i diskussioner om MCP. Det är ett stödjande community där frågor är välkomna och kunskap delas fritt.

Om du har produktfeedback eller felaktigheter när du bygger, 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, vänligen var medveten om att automatiska översättningar kan innehålla fel eller onoggrheter. Det ursprungliga dokumentet på dess ursprungliga språk bör betraktas som den auktoritativa källan. För viktig 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.