Web-Dev-For-Beginners/translations/fi

Verkkokehitys aloittelijoille - Opetussuunnitelma

Opi verkkokehityksen perusteet Microsoft Cloud Advocatesin kattavalla 12 viikon kurssilla. Jokainen 24 oppitunnista sukeltaa JavaScriptiin, CSS:ään ja HTML:ään käytännön projektien kautta, kuten terrarioihin, selaimen laajennuksiin ja avaruuspeliin. Osallistu tietovisoihin, keskusteluihin ja käytännön tehtäviin. Kehitä taitojasi ja optimoi tiedon omaksumisesi tehokkaalla projektilähtöisellä opetuksellamme. Aloita koodausmatkasi tänään!

Liity Azure AI Foundry Discord -yhteisöön

Seuraa näitä vaiheita aloittaaksesi näiden resurssien käytön:

1. Forkkaa repositorio: Klikkaa
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ä

🌐 Monikielinen tuki

Tuettu GitHub Actionin kautta (automaattinen ja aina ajan tasalla)

Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese

Haluatko kloonata paikallisesti?

Tämä repositorio sisältää yli 50 käännöskieltä, jotka kasvattavat merkittävästi latauskokoa. Jos haluat kloonata ilman käännöksiä, käytä sparse checkout -ominaisuutta:

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'

Tämä antaa sinulle kaiken tarvittavan kurssin suorittamiseen nopeammalla latauksella.

Jos haluat lisää käännöskieliä, tuetut kielet ovat listattu tässä

🧑‍🎓 Oletko opiskelija?

Vieraile Student Hub -sivulla, josta löydät aloittelijoille suunnattuja resursseja, opiskelijapakkauksia ja jopa tapoja saada ilmainen sertifikaattikuponki. Tämä sivu kannattaa lisätä kirjanmerkkeihin ja tarkistaa aika ajoin, koska päivitämme sisältöä kuukausittain.

📣 Ilmoitus - Uudet GitHub Copilot Agent -tilahaasteet suoritettavaksi!

Uusi haaste lisätty, etsi "GitHub Copilot Agent Challenge 🚀" useimmista luvuista. Tämä on uusi haaste, joka sinun tulee suorittaa käyttäen GitHub Copilotia ja Agent-tilaa. Jos et ole aiemmin käyttänyt Agent-tilaa, se kykenee paitsi luomaan tekstiä myös luomaan ja muokkaamaan tiedostoja, suorittamaan komentoja ja muuta.

📣 Ilmoitus - Uusi projekti generatiivisella tekoälyllä rakennettavaksi

Uusi tekoälyavustajaprojekti juuri lisätty, katso projekti

📣 Ilmoitus - Uusi opetussuunnitelma generatiivisesta tekoälystä JavaScriptille on julkaistu

Älä missaa uutta generatiivisen tekoälyn opetussuunnitelmaamme!

Käy osoitteessa https://aka.ms/genai-js-course aloittaaksesi!

• Oppitunnit kattavat kaiken perusteista RAG-menetelmään.
• Keskustele historiallisten hahmojen kanssa GenAI:n ja kumppanisovelluksemme avulla.
• Hauska ja mukaansatempaava tarina, matkustat ajassa!

Jokaisen oppitunnin yhteydessä on tehtävä suoritettavaksi, tietotarkistus ja haaste, jotka ohjaavat oppimista aiheissa kuten:

• Kehottaminen ja kehotteiden suunnittelu
• Teksti- ja kuvasovellusten generointi
• Hakusovellukset

Käy sivulla https://aka.ms/genai-js-course ryhtyäksesi toimeen!

🌱 Aloittaminen

Opettajat, olemme sisällyttäneet joitain ehdotuksia tämän opetussuunnitelman käyttöön. Haluamme mielellämme palautettanne keskustelufoorumillamme!

Oppijat, jokaiselle oppitunnille aloita ennakkotietovisalla ja seuraa luentoaineiston lukemista, erilaisten aktiviteettien suorittamista ja tarkista ymmärryksesi jälkitietovisalla.

Paranna oppimiskokemustasi yhdistämällä vertaistesi kanssa projektien parissa työskentelyä varten! Kannustamme keskusteluihin keskustelufoorumillamme, missä moderaattoritiimimme vastaa kysymyksiisi.

Jatka opiskeluasi vahvasti suositellen tutustumista Microsoft Learn -palveluun lisäopiskelumateriaalien saamiseksi.

📋 Ympäristön asetukset

Tässä opetussuunnitelmassa on valmiina kehitysympäristö! Aloittaessasi voit valita kurssin ajamisen Codespacessa (selainpohjainen, ei asennuksia vaativa ympäristö) tai paikallisesti tietokoneellasi tekstieditoria, kuten Visual Studio Code, käyttäen.

Luo oma repositoriosi

Työsi tallentamisen helpottamiseksi suosittelemme luomaan oman kopion tästä repositoriosta. Voit tehdä tämän klikkaamalla sivun yläreunasta Use this template -painiketta. Tämä luo uuden repositorion GitHub-tilillesi kopiona tästä opetussuunnitelmasta.

Noudata näitä ohjeita:

1. Forkkaa repositorio: Klikkaa tämän sivun oikean yläkulman "Fork" -painiketta.
2. Kloonaa repositorio: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Kurssin ajaminen Codespacessa

Oman kopsisi repositoriosta, jonka loit, klikkaa Code -painiketta ja valitse Open with Codespaces. Tämä luo sinulle uuden Codespace-ympäristön työtä varten.

Kurssin ajaminen paikallisesti tietokoneellasi

Jotta voit suorittaa opetussuunnitelman paikallisesti tietokoneellasi, tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, Ohjelmointikielten ja työkalujen esittely, opastaa sinua eri vaihtoehtojen kanssa, jotta voit valita sinulle sopivimmat työkalut.

Suosittelemme käyttämään editorina Visual Studio Codea, jossa on myös sisäänrakennettu Komentorivi. Voit ladata Visual Studio Coden tästä.

1. Kloonaa oma repositoriosi tietokoneellesi. Voit tehdä tämän klikkaamalla Code -painiketta ja kopioimalla URL-osoitteen:

   CodeSpace Avaa sitten Terminal Visual Studio Codessa Visual Studio Code ja suorita seuraava komento korvaten <your-repository-url> juuri kopioimallasi URL-osoitteella:

   git clone <your-repository-url>
   

2. Avaa kansio Visual Studio Codessa. Voit tehdä tämän valitsemalla File > Open Folder ja valitsemalla kansio, jonka juuri kloonasit.

Suositellut Visual Studio Code -laajennukset:

• Live Server - esikatsele HTML-sivuja Visual Studio Codessa
• Copilot - auttaaksesi koodin kirjoittamisessa nopeammin

📂 Jokainen oppitunti sisältää:

• valinnaisen muistion
• valinnaisen lisävideon
• ennakkoon tehtävän lämmittelykyselyn
• kirjallisen oppitunnin
• projektipohjaisissa oppitunneissa vaiheittaiset ohjeet projektin rakentamiseen
• tietovisat
• haasteen
• lisälukemista
• tehtävän
• oppitunnin jälkeinen tietovisa

Huomautus tietovisoista: Kaikki tietovisat löytyvät Quiz-app-kansiosta, yhteensä 48 tietovisaa, joissa jokaisessa on kolme kysymystä. Ne ovat saatavilla täältä. Kyseistä quiz-sovellusta voi ajaa paikallisesti tai julkaista Azureen; seuraa ohjeita quiz-app-kansiossa.

🗃️ Oppitunnit

	Projektin nimi	Opitut käsitteet	Oppimistavoitteet	Linkitetty oppitunti	Tekijä
01	Aloittaminen	Johdatus ohjelmointiin ja ammattityökaluihin	Opi ohjelmointikielten perusperiaatteet ja ohjelmistot, jotka auttavat ammattilaisia työssään	Johdatus ohjelmointikieliin ja työkaluihin	Jasmine
02	Aloittaminen	GitHubin perusteet, tiimityöskentely	Kuinka käyttää GitHubia projektissasi, miten tehdä yhteistyötä koodin parissa	Johdatus GitHubiin	Floor
03	Aloittaminen	Saavutettavuus	Opi verkkosivujen saavutettavuuden perusteet	Saavutettavuuden perusteet	Christopher
04	JS Basics	JavaScriptin tietotyypit	JavaScriptin tietotyyppien perusteet	Tietotyypit	Jasmine
05	JS Basics	Funktiot ja metodit	Opi funktioista ja metodeista sovelluksen logiikan hallinnassa	Funktiot ja metodit	Jasmine and Christopher
06	JS Basics	Päätöksenteko JS:n avulla	Opi luomaan ehdotuksia koodissasi käyttäen päätöksentekometodeja	Päätöksenteko	Jasmine
07	JS Basics	Taulukot ja silmukat	Työskentele tietojen kanssa käyttämällä taulukoita ja silmukoita JavaScriptissä	Taulukot ja silmukat	Jasmine
08	Terrarium	HTML käytännössä	Rakenna HTML luodaksesi verkkoterraariumin, keskittyen asettelun rakentamiseen	Johdatus HTML:ään	Jen
09	Terrarium	CSS käytännössä	Rakenna CSS tyylitelläksesi verkkoterraariumia, keskittyen CSS:n perusteisiin ja sivun responsiivisuuteen	Johdatus CSS:ään	Jen
10	Terrarium	JavaScriptin sulkeet, DOM:n käsittely	Rakenna JavaScript, joka mahdollistaa terraariumin käytön drag/drop-käyttöliittymänä, keskittyen sulkeisiin ja DOM:n käsittelyyn	JavaScriptin sulkeet, DOM:n käsittely	Jen
11	Typing Game	Kirjoituspelin rakentaminen	Opi käyttämään näppäimistötapahtumia JavaScript-sovelluksesi logiikan ohjaamiseen	Tapahtumapohjainen ohjelmointi	Christopher
12	Green Browser Extension	Työskentely selainten kanssa	Opi miten selaimet toimivat, niiden historia, ja miten rakennetaan selaimen lisäosan ensimmäiset elementit	Tietoa selaimista	Jen
13	Green Browser Extension	Lomakkeen rakentaminen, API-kutsut ja muuttujien tallennus paikalliseen tallennustilaan	Rakenna selaimen laajennuksen JavaScript-elementit API-kutsuihin käyttäen paikalliseen tallennustilaan tallennettuja muuttujia	APIt, lomakkeet ja paikallinen tallennustila	Jen
14	Green Browser Extension	Taustaprosessit selaimessa, verkkosuorituskyky	Käytä selaimen taustaprosesseja hallitsemaan lisäosan kuvaketta; opi verkkosuorituskyvystä ja optimointikeinoista suorituskyvyn parantamiseksi	Taustatehtävät ja suorituskyky	Jen
15	Space Game	Edistyneempi pelinkehitys JavaScriptillä	Opi perinnöstä käyttäen sekä luokkia että koostetta sekä Pub/Sub-kuviota, valmistautuaksesi pelin rakentamiseen	Johdatus edistyneeseen pelinkehitykseen	Chris
16	Space Game	Piirtäminen canvasille	Opi Canvas API:sta, jota käytetään elementtien piirtämiseen näytölle	Piirtäminen canvasille	Chris
17	Space Game	Elementtien liikuttaminen näytöllä	Löydä, miten elementit voivat liikkua käyttäen karteesisia koordinaatteja ja Canvas API:a	Elementtien liikuttaminen	Chris
18	Space Game	Törmäystunnistus	Tee elementtien törmäys ja reagointi toisiinsa näppäinten avulla, ja tarjoa jäähdytysfunktio pelin suorituskyvyn varmistamiseksi	Törmäystunnistus	Chris
19	Space Game	Pisteiden hallinta	Suorita matemaattisia laskelmia pelin tilan ja suorituksen perusteella	Pisteiden hallinta	Chris
20	Space Game	Pelin lopetus ja uudelleenkäynnistys	Opi pelin lopettamisesta ja uudelleenkäynnistyksestä, mukaan lukien resurssien siivous ja muuttujien nollaaminen	Lopetusehto	Chris
21	Banking App	HTML-pohjat ja reitit web-sovelluksessa	Opi luomaan monisivuisen verkkosivuston arkkitehtuurin runko käyttäen reititystä ja HTML-pohjia	HTML-pohjat ja reitit	Yohan
22	Banking App	Kirjautumis- ja rekisteröitymislomakkeen rakentaminen	Opi lomakkeiden rakentamisesta ja validointirutiinien käsittelystä	Lomakkeet	Yohan
23	Banking App	Datan hakemisen ja käytön menetelmät	Kuinka data virtaa sovelluksesi sisään ja ulos, miten hakea sitä, tallentaa ja poistaa	Data	Yohan
24	Banking App	Tilanhallinnan käsitteet	Opi, miten sovelluksesi säilyttää tilansa ja miten hallita tilaa ohjelmallisesti	Tilanhallinta	Yohan
25	Browser/VScode Code	Työskentely VScoden kanssa	Opi käyttämään koodieditoria	Käytä VScode Code Editoria	Chris
26	AI Assistants	Työskentely tekoälyn kanssa	Opi rakentamaan oma tekoälyavustajasi	AI Assistant -projekti	Chris

🏫 Pedagogiikka

Opintosuunnitelmamme on suunniteltu kahden keskeisen pedagogisen periaatteen mukaisesti:

• projektiperustainen oppiminen
• tiheät tietovisat

Ohjelma opettaa JavaScriptin, HTML:n ja CSS:n perusteet sekä uusimmat työkalut ja tekniikat, joita nykypäivän web-kehittäjät käyttävät. Opiskelijat saavat mahdollisuuden kehittää käytännön kokemusta rakentamalla kirjoituspelin, virtuaaliterraariumin, ympäristöystävällisen selainlaajennuksen, avaruushyökkääjätyylisen pelin ja pankkisovelluksen yrityksille. Sarjan lopussa opiskelijoilla on vankka ymmärrys verkkokehityksestä.

🎓 Voit suorittaa tämän opetussuunnitelman ensimmäiset oppitunnit myös Microsoft Learnin Learn Path -kautta!

Sisällön yhdistäminen projekteihin tekee oppimisprosessista opiskelijoille innostavamman ja käsitteiden omaksuminen paranee. Kirjoitimme myös useita aloittelevia oppitunteja JavaScriptin perusteista esittelemään käsitteitä, parina videon kanssa kokoelmasta "Beginners Series to: JavaScript", joiden jotkut tekijöistä osallistuivat tämän opetussuunnitelman laatimiseen.

Lisäksi matalan panoksen tietovisa ennen luentoa asettaa opiskelijan oppimistavoitteet, kun taas toinen tietovisa tunnin jälkeen varmistaa käsitteiden paremman muistamisen. Tämä opetussuunnitelma on suunniteltu joustavaksi ja hauskaksi, ja sen voi suorittaa kokonaan tai osittain. Projektit alkavat pieninä ja monimutkaistuvat vähitellen 12 viikon jakson aikana.

Vaikka olemme tarkoituksella välttäneet JavaScript-kehysten esittelyä keskittyäksemme verkkokehittäjän perustaitoihin ennen kehysten käyttöönottoa, hyvä seuraava askel tämän opetussuunnitelman jälkeen olisi Node.js:n opiskelu toisen videosarjan avulla: "Beginner Series to: Node.js".

Käy myös tutustumassa käyttäytymissääntöihimme ja osallistumisohjeisiimme. Otamme mielellämme vastaan rakentavaa palautettasi!

🧭 Offline-käyttö

Voit käyttää tätä dokumentaatiota offline-tilassa käyttäen Docsify. Haarauta tämä repositorio, asenna Docsify paikalliselle koneellesi ja kirjoita sitten tämän repositorion juurikansiossa docsify serve. Verkkosivusto on saatavilla portissa 3000 osoitteessa localhost:3000.

📘 PDF

Kaikista oppitunneista löytyy PDF-versio täältä.

🎒 Muut kurssit

Tiimimme tuottaa myös muita kursseja! Tutustu:

LangChain

Azure / Edge / MCP / Agents

---

Generatiivisen tekoälyn sarja

---

Perusopetus

---

Copilot-sarja

Apua

Jos jumitut tai sinulla on kysymyksiä tekoälysovellusten rakentamisesta, liity oppijoiden ja kokeneiden kehittäjien keskusteluihin MCP:stä. Se on tukevainen yhteisö, jossa kysymykset ovat tervetulleita ja tieto jaetaan vapaasti.

Jos sinulla on palautetta tuotteesta tai kohtaat virheitä rakentamisen aikana, käy osoitteessa:

Lisenssi

Tämä arkisto on lisensoitu MIT-lisenssillä. Katso lisätietoja tiedostosta LICENSE.

---

Vastuuvapauslauseke: Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua Co-op Translator. Pyrimme tarkkuuteen, mutta huomioithan, että automaattiset käännökset saattavat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäiskielellä tulisi katsoa auktoritatiiviseksi lähteeksi. Tärkeissä tietoasemissa suosittelemme ammattimaista ihmiskäännöstä. Emme ota vastuuta mahdollisista väärinymmärryksistä tai virhetulkintaista, jotka johtuvat tämän käännöksen käytöstä.