Web-Dev-For-Beginners/translations/fi

Verkkokehitys aloittelijoille - Opetussuunnitelma

Opi verkkokehityksen perusteet 12 viikon kattavalla kurssillamme, jonka on kehittänyt Microsoft Cloud Advocates. Jokainen 24 oppitunnista syventyy JavaScriptiin, CSS:ään ja HTML:ään käytännön projektien kautta, kuten terrariumeihin, selaimen laajennuksiin ja avaruuspeliin. Osallistu visoihin, keskusteluihin ja käytännön tehtäviin. Kehitä taitojasi ja optimoi tiedon säilytyskykyä tehokkaan projektipohjaisen opetusmetodimme avulla. Aloita koodausmatkasi jo tänään!

Liity Azure AI Foundry Discord -yhteisöön

Noudata näitä vaiheita päästäksesi alkuun näiden resurssien kanssa:

1. Haarauta 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 ja 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ässä repositoriossa on yli 50 käännöstä, mikä lisää merkittävästi latauskoon. Jos haluat kloonata ilman käännöksiä, käytä sparse checkoutia:

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, mitä tarvitset kurssin suorittamiseen huomattavasti nopeammalla latauksella.

Jos haluat lisätä tuettuja käännöskieliä, ne on listattu tässä

🧑‍🎓 Oletko opiskelija?

Vieraile Student Hub -sivulla, josta löydät aloittelijan resurssit, opiskelijapaketit ja jopa tapoja saada ilmainen sertifikaattikuponki. Tämä on sivu, jonka haluat tallentaa kirjanmerkkeihin ja tarkistaa säännöllisesti, sillä sisältöä vaihdetaan kuukausittain.

📣 Ilmoitus – Uusia GitHub Copilot Agent -tilan haasteita suoritettavaksi!

Uusi haaste lisätty, katso "GitHub Copilot Agent Challenge 🚀" useimmista luvuista. Tämä on uusi haaste, jonka voit suorittaa käyttämällä GitHub Copilotia ja Agent-tilaa. Jos et ole aiemmin käyttänyt Agent-tilaa, se pystyy paitsi generoimaan tekstiä, myös luomaan ja muokkaamaan tiedostoja, suorittamaan komentoja ja muuta.

📣 Ilmoitus – Uusi generatiiviseen tekoälyyn perustuva projekti rakennettavaksi

Uusi AI-avustajaprojekti juuri lisätty, tutustu projektiin

📣 Ilmoitus – Uusi Generative AI -opetussuunnitelma JavaScriptille julkaistu

Älä jää paitsi uudesta Generative AI -opetussuunnitelmastamme!

Aloita https://aka.ms/genai-js-course

• Oppitunteja perusteista RAG-malliin asti.
• Keskustele historiallisten hahmojen kanssa GenAI:n ja kumppanisovelluksemme avulla.
• Hauska ja mukaansatempaava tarinankerronta, matkustat ajassa!

Jokainen oppitunti sisältää tehtävän suoritettavaksi, tietokokeen ja haasteen, jotka ohjaavat sinua oppimaan aiheita, kuten:

• Promptauksen ja promptinsuunnittelun perusteet
• Teksti- ja kuvapohjaiset sovellukset
• Hakusovellukset

Aloita täällä: https://aka.ms/genai-js-course

🌱 Aloittaminen

Opettajat, olemme sisällyttäneet ehdotuksia tämän opetussuunnitelman käyttöön. Toivomme palautettasi keskustelufoorumissamme!

Oppijat, aloita jokainen oppitunti ennakkokyselyllä ja jatka luentomateriaalin lukemisella, suorita erilaiset aktiviteetit ja testaa ymmärryksesi jälkikyselyllä.

Paranna oppimiskokemustasi liittymällä vertaistesi seuraan projekteissa! Keskustelut ovat tervetulleita keskustelufoorumillamme, jossa moderaattoritiimimme vastaa kysymyksiisi.

Syvennä osaamistasi tutustumalla myös Microsoft Learniin lisäopetusmateriaaleja varten.

📋 Ympäristön asennus

Tämän opetussuunnitelman kehitysympäristö on valmiina! Aloittaessasi voit valita suorittaa opetussuunnitelman Codespacessa (selaimessa toimiva, ei asennuksia vaativa ympäristö) tai paikallisesti tietokoneellasi tekstieditorilla, kuten Visual Studio Code.

Luo oma repositoriosi

Jotta voit helposti tallentaa työsi, suosittelemme luomaan oman kopion tästä repositoriosta. Voit tehdä tämän painamalla sivun yläreunassa olevaa Use this template -painiketta. Tämä luo uuden repositorion GitHub-tilillesi, joka sisältää kopion opetussuunnitelmasta.

Noudata näitä ohjeita:

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

Opetussuunnitelman suorittaminen Codespacessa

Oman kopion repositoriosta luomasi jälkeen napsauta Code-painiketta ja valitse Open with Codespaces. Tämä luo sinulle uuden Codespace-ympäristön työskennellä.

Opetussuunnitelman suorittaminen paikallisesti tietokoneellasi

Jos haluat suorittaa opetussuunnitelman paikallisesti tietokoneellasi, tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, Johdanto ohjelmointikieliin ja työkaluihin, opastaa sinut eri vaihtoehtojen pariin, jotta voit valita itsellesi sopivimmat työkalut.

Suosittelemme käyttämään tekstieditorina Visual Studio Codea, joka sisältää myös sisäänrakennetun Komentorivin. Voit ladata Visual Studio Coden tästä.

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

   CodeSpace Sitten avaa Pääte 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 Tiedosto > Avaa kansio ja valitsemalla juuri kloonaamasi kansion.

Suositellut Visual Studio Code -laajennukset:

• Live Server - esikatsele HTML-sivuja suoraan Visual Studio Codessa
• Copilot - auttaaksesi sinua kirjoittamaan koodia nopeammin

📂 Jokainen oppitunti sisältää:

• valinnaisen luonnosmuistion
• valinnaisen lisävideon
• ennakkolämmittelykyselyn ennen oppituntia
• kirjallisen oppitunnin
• projektilähtöisissä oppitunneissa vaiheittaiset ohjeet projektin rakentamiseen
• tietotestin
• haasteen
• lisälukemista
• tehtävän
• oppitunnin jälkeisen kyselyn

Huomio kyselyistä: Kaikki kyselyt löytyvät Quiz-app-kansiosta, yhteensä 48 kyselyä joissa jokaisessa kolme kysymystä. Ne ovat saatavilla tässä. Kyselysovelluksen voi ajaa paikallisesti tai julkaista Azureen; noudata ohjeita quiz-app-kansiossa.

🗃️ Oppitunnit

	Projektin nimi	Opitut käsitteet	Oppimistavoitteet	Linkitetty oppitunti	Tekijä
01	Aloittaminen	Johdanto ohjelmointiin ja työkaluihin	Opettele lähes kaikkien ohjelmointikielten perusperiaatteet sekä ohjelmistot jotka auttavat ammattilaisia työnsä tekemisessä	Ohjelmointikielten ja työkalujen johdanto	Jasmine
02	Aloittaminen	GitHubin perusteet, tiimityöskentely	Miten käytät GitHubia projektissasi ja teet yhteistyötä muiden kanssa koodipohjan parissa	GitHubin johdanto	Floor
03	Aloittaminen	Esteettömyys	Opi verkkosivujen esteettömyyden perusteet	Esteettömyyden perusteet	Christopher
04	JS Basics	JavaScriptin tietotyypit	JavaScriptin tietotyyppien perusteet	Tietotyypit	Jasmine
05	JS Basics	Funktiot ja metodit	Opettele funktioista ja metodeista sovelluksen logiikan hallintaan	Funktiot ja metodit	Jasmine ja Christopher
06	JS Basics	Päätöksenteko JavaScriptillä	Opettele luomaan ehtoja koodissa päätöksentekomenetelmien avulla	Päätöksenteko	Jasmine
07	JS Basics	Taulukot ja silmukat	Työskentele tietojen kanssa taulukkojen ja silmukoiden avulla JavaScriptissä	Taulukot ja silmukat	Jasmine
08	Terrarium	HTML-käytännössä	Rakenna HTML verkossa olevaa terrariota varten, keskittyen asettelun rakentamiseen	Johdanto HTML:ään	Jen
09	Terrarium	CSS-käytännössä	Rakenna CSS tyylittämään verkossa olevaa terrariota, keskittyen CSS:n perusteisiin ja sivun responsiivisuuteen	Johdanto CSS:ään	Jen
10	Terrarium	JavaScriptin sulkeet, DOM-käsittely	Rakenna JavaScript terrariumin vetämis- ja pudotusliittymän toiminnalle, keskittyen sulkuihin ja DOM:n käsittelyyn	JavaScriptin sulkeet ja DOM-käsittely	Jen
11	Typing Game	Kirjoituspelin rakentaminen	Opi käyttämään näppäimistötapahtumia sovelluksen logiikan ohjaamiseen	Tapahtumapohjainen ohjelmointi	Christopher
12	Green Browser Extension	Työskentely selainten kanssa	Opi miten selaimet toimivat, niiden historia sekä miten rakentaa selaimen laajennuksen ensimmäiset elementit	Selaimista	Jen
13	Green Browser Extension	Lomakkeen rakentaminen, API-kutsu ja muuttujien tallennus paikalliseen tallennustilaan	Rakenna JavaScript-selaimen laajennuksen elementit API-kutsujen tekemiseen muuttujien avulla, jotka tallennetaan paikalliseen tallennustilaan	API:t, lomakkeet ja paikallinen tallennus	Jen
14	Green Browser Extension	Taustaprosessit selaimessa, verkkotehokkuus	Hyödynnä selaimen taustaprosesseja laajennuksen kuvakkeen hallinnassa; opi verkkotehokkuudesta ja optimoinneista	Taustatehtävät ja suorituskyky	Jen
15	Space Game	Kehittyneempi pelikehitys JavaScriptillä	Opi perinnöstä luokkien ja koostumuksen avulla sekä Pub/Sub-kuviosta valmistautuaksesi pelin rakentamiseen	Johdanto kehittyneeseen pelikehitykseen	Chris
16	Space Game	Piirtäminen canvakselle	Opi Canvas API:sta, joka on käytössä ruudulle piirtämisessä	Piirtäminen canvakselle	Chris
17	Space Game	Elementtien liikuttaminen ruudulla	Opi miten elementit liikkuvat karteesisissa koordinaateissa ja Canvas APIn avulla	Elementtien liikuttaminen	Chris
18	Space Game	Törmäyksentunnistus	Tee elementeistä törmäileviä ja reagoivia, käytä näppäinkomentoja ja tarjoa jäähdytysfunktio pelin toiminnan varmistamiseksi	Törmäyksentunnistus	Chris
19	Space Game	Pisteiden laskeminen	Suorita matemaattisia laskutoimituksia pelin tilaan ja suoritukseen perustuen	Pisteiden laskeminen	Chris
20	Space Game	Pelin lopetus ja uudelleenkäynnistys	Opi pelin lopettamisesta ja uudelleenkäynnistyksestä, mukaan lukien resurssien siivous ja muuttujien arvon nollaus	Lopetusehto	Chris
21	Banking App	HTML-pohjat ja reitit web-sovelluksessa	Opi luomaan monisivuisen verkkosivun arkkitehtuurin runko reitityksen ja HTML-pohjien avulla	HTML-pohjat ja reitit	Yohan
22	Banking App	Kirjautumis- ja rekisteröintilomakkeen rakentaminen	Tutustu lomakkeiden rakentamiseen ja validointirutiinien käsittelyyn	Lomakkeet	Yohan
23	Banking App	Datan hakemisen ja käytön menetelmät	Miten data virtaa sovellukseesi, miten hakea, tallentaa ja poistaa sitä	Data	Yohan
24	Banking App	Tilanhallinnan käsitteet	Opi miten sovelluksesi säilyttää tilansa ja hallitsee sitä ohjelmallisesti	Tilanhallinta	Yohan
25	Selaimen/VScode koodi	Työskentely VScoden kanssa	Opi käyttämään koodieditoria	Käytä VScode koodieditoria	Chris
26	AI-apulaiset	Työskentely tekoälyn kanssa	Opi rakentamaan oma tekoälyavustajasi	AI-avustajaprojekti	Chris

🏫 Pedagogiikka

Oppimäärämme on suunniteltu kahden keskeisen pedagogisen periaatteen mukaisesti:

• projektipohjainen oppiminen
• säännölliset kyselyt

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 saavat käytännön kokemusta rakentamalla kirjoituspelin, virtuaalisen terrariumin, ekologisen selaimen laajennuksen, avaruusmuukalaisaiheisen pelin ja yrityskäyttöön tarkoitetun pankkisovelluksen. Sarjan lopussa oppilaat ovat hankkineet vahvan ymmärryksen verkkokehityksestä.

🎓 Voit suorittaa tämän oppimäärän ensimmäiset oppitunnit Microsoft Learnin Oppimispolun kautta!

Varmistamalla, että sisältö vastaa projekteja, prosessi tehdään opiskelijoille kiinnostavammaksi ja käsitteiden omaksuminen tehostuu. Kirjoitimme myös useita aloitusoppitunteja JavaScriptin perusteista esittelemään käsitteitä, jotka on yhdistetty videoon "Beginners Series to: JavaScript" -videokokoelmasta, joiden tekijöistä osa osallistui tähän oppimäärään.

Lisäksi kevyt kysely ennen tuntia suuntaa opiskelijan tarkoitusta oppia aihetta, ja toinen kysely tunnin jälkeen takaa lisäomaksumisen. Tämä oppimäärä on suunniteltu joustavaksi ja hauskaksi, ja sen voi suorittaa kokonaan tai osittain. Projektit alkavat pienestä ja monimutkaistuvat vähitellen 12 viikon jakson loppuun mennessä.

Vaikka olemme tarkoituksella välttäneet JavaScript-kehysten esittelyä keskittyäksemme perusosaamiseen, joka web-kehittäjällä tulee olla ennen kehysten käyttöönottoa, hyvä seuraava askel oppimäärän suorittamisen jälkeen olisi Node.js:n opiskeluun keskittyvä videokokoelma: "Beginner Series to: Node.js".

Tutustu käyttäytymissääntöihimme ja osallistumisohjeisiin. Otamme mielellämme vastaan rakentavaa palautettasi!

🧭 Offline-käyttö

Voit käyttää tätä dokumentaatiota offline-tilassa käyttämällä Docsifyä. Forkkaa tämä repositorio, asenna Docsify paikalliselle koneellesi, ja aja sitten tämän repojen juuressa komentoa docsify serve. Verkkosivusto palvellaan portissa 3000 osoitteessa localhost:3000.

📘 PDF

Kaikkien oppituntien PDF löytyy täältä.

🎒 Muut kurssit

Tiimimme tuottaa myös muita kursseja! Tutustu:

LangChain

---

Azure / Edge / MCP / Agentit

---

Generatiivinen AI -sarja

---

Perusopiskelu

---

Copilot-sarja

Apua saamaan

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 tietoa jaetaan vapaasti.

Jos sinulla on tuotepalautetta tai rakentaessa ilmenee virheitä, käy:

Lisenssi

Tämä arkisto on lisensoitu MIT-lisenssillä. Lisätietoja on tiedostossa LICENSE.

---

Vastuuvapauslauseke: Tämä asiakirja on käännetty tekoälypohjaisella käännöspalvelulla Co-op Translator. Vaikka pyrimme tarkkuuteen, otathan huomioon, että automaattikäännöksissä voi esiintyä virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäiskielellä tulee pitää ensisijaisena lähteenä. Tärkeissä asioissa suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä aiheutuvista väärinymmärryksistä tai tulkinnoista.