André Frisk
3 years ago
committed by
GitHub
parent
62426563b8
commit
0464525f27
@ -0,0 +1,112 @@
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
# Webbutveckling för nybörjare - läroplanen
|
||||
|
||||
Azure Cloud Advocates på Microsoft är glada att kunna erbjuda en 12-veckors, 24-lektioners läroplan som handlar om JavaScript, CSS och HTML-grunderna. Varje lektion innehåller quiz före och efter lektionen, skriftliga instruktioner för att slutföra lektionen, lösningar, en uppgift och mer. Vår projektbaserade pedagogik får dig att lära dig samtidigt som du bygger ett beprövat sätt för nya färdigheter att "fastna".
|
||||
|
||||
**Hjärtligt tack till våra författare Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees och sketchnote-konstnären Tomomi Imura!**
|
||||
|
||||
# Är du en student?
|
||||
|
||||
Kom igång med följande resurser:
|
||||
|
||||
- [Student Hub-sida](https://docs.microsoft.com/en-gb/learn/student-hub?WT.mc_id=academic-13441-cxa) På den här sidan hittar du nybörjarresurser, studentpaket och även sätt att få ett gratis certifikat. Det här är en sida som du vill lägga till som bokmärke och kontrollera då och då eftersom vi byter ut innehåll minst en gång i månaden.
|
||||
- [Microsoft Student Learn-ambassadörer](https://studentambassadors.microsoft.com?WT.mc_id=academic-13441-cxa) Gå med i en global community av studentambassadörer, det här kan vara din väg till Microsoft
|
||||
|
||||
# Kom igång
|
||||
|
||||
> **Lärare**, vi har [inkluderat några förslag](for-teachers.sv.md) om hur man använder den här läroplanen. Vi skulle uppskatta din feedback [i vårt diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||
|
||||
> **[Studenter](https://aka.ms/student-page)**, för att använda den här läroplanen på egen hand, dela hela repot och slutför övningarna på egen hand, börja med ett quiz före föreläsningen, därefter gå igenom föreläsningen och slutföra resten av aktiviteterna. Försök att skapa projekten genom att förstå lektionerna istället för att kopiera lösningskoden; den koden är dock tillgänglig i /solutions-mapparna i varje projektorienterad lektion. En annan idé skulle vara att bilda en studiegrupp med vänner och gå igenom innehållet tillsammans. För ytterligare studier rekommenderar vi [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) och genom att titta på videorna som nämns nedan.
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSII)
|
||||
|
||||
Gif av [Mohit Jaisal](https://linkedin.com/in/mohitjaisal)
|
||||
|
||||
> 🎥 Klicka på bilden ovan för en video om projektet och personerna som skapade det!
|
||||
|
||||
## Pedagogik
|
||||
|
||||
Vi har valt två pedagogiska grundsatser under uppbyggnaden av denna läroplan: att se till att den är projektbaserad och att den innehåller frekventa quizes. I slutet av den här serien kommer eleverna att ha byggt ett skrivspel, ett virtuellt terrarium, ett "grönt" webbläsartillägg, ett spel av typen "space invaders" och en bankapp av affärstyp, och kommer att ha lärt sig grunderna i JavaScript , HTML och CSS tillsammans med den moderna verktygskedjan för dagens webbutvecklare.
|
||||
|
||||
> 🎓 Du kan ta de första lektionerna i den här läroplanen som en [Inlärningsväg](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) på Microsoft Learn!
|
||||
|
||||
Genom att säkerställa att innehållet stämmer överens med projekt, blir processen mer engagerande för studenter och behållningen av koncept kommer att förstärkas. Vi skrev också flera nybörjarlektioner i JavaScript grunderna för att introducera koncept, ihopkopplade med video från "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)" samling av videohandledningar, vars författare bidrog till den här läroplanen.
|
||||
|
||||
Dessutom ställer ett quiz med låga insatser före en klass studentens avsikt att lära sig ett ämne, medan ett annat quiz efter lektionen säkerställer ytterligare bibehållande. Den här läroplanen har utformats för att vara flexibel och rolig och kan tas helt och hållet eller delvis. Projekten börjar smått och blir allt mer komplext i slutet av 12-veckorscykeln.
|
||||
|
||||
Även om vi avsiktligt 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 för att slutföra den här läroplanen vara att lära oss om Node.js via en annan samling videor: "[Nybörjare" Serie till: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)".
|
||||
|
||||
> Hitta våra riktlinjer för [Code of Conduct](CODE_OF_CONDUCT.md), [Contributing](CONTRIBUTING.md) och [Translation](TRANSLATIONS.md). Vi välkomnar din konstruktiva feedback!
|
||||
|
||||
## Varje lektion innehåller:
|
||||
|
||||
- valfri skissnot
|
||||
- valfri tilläggsvideo
|
||||
- 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
|
||||
- uppdrag
|
||||
- quiz efter lektionen
|
||||
|
||||
> **En notering om quiz**: Alla quiz finns [i den här appen](https://ashy-river-0debb7803.1.azurestaticapps.net/), för totalt 48 quiz med tre frågor vardera. De är länkade inifrån lektionerna men frågesportappen kan köras lokalt; följ instruktionerna i mappen `quiz-app`. De lokaliseras gradvis.
|
||||
|
||||
## Lessons
|
||||
|
||||
| | Projektnamn | Begrepp som lärs ut | Lärandemål | Länkad lektion | Författare |
|
||||
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | Kom igång | Introduktion till programmering och branschens verktyg | Lär dig den grundläggande grunden bakom de flesta programmeringsspråk och om programvara som hjälper professionella utvecklare att göra sitt jobb | [Intro to Programming Languages and Tools of the Trade](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
||||
| 02 | Kom igång | Grunderna i GitHub, inkluderar att arbeta med ett team | Hur man använder GitHub i ditt projekt, hur man samarbetar med andra på en kodbas | [Intro to GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
||||
| 03 | Kom igång | Tillgänglighet | Lär dig grunderna kring webbtillgänglighet | [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
||||
| 04 | JS Basics | JavaScript-datatyper | Grunderna i JavaScript-datatyper | [Data Types](/2-js-basics/1-data-types/README.md) | Jasmine |
|
||||
| 05 | JS Basics | Funktioner och Metoder | Lär dig om funktioner och metoder för att hantera en applikations logikflöde | [Functions and Methods](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
|
||||
| 06 | JS Basics | Ta beslut med JS | Lär dig hur du skapar villkor i din kod med hjälp av beslutsmetoder | [Making Decisions](/2-js-basics/3-making-decisions/README.md) | Jasmine |
|
||||
| 07 | JS Basics | Arrayer och Loopar | Arbeta med data med hjälp av arrayer och loopar i JavaScript | [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
|
||||
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML i Praktiken | Bygg HTML för att skapa ett onlineterrarium, med fokus på att bygga en layout | [Introduction to HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
|
||||
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS i Praktiken | Bygg CSS för att styla onlineterrariet, med fokus på grunderna i CSS inklusive att göra sidan responsiv | [Introduction to CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
|
||||
| 10 | [Terrarium](/3-terrarium/solution/README.md) | JavaScript-förslutningar, DOM-manipulation | Bygg JavaScript för att få terrariet att fungera som ett dra/släpp-gränssnitt, med fokus på stängningar och DOM-manipulation | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
||||
| 11 | [Typing Game](/4-typing-game/solution/README.md) | Bygg ett skrivspel | Lär dig hur du använder tangentbordshändelser för att driva logiken i din JavaScript-app | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher |
|
||||
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Arbeta med Webbläsare | Lär dig hur webbläsare fungerar, deras historik och hur du bygger de första delarna av ett webbläsartillägg | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen |
|
||||
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Bygg 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 hjälp av variabler som lagras i lokal lagring | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
|
||||
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Bakgrundsprocesser i webbläsaren, webbprestanda | Använd webbläsarens bakgrundsprocesser för att hantera tilläggets ikon; lär dig mer om webbprestanda och några optimeringar som du kan göra | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
||||
| 15 | [Space Game](/6-space-game/solution/README.md) | Mer avancerad spelutveckling med JavaScript | Lär dig om Inheritance med både klasser och composition och Pub/Sub-mönstret, som förberedelse för att bygga ett spel | [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md) | Chris |
|
||||
| 16 | [Space Game](/6-space-game/solution/README.md) | Rita till duk | Lär dig mer om Canvas API, som används för att rita element till en skärm | [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
||||
| 17 | [Space Game](/6-space-game/solution/README.md) | Flytta element runt skärmen | Upptäck hur element kan få rörelse med hjälp av de kartesiska koordinaterna och Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris |
|
||||
| 18 | [Space Game](/6-space-game/solution/README.md) | Kollisionsdetektering |Få element att kollidera och reagera på varandra med knapptryckningar och tillhandahåll en nedkylningsfunktion för att säkerställa spelets prestanda | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
|
||||
| 19 | [Space Game](/6-space-game/solution/README.md) | Hålla poäng | Utför matematiska beräkningar baserat på spelets status och prestanda | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris |
|
||||
| 20 | [Space Game](/6-space-game/solution/README.md) | Avsluta och starta om spelet | Lär dig mer om att avsluta och starta om spelet, inklusive att rensa upp tillgångar och återställa variabelvärden | [The Ending Condition](/6-space-game/6-end-condition/README.md) | Chris |
|
||||
| 21 | [Banking App](/7-bank-project/solution/README.md) | HTML-mallar och Rutter i en webbapp | Lär dig hur du skapar byggnadsställningen för en flersidig webbplatsarkitektur med hjälp av routing och HTML-mallar | [HTML Templates and Routes](/7-bank-project/1-template-route/README.md) | Yohan |
|
||||
| 22 | [Banking App](/7-bank-project/solution/README.md) | Skapa ett inloggnings- och registreringsformulär | Lär dig mer om att bygga formulär och överlämna valideringsrutiner | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
|
||||
| 23 | [Banking App](/7-bank-project/solution/README.md) | 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 gör sig av med den | [Data](/7-bank-project/3-data/README.md) | Yohan |
|
||||
| 24 | [Banking App](/7-bank-project/solution/README.md) | Konceptet för tillståndshantering | Lär dig hur din app behåller tillstånd och hur du hanterar den programmatiskt | [State Management](/7-bank-project/4-state-management/README.md) | Yohan |
|
||||
|
||||
|
||||
## Offlineåtkomst
|
||||
|
||||
Du kan köra den här dokumentationen offline genom att använda [Docsify](https://docsify.js.org/#/). Dela detta repo, [installera Docsify](https://docsify.js.org/#/quickstart) på din lokala dator, och skriv sedan `docsify serve` i rotmappen för detta repo. Webbplatsen kommer att köras på port 3000 på din lokala värd: `localhost:3000`.
|
||||
|
||||
## PDF
|
||||
|
||||
En PDF med alla lektionerna finns [här](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)
|
||||
|
||||
## Andra läroplaner
|
||||
|
||||
Vårt team tar fram andra läroplaner! Kolla in:
|
||||
|
||||
- [Machine Learning for Beginners](https://aka.ms/ml-beginners)
|
||||
- [IoT for Beginners](https://aka.ms/iot-beginners)
|
||||
- [Data Science for Beginners](https://aka.ms/datascience-beginners)
|
||||
- [AI for Beginners](https://aka.ms/ai-beginners)
|
||||
Loading…
Reference in new issue