localizeflow[bot]
2 weeks ago
parent
5f05a22a96
commit
e2220b8b17
@ -1,45 +1,30 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
|
||||
"translation_date": "2025-08-27T20:04:42+00:00",
|
||||
"original_hash": "bc5c5550f79d10add90ce419ee34abb3",
|
||||
"translation_date": "2026-01-07T01:03:14+00:00",
|
||||
"source_file": "3-terrarium/README.md",
|
||||
"language_code": "fi"
|
||||
}
|
||||
-->
|
||||
# Minun Terraarioni: Projekti HTML:n, CSS:n ja DOM-manipulaation oppimiseen JavaScriptin avulla 🌵🌱
|
||||
## Julkaise Terrariumisi
|
||||
|
||||
Pieni drag and drop -koodimeditaatio. Vähän HTML:ää, JS:ää ja CSS:ää käyttäen voit rakentaa verkkokäyttöliittymän, tyylitellä sen ja lisätä siihen useita haluamiasi vuorovaikutuksia.
|
||||
Voit julkaista Terrariumisi verkossa käyttämällä **Azure Static Web Apps** -palvelua.
|
||||
|
||||
|
||||
1. Tee fork tästä repositoriosta
|
||||
|
||||
# Oppitunnit
|
||||
2. Paina tätä painiketta 👇
|
||||
|
||||
1. [Johdanto HTML:ään](./1-intro-to-html/README.md)
|
||||
2. [Johdanto CSS:ään](./2-intro-to-css/README.md)
|
||||
3. [Johdanto DOM:iin ja JS Closures -toimintoihin](./3-intro-to-DOM-and-closures/README.md)
|
||||
[](https://portal.azure.com/#create/Microsoft.StaticApp)
|
||||
|
||||
## Tekijät
|
||||
|
||||
Kirjoitettu ♥️:lla [Jen Looperin](https://www.twitter.com/jenlooper) toimesta.
|
||||
|
||||
CSS:n avulla luotu terraario on saanut inspiraationsa Jakub Mandran lasipurkki [codepenistä](https://codepen.io/Rotarepmi/pen/rjpNZY).
|
||||
|
||||
Taide on käsin piirretty [Jen Looperin](http://jenlooper.com) toimesta Procreate-sovelluksen avulla.
|
||||
|
||||
## Julkaise Terraariosi
|
||||
|
||||
Voit julkaista terraariosi verkossa käyttämällä Azure Static Web Apps -palvelua.
|
||||
|
||||
1. Haarauta tämä repo
|
||||
|
||||
2. Paina tätä painiketta
|
||||
|
||||
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
|
||||
|
||||
3. Käy läpi ohjattu toiminto sovelluksesi luomiseksi. Varmista, että asetat sovelluksen juuren joko `/solution`-kansioon tai koodipohjasi juureen. Tässä sovelluksessa ei ole API:ta, joten siitä ei tarvitse huolehtia. Haarautettuun repositorioosi luodaan GitHub-kansio, joka auttaa Azure Static Web Apps -rakennuspalveluita rakentamaan ja julkaisemaan sovelluksesi uuteen URL-osoitteeseen.
|
||||
3. Seuraa asennusvelhon ohjeita luodaksesi sovelluksesi.
|
||||
- Aseta **App root** joko `/solution` tai koodipohjasi juureen.
|
||||
- Tässä sovelluksessa ei ole APIa, joten voit ohittaa API:n määrityksen.
|
||||
- `.github`-kansio luodaan automaattisesti auttamaan Azure Static Web Appsia rakentamaan ja julkaisemaan sovelluksesi.
|
||||
|
||||
---
|
||||
|
||||
**Vastuuvapauslauseke**:
|
||||
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Vastuuvapauslauseke**:
|
||||
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Pyrimme tarkkuuteen, mutta ota huomioon, että automaattikäännöksissä saattaa esiintyä virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäiskielellä pidetään virallisena lähteenä. Tärkeissä tiedoissa suositellaan ammattimaisen ihmiskääntäjän käyttöä. Emme ole vastuussa tämän käännöksen käytöstä aiheutuvista väärinymmärryksistä tai tulkinnoista.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -1,261 +1,280 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "63e29f5a308b533df9d70336bbb2e2b8",
|
||||
"translation_date": "2025-11-25T17:54:13+00:00",
|
||||
"original_hash": "fea3a0fceb8ad86fd640c09cf63a2aac",
|
||||
"translation_date": "2026-01-07T01:01:45+00:00",
|
||||
"source_file": "README.md",
|
||||
"language_code": "fi"
|
||||
}
|
||||
-->
|
||||
[](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/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://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://discord.gg/nTYy5BXMWG)
|
||||
[](https://discord.gg/nTYy5BXMWG)
|
||||
|
||||
# Verkkokehitys aloittelijoille - Opetussuunnitelma
|
||||
# Verkkokehitys aloittelijoille - Opetussuunnitelma
|
||||
|
||||
Opi verkkokehityksen perusteet Microsoft Cloud Advocatesin 12 viikon kattavalla kurssilla. Jokainen 24 oppitunnista käsittelee JavaScriptiä, CSS:ää ja HTML:ää käytännön projektien, kuten terraarioiden, selainlaajennusten ja avaruuspelien, kautta. Osallistu visoihin, keskusteluihin ja käytännön tehtäviin. Paranna taitojasi ja optimoi oppimisesi tehokkaalla projektipohjaisella lähestymistavallamme. Aloita koodausmatkasi jo tänään!
|
||||
Opi verkkokehityksen perusteet Microsoft Cloud Advocatesin 12 viikon kattavassa kurssissa. Jokainen 24 oppitunnista syventyy JavaScriptiin, CSS:ään ja HTML:ään käytännön projektien, kuten terrarionien, selainlaajennusten ja avaruuspeliensä kautta. Osallistu tietovisailuihin, keskusteluihin ja käytännön tehtäviin. Kehitä taitojasi ja optimoi oppimisesi tehokkaan projektioppimisen menetelmämme avulla. Aloita koodausmatkasi jo tänään!
|
||||
|
||||
Liity Azure AI Foundry Discord -yhteisöön
|
||||
Liity Azure AI Foundry Discord -yhteisöön
|
||||
|
||||
[](https://discord.gg/nTYy5BXMWG)
|
||||
[](https://discord.gg/nTYy5BXMWG)
|
||||
|
||||
Seuraa näitä ohjeita aloittaaksesi näiden resurssien käytön:
|
||||
1. **Haarauta arkisto**: Klikkaa [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
|
||||
2. **Kloonaa arkisto**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
|
||||
3. [**Liity Azure AI Foundry Discordiin ja tapaa asiantuntijoita ja muita kehittäjiä**](https://discord.com/invite/ByRwuEEgH4)
|
||||
Noudata näitä ohjeita aloittaaksesi näiden resurssien käytön:
|
||||
1. **Forkkaa repositorio**: Klikkaa [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
|
||||
2. **Kloonaa repositorio**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
|
||||
3. [**Liity Azure AI Foundry Discordiin ja tapaa asiantuntijoita sekä muita kehittäjiä**](https://discord.com/invite/ByRwuEEgH4)
|
||||
|
||||
### 🌐 Monikielinen tuki
|
||||
### 🌐 Monikielinen tuki
|
||||
|
||||
#### Tuettu GitHub Actionin kautta (automaattinen ja aina ajan tasalla)
|
||||
#### Tuettu GitHub Actionin kautta (Automaattinen & aina ajan tasalla)
|
||||
|
||||
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
|
||||
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](./README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
|
||||
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
|
||||
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
|
||||
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](./README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
|
||||
|
||||
**Jos haluat lisätä uusia käännöksiä, tuetut kielet löytyvät [täältä](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
|
||||
> **Haluatko kloonata paikallisesti?**
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
> Tämä repositorio sisältää yli 50 kielen käännökset, mikä lisää merkittävästi latauskokoa. Jos haluat kloonata ilman käännöksiä, käytä sparse checkoutia:
|
||||
> ```bash
|
||||
> 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'
|
||||
> ```
|
||||
> Saat kaiken tarvitsemasi kurssin suorittamiseen huomattavasti nopeammalla latauksella.
|
||||
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
|
||||
|
||||
#### 🧑🎓 _Oletko opiskelija?_
|
||||
**Jos haluat lisää tuettuja käännöskieliä, ne on listattu [tässä](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
|
||||
|
||||
Vieraile [**Student Hub -sivulla**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), josta löydät aloitteleville suunnattuja resursseja, opiskelijapaketit ja jopa tapoja saada ilmainen sertifikaattivoucher. Tämä on sivu, jonka haluat tallentaa kirjanmerkkeihin ja tarkistaa säännöllisesti, sillä sisältö vaihtuu kuukausittain.
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
### 📣 Ilmoitus - Uusia GitHub Copilot Agent -haasteita!
|
||||
#### 🧑🎓 _Oletko opiskelija?_
|
||||
|
||||
Uusi haaste lisätty, etsi "GitHub Copilot Agent Challenge 🚀" useimmista luvuista. Tämä on uusi haaste, jonka voit suorittaa GitHub Copilotin ja Agent-tilan avulla. Jos et ole käyttänyt Agent-tilaa aiemmin, se ei vain luo tekstiä, vaan voi myös luoda ja muokata tiedostoja, suorittaa komentoja ja paljon muuta.
|
||||
Vieraile [**Student Hub -sivulla**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), jolta löydät aloittelijan resurssit, opiskelijapaketit ja jopa tapoja saada ilmainen sertifikaattikuponki. Tämä on sivu, jonka haluat lisätä kirjanmerkkeihin ja tarkistaa säännöllisesti, sillä päivitämme sisältöä kuukausittain.
|
||||
|
||||
### 📣 Ilmoitus - _Uusi projekti Generative AI:n avulla_
|
||||
### 📣 Ilmoitus - Uudet GitHub Copilot Agent -tilan haasteet suoritettaviksi!
|
||||
|
||||
Uusi AI Assistant -projekti on juuri lisätty, tutustu siihen [projekti](./09-chat-project/README.md)
|
||||
Uusi haaste lisätty, etsi "GitHub Copilot Agent Challenge 🚀" useimmista luvuista. Tämä on uusi haaste, jonka suoritat GitHub Copilotin ja Agent-tilan avulla. Jos et ole käyttänyt Agent-tilaa aiemmin, se pystyy paitsi tuottamaan tekstiä, myös luomaan ja muokkaamaan tiedostoja, suorittamaan komentoja ja paljon muuta.
|
||||
|
||||
### 📣 Ilmoitus - _Uusi opetussuunnitelma_ Generative AI:sta JavaScriptille julkaistu
|
||||
### 📣 Ilmoitus - _Uusi Generatiivisen tekoälyn projekti_
|
||||
|
||||
Älä missaa uutta Generative AI -opetussuunnitelmaamme!
|
||||
Uusi AI-avustajaprojekti juuri lisätty, tutustu projektiin [tästä](./9-chat-project/README.md)
|
||||
|
||||
Vieraile [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) aloittaaksesi!
|
||||
### 📣 Ilmoitus - _Uusi opetussuunnitelma_ Generatiivisesta tekoälystä JavaScriptille julkaistu
|
||||
|
||||
|
||||
Älä jää paitsi uudesta Generatiivisen AI:n opetussuunnitelmastamme!
|
||||
|
||||
- Oppitunteja, jotka kattavat kaiken perusteista RAG:iin.
|
||||
- Keskustele historiallisten hahmojen kanssa GenAI:n ja kumppanisovelluksemme avulla.
|
||||
- Hauska ja mukaansatempaava tarina, jossa matkustat ajassa!
|
||||
Käy osoitteessa [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) aloittaaksesi!
|
||||
|
||||
|
||||
|
||||
|
||||
Jokainen oppitunti sisältää tehtävän, tietotestin ja haasteen, jotka ohjaavat sinua oppimaan aiheita, kuten:
|
||||
- Kehotus ja kehotustekniikat
|
||||
- Teksti- ja kuvasovellusten luominen
|
||||
- Hakusovellukset
|
||||
- Oppitunnit kattavat kaiken perusteista RAG:iin.
|
||||
- Vuorovaikutus historiallisten hahmojen kanssa GenAI:n ja lisäsovelluksemme kautta.
|
||||
- Hauska ja mukaansatempaava tarinankerronta, matkustat ajassa!
|
||||
|
||||
Vieraile [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) aloittaaksesi!
|
||||
|
||||
|
||||
## 🌱 Aloittaminen
|
||||
|
||||
> **Opettajat**, olemme [lisänneet joitakin ehdotuksia](for-teachers.md) tämän opetussuunnitelman käyttöön. Haluaisimme kuulla palautettanne [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||
Jokaisessa oppitunnissa on tehtävä suoritettavaksi, tietoarviointi ja haaste, jotka ohjaavat sinua oppimaan aiheista kuten:
|
||||
- Kehotteen kirjoittaminen ja kehoteinsinööritys
|
||||
- Teksti- ja kuva-applikaatioiden generointi
|
||||
- Hakusovellukset
|
||||
|
||||
**[Oppijat](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, jokaisessa oppitunnissa aloita ennakkotestillä ja jatka lukemalla oppimateriaali, suorittamalla erilaisia aktiviteetteja ja tarkista ymmärryksesi jälkitestillä.
|
||||
Käy osoitteessa [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) aloittaaksesi!
|
||||
|
||||
Parantaaksesi oppimiskokemustasi, yhdistä voimasi muiden kanssa työskennelläksesi projekteissa yhdessä! Keskustelut ovat tervetulleita [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), jossa moderaattoritiimimme vastaa kysymyksiisi.
|
||||
|
||||
Jatkaaksesi oppimistasi suosittelemme tutustumaan [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) -sivustoon lisämateriaalien löytämiseksi.
|
||||
|
||||
### 📋 Ympäristön asettaminen
|
||||
## 🌱 Aloittaminen
|
||||
|
||||
Tämä opetussuunnitelma sisältää valmiin kehitysympäristön! Aloittaessasi voit valita, haluatko suorittaa opetussuunnitelman [Codespacessa](https://github.com/features/codespaces/) (_selaimessa toimiva ympäristö, ei asennuksia tarvita_) vai paikallisesti tietokoneellasi käyttämällä tekstieditoria, kuten [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
|
||||
> **Opettajat**, olemme [lisänneet joitakin ehdotuksia](for-teachers.md) siitä, miten tätä opetussuunnitelmaa voi käyttää. Haluaisimme saada palautetta [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||
|
||||
#### Luo oma arkistosi
|
||||
Jotta voit helposti tallentaa työsi, suosittelemme luomaan oman kopion tästä arkistosta. Voit tehdä tämän klikkaamalla **Käytä tätä mallia** -painiketta sivun yläosassa. Tämä luo uuden arkiston GitHub-tilillesi kopiona opetussuunnitelmasta.
|
||||
**[Oppijat](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, jokaista oppituntia varten aloita esiluentotestillä ja jatka luentomateriaalin lukemisella, erilaisten aktiviteettien suorittamisella ja tarkista ymmärryksesi jälkiluentotestillä.
|
||||
|
||||
Seuraa näitä ohjeita:
|
||||
1. **Haarauta arkisto**: Klikkaa "Fork"-painiketta tämän sivun oikeassa yläkulmassa.
|
||||
2. **Kloonaa arkisto**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
|
||||
Paranna oppimiskokemustasi yhdistämällä vertaisryhmiesi kanssa projektityöhön! Keskusteluja suositellaan [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), jossa moderaattoritiimimme on valmiina vastaamaan kysymyksiisi.
|
||||
|
||||
#### Opetussuunnitelman suorittaminen Codespacessa
|
||||
Jatkaaksesi opiskelua suosittelemme vahvasti tutustumaan [Microsoft Learniin](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) lisäoppimateriaalien saamiseksi.
|
||||
|
||||
Omassa kopiossasi tästä arkistosta, jonka loit, klikkaa **Code**-painiketta ja valitse **Open with Codespaces**. Tämä luo uuden Codespacen, jossa voit työskennellä.
|
||||
### 📋 Ympäristön pystyttäminen
|
||||
|
||||
|
||||
Tässä opetussuunnitelmassa on valmiiksi määritetty kehitysympäristö! Voit aloittaessasi valita suorittavasi opetussuunnitelman [Codespacessa](https://github.com/features/codespaces/) (_selainnäkymäinen, asennuksia ei tarvita_), tai paikallisesti tietokoneellasi tekstieditorilla, kuten [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
|
||||
|
||||
#### Opetussuunnitelman suorittaminen paikallisesti tietokoneellasi
|
||||
#### Luo oma repositoriosi
|
||||
Työsi tallentamisen helpottamiseksi on suositeltavaa luoda oma kopiosi tästä repositoriosta. Voit tehdä sen klikkaamalla sivun ylälaidasta kohtaa **Use this template**. Tämä luo uuden repositorion GitHub-tilillesi kopiona opetussuunnitelmasta.
|
||||
|
||||
Suorittaaksesi tämän opetussuunnitelman paikallisesti tietokoneellasi, tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, [Johdanto ohjelmointikieliin ja työkaluihin](../../1-getting-started-lessons/1-intro-to-programming-languages), opastaa sinut eri vaihtoehtojen läpi, jotta voit valita itsellesi parhaiten sopivat työkalut.
|
||||
Noudata näitä ohjeita:
|
||||
1. **Forkkaa repositorio**: Klikkaa oikeasta yläkulmasta "Fork".
|
||||
2. **Kloonaa repositorio**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
|
||||
|
||||
Suosituksemme on käyttää [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) -editoria, jossa on myös sisäänrakennettu [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Voit ladata Visual Studio Coden [täältä](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
|
||||
#### Opetussuunnitelman suorittaminen Codespacessa
|
||||
|
||||
1. Kloonaa arkistosi tietokoneellesi. Voit tehdä tämän klikkaamalla **Code**-painiketta ja kopioimalla URL-osoitteen:
|
||||
Omassa kopiossasi tästä repositoriosta, jonka loit, klikkaa **Code** ja valitse **Open with Codespaces**. Tämä luo sinulle uuden Codespace-työtilan.
|
||||
|
||||
[CodeSpace](./images/createcodespace.png)
|
||||
|
||||
|
||||
Avaa sitten [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Codessa](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ja suorita seuraava komento, korvaten `<your-repository-url>` juuri kopioimallasi URL-osoitteella:
|
||||
#### Opetussuunnitelman suorittaminen paikallisesti tietokoneella
|
||||
|
||||
Jos haluat suorittaa opetussuunnitelman paikallisesti tietokoneellasi, tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, [Ohjelmointikieliin ja työkaluisiin perehtyminen](../../1-getting-started-lessons/1-intro-to-programming-languages), opastaa sinut eri vaihtoehdoissa kuhunkin näistä työkaluista, jotta voit valita sinulle parhaiten sopivat.
|
||||
|
||||
Suosittelemme käyttämään editorina [Visual Studio Codea](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon), joka sisältää myös sisäänrakennetun [Päätteen](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Voit ladata Visual Studio Coden [tästä](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
|
||||
|
||||
|
||||
1. Kloonaa repositoriosi tietokoneellesi. Voit tehdä tämän klikkaamalla **Code** ja kopioimalla URL-osoitteen:
|
||||
|
||||
[CodeSpace](./images/createcodespace.png)
|
||||
Sitten avaa [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) -sovelluksessa ja suorita seuraava komento korvaten `<your-repository-url>` äsken kopioimallasi URL-osoitteella:
|
||||
|
||||
```bash
|
||||
git clone <your-repository-url>
|
||||
```
|
||||
|
||||
2. Avaa kansio Visual Studio Codessa. Voit tehdä tämän klikkaamalla **File** > **Open Folder** ja valitsemalla juuri kloonaamasi kansion.
|
||||
|
||||
> Suositellut Visual Studio Code -laajennukset:
|
||||
>
|
||||
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML-sivujen esikatseluun Visual Studio Codessa
|
||||
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - auttaa sinua kirjoittamaan koodia nopeammin
|
||||
2. Avaa kansio Visual Studio Codessa. Voit tehdä tämän valitsemalla **File** > **Open Folder** ja valitsemalla juuri kloonatun kansion.
|
||||
|
||||
|
||||
> Suositellut Visual Studio Code -laajennukset:
|
||||
>
|
||||
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML-sivujen esikatseluun suoraan Visual Studio Codessa
|
||||
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - auttamaan koodin kirjoittamisessa nopeammin
|
||||
|
||||
## 📂 Jokainen oppitunti sisältää:
|
||||
|
||||
- valinnainen luonnosmuistiinpano
|
||||
- valinnainen lisävideo
|
||||
- alkulämmittelykysely ennen oppituntia
|
||||
- kirjallinen oppitunti
|
||||
- projektipohjaisissa oppitunneissa vaiheittaiset ohjeet projektin rakentamiseen
|
||||
- tietojen tarkistukset
|
||||
- haaste
|
||||
- valinnaisen muistion
|
||||
- valinnaisen lisävideo
|
||||
- ennakkoharjoituksen / lämmittelykyselyn
|
||||
- kirjallisen oppitunnin
|
||||
- projektipohjaisissa oppitunneissa ohjeet projektin rakentamiseen vaihe vaiheelta
|
||||
- tietotarkistuksia
|
||||
- haasteen
|
||||
- lisälukemista
|
||||
- tehtävä
|
||||
- [kysely oppitunnin jälkeen](https://ff-quizzes.netlify.app/web/)
|
||||
- tehtävän
|
||||
- [jälkioppitunnin kyselyn](https://ff-quizzes.netlify.app/web/)
|
||||
|
||||
> **Huomio kyselyistä**: Kaikki kyselyt löytyvät Quiz-app-kansiosta, yhteensä 48 kyselyä, joissa jokaisessa on kolme kysymystä. Ne ovat saatavilla [täällä](https://ff-quizzes.netlify.app/web/), ja kyselysovelluksen voi ajaa paikallisesti tai julkaista Azureen; seuraa ohjeita `quiz-app`-kansiossa.
|
||||
> **Huomautus kyselyistä**: Kaikki kyselyt löytyvät Quiz-app-kansiosta, yhteensä 48 kyselyä, joissa jokaisessa on kolme kysymystä. Ne ovat saatavilla [tässä](https://ff-quizzes.netlify.app/web/). Kyselysovellus voidaan suorittaa paikallisesti tai ottaa käyttöön Azureen; noudata ohjeita `quiz-app`-kansiossa.
|
||||
|
||||
## 🗃️ Oppitunnit
|
||||
|
||||
| | Projektin nimi | Opetettavat käsitteet | Oppimistavoitteet | Linkitetty oppitunti | Tekijä |
|
||||
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | Aloitetaan | Johdatus ohjelmointiin ja työkaluihin | Opi ohjelmointikielten perusperiaatteet ja ohjelmistot, jotka auttavat ammattilaiskehittäjiä työssään | [Johdatus ohjelmointikieliin ja työkaluihin](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
||||
| 02 | Aloitetaan | GitHubin perusteet, sisältää tiimityöskentelyn | Kuinka käyttää GitHubia projektissasi ja tehdä yhteistyötä muiden kanssa koodipohjassa | [Johdatus GitHubiin](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
||||
| 03 | Aloitetaan | Saavutettavuus | Opi verkkosaavutettavuuden perusteet | [Saavutettavuuden perusteet](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
||||
| 04 | JS:n perusteet | JavaScriptin tietotyypit | JavaScriptin tietotyyppien perusteet | [Tietotyypit](./2-js-basics/1-data-types/README.md) | Jasmine |
|
||||
| 05 | JS:n perusteet | Funktiot ja metodit | Opi funktioista ja metodeista sovelluksen logiikan hallintaan | [Funktiot ja metodit](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher |
|
||||
| 06 | JS:n perusteet | Päätöksenteko JS:llä | Opi luomaan ehtoja koodissasi päätöksentekomenetelmien avulla | [Päätöksenteko](./2-js-basics/3-making-decisions/README.md) | Jasmine |
|
||||
| 07 | JS:n perusteet | Taulukot ja silmukat | Työskentele datan kanssa JavaScriptin taulukoiden ja silmukoiden avulla | [Taulukot ja silmukat](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
|
||||
| 08 | [Terraario](./3-terrarium/solution/README.md) | HTML käytännössä | Rakenna HTML luodaksesi verkkoterraarion, keskittyen asettelun rakentamiseen | [Johdatus HTML:ään](./3-terrarium/1-intro-to-html/README.md) | Jen |
|
||||
| 09 | [Terraario](./3-terrarium/solution/README.md) | CSS käytännössä | Rakenna CSS tyylittääksesi verkkoterraarion, keskittyen CSS:n perusteisiin, mukaan lukien sivun responsiivisuus | [Johdatus CSS:ään](./3-terrarium/2-intro-to-css/README.md) | Jen |
|
||||
| 10 | [Terraario](./3-terrarium/solution/README.md) | JavaScriptin sulkeumat, DOM-manipulointi | Rakenna JavaScript, jotta terraario toimii vedä/pudota-käyttöliittymänä, keskittyen sulkeumiin ja DOM-manipulointiin | [JavaScriptin sulkeumat, DOM-manipulointi](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
||||
| 11 | [Kirjoituspeli](./4-typing-game/solution/README.md) | Rakenna kirjoituspeli | Opi käyttämään näppäimistötapahtumia JavaScript-sovelluksesi logiikan ohjaamiseen | [Tapahtumapohjainen ohjelmointi](./4-typing-game/typing-game/README.md) | Christopher |
|
||||
| 12 | [Vihreä selainlaajennus](./5-browser-extension/solution/README.md) | Työskentely selainten kanssa | Opi, miten selaimet toimivat, niiden historia ja miten luoda selainlaajennuksen ensimmäiset elementit | [Tietoa selaimista](./5-browser-extension/1-about-browsers/README.md) | Jen |
|
||||
| 13 | [Vihreä selainlaajennus](./5-browser-extension/solution/README.md) | Lomakkeen rakentaminen, API-kutsut ja muuttujien tallentaminen paikallisesti | Rakenna selainlaajennuksesi JavaScript-elementit kutsumaan API:a käyttäen paikallisesti tallennettuja muuttujia | [API:t, lomakkeet ja paikallinen tallennus](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
|
||||
| 14 | [Vihreä selainlaajennus](./5-browser-extension/solution/README.md) | Taustaprosessit selaimessa, verkkosuorituskyky | Käytä selaimen taustaprosesseja hallitsemaan laajennuksen kuvaketta; opi verkkosuorituskyvystä ja optimoinneista | [Taustatehtävät ja suorituskyky](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
||||
| 15 | [Avaruuspeli](./6-space-game/solution/README.md) | Edistyneempi pelikehitys JavaScriptillä | Opi perimästä käyttäen sekä luokkia että koostumusta sekä Pub/Sub-mallia pelin rakentamisen valmistelussa | [Johdatus edistyneeseen pelikehitykseen](./6-space-game/1-introduction/README.md) | Chris |
|
||||
| 16 | [Avaruuspeli](./6-space-game/solution/README.md) | Piirtäminen kankaalle | Opi Canvas API:sta, jota käytetään elementtien piirtämiseen näytölle | [Piirtäminen kankaalle](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
||||
| 17 | [Avaruuspeli](./6-space-game/solution/README.md) | Elementtien liikuttaminen näytöllä | Opi, miten elementit voivat liikkua käyttäen koordinaatistoa ja Canvas API:a | [Elementtien liikuttaminen](./6-space-game/3-moving-elements-around/README.md) | Chris |
|
||||
| 18 | [Avaruuspeli](./6-space-game/solution/README.md) | Törmäyksen tunnistus | Tee elementeistä törmääviä ja reagoivia toisiinsa näppäinpainallusten avulla ja tarjoa viivefunktio pelin suorituskyvyn varmistamiseksi | [Törmäyksen tunnistus](./6-space-game/4-collision-detection/README.md) | Chris |
|
||||
| 19 | [Avaruuspeli](./6-space-game/solution/README.md) | Pisteiden laskeminen | Suorita matemaattisia laskelmia pelin tilan ja suorituskyvyn perusteella | [Pisteiden laskeminen](./6-space-game/5-keeping-score/README.md) | Chris |
|
||||
| 20 | [Avaruuspeli](./6-space-game/solution/README.md) | Pelin lopettaminen ja uudelleenkäynnistys | Opi pelin lopettamisesta ja uudelleenkäynnistämisestä, mukaan lukien resurssien siivoaminen ja muuttujien arvojen palauttaminen | [Lopetusehto](./6-space-game/6-end-condition/README.md) | Chris |
|
||||
| 21 | [Pankkisovellus](./7-bank-project/solution/README.md) | HTML-mallit ja reitit verkkosovelluksessa | Opi luomaan monisivuisen verkkosivuston arkkitehtuurin perusta käyttäen reititystä ja HTML-malleja | [HTML-mallit ja reitit](./7-bank-project/1-template-route/README.md) | Yohan |
|
||||
| 22 | [Pankkisovellus](./7-bank-project/solution/README.md) | Kirjautumis- ja rekisteröintilomakkeen rakentaminen | Opi rakentamaan lomakkeita ja käsittelemään validointirutiineja | [Lomakkeet](./7-bank-project/2-forms/README.md) | Yohan |
|
||||
| 23 | [Pankkisovellus](./7-bank-project/solution/README.md) | Datan hakemisen ja käytön menetelmät | Miten data virtaa sovellukseesi, miten sitä haetaan, tallennetaan ja hävitetään | [Data](./7-bank-project/3-data/README.md) | Yohan |
|
||||
| 24 | [Pankkisovellus](./7-bank-project/solution/README.md) | Tilanhallinnan käsitteet | Opi, miten sovelluksesi säilyttää tilan ja miten sitä hallitaan ohjelmallisesti | [Tilanhallinta](./7-bank-project/4-state-management/README.md) | Yohan |
|
||||
| 25 | [Selain/VSCode-koodi](../../8-code-editor) | Työskentely VSCode:lla | Opi käyttämään koodieditoria | [Käytä VSCode-koodieditoria](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
|
||||
| 26 | [AI-avustajat](./9-chat-project/README.md) | Työskentely tekoälyn kanssa | Opi rakentamaan oma tekoälyavustaja | [Tekoälyavustajaprojekti](./9-chat-project/README.md) | Chris |
|
||||
| | Projektin nimi | Opitut käsitteet | Oppimistavoitteet | Linkitetty oppitunti | Tekijä |
|
||||
| :-: | :--------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | Aloittaminen | Johdatus ohjelmointiin ja työkaluihin | Opit ohjelmointikielten perustan ja ohjelmistot, jotka auttavat ammattilaisia työssään | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
||||
| 02 | Aloittaminen | GitHubin perusteet, myös tiimityöskentely | Kuinka käyttää GitHubia projektissa ja miten tehdä yhteistyötä koodipohjalla | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
||||
| 03 | Aloittaminen | Esteettömyys | Opit verkkosivujen esteettömyyden perusteet | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
||||
| 04 | JS Basics | JavaScriptin tietotyypit | JavaScriptin tietotyyppien perusteet | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
|
||||
| 05 | JS Basics | Funktiot ja metodit | Opit sovelluksen logiikan hallinnan funktioiden ja metodien avulla | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher |
|
||||
| 06 | JS Basics | Päätöksenteko JavaScriptillä | Kuinka luoda ehtoja koodissasi päätöksentekomenetelmien avulla | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
|
||||
| 07 | JS Basics | Taulukot ja silmukat | Työskentele datan kanssa taulukoiden ja silmukoiden avulla JavaScriptissä | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
|
||||
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML käytännössä | Rakenna HTML luodaksesi online-terraariumin, keskittyen layoutin rakentamiseen | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
|
||||
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS käytännössä | Rakenna CSS tyylittääksesi online-terraariumia, keskittyen CSS:n perusteisiin mukaan lukien sivun responsiivisuuden tekemisen | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
|
||||
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScriptin sulut (closures), DOM-manipulointi | Rakenna JavaScript, joka tekee terraariumista toimivan drag/drop-käyttöliittymän, keskittyen sulkuihin ja DOM-manipulointiin | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
||||
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Kirjoituspelin rakentaminen | Opit käyttämään näppäimistötapahtumia JavaScript-sovelluksen logiikan ohjaamiseen | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
|
||||
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Työskentely selainten kanssa | Opit, miten selaimet toimivat, niiden historian ja miten luoda ensimmäiset elementit selaimen laajennukseen | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
|
||||
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Lomakkeen rakentaminen, API-kutsut ja muuttujien tallennus paikalliseen muistiin | Rakenna selaimen laajennuksen JavaScript-elementit API:n kutsumiseen käyttäen muuttujiin tallennettuja paikalliseen muistiin | [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) | Taustaprosessit selaimessa, verkkosivuston suorituskyky | Käytä selaimen taustaprosesseja hallitsemaan laajennuksen kuvaketta; opi web-suorituskyvystä ja optimoinnista | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
||||
| 15 | [Space Game](./6-space-game/solution/README.md) | Edistyneempi pelikehitys JavaScriptillä | Opit periytymisestä luokkien ja koostumisen avulla sekä Pub/Sub-kuvion, valmistautuen pelin rakentamiseen | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
|
||||
| 16 | [Space Game](./6-space-game/solution/README.md) | Piirtäminen kankaalle | Opit Canvas API:sta, jota käytetään elementtien piirtämiseen näytölle | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
||||
| 17 | [Space Game](./6-space-game/solution/README.md) | Elementtien liikuttaminen ruudulla | Opi, miten elementtejä voi liikuttaa kartesisilla koordinaateilla ja Canvas API:lla | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
|
||||
| 18 | [Space Game](./6-space-game/solution/README.md) | Törmäyksentunnistus | Tee elementeistä törmäileviä ja reagoivia toisiinsa näppäinpainallusten avulla, ja lisää cooldown-funktio pelin suorituskyvyn varmistamiseksi | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
|
||||
| 19 | [Space Game](./6-space-game/solution/README.md) | Pisteiden kirjaaminen | Suorita matemaattisia laskuja pelin tilan ja suorituskyvyn mukaan | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
|
||||
| 20 | [Space Game](./6-space-game/solution/README.md) | Pelin lopetus ja uudelleenkäynnistys | Opit pelin lopettamisesta ja uudelleenkäynnistyksestä, mukaan lukien resurssien siistimisestä ja muuttujien nollaamisesta | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
|
||||
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-mallit ja reititykset web-sovelluksessa | Opit rakentamaan monisivuisen verkkosivuston arkkitehtuurin reitityksen ja HTML-mallien avulla | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
|
||||
| 22 | [Banking App](./7-bank-project/solution/README.md) | Kirjautumis- ja rekisteröitymislomakkeen rakentaminen | Opit lomakkeiden rakentamisesta ja validointirutiinien hallinnasta | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
|
||||
| 23 | [Banking App](./7-bank-project/solution/README.md) | Tietojen hakemisen ja käytön menetelmät | Kuinka tieto virtaa sovellukseen ja sieltä ulos, miten hakea, tallentaa ja poistaa sitä | [Data](./7-bank-project/3-data/README.md) | Yohan |
|
||||
| 24 | [Banking App](./7-bank-project/solution/README.md) | Tilanhallinnan käsitteet | Opit, kuinka sovelluksesi säilyttää tilaa ja miten sitä hallitaan ohjelmallisesti | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
|
||||
| 25 | [Browser/VScode Code](../../8-code-editor) | Työskentely VScoden kanssa | Opit käyttämään koodieditoria | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
|
||||
| 26 | [AI Assistants](./9-chat-project/README.md) | Työskentely tekoälyn kanssa | Opit rakentamaan oman tekoälyavustajan | [AI Assistant project](./9-chat-project/README.md) | Chris |
|
||||
|
||||
## 🏫 Pedagogiikka
|
||||
|
||||
Opetussuunnitelmamme on suunniteltu kahden keskeisen pedagogisen periaatteen mukaisesti:
|
||||
Opetussuunnitelmamme on suunniteltu kahden keskeisen pedagogisen periaatteen mukaan:
|
||||
* projektipohjainen oppiminen
|
||||
* toistuvat kyselyt
|
||||
* usein toistuvat kyselyt
|
||||
|
||||
Ohjelma opettaa JavaScriptin, HTML:n ja CSS:n perusteet sekä uusimmat työkalut ja tekniikat, joita nykypäivän verkkokehittäjät käyttävät. Opiskelijat saavat käytännön kokemusta rakentamalla kirjoituspelin, virtuaalisen terraarion, ympäristöystävällisen selainlaajennuksen, avaruusinvader-tyylisen pelin ja yrityksille suunnatun pankkisovelluksen. Sarjan lopussa opiskelijoilla on vankka ymmärrys verkkokehityksestä.
|
||||
Ohjelma opettaa JavaScriptin, HTML:n ja CSS:n perusteet sekä viimeisimmät työkalut ja tekniikat, joita nykyiset web-kehittäjät käyttävät. Oppilaat pääsevät kehittämään käytännön kokemusta rakentamalla kirjoituspelin, virtuaalisen terraariumin, ympäristöystävällisen selaimen laajennuksen, avaruuslainen henkisen pelin ja pankkisovelluksen yrityksille. Sarjan lopussa oppilaat ovat saaneet vankan ymmärryksen web-kehityksestä.
|
||||
|
||||
> 🎓 Voit suorittaa tämän opetussuunnitelman ensimmäiset oppitunnit [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) -kurssina Microsoft Learnissa!
|
||||
> 🎓 Voit suorittaa tämän opetussuunnitelman ensimmäiset oppitunnit Microsoft Learnin [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) -polun kautta!
|
||||
|
||||
Varmistamalla, että sisältö liittyy projekteihin, prosessi on opiskelijoille kiinnostavampi ja käsitteiden muistaminen paranee. Kirjoitimme myös useita JavaScriptin perusteisiin liittyviä aloitusoppitunteja käsitteiden esittelemiseksi, yhdistettynä videoon "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" -videotutoriaalikokoelmasta, joiden tekijät osallistuivat tämän opetussuunnitelman laatimiseen.
|
||||
Varmistamalla, että sisältö vastaa projekteja, prosessi on opiskelijoille mielekkäämpi ja käsitteiden muistaminen tehostuu. Kirjoitimme lisäksi useita aloitusoppitunteja JavaScriptin perusteista esitelläksemme käsitteitä, yhdistettynä videoihin "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" -videokokoelmasta, joiden tekijät osallistuivat tähän opetussuunnitelmaan.
|
||||
|
||||
Lisäksi matalan kynnyksen kysely ennen oppituntia suuntaa opiskelijan huomion aiheen oppimiseen, kun taas toinen kysely oppitunnin jälkeen varmistaa paremman muistamisen. Tämä opetussuunnitelma on suunniteltu joustavaksi ja hauskaksi, ja sen voi suorittaa kokonaan tai osittain. Projektit alkavat pienistä ja muuttuvat yhä monimutkaisemmiksi 12 viikon jakson loppuun mennessä.
|
||||
Lisäksi oppituntia edeltävä matalariskinen kysely asettaa opiskelijalle opiskeluaiheen tavoitteen, ja oppitunnin jälkeinen toinen kysely varmistaa jatkumon. Tämä opetussuunnitelma on suunniteltu joustavaksi ja hauskaksi, ja sen voi suorittaa kokonaisuudessaan tai osittain. Projektit alkavat pieninä ja muuttuvat yhä vaativammiksi 12 viikon aikana.
|
||||
|
||||
Vaikka olemme tarkoituksella välttäneet JavaScript-kehysten esittelyä keskittyäksemme verkkokehittäjänä tarvittaviin perustaitoihin ennen kehysten käyttöönottoa, hyvä seuraava askel tämän opetussuunnitelman suorittamisen jälkeen olisi oppia Node.js:stä toisen videosarjan kautta: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
|
||||
Vaikka tarkoituksella olemme välttäneet JavaScript-kirjastojen käyttöönottoa keskittyäksemme verkkokehittäjän perustaitoihin ennen kehysten käyttöönottoa, hyvä seuraava askel tämän opetussuunnitelman jälkeen olisi oppia Node.js:stä toisen videokokoelman kautta: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
|
||||
|
||||
> Tutustu [käytännesääntöihimme](CODE_OF_CONDUCT.md) ja [ohjeisiin osallistumiseen](CONTRIBUTING.md). Otamme mielellämme vastaan rakentavaa palautettasi!
|
||||
> Tutustu [käyttäytymissääntöihimme](CODE_OF_CONDUCT.md) ja [osallistumisohjeisiin](CONTRIBUTING.md). Arvostamme rakentavaa palautettasi!
|
||||
|
||||
|
||||
## 🧭 Offline-käyttö
|
||||
|
||||
Voit käyttää tätä dokumentaatiota offline-tilassa käyttämällä [Docsify](https://docsify.js.org/#/). Haarauta tämä repo, [asenna Docsify](https://docsify.js.org/#/quickstart) paikalliselle koneellesi ja kirjoita tämän repon juurikansiossa `docsify serve`. Verkkosivusto palvelee portissa 3000 localhostissasi: `localhost:3000`.
|
||||
Voit käyttää tätä dokumentaatiota offline-tilassa käyttämällä [Docsify](https://docsify.js.org/#/). Haarauta tämä repositorio, [asenna Docsify](https://docsify.js.org/#/quickstart) paikalliselle koneellesi ja siirry tämän repositorion juurikansioon, kirjoita `docsify serve`. Sivusto palvelee portissa 3000 paikallisessa koneessasi: `localhost:3000`.
|
||||
|
||||
## 📘 PDF
|
||||
|
||||
Kaikkien oppituntien PDF löytyy [täältä](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
|
||||
PDF-versio kaikista oppitunneista löytyy [täältä](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
|
||||
|
||||
|
||||
## 🎒 Muut kurssit
|
||||
|
||||
Tiimimme tuottaa myös muita kursseja! Tutustu:
|
||||
|
||||
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
|
||||
### Azure / Edge / MCP / Agents
|
||||
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
### LangChain
|
||||
[](https://aka.ms/langchain4j-for-beginners)
|
||||
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
|
||||
|
||||
---
|
||||
|
||||
### Generatiivisen tekoälyn sarja
|
||||
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
|
||||
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
|
||||
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
|
||||
### Azure / Edge / MCP / Agents
|
||||
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
|
||||
---
|
||||
|
||||
### Keskeiset oppimateriaalit
|
||||
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
|
||||
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
|
||||
### Generative AI Series
|
||||
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
|
||||
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
|
||||
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
|
||||
|
||||
---
|
||||
|
||||
### Core Learning
|
||||
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
|
||||
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
|
||||
### Copilot-sarja
|
||||
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
|
||||
---
|
||||
|
||||
### Copilot Series
|
||||
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
|
||||
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
|
||||
|
||||
## Apua saatavilla
|
||||
## Apua saatavana
|
||||
|
||||
Jos jäät jumiin tai sinulla on kysymyksiä tekoälysovellusten rakentamisesta, liity muiden oppijoiden ja kokeneiden kehittäjien keskusteluihin MCP:stä. Se on tukevainen yhteisö, jossa kysymykset ovat tervetulleita ja tietoa jaetaan avoimesti.
|
||||
Jos jumitut tai sinulla on kysyttävää tekoälysovellusten rakentamisesta. Liity muiden oppijoiden ja kokeneiden kehittäjien keskusteluihin MCP:stä. Se on kannustava yhteisö, jossa kysymykset ovat tervetulleita ja tieto jaetaan vapaasti.
|
||||
|
||||
[](https://discord.gg/nTYy5BXMWG)
|
||||
[](https://discord.gg/nTYy5BXMWG)
|
||||
|
||||
Jos sinulla on tuotepalautetta tai virheitä rakentamisen aikana, vieraile:
|
||||
Jos sinulla on tuotepalaute tai kohtaat virheitä rakentamisen aikana, käy:
|
||||
|
||||
[](https://aka.ms/foundry/forum)
|
||||
[](https://aka.ms/foundry/forum)
|
||||
|
||||
## Lisenssi
|
||||
## Lisenssi
|
||||
|
||||
Tämä arkisto on lisensoitu MIT-lisenssillä. Katso [LICENSE](../../LICENSE) tiedosto saadaksesi lisätietoja.
|
||||
Tämä arkisto on lisensoitu MIT-lisenssillä. Lisätietoja löydät tiedostosta [LICENSE](../../LICENSE).
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Vastuuvapauslauseke**:
|
||||
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
|
||||
Tämä asiakirja on käännetty tekoälypohjaisella käännöspalvelulla [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, automaattisissa käännöksissä saattaa esiintyä virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen omalla kielellä tulee pitää virallisena lähteenä. Tärkeiden tietojen osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä aiheutuvista väärinymmärryksistä tai tulkinnoista.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -1,45 +1,30 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
|
||||
"translation_date": "2025-08-27T20:04:52+00:00",
|
||||
"original_hash": "bc5c5550f79d10add90ce419ee34abb3",
|
||||
"translation_date": "2026-01-07T01:04:17+00:00",
|
||||
"source_file": "3-terrarium/README.md",
|
||||
"language_code": "nl"
|
||||
}
|
||||
-->
|
||||
# Mijn Terrarium: Een project om te leren over HTML, CSS en DOM-manipulatie met JavaScript 🌵🌱
|
||||
## Zet je Terrarium in productie
|
||||
|
||||
Een kleine drag-and-drop code-meditatie. Met een beetje HTML, JS en CSS kun je een webinterface bouwen, deze stylen en zelfs meerdere interacties naar keuze toevoegen.
|
||||
Je kunt je Terrarium publiceren op het web met behulp van **Azure Static Web Apps**.
|
||||
|
||||
|
||||
1. Fork deze repo
|
||||
|
||||
# Lessen
|
||||
2. Druk op deze knop 👇
|
||||
|
||||
1. [Introductie tot HTML](./1-intro-to-html/README.md)
|
||||
2. [Introductie tot CSS](./2-intro-to-css/README.md)
|
||||
3. [Introductie tot DOM en JS Closures](./3-intro-to-DOM-and-closures/README.md)
|
||||
[](https://portal.azure.com/#create/Microsoft.StaticApp)
|
||||
|
||||
## Credits
|
||||
|
||||
Geschreven met ♥️ door [Jen Looper](https://www.twitter.com/jenlooper)
|
||||
|
||||
Het terrarium gemaakt via CSS is geïnspireerd door Jakub Mandra's glazen pot [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
|
||||
|
||||
De illustraties zijn met de hand getekend door [Jen Looper](http://jenlooper.com) met behulp van Procreate.
|
||||
|
||||
## Publiceer je Terrarium
|
||||
|
||||
Je kunt je terrarium op het web publiceren met behulp van Azure Static Web Apps.
|
||||
|
||||
1. Fork deze repository
|
||||
|
||||
2. Druk op deze knop
|
||||
|
||||
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
|
||||
|
||||
3. Doorloop de wizard om je app te maken. Zorg ervoor dat je de app-root instelt op ofwel `/solution` of de root van je codebase. Er is geen API in deze app, dus daar hoef je je geen zorgen over te maken. Een GitHub-map wordt aangemaakt in je geforkte repository die Azure Static Web Apps' buildservices helpt om je app te bouwen en te publiceren naar een nieuwe URL.
|
||||
3. Volg de setup wizard om je app te maken.
|
||||
- Stel de **App root** in op `/solution` of de root van je codebase.
|
||||
- Er is geen API in deze app, dus je kunt de API-configuratie overslaan.
|
||||
- Er wordt automatisch een `.github`-map gemaakt om Azure Static Web Apps te helpen je app te bouwen en publiceren.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
|
||||
Dit document is vertaald met behulp van de AI-vertalingsdienst [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u er rekening mee te houden dat automatische vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het oorspronkelijke document in de originele taal moet worden beschouwd als de gezaghebbende bron. Voor belangrijke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor enige misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -1,260 +1,252 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "63e29f5a308b533df9d70336bbb2e2b8",
|
||||
"translation_date": "2025-11-25T17:59:21+00:00",
|
||||
"original_hash": "fea3a0fceb8ad86fd640c09cf63a2aac",
|
||||
"translation_date": "2026-01-07T01:03:20+00:00",
|
||||
"source_file": "README.md",
|
||||
"language_code": "nl"
|
||||
}
|
||||
-->
|
||||
[](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)
|
||||
# Webontwikkeling voor beginners - Een curriculum
|
||||
|
||||
[](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/)
|
||||
Leer de basisprincipes van webontwikkeling met onze 12 weken durende uitgebreide cursus van Microsoft Cloud Advocates. Elke van de 24 lessen duikt in JavaScript, CSS en HTML door middel van praktische projecten zoals terrariums, browserextensies en ruimtespellen. Doe mee met quizzen, discussies en praktische opdrachten. Verbeter je vaardigheden en optimaliseer je kennisretentie met onze effectieve projectgerichte didactiek. Begin vandaag nog met coderen!
|
||||
|
||||
[](https://discord.gg/nTYy5BXMWG)
|
||||
Doe mee met de Azure AI Foundry Discord-community
|
||||
|
||||
# Webontwikkeling voor Beginners - Een Curriculum
|
||||
Volg deze stappen om aan de slag te gaan met deze bronnen:
|
||||
1. **Fork de repository**: Klik [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
|
||||
2. **Clone de repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
|
||||
3. [**Word lid van de Azure AI Foundry Discord en ontmoet experts en medeontwikkelaars**](https://discord.com/invite/ByRwuEEgH4)
|
||||
|
||||
Leer de basisprincipes van webontwikkeling met onze 12-weekse uitgebreide cursus van Microsoft Cloud Advocates. Elke van de 24 lessen behandelt JavaScript, CSS en HTML via praktische projecten zoals terrariums, browserextensies en ruimtegames. Doe mee met quizzen, discussies en praktische opdrachten. Verhoog je vaardigheden en optimaliseer je kennisbehoud met onze effectieve projectgerichte aanpak. Begin vandaag nog met je codeerreis!
|
||||
### 🌐 Ondersteuning in meerdere talen
|
||||
|
||||
Word lid van de Azure AI Foundry Discord Community
|
||||
#### Ondersteund via GitHub Action (Geautomatiseerd & altijd up-to-date)
|
||||
|
||||
[](https://discord.gg/nTYy5BXMWG)
|
||||
|
||||
Volg deze stappen om aan de slag te gaan met deze bronnen:
|
||||
1. **Fork de Repository**: Klik [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
|
||||
2. **Clone de Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
|
||||
3. [**Word lid van de Azure AI Foundry Discord en ontmoet experts en mede-ontwikkelaars**](https://discord.com/invite/ByRwuEEgH4)
|
||||
|
||||
### 🌐 Meertalige Ondersteuning
|
||||
|
||||
#### Ondersteund via GitHub Action (Automatisch & Altijd Up-to-Date)
|
||||
|
||||
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
|
||||
[Arabisch](../ar/README.md) | [Bengaals](../bn/README.md) | [Bulgaars](../bg/README.md) | [Birmaans (Myanmar)](../my/README.md) | [Chinees (Vereenvoudigd)](../zh/README.md) | [Chinees (Traditioneel, Hong Kong)](../hk/README.md) | [Chinees (Traditioneel, Macau)](../mo/README.md) | [Chinees (Traditioneel, Taiwan)](../tw/README.md) | [Kroatisch](../hr/README.md) | [Tsjechisch](../cs/README.md) | [Deens](../da/README.md) | [Nederlands](./README.md) | [Ests](../et/README.md) | [Fins](../fi/README.md) | [Frans](../fr/README.md) | [Duits](../de/README.md) | [Grieks](../el/README.md) | [Hebreeuws](../he/README.md) | [Hindi](../hi/README.md) | [Hongaars](../hu/README.md) | [Indonesisch](../id/README.md) | [Italiaans](../it/README.md) | [Japans](../ja/README.md) | [Koreaans](../ko/README.md) | [Litouws](../lt/README.md) | [Maleis](../ms/README.md) | [Marathi](../mr/README.md) | [Nepalees](../ne/README.md) | [Noors](../no/README.md) | [Perzisch (Farsi)](../fa/README.md) | [Pools](../pl/README.md) | [Portugees (Brazilië)](../br/README.md) | [Portugees (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Roemeens](../ro/README.md) | [Russisch](../ru/README.md) | [Servisch (Cyrillisch)](../sr/README.md) | [Slowaaks](../sk/README.md) | [Sloveens](../sl/README.md) | [Spaans](../es/README.md) | [Swahili](../sw/README.md) | [Zweeds](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Thais](../th/README.md) | [Turks](../tr/README.md) | [Oekraïens](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamees](../vi/README.md)
|
||||
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
|
||||
> **Voorkeur om lokaal te klonen?**
|
||||
|
||||
**Als je extra vertalingen wilt, staan de ondersteunde talen [hier](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
|
||||
> Deze repository bevat vertalingen in 50+ talen, wat de downloadgrootte aanzienlijk vergroot. Om te klonen zonder vertalingen, gebruik sparse checkout:
|
||||
> ```bash
|
||||
> 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'
|
||||
> ```
|
||||
> Dit geeft je alles wat je nodig hebt om de cursus te voltooien met een veel snellere download.
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
**Als je extra vertalingsondersteuning wenst, zijn ondersteunde talen hier vermeld [hier](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
|
||||
|
||||
#### 🧑🎓 _Ben je een student?_
|
||||
|
||||
Bezoek de [**Student Hub-pagina**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) waar je beginnersbronnen, studentpakketten en zelfs manieren vindt om een gratis certificaatvoucher te krijgen. Dit is de pagina die je wilt bookmarken en regelmatig wilt bekijken, aangezien we maandelijks de inhoud wisselen.
|
||||
Bezoek de [**Student Hub-pagina**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) waar je beginnersmaterialen, studentenpakketten en zelfs mogelijkheden voor een gratis certificaatvoucher vindt. Dit is de pagina die je wilt bookmarken en van tijd tot tijd wilt bekijken, omdat we maandelijks de inhoud vernieuwen.
|
||||
|
||||
### 📣 Aankondiging - Nieuwe GitHub Copilot Agent-modus uitdagingen om te voltooien!
|
||||
### 📣 Aankondiging - Nieuwe GitHub Copilot Agent modus uitdagingen om te voltooien!
|
||||
|
||||
Nieuwe uitdaging toegevoegd, zoek naar "GitHub Copilot Agent Challenge 🚀" in de meeste hoofdstukken. Dit is een nieuwe uitdaging die je kunt voltooien met GitHub Copilot en Agent-modus. Als je Agent-modus nog niet hebt gebruikt, het kan niet alleen tekst genereren, maar ook bestanden maken en bewerken, opdrachten uitvoeren en meer.
|
||||
Nieuwe uitdaging toegevoegd, zoek naar "GitHub Copilot Agent Challenge 🚀" in de meeste hoofdstukken. Dat is een nieuwe uitdaging die je kunt voltooien met GitHub Copilot en de Agent-modus. Als je deze modus nog niet hebt gebruikt, kan het niet alleen tekst genereren, maar ook bestanden maken en bewerken, commando's uitvoeren en meer.
|
||||
|
||||
### 📣 Aankondiging - _Nieuw Project om te bouwen met Generatieve AI_
|
||||
### 📣 Aankondiging - _Nieuw project te bouwen met Generative AI_
|
||||
|
||||
Nieuw AI-assistentproject zojuist toegevoegd, bekijk het [project](./09-chat-project/README.md)
|
||||
Nieuw AI Assistant-project toegevoegd, bekijk het [project](./9-chat-project/README.md)
|
||||
|
||||
### 📣 Aankondiging - _Nieuw Curriculum_ over Generatieve AI voor JavaScript is zojuist uitgebracht
|
||||
### 📣 Aankondiging - _Nieuw Curriculum_ over Generative AI voor JavaScript is net uitgebracht
|
||||
|
||||
Mis ons nieuwe Generatieve AI-curriculum niet!
|
||||
Mis ons nieuwe Generative AI curriculum niet!
|
||||
|
||||
Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om te beginnen!
|
||||
|
||||
|
||||
- Lessen die alles behandelen van basis tot RAG.
|
||||
- Interactie met historische figuren via GenAI en onze begeleidende app.
|
||||
- Leuk en boeiend verhaal, je reist door de tijd!
|
||||
|
||||
- Lessen die alles behandelen, van basisprincipes tot RAG.
|
||||
- Interactie met historische personages met GenAI en onze begeleidende app.
|
||||
- Leuk en boeiend verhaal, je gaat tijdreizen!
|
||||
|
||||
|
||||
|
||||
Elke les bevat een opdracht om te voltooien, een kenniscontrole en een uitdaging om je te begeleiden bij het leren van onderwerpen zoals:
|
||||
Elke les bevat een opdracht om te voltooien, een kennistoets en een uitdaging om je te begeleiden bij het leren van onderwerpen zoals:
|
||||
- Prompting en prompt engineering
|
||||
- Tekst- en afbeeldingsapp-generatie
|
||||
- Tekst- en beeldapp-generatie
|
||||
- Zoekapps
|
||||
|
||||
Bezoek [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) om te beginnen!
|
||||
Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om te beginnen!
|
||||
|
||||
## 🌱 Aan de slag
|
||||
|
||||
> **Docenten**, we hebben [enkele suggesties opgenomen](for-teachers.md) over hoe je dit curriculum kunt gebruiken. We horen graag je feedback [in ons discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||
> **Docenten**, we hebben [een aantal suggesties opgenomen](for-teachers.md) over hoe je dit curriculum kunt gebruiken. We horen graag je feedback [in ons discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||
|
||||
**[Leerlingen](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, begin voor elke les met een quiz voorafgaand aan de les en ga verder met het lezen van het lesmateriaal, het voltooien van de verschillende activiteiten en controleer je begrip met de quiz na de les.
|
||||
**[Leerlingen](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, begin bij elke les met een pre-lecture quiz en volg deze op met het lezen van het lesmateriaal, het voltooien van de verschillende activiteiten en controleer je begrip met de post-lecture quiz.
|
||||
|
||||
Om je leerervaring te verbeteren, werk samen met je medestudenten aan de projecten! Discussies worden aangemoedigd in ons [discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) waar ons team van moderators beschikbaar zal zijn om je vragen te beantwoorden.
|
||||
Verbeter je leerervaring door samen met je medestudenten aan de projecten te werken! Discussies worden aangemoedigd in ons [discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) waar ons team van moderators beschikbaar zal zijn om je vragen te beantwoorden.
|
||||
|
||||
Om je opleiding verder te ontwikkelen, raden we aan om [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) te verkennen voor aanvullende studiematerialen.
|
||||
Om je opleiding verder te verrijken raden we aan de extra studiematerialen op [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) te verkennen.
|
||||
|
||||
### 📋 Je omgeving instellen
|
||||
|
||||
Dit curriculum heeft een ontwikkelomgeving die klaar is voor gebruik! Zodra je begint, kun je ervoor kiezen om het curriculum te draaien in een [Codespace](https://github.com/features/codespaces/) (_een browsergebaseerde omgeving zonder installaties nodig_), of lokaal op je computer met een teksteditor zoals [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
|
||||
Dit curriculum heeft een kant-en-klare ontwikkelomgeving! Je kunt ervoor kiezen om het curriculum te draaien in een [Codespace](https://github.com/features/codespaces/) (_een browsergebaseerde omgeving zonder installatie_) of lokaal op je computer met een teksteditor zoals [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
|
||||
|
||||
#### Maak je repository aan
|
||||
Om je werk gemakkelijk op te slaan, raden we aan om je eigen kopie van deze repository te maken. Dit kun je doen door op de knop **Use this template** bovenaan de pagina te klikken. Dit maakt een nieuwe repository in je GitHub-account met een kopie van het curriculum.
|
||||
#### Creëer je repository
|
||||
Om je werk makkelijk op te slaan, wordt aanbevolen om een eigen kopie van deze repository te maken. Dit kan door bovenaan de pagina op de knop **Use this template** te klikken. Hierdoor wordt een nieuwe repository gemaakt in jouw GitHub-account met een kopie van het curriculum.
|
||||
|
||||
Volg deze stappen:
|
||||
1. **Fork de Repository**: Klik op de knop "Fork" rechtsboven op deze pagina.
|
||||
2. **Clone de Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
|
||||
Volg de volgende stappen:
|
||||
1. **Fork de repository**: Klik op de knop "Fork" rechtsboven op deze pagina.
|
||||
2. **Clone de repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
|
||||
|
||||
#### Het curriculum draaien in een Codespace
|
||||
|
||||
In je kopie van deze repository die je hebt gemaakt, klik op de knop **Code** en selecteer **Open with Codespaces**. Dit maakt een nieuwe Codespace voor je om in te werken.
|
||||
Klik in jouw eigen repository op de knop **Code** en selecteer **Open with Codespaces**. Dit maakt een nieuwe Codespace aan waarin je kunt werken.
|
||||
|
||||
|
||||
|
||||
|
||||
#### Het curriculum lokaal draaien op je computer
|
||||
|
||||
Om dit curriculum lokaal op je computer te draaien, heb je een teksteditor, een browser en een opdrachtregeltool nodig. Onze eerste les, [Introductie tot Programmeertalen en Tools van het Vak](../../1-getting-started-lessons/1-intro-to-programming-languages), zal je door verschillende opties voor elk van deze tools leiden, zodat je kunt kiezen wat het beste voor je werkt.
|
||||
Om dit curriculum lokaal te draaien op je computer, heb je een teksteditor, een browser en een opdrachtregeltool nodig. Onze eerste les, [Introductie tot programmeertalen en tools van het vak](../../1-getting-started-lessons/1-intro-to-programming-languages), laat je verschillende opties zien van elk van deze tools zodat je degene kunt kiezen die het beste bij je past.
|
||||
|
||||
Onze aanbeveling is om [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) te gebruiken als je editor, die ook een ingebouwde [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) heeft. Je kunt Visual Studio Code [hier downloaden](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
|
||||
Wij raden aan [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) te gebruiken als editor, die ook een ingebouwde [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) bevat. Je kunt Visual Studio Code [hier downloaden](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
|
||||
|
||||
1. Clone je repository naar je computer. Dit kun je doen door op de knop **Code** te klikken en de URL te kopiëren:
|
||||
1. Clone je repository naar je computer. Dit doe je door op de knop **Code** te klikken en de URL te kopiëren:
|
||||
|
||||
[CodeSpace](./images/createcodespace.png)
|
||||
|
||||
Open vervolgens [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) binnen [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) en voer het volgende commando uit, waarbij je `<your-repository-url>` vervangt door de URL die je net hebt gekopieerd:
|
||||
Open vervolgens [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) binnen [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) en voer het volgende commando uit, waarbij je `<your-repository-url>` vervangt door de URL die je zojuist hebt gekopieerd:
|
||||
|
||||
```bash
|
||||
git clone <your-repository-url>
|
||||
```
|
||||
|
||||
2. Open de map in Visual Studio Code. Dit kun je doen door te klikken op **File** > **Open Folder** en de map te selecteren die je net hebt gekloond.
|
||||
|
||||
> Aanbevolen Visual Studio Code-extensies:
|
||||
>
|
||||
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - om HTML-pagina's te bekijken binnen Visual Studio Code
|
||||
2. Open de map in Visual Studio Code. Dit kun je doen door te klikken op **Bestand** > **Map openen** en de map te selecteren die je zojuist hebt gekloond.
|
||||
|
||||
|
||||
> Aanbevolen Visual Studio Code-extensies:
|
||||
>
|
||||
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - om HTML-pagina's binnen Visual Studio Code te bekijken
|
||||
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - om je te helpen sneller code te schrijven
|
||||
|
||||
## 📂 Elke les bevat:
|
||||
|
||||
- optionele sketchnote
|
||||
- optionele aanvullende video
|
||||
- opwarmquiz voorafgaand aan de les
|
||||
- warming-up quiz voor de les
|
||||
- geschreven les
|
||||
- voor projectgebaseerde lessen, stapsgewijze handleidingen om het project te bouwen
|
||||
- kennischecks
|
||||
- voor projectgebaseerde lessen, stapsgewijze handleidingen over hoe je het project bouwt
|
||||
- kennistests
|
||||
- een uitdaging
|
||||
- aanvullende literatuur
|
||||
- aanvullende leesstof
|
||||
- opdracht
|
||||
- [quiz na de les](https://ff-quizzes.netlify.app/web/)
|
||||
|
||||
> **Een opmerking over quizzen**: Alle quizzen zijn opgenomen in de Quiz-app map, in totaal 48 quizzen met elk drie vragen. Ze zijn beschikbaar [hier](https://ff-quizzes.netlify.app/web/) en de quiz-app kan lokaal worden uitgevoerd of worden gedeployed naar Azure; volg de instructies in de `quiz-app` map.
|
||||
> **Een opmerking over quizzen**: Alle quizzen bevinden zich in de Quiz-app map, in totaal 48 quizzen met elk drie vragen. Ze zijn beschikbaar [hier](https://ff-quizzes.netlify.app/web/). De quiz-app kan lokaal worden uitgevoerd of worden ingezet op Azure; volg de instructies in de `quiz-app` map.
|
||||
|
||||
## 🗃️ Lessen
|
||||
|
||||
| | Projectnaam | Geleerde concepten | Leerdoelen | Gelinkte les | Auteur |
|
||||
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | Aan de slag | Introductie tot programmeren en tools van het vak | Leer de basisprincipes achter de meeste programmeertalen en over software die professionele ontwikkelaars helpt hun werk te doen | [Introductie tot programmeertalen en tools van het vak](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
||||
| 02 | Aan de slag | Basisprincipes van GitHub, inclusief werken in een team | Hoe GitHub te gebruiken in je project, hoe samen te werken met anderen aan een codebase | [Introductie tot GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
||||
| 03 | Aan de slag | Toegankelijkheid | Leer de basisprincipes van webtoegankelijkheid | [Basisprincipes van toegankelijkheid](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
||||
| 04 | JS Basisprincipes | JavaScript Datatypes | De basisprincipes van JavaScript datatypes | [Datatypes](./2-js-basics/1-data-types/README.md) | Jasmine |
|
||||
| 05 | JS Basisprincipes | Functies en Methoden | Leer over functies en methoden om de logische stroom van een applicatie te beheren | [Functies en Methoden](./2-js-basics/2-functions-methods/README.md) | Jasmine en Christopher |
|
||||
| 06 | JS Basisprincipes | Beslissingen nemen met JS | Leer hoe je voorwaarden in je code kunt maken met behulp van besluitvormingsmethoden | [Beslissingen nemen](./2-js-basics/3-making-decisions/README.md) | Jasmine |
|
||||
| 07 | JS Basisprincipes | Arrays en Lussen | Werk met data met behulp van arrays en lussen in JavaScript | [Arrays en Lussen](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
|
||||
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in de praktijk | Bouw de HTML om een online terrarium te maken, met de focus op het bouwen van een layout | [Introductie tot HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
|
||||
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in de praktijk | Bouw de CSS om het online terrarium te stylen, met de focus op de basisprincipes van CSS inclusief het responsief maken van de pagina | [Introductie tot CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
|
||||
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulatie | Bouw de JavaScript om het terrarium te laten functioneren als een drag/drop interface, met de focus op closures en DOM manipulatie | [JavaScript Closures, DOM manipulatie](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
||||
| 11 | [Typingspel](./4-typing-game/solution/README.md) | Bouw een Typingspel | Leer hoe je toetsenbordgebeurtenissen kunt gebruiken om de logica van je JavaScript-app aan te sturen | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
|
||||
| 12 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Werken met Browsers | Leer hoe browsers werken, hun geschiedenis, en hoe je de eerste elementen van een browserextensie kunt opzetten | [Over Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
|
||||
| 13 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Een formulier bouwen, een API aanroepen en variabelen opslaan in lokale opslag | Bouw de JavaScript-elementen van je browserextensie om een API aan te roepen met variabelen opgeslagen in lokale opslag | [API's, Formulieren, en Lokale Opslag](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
|
||||
| 14 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Achtergrondprocessen in de browser, webprestaties | Gebruik de achtergrondprocessen van de browser om het pictogram van de extensie te beheren; leer over webprestaties en enkele optimalisaties om te maken | [Achtergrondtaken en Prestaties](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
||||
| 15 | [Ruimtespel](./6-space-game/solution/README.md) | Meer Geavanceerde Spelontwikkeling met JavaScript | Leer over Inheritance met zowel Classes als Composition en het Pub/Sub patroon, ter voorbereiding op het bouwen van een spel | [Introductie tot Geavanceerde Spelontwikkeling](./6-space-game/1-introduction/README.md) | Chris |
|
||||
| 16 | [Ruimtespel](./6-space-game/solution/README.md) | Tekenen op canvas | Leer over de Canvas API, gebruikt om elementen op een scherm te tekenen | [Tekenen op Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
||||
| 17 | [Ruimtespel](./6-space-game/solution/README.md) | Elementen bewegen over het scherm | Ontdek hoe elementen beweging kunnen krijgen met behulp van cartesiaanse coördinaten en de Canvas API | [Elementen Bewegen](./6-space-game/3-moving-elements-around/README.md) | Chris |
|
||||
| 18 | [Ruimtespel](./6-space-game/solution/README.md) | Botsingsdetectie | Laat elementen botsen en op elkaar reageren met behulp van toetsen en zorg voor een cooldown functie om de prestaties van het spel te garanderen | [Botsingsdetectie](./6-space-game/4-collision-detection/README.md) | Chris |
|
||||
| 19 | [Ruimtespel](./6-space-game/solution/README.md) | Score bijhouden | Voer wiskundige berekeningen uit op basis van de status en prestaties van het spel | [Score Bijhouden](./6-space-game/5-keeping-score/README.md) | Chris |
|
||||
| 20 | [Ruimtespel](./6-space-game/solution/README.md) | Het spel beëindigen en opnieuw starten | Leer over het beëindigen en opnieuw starten van het spel, inclusief het opruimen van assets en het resetten van variabele waarden | [De Eindconditie](./6-space-game/6-end-condition/README.md) | Chris |
|
||||
| 21 | [Bankapp](./7-bank-project/solution/README.md) | HTML Templates en Routes in een Webapp | Leer hoe je de structuur van een meerpagina website kunt opzetten met routing en HTML templates | [HTML Templates en Routes](./7-bank-project/1-template-route/README.md) | Yohan |
|
||||
| 22 | [Bankapp](./7-bank-project/solution/README.md) | Bouw een Inlog- en Registratieformulier | Leer over het bouwen van formulieren en het afhandelen van validatieroutines | [Formulieren](./7-bank-project/2-forms/README.md) | Yohan |
|
||||
| 23 | [Bankapp](./7-bank-project/solution/README.md) | Methoden om Data op te halen en te gebruiken | Hoe data in en uit je app stroomt, hoe je het kunt ophalen, opslaan en verwijderen | [Data](./7-bank-project/3-data/README.md) | Yohan |
|
||||
| 24 | [Bankapp](./7-bank-project/solution/README.md) | Concepten van State Management | Leer hoe je app de staat behoudt en hoe je deze programmatisch kunt beheren | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
|
||||
| 25 | [Browser/VScode Code](../../8-code-editor) | Werken met VScode | Leer hoe je een code-editor gebruikt | [Gebruik VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
|
||||
| 26 | [AI Assistenten](./9-chat-project/README.md) | Werken met AI | Leer hoe je je eigen AI-assistent bouwt | [AI Assistent project](./9-chat-project/README.md) | Chris |
|
||||
| | Projectnaam | Behandelde Concepten | Leerdoelen | Gekoppelde Les | Auteur |
|
||||
| :-: | :------------------------------------------------------: | :------------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :-----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | Aan de slag | Introductie in programmeren en tools van het vak | Leer de basisprincipes achter de meeste programmeertalen en over software die professionele ontwikkelaars helpt bij hun werk | [Introductie tot programmeertalen en tools van het vak](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
||||
| 02 | Aan de slag | Basisprincipes van GitHub, inclusief samenwerken in team | Hoe je GitHub gebruikt in je project, hoe je samenwerkt met anderen aan een codebase | [Introductie tot GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
||||
| 03 | Aan de slag | Toegankelijkheid | Leer de basisprincipes van webtoegankelijkheid | [Fundamentals toegankelijkheid](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
||||
| 04 | JS Basis | JavaScript-datatypen | De basis van JavaScript-datatypen | [Datatypes](./2-js-basics/1-data-types/README.md) | Jasmine |
|
||||
| 05 | JS Basis | Functies en methoden | Leer over functies en methoden om de logica van een applicatie te beheren | [Functies en methoden](./2-js-basics/2-functions-methods/README.md) | Jasmine en Christopher |
|
||||
| 06 | JS Basis | Beslissingen maken met JS | Leer hoe je condities maakt in je code met beslissingsmethoden | [Beslissingen maken](./2-js-basics/3-making-decisions/README.md) | Jasmine |
|
||||
| 07 | JS Basis | Arrays en lussen | Werken met data met behulp van arrays en lussen in JavaScript | [Arrays en lussen](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
|
||||
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in de praktijk | Bouw de HTML voor een online terrarium, met focus op het bouwen van een layout | [Introductie tot HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
|
||||
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in de praktijk | Bouw de CSS om het online terrarium op te maken met focus op basisbeginselen van CSS, inclusief responsive maken van de pagina | [Introductie tot CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
|
||||
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript-closures, DOM-manipulatie | Bouw de JavaScript om het terrarium te laten functioneren als een sleep/plaats-interface, met focus op closures en DOM-manipulatie | [JavaScript-closures, DOM-manipulatie](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
||||
| 11 | [Typeren Spel](./4-typing-game/solution/README.md) | Bouw een Typeren Spel | Leer hoe je toetsenbordgebeurtenissen gebruikt om de logica van je JavaScript-app te sturen | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
|
||||
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Werken met browsers | Leer hoe browsers werken, hun geschiedenis, en hoe je de eerste elementen van een browserextensie bouwt | [Over browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
|
||||
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Formulieren maken, API aanroepen en variabelen opslaan in lokale opslag | Bouw de JavaScript-elementen van je browserextensie om een API aan te roepen met variabelen opgeslagen in lokale opslag | [API's, formulieren en lokale opslag](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
|
||||
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Achtergrondprocessen in de browser, webprestaties | Gebruik de achtergrondprocessen van de browser om het pictogram van de extensie te beheren; leer over webprestaties en optimalisaties | [Achtergrondtaken en prestaties](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
||||
| 15 | [Space Game](./6-space-game/solution/README.md) | Gevorderde Spelontwikkeling met JavaScript | Leer over overerving met zowel Classes als Composition en het Pub/Sub-patroon, ter voorbereiding op het bouwen van een spel | [Introductie tot gevorderde spelontwikkeling](./6-space-game/1-introduction/README.md) | Chris |
|
||||
| 16 | [Space Game](./6-space-game/solution/README.md) | Tekenen op canvas | Leer over de Canvas API, gebruikt om elementen op een scherm te tekenen | [Tekenen op canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
||||
| 17 | [Space Game](./6-space-game/solution/README.md) | Elementen op het scherm verplaatsen | Ontdek hoe elementen beweging krijgen met behulp van cartesische coördinaten en de Canvas API | [Elementen verplaatsen](./6-space-game/3-moving-elements-around/README.md) | Chris |
|
||||
| 18 | [Space Game](./6-space-game/solution/README.md) | Botsingsdetectie | Zorg dat elementen botsen en op elkaar reageren met behulp van toetsaanslagen en een cooldown-functie om de prestaties te garanderen | [Botsingsdetectie](./6-space-game/4-collision-detection/README.md) | Chris |
|
||||
| 19 | [Space Game](./6-space-game/solution/README.md) | Score bijhouden | Voer wiskundige berekeningen uit op basis van de status en prestaties van het spel | [Score bijhouden](./6-space-game/5-keeping-score/README.md) | Chris |
|
||||
| 20 | [Space Game](./6-space-game/solution/README.md) | Het spel beëindigen en herstarten | Leer over het beëindigen en herstarten van het spel, inclusief het opruimen van resources en het resetten van variabelen | [De eindvoorwaarde](./6-space-game/6-end-condition/README.md) | Chris |
|
||||
| 21 | [Bankapp](./7-bank-project/solution/README.md) | HTML-sjablonen en routes in een webapp | Leer hoe je het framework van een multipage website opbouwt met routing en HTML-sjablonen | [HTML-sjablonen en routes](./7-bank-project/1-template-route/README.md) | Yohan |
|
||||
| 22 | [Bankapp](./7-bank-project/solution/README.md) | Bouw een inlog- en registratieformulier | Leer over het bouwen van formulieren en het afhandelen van validatieroutines | [Formulieren](./7-bank-project/2-forms/README.md) | Yohan |
|
||||
| 23 | [Bankapp](./7-bank-project/solution/README.md) | Methoden voor ophalen en gebruiken van data | Hoe data in en uit je app stroomt, hoe je het ophaalt, opslaat en verwijdert | [Data](./7-bank-project/3-data/README.md) | Yohan |
|
||||
| 24 | [Bankapp](./7-bank-project/solution/README.md) | Concepten van state management | Leer hoe je app staat bijhoudt en hoe je deze programmatisch beheert | [State management](./7-bank-project/4-state-management/README.md) | Yohan |
|
||||
| 25 | [Browser/VScode Code](../../8-code-editor) | Werken met VScode | Leer hoe je een code-editor gebruikt| [Gebruik VScode Code-editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
|
||||
| 26 | [AI Assistants](./9-chat-project/README.md) | Werken met AI | Leer hoe je je eigen AI-assistent bouwt | [AI Assistent project](./9-chat-project/README.md) | Chris |
|
||||
|
||||
## 🏫 Pedagogiek
|
||||
|
||||
Ons curriculum is ontworpen met twee belangrijke pedagogische principes in gedachten:
|
||||
* projectgebaseerd leren
|
||||
* projectgericht leren
|
||||
* frequente quizzen
|
||||
|
||||
Het programma leert de basisprincipes van JavaScript, HTML en CSS, evenals de nieuwste tools en technieken die door hedendaagse webontwikkelaars worden gebruikt. Studenten krijgen de kans om praktische ervaring op te doen door een typingspel, virtueel terrarium, milieuvriendelijke browserextensie, ruimte-invader-stijl spel en een bankapp voor bedrijven te bouwen. Aan het einde van de serie hebben studenten een solide begrip van webontwikkeling opgedaan.
|
||||
Het programma leert de basisprincipes van JavaScript, HTML en CSS, evenals de nieuwste tools en technieken die door hedendaagse webontwikkelaars worden gebruikt. Studenten krijgen de kans praktische ervaring op te doen door het bouwen van een typeringsspel, virtueel terrarium, milieuvriendelijke browserextensie, space-invader-stijl spel, en een bankapp voor bedrijven. Aan het einde van de serie hebben studenten een solide begrip van webontwikkeling opgedaan.
|
||||
|
||||
> 🎓 Je kunt de eerste paar lessen in dit curriculum volgen als een [Leerpad](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) op Microsoft Learn!
|
||||
> 🎓 Je kunt de eerste paar lessen van dit curriculum volgen als een [Leerpad](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) op Microsoft Learn!
|
||||
|
||||
Door ervoor te zorgen dat de inhoud aansluit bij projecten, wordt het proces boeiender voor studenten en wordt het begrip van concepten versterkt. We hebben ook enkele startlessen in JavaScript-basisprincipes geschreven om concepten te introduceren, gekoppeld aan een video uit de "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collectie van videotutorials, waarvan sommige auteurs hebben bijgedragen aan dit curriculum.
|
||||
Door ervoor te zorgen dat de inhoud aansluit bij projecten, wordt het proces boeiender voor studenten en wordt het vasthouden van concepten vergroot. We hebben ook meerdere starterlessen in JavaScript basics geschreven om concepten te introduceren, gekoppeld aan een video uit de "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collectie videotutorials, waarvan enkele auteurs een bijdrage hebben geleverd aan dit curriculum.
|
||||
|
||||
Daarnaast zorgt een laagdrempelige quiz voorafgaand aan een les ervoor dat de student zich richt op het leren van een onderwerp, terwijl een tweede quiz na de les verdere retentie garandeert. Dit curriculum is ontworpen om flexibel en leuk te zijn en kan in zijn geheel of gedeeltelijk worden gevolgd. De projecten beginnen klein en worden tegen het einde van de 12-weekse cyclus steeds complexer.
|
||||
Daarnaast stelt een quiz met lage inzet voor de les de intentie van de student om een onderwerp te leren, terwijl een tweede quiz na de les verdere retentie verzekert. Dit curriculum is ontworpen om flexibel en leuk te zijn en kan in zijn geheel of gedeeltelijk worden gevolgd. De projecten beginnen klein en worden steeds complexer tegen het einde van de 12-weekse cyclus.
|
||||
|
||||
Hoewel we bewust hebben vermeden JavaScript-frameworks te introduceren om ons te concentreren op de basisvaardigheden die nodig zijn als webontwikkelaar voordat een framework wordt aangenomen, zou een goede volgende stap na het voltooien van dit curriculum zijn om meer te leren over Node.js via een andere collectie video's: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
|
||||
Hoewel we er bewust voor hebben gekozen geen JavaScript-frameworks te introduceren om ons te concentreren op de basisvaardigheden die nodig zijn als webontwikkelaar voordat een framework wordt aangenomen, is een goede volgende stap na dit curriculum het leren over Node.js via een andere verzameling video's: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
|
||||
|
||||
> Bezoek onze [Gedragscode](CODE_OF_CONDUCT.md) en [Bijdragen](CONTRIBUTING.md) richtlijnen. We verwelkomen je constructieve feedback!
|
||||
|
||||
|
||||
## 🧭 Offline toegang
|
||||
|
||||
Je kunt deze documentatie offline uitvoeren met behulp van [Docsify](https://docsify.js.org/#/). Fork deze repo, [installeer Docsify](https://docsify.js.org/#/quickstart) op je lokale machine, en typ vervolgens in de rootmap van deze repo `docsify serve`. De website wordt geserveerd op poort 3000 op je localhost: `localhost:3000`.
|
||||
Je kunt deze documentatie offline gebruiken met [Docsify](https://docsify.js.org/#/). Fork deze repo, installeer [Docsify](https://docsify.js.org/#/quickstart) op je lokale machine en typ dan in de hoofdmap van deze repo `docsify serve`. De website wordt geserveerd op poort 3000 op je localhost: `localhost:3000`.
|
||||
|
||||
## 📘 PDF
|
||||
|
||||
Een PDF van alle lessen is te vinden [hier](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
|
||||
Een PDF met alle lessen is te vinden [hier](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
|
||||
|
||||
|
||||
## 🎒 Andere Cursussen
|
||||
|
||||
Ons team produceert andere cursussen! Bekijk:
|
||||
Ons team maakt ook andere cursussen! Bekijk:
|
||||
|
||||
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
|
||||
### Azure / Edge / MCP / Agents
|
||||
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
### LangChain
|
||||
[](https://aka.ms/langchain4j-for-beginners)
|
||||
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
|
||||
|
||||
---
|
||||
|
||||
### Generatieve AI Serie
|
||||
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
|
||||
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
|
||||
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
|
||||
### Azure / Edge / MCP / Agents
|
||||
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
|
||||
---
|
||||
|
||||
### Kern Leren
|
||||
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
|
||||
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
|
||||
### Generatieve AI-serie
|
||||
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
|
||||
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
|
||||
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
|
||||
|
||||
---
|
||||
|
||||
### Kernleren
|
||||
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
|
||||
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
|
||||
### Copilot Serie
|
||||
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
|
||||
---
|
||||
|
||||
### Copilot-serie
|
||||
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
|
||||
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
|
||||
|
||||
## Hulp krijgen
|
||||
## Hulp krijgen
|
||||
|
||||
Als je vastloopt of vragen hebt over het bouwen van AI-apps, sluit je dan aan bij medeleerlingen en ervaren ontwikkelaars in discussies over MCP. Het is een ondersteunende community waar vragen welkom zijn en kennis vrij wordt gedeeld.
|
||||
Als je vastloopt of vragen hebt over het bouwen van AI-apps. Doe mee met mede-leerlingen en ervaren ontwikkelaars in discussies over MCP. Het is een ondersteunende community waar vragen welkom zijn en kennis vrij wordt gedeeld.
|
||||
|
||||
[](https://discord.gg/nTYy5BXMWG)
|
||||
[](https://discord.gg/nTYy5BXMWG)
|
||||
|
||||
Als je productfeedback hebt of fouten tegenkomt tijdens het bouwen, bezoek dan:
|
||||
Als je productfeedback hebt of fouten tegenkomt tijdens het bouwen bezoek:
|
||||
|
||||
[](https://aka.ms/foundry/forum)
|
||||
[](https://aka.ms/foundry/forum)
|
||||
|
||||
## Licentie
|
||||
## Licentie
|
||||
|
||||
Deze repository is gelicentieerd onder de MIT-licentie. Zie het [LICENSE](../../LICENSE) bestand voor meer informatie.
|
||||
Deze repository is gelicenseerd onder de MIT-licentie. Zie het [LICENSE](../../LICENSE) bestand voor meer informatie.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
|
||||
**Disclaimer**:
|
||||
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel wij streven naar nauwkeurigheid, dient u er rekening mee te houden dat automatische vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet als de gezaghebbende bron worden beschouwd. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,45 +1,30 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
|
||||
"translation_date": "2025-08-26T21:28:30+00:00",
|
||||
"original_hash": "bc5c5550f79d10add90ce419ee34abb3",
|
||||
"translation_date": "2026-01-07T00:13:15+00:00",
|
||||
"source_file": "3-terrarium/README.md",
|
||||
"language_code": "no"
|
||||
}
|
||||
-->
|
||||
# Mitt Terrarium: Et prosjekt for å lære om HTML, CSS og DOM-manipulering med JavaScript 🌵🌱
|
||||
## Distribuer ditt Terrarium
|
||||
|
||||
En liten dra-og-slipp kode-meditasjon. Med litt HTML, JS og CSS vil du kunne bygge et webgrensesnitt, style det, og til og med legge til flere interaksjoner etter eget ønske.
|
||||
|
||||
|
||||
|
||||
# Leksjoner
|
||||
|
||||
1. [Introduksjon til HTML](./1-intro-to-html/README.md)
|
||||
2. [Introduksjon til CSS](./2-intro-to-css/README.md)
|
||||
3. [Introduksjon til DOM og JS Closures](./3-intro-to-DOM-and-closures/README.md)
|
||||
|
||||
## Krediteringer
|
||||
|
||||
Skrevet med ♥️ av [Jen Looper](https://www.twitter.com/jenlooper)
|
||||
|
||||
Terrariet laget via CSS er inspirert av Jakub Mandras glasskrukke [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
|
||||
|
||||
Kunstverket er håndtegnet av [Jen Looper](http://jenlooper.com) med hjelp av Procreate.
|
||||
|
||||
## Publiser ditt Terrarium
|
||||
|
||||
Du kan publisere terrariet ditt på nettet ved hjelp av Azure Static Web Apps.
|
||||
Du kan distribuere, eller publisere ditt Terrarium på nettet ved å bruke **Azure Static Web Apps**.
|
||||
|
||||
1. Fork dette repoet
|
||||
|
||||
2. Trykk på denne knappen
|
||||
2. Trykk på denne knappen 👇
|
||||
|
||||
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
|
||||
[](https://portal.azure.com/#create/Microsoft.StaticApp)
|
||||
|
||||
3. Følg veiviseren for å opprette appen din. Sørg for at du setter app-roten til enten `/solution` eller roten av kodebasen din. Det er ingen API i denne appen, så du trenger ikke bekymre deg for å legge til det. En GitHub-mappe vil bli opprettet i ditt forkede repository som vil hjelpe Azure Static Web Apps' byggeservice med å bygge og publisere appen din til en ny URL.
|
||||
3. Følg oppsettveiviseren for å lage appen din.
|
||||
- Sett **App root** til enten `/solution` eller roten av kodebasen din.
|
||||
- Det er ingen API i denne appen, så du kan hoppe over API-konfigurasjonen.
|
||||
- En `.github`-mappe vil bli laget automatisk for å hjelpe Azure Static Web Apps med å bygge og publisere appen din.
|
||||
|
||||
---
|
||||
|
||||
**Ansvarsfraskrivelse**:
|
||||
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi streber etter nøyaktighet, vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på sitt opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Ansvarsfraskrivelse**:
|
||||
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi tilstreber nøyaktighet, vennligst vær oppmerksom på at automatiserte oversettelser kan inneholde feil eller unøyaktigheter. Det opprinnelige dokumentet på originalspråket bør betraktes som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -1,48 +1,290 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "5adea7059676fcdb1b546ccd54c956c2",
|
||||
"translation_date": "2025-10-23T22:34:14+00:00",
|
||||
"original_hash": "efa2ab875b8bb5a7883816506da6b6d2",
|
||||
"translation_date": "2026-01-07T00:12:22+00:00",
|
||||
"source_file": "4-typing-game/README.md",
|
||||
"language_code": "no"
|
||||
}
|
||||
-->
|
||||
# Hendelsesdrevet programmering - Lag et skrive-spill
|
||||
# Eventdrevet programmering - Lag et skrive-spill
|
||||
|
||||
```mermaid
|
||||
journey
|
||||
title Din utviklingsreise for skrive-spillet
|
||||
section Grunnlag
|
||||
Planlegg spillstruktur: 3: Student
|
||||
Design brukergrensesnitt: 4: Student
|
||||
Sett opp HTML-elementer: 4: Student
|
||||
section Funksjonalitet
|
||||
Håndter brukerinput: 4: Student
|
||||
Spor tidtaking: 5: Student
|
||||
Kalkuler nøyaktighet: 5: Student
|
||||
section Funksjoner
|
||||
Legg til visuell tilbakemelding: 5: Student
|
||||
Implementer spilllogikk: 5: Student
|
||||
Finpuss opplevelsen: 5: Student
|
||||
```
|
||||
## Introduksjon
|
||||
|
||||
Her er noe alle utviklere vet, men sjelden snakker om: å skrive raskt er en superkraft! 🚀 Tenk på det - jo raskere du kan få ideene dine fra hjernen til kodeeditoren, desto mer kan kreativiteten din flyte. Det er som å ha en direkte linje mellom tankene dine og skjermen.
|
||||
Her er noe alle utviklere vet, men sjelden snakker om: å skrive raskt er en superkraft! 🚀 Tenk på det - jo raskere du kan få idéene dine fra hjernen til kodeditoren, desto mer kan kreativiteten flyte. Det er som å ha en direkte pipeline mellom tankene dine og skjermen.
|
||||
|
||||
Vil du vite en av de beste måtene å forbedre denne ferdigheten på? Du gjettet det - vi skal lage et spill!
|
||||
```mermaid
|
||||
pie title Spillfunksjoner
|
||||
"Tilbakemelding i sanntid" : 25
|
||||
"Ytelsessporing" : 20
|
||||
"Interaktivt brukergrensesnitt" : 20
|
||||
"Tidtakersystem" : 15
|
||||
"Sitatbehandling" : 10
|
||||
"Resultatvisning" : 10
|
||||
```
|
||||
Vil du vite en av de beste måtene å forbedre denne ferdigheten på? Du gjettet riktig - vi skal lage et spill!
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A[Spiller starter spillet] --> B[Tilfeldig sitat vises]
|
||||
B --> C[Spiller skriver tegn]
|
||||
C --> D{Tegnet korrekt?}
|
||||
D -->|Ja| E[Grønn utheving]
|
||||
D -->|Nei| F[Rød utheving]
|
||||
E --> G[Oppdater nøyaktighet]
|
||||
F --> G
|
||||
G --> H{Sitat fullført?}
|
||||
H -->|Nei| C
|
||||
H -->|Ja| I[Beregn ord per minutt]
|
||||
I --> J[Vis resultater]
|
||||
J --> K[Spill igjen?]
|
||||
K -->|Ja| B
|
||||
K -->|Nei| L[Spillet er over]
|
||||
|
||||
style A fill:#e1f5fe
|
||||
style D fill:#fff3e0
|
||||
style E fill:#e8f5e8
|
||||
style F fill:#ffebee
|
||||
style I fill:#f3e5f5
|
||||
```
|
||||
> La oss lage et fantastisk skrive-spill sammen!
|
||||
|
||||
Klar til å bruke alle de JavaScript-, HTML- og CSS-ferdighetene du har lært? Vi skal lage et skrive-spill som utfordrer deg med tilfeldige sitater fra den legendariske detektiven [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes). Spillet vil måle hvor raskt og nøyaktig du kan skrive - og tro meg, det er mer avhengighetsskapende enn du kanskje tror!
|
||||
Klar til å jobbe med alle de JavaScript-, HTML- og CSS-ferdighetene du har lært? Vi skal lage et skrive-spill som vil utfordre deg med tilfeldige sitater fra den legendariske detektiven [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes). Spillet vil spore hvor raskt og nøyaktig du kan skrive - og tro meg, det er mer vanedannende enn du kanskje tror!
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
root((Utvikling av skrivespill))
|
||||
User Interface
|
||||
Inndataelementer
|
||||
Visuell tilbakemelding
|
||||
Responsivt design
|
||||
Tilgjengelighet
|
||||
Game Logic
|
||||
Sitatvalg
|
||||
Tidsstyring
|
||||
Nøyaktighetssporing
|
||||
Poengberegning
|
||||
Event Handling
|
||||
Tastaturinndata
|
||||
Knappetrykk
|
||||
Sanntidsoppdateringer
|
||||
Spilltilstandsendringer
|
||||
Performance Metrics
|
||||
Ord per minutt
|
||||
Tegnnøyaktighet
|
||||
Feilsporing
|
||||
Fremdriftsvisning
|
||||
User Experience
|
||||
Umiddelbar tilbakemelding
|
||||
Klare instruksjoner
|
||||
Engasjerende innhold
|
||||
Prestasjonssystem
|
||||
```
|
||||
|
||||
|
||||
## Hva du bør kunne
|
||||
## Hva du trenger å kunne
|
||||
|
||||
Før vi setter i gang, sørg for at du er komfortabel med disse konseptene (ikke bekymre deg hvis du trenger en rask oppfriskning - vi har alle vært der!):
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[Brukerhandling] --> B{Hendelsestype?}
|
||||
B -->|Taste trykket| C[Tastaturhendelse]
|
||||
B -->|Knappeklikk| D[Mus hendelse]
|
||||
B -->|Tidsur| E[Tids hendelse]
|
||||
|
||||
C --> F[Sjekk tegn]
|
||||
D --> G[Start/Nullstill spill]
|
||||
E --> H[Oppdater tidsur]
|
||||
|
||||
F --> I{Riktig?}
|
||||
I -->|Ja| J[Marker grønn]
|
||||
I -->|Nei| K[Marker rød]
|
||||
|
||||
J --> L[Oppdater poengsum]
|
||||
K --> L
|
||||
L --> M[Sjekk spillstatus]
|
||||
|
||||
G --> N[Generer nytt sitat]
|
||||
H --> O[Vis tid]
|
||||
|
||||
M --> P{Spillet fullført?}
|
||||
P -->|Ja| Q[Vis resultater]
|
||||
P -->|Nei| R[Fortsett spill]
|
||||
|
||||
style A fill:#e1f5fe
|
||||
style F fill:#e8f5e8
|
||||
style I fill:#fff3e0
|
||||
style Q fill:#f3e5f5
|
||||
```
|
||||
Før vi begynner, sørg for at du er komfortabel med disse konseptene (ikke bekymre deg hvis du trenger en rask oppfriskning - vi har alle vært der!):
|
||||
|
||||
- Lage tekstinnskriving og knappkontroller
|
||||
- Lage tekstinntak- og knappkontroller
|
||||
- CSS og sette stiler ved hjelp av klasser
|
||||
- Grunnleggende JavaScript
|
||||
- Lage en array
|
||||
- Lage et tilfeldig tall
|
||||
- Hente gjeldende tid
|
||||
- Hente nåværende tid
|
||||
|
||||
Hvis noe av dette føles litt rustent, er det helt greit! Noen ganger er den beste måten å styrke kunnskapen din på å hoppe inn i et prosjekt og finne ut av ting underveis.
|
||||
Hvis noen av disse føles litt rustne, er det helt fint! Noen ganger er den beste måten å styrke kunnskapen på å hoppe inn i et prosjekt og finne ut av ting underveis.
|
||||
|
||||
## La oss bygge dette!
|
||||
### 🔄 **Pedagogisk sjekk**
|
||||
**Grunnvurdering**: Før du begynner utviklingen, sørg for at du forstår:
|
||||
- ✅ Hvordan HTML-skjemaer og inntakselementer fungerer
|
||||
- ✅ CSS-klasser og dynamisk styling
|
||||
- ✅ JavaScript-hendelseslyttere og -håndterere
|
||||
- ✅ Array-manipulering og tilfeldig utvalg
|
||||
- ✅ Tidsmåling og beregninger
|
||||
|
||||
[Opprett et skrive-spill ved hjelp av hendelsesdrevet programmering](./typing-game/README.md)
|
||||
**Rask selvtest**: Kan du forklare hvordan disse konseptene fungerer sammen i et interaktivt spill?
|
||||
- **Hendelser** utløses når brukere interagerer med elementer
|
||||
- **Håndterere** prosesserer hendelsene og oppdaterer spilltilstand
|
||||
- **CSS** gir visuell tilbakemelding på brukerhandlinger
|
||||
- **Timing** gjør det mulig å måle ytelse og spillutvikling
|
||||
|
||||
## Kreditering
|
||||
```mermaid
|
||||
quadrantChart
|
||||
title Ferdighetsutvikling i skrivespill
|
||||
x-axis Nybegynner --> Ekspert
|
||||
y-axis Statisk --> Interaktiv
|
||||
quadrant-1 Avanserte spill
|
||||
quadrant-2 Sanntidsapper
|
||||
quadrant-3 Grunnleggende sider
|
||||
quadrant-4 Interaktive nettsteder
|
||||
|
||||
HTML Forms: [0.3, 0.2]
|
||||
CSS Styling: [0.4, 0.3]
|
||||
Event Handling: [0.7, 0.8]
|
||||
Game Logic: [0.8, 0.9]
|
||||
Performance Tracking: [0.9, 0.7]
|
||||
```
|
||||
## La oss lage dette!
|
||||
|
||||
[Opprette et skrive-spill ved å bruke eventdrevet programmering](./typing-game/README.md)
|
||||
|
||||
### ⚡ **Hva du kan gjøre på de neste 5 minuttene**
|
||||
- [ ] Åpne nettleserkonsollen din og prøv å lytte etter tastaturhendelser med `addEventListener`
|
||||
- [ ] Lag en enkel HTML-side med et inntaksfelt og test skrivegjenkjenning
|
||||
- [ ] Øv på strengmanipulering ved å sammenligne skrevet tekst med måltekst
|
||||
- [ ] Eksperimenter med `setTimeout` for å forstå tidsfunksjoner
|
||||
|
||||
### 🎯 **Hva du kan få til denne timen**
|
||||
- [ ] Fullfør quiz etter leksjonen og forstå eventdrevet programmering
|
||||
- [ ] Lag en grunnleggende versjon av skrive-spillet med ordvalidering
|
||||
- [ ] Legg til visuell tilbakemelding for riktig og feil skriving
|
||||
- [ ] Implementer et enkelt poengsystem basert på hastighet og nøyaktighet
|
||||
- [ ] Style spillet ditt med CSS for å gjøre det visuelt tiltalende
|
||||
|
||||
### 📅 **Din ukelange spillutvikling**
|
||||
- [ ] Fullfør det fullstendige skrive-spillet med alle funksjoner og finpuss
|
||||
- [ ] Legg til vanskelighetsgrader med varierende ordkompleksitet
|
||||
- [ ] Implementer statistikksporing for brukere (WPM, nøyaktighet over tid)
|
||||
- [ ] Lag lydeffekter og animasjoner for bedre brukeropplevelse
|
||||
- [ ] Gjør spillet ditt mobilvennlig for touch-enheter
|
||||
- [ ] Del spillet ditt på nett og samle tilbakemeldinger fra brukere
|
||||
|
||||
### 🌟 **Din månedslange interaktive utvikling**
|
||||
- [ ] Lag flere spill som utforsker ulike interaksjonsmønstre
|
||||
- [ ] Lær om spill-løkker, tilstandshåndtering og ytelsesoptimalisering
|
||||
- [ ] Bidra til open source prosjekter for spillutvikling
|
||||
- [ ] Mestre avanserte tidskonsepter og jevne animasjoner
|
||||
- [ ] Lag en portefølje som viser diverse interaktive applikasjoner
|
||||
- [ ] Veiled andre som er interessert i spillutvikling og brukerinteraksjon
|
||||
|
||||
## 🎯 Din tidslinje for å mestre skrive-spillet
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
title Spillutvikling Læringsprogresjon
|
||||
|
||||
section Oppsett (10 minutter)
|
||||
Prosjektstruktur: HTML grunnlag
|
||||
: CSS styling oppsett
|
||||
: JavaScript filopprettelse
|
||||
|
||||
section Brukergrensesnitt (20 minutter)
|
||||
Interaktive Elementer: Inndatafelt
|
||||
: Knappekontroller
|
||||
: Visningsområder
|
||||
: Responsivt oppsett
|
||||
|
||||
section Hendelseshåndtering (25 minutter)
|
||||
Brukerinteraksjon: Tastaturhendelser
|
||||
: Mus hendelser
|
||||
: Tilbakemelding i sanntid
|
||||
: Tilstandsbehandling
|
||||
|
||||
section Spilllogikk (30 minutter)
|
||||
Kjernefunksjonalitet: Sitatgenerering
|
||||
: Tegnsammenligning
|
||||
: Nøyaktighetsberegning
|
||||
: Timerimplementering
|
||||
|
||||
section Ytelsessporing (35 minutter)
|
||||
Metrikker & Analyse: WPM-beregning
|
||||
: Feilsporing
|
||||
: Visualisering av fremgang
|
||||
: Resultatvisning
|
||||
|
||||
section Polering & Forbedring (45 minutter)
|
||||
Brukeropplevelse: Visuell tilbakemelding
|
||||
: Lyd effekter
|
||||
: Animasjoner
|
||||
: Tilgangsfunksjoner
|
||||
|
||||
section Avanserte Funksjoner (1 uke)
|
||||
Utvidet Funksjonalitet: Vanskelighetsnivåer
|
||||
: Topplister
|
||||
: Tilpassede sitater
|
||||
: Flerspilleralternativer
|
||||
|
||||
section Profesjonelle Ferdigheter (1 måned)
|
||||
Spillutvikling: Ytelsesoptimalisering
|
||||
: Kodearkitektur
|
||||
: Testing strategier
|
||||
: Distribusjonsmønstre
|
||||
```
|
||||
### 🛠️ Oppsummering av ditt spillutviklingsverktøy
|
||||
|
||||
Etter å ha fullført dette prosjektet, vil du ha mestret:
|
||||
- **Eventdrevet programmering**: Responsive brukergrensesnitt som reagerer på input
|
||||
- **Sanntidstilbakemelding**: Øyeblikkelige visuelle og ytelsesoppdateringer
|
||||
- **Ytelsesmåling**: Nøyaktige tids- og poengsystemer
|
||||
- **Spilltilstandshåndtering**: Kontroll på applikasjonsflyt og brukeropplevelse
|
||||
- **Interaktiv design**: Å skape engasjerende og vanedannende brukeropplevelser
|
||||
- **Moderne Web-APIer**: Utnytte nettleserfunksjoner for rike interaksjoner
|
||||
- **Tilgjengelighetsmønstre**: Inkluderende design for alle brukere
|
||||
|
||||
**Virkelige bruksområder**: Disse ferdighetene gjelder direkte til:
|
||||
- **Webapplikasjoner**: Alle interaktive grensesnitt eller dashbord
|
||||
- **Utdanningsprogramvare**: Læringsplattformer og ferdighetstestverktøy
|
||||
- **Produktivitetsverktøy**: Tekstredigerere, IDEer og samarbeidsprogramvare
|
||||
- **Spillindustrien**: Nettleserspill og interaktiv underholdning
|
||||
- **Mobilutvikling**: Touchbaserte grensesnitt og gesthåndtering
|
||||
|
||||
**Neste nivå**: Du er klar til å utforske avanserte spillrammeverk, sanntid flerspillersystemer eller komplekse interaktive applikasjoner!
|
||||
|
||||
## Credits
|
||||
|
||||
Skrevet med ♥️ av [Christopher Harrison](http://www.twitter.com/geektrainer)
|
||||
|
||||
---
|
||||
|
||||
**Ansvarsfraskrivelse**:
|
||||
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi streber etter nøyaktighet, vær oppmerksom på at automatiserte oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på sitt opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Ansvarsfraskrivelse**:
|
||||
Dette dokumentet er oversatt ved bruk av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi streber etter nøyaktighet, vennligst merk at automatiserte oversettelser kan inneholde feil eller unøyaktigheter. Originaldokumentet på dets opprinnelige språk skal anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi fraskriver oss ansvar for eventuelle misforståelser eller feiltolkninger som følge av bruk av denne oversettelsen.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
Loading…
Reference in new issue