Web-Dev-For-Beginners/translations/fi

Verkkokehitys aloittelijoille - Opetussuunnitelma

Opi verkkokehityksen perusteet kattavassa 12 viikon kurssissamme, jonka järjestävät Microsoft Cloud Advocates -tiimin jäsenet. Jokainen 24 oppitunnista sukeltaa JavaScriptiin, CSS:ään ja HTML:ään käytännön projektien, kuten terrarion, selaimen laajennusten ja avaruuspeliin, kautta. Osallistu tietokilpailuihin, keskusteluihin ja käytännön tehtäviin. Paranna taitojasi ja optimoi oppimisesi tehokkaalla projektipohjaisella opetuksellamme. Aloita koodausmatkasi tänään!

Liity Azure AI Foundry Discord -yhteisöön

Noudata näitä ohjeita aloittaaksesi näiden resurssien käytön:

1. Forkkaa Repository: Klikkaa
2. Kloonaa Repository: 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 & Aina ajan tasalla)

Arabia | Bengali | Bulgaria | Burma (Myanmar) | Kiina (yksinkertaistettu) | Kiina (perinteinen, Hongkong) | Kiina (perinteinen, Macao) | Kiina (perinteinen, Taiwan) | Kroatia | Tsekki | Tanska | Hollanti | Viro | Suomi | Ranska | Saksa | Kreikka | Heprea | Hindi | Unkari | Indonesia | Italia | Japani | Kannada | Korea | Liettua | Malaiji | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norja | Persia (Farsi) | Puola | Portugali (Brasilia) | Portugali (Portugali) | Punjabi (Gurmukhi) | Romania | Venäjä | Serbia (kyrillinen) | Slovakki | Sloveeni | Espanja | Swahili | Ruotsi | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkki | Ukraina | Urdu | Vietnam

Haluatko Kloonaa Paikallisesti?

Tämä arkisto sisältää yli 50 kielen käännöksiä, jotka lisäävät huomattavasti lataustiedoston kokoa. Jos haluat kloonata ilman käännöksiä, käytä sparse checkout🅰️

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 paljon nopeammalla latauksella.

Jos haluat lisätä lisää käännettyjä kieliä, tuetut kielet löytyvät täältä

🧑‍🎓 Oletko opiskelija?

Vieraile Student Hub -sivulla, josta löydät aloittelijan resurssit, opiskelijapaketit ja jopa tapoja saada ilmainen sertifikaattivoucher. Tämä on sivu, jonka haluat tallentaa kirjanmerkkeihin ja tarkistaa silloin tällöin, sillä sisältömme vaihtuu kuukausittain.

📣 Ilmoitus - Uudet GitHub Copilot Agent -tilahaasteet suoritettavaksi!

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

📣 Ilmoitus - Uusi Generatiivisen tekoälyn projekti rakennettavaksi

Uusi tekoälyavustajaprojekti juuri lisätty, tutustu projektiin

📣 Ilmoitus - Uusi opetussuunnitelma Generatiivisesta tekoälystä JavaScriptille juuri julkaistu

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

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

• Oppitunteja kaikesta alkeista RAG:iin asti.
• Ole vuorovaikutuksessa historiallisten hahmojen kanssa GenAI:n ja kumppanisovelluksemme avulla.
• Hauska ja mukaansatempaava kertomus, matkustat ajassa!

Jokaisessa oppitunnissa on suoritettava tehtävä, tietotarkistus ja haaste, jotka ohjaavat sinua oppimaan aiheista kuten:

• Kehote ja kehotteen suunnittelu
• Tekstin ja kuvan sovellustuotanto
• Hakusovellukset

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

🌱 Aloittaminen

Opettajat, olemme sisällyttäneet joitain ehdotuksia tämän opetussuunnitelman käytöstä. Haluaisimme saada palautettanne keskustelufoorumissamme!

Oppijat, aloita jokainen oppitunti ennakkotietovisalla ja jatka sitten luentomateriaalin lukemiseen, erilaisten aktiviteettien suorittamiseen ja ymmärryksesi tarkistamiseen luennon jälkeisellä visalla.

Parantaaksesi oppimiskokemustasi, ota yhteyttä muihin oppijoihin työskennelläksesi projekteissa yhdessä! Keskusteluja kannustetaan keskustelufoorumissamme, jossa moderaattoritiimimme on valmiina vastaamaan kysymyksiisi.

Jatka opiskelua tutustumalla suositelloimme Microsoft Learning -materiaaleihin.

📋 Ympäristön asettaminen

Tässä opetussuunnitelmassa on kehitysympäristö valmiina käyttöön! Alkaessasi voit valita suorittaa opetussuunnitelman Codespacessa (selainsovellus, johon ei tarvitse asentaa mitään) tai paikallisesti tietokoneella tekstieditorilla, kuten Visual Studio Code.

Luo oma repositoriosi

Jotta voit helposti tallentaa työsi, on suositeltavaa luoda oma kopiosi tästä repositoriosta. Voit tehdä tämän napsauttamalla sivun yläreunassa olevaa Use this template -painiketta. Tämä luo uuden repositorion GitHub-tilillesi opetussuunnitelman kopion kera.

Noudata näitä ohjeita:

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

Suorita opetussuunnitelma Codespacessa

Oman kopiosi repositoriosta, jonka loit, klikkaa Code -painiketta ja valitse Open with Codespaces. Tämä luo uuden Codespacen, jossa voit työskennellä.

Suorita opetussuunnitelma paikallisesti tietokoneellasi

Suorittaaksesi opetussuunnitelman paikallisesti tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, Ohjelmointikielien ja työkalujen perusasioiden esittely, opastaa sinua erilaisten näiden työkalujen vaihtoehtojen valinnassa.

Suosituksemme on käyttää tekstieditorina 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 napsauttamalla Code -painiketta ja kopioimalla URL-osoitteen:

   CodeSpace Avaa sitten Terminaali Visual Studio Codessa 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 napsauttamalla Tiedosto > Avaa kansio ja valitsemalla juuri kloonaamasi kansion.

Suositellut Visual Studio Code -laajennukset:

• Live Server - HTML-sivujen esikatseluun Visual Studio Codessa
• Copilot - koodin kirjoittamisen nopeuttamiseen

📂 Jokainen oppitunti sisältää:

• valinnaisen luonnosmuistiinpanon
• valinnaisen lisävideon
• ennakkolämmittelykyselyn
• kirjoitetun oppitunnin
• projektipohjaisissa oppitunneissa vaiheittaiset ohjeet projektin rakentamiseen
• tietovarmistukset
• haasteen
• lisälukemista
• tehtävän
• oppitunnin jälkeisen kyselyn

Huomautus kyselyistä: Kaikki kyselyt on koottu Quiz-app-kansioon, yhteensä 48 kyselyä, joissa kullakin on kolme kysymystä. Ne ovat saatavilla tässä. Kyselysovelluksen voi suorittaa paikallisesti tai ottaa käyttöön Azureen; noudata quiz-app-kansion ohjeita.

🗃️ Oppitunnit

	Projektin nimi	Opitut käsitteet	Oppimistavoitteet	Linkitetty oppitunti	Tekijä
01	Aloittaminen	Johdatus ohjelmointiin ja työkaluihin	Opit ohjelmointikielten perustan ja ohjelmistot, jotka auttavat ammattilaiskehittäjiä työssään	Johdatus ohjelmointikieliin ja työkaluihin	Jasmine
02	Aloittaminen	GitHubin perusteet, tiimityöskentely	Kuinka käyttää GitHubia projektissasi ja tehdä yhteistyötä muiden kanssa koodipohjassa	Johdatus GitHubiin	Floor
03	Aloittaminen	Saavutettavuus	Opit verkkosaavutettavuuden perusteet	Saavutettavuuden perusteet	Christopher
04	JS Perusteet	JavaScriptin tietotyypit	JavaScriptin tietotyyppien perusteet	Tietotyypit	Jasmine
05	JS Perusteet	Funktiot ja metodit	Opit funktioista ja metodeista sovelluksen logiikan hallinnassa	Funktiot ja metodit	Jasmine ja Christopher
06	JS Perusteet	Päätöksenteko JS:llä	Opit luomaan olosuhteita koodissasi päätöksentekomenetelmien avulla	Päätöksenteko	Jasmine
07	JS Perusteet	Taulukot ja silmukat	Työskentele tietojen kanssa taulukoiden ja silmukoiden avulla JavaScriptissä	Taulukot ja silmukat	Jasmine
08	Terrarium	HTML käytännössä	Rakenna HTML luodaksesi online-terraariumin, keskittyen asettelun tekemiseen	Johdatus HTML:ään	Jen
09	Terrarium	CSS käytännössä	Rakenna CSS tietoystävän terraariumin tyylittelyä varten, keskittyen CSS:n perusteisiin mukaan lukien responsiivisuus	Johdatus CSS:ään	Jen
10	Terrarium	JavaScript sulkeet, DOM-manipulointi	Rakenna JavaScript, joka mahdollistaa terraariumin toiminnan drag/drop-käyttöliittymänä, keskittyen sulkeisiin ja DOM-manipulointiin	JavaScript sulkeet ja DOM-manipulointi	Jen
11	Typing Game	Kirjoituspelin rakentaminen	Opit käyttämään näppäimistötapahtumia JavaScript-sovelluksesi logiikan ohjaamiseen	Tapahtumapohjainen ohjelmointi	Christopher
12	Green Browser Extension	Selainten toiminta	Opit miten selaimet toimivat, niiden historian ja miten rakentaa ensimmäiset elementit selainlaajennukseen	Tietoa selaimista	Jen
13	Green Browser Extension	Lomakkeen rakentaminen, API-kutsut ja muuttujien tallennus	Rakenna selainlaajennukseesi JavaScript-elementit API-kutsuihin paikallisesti tallennettujen muuttujien avulla	APIt, lomakkeet ja paikallinen tallennus	Jen
14	Green Browser Extension	Selaintaustaprosessit, verkkosuorituskyky	Käytä selaimen taustaprosesseja hallitsemaan laajennuksen kuvaketta; opi verkkosuorituskyvystä ja optimointikeinoista	Taustatehtävät ja suorituskyky	Jen
15	Space Game	Edistyneempi pelinkehitys JavaScriptillä	Opit periytymisestä luokkien ja komposition avulla sekä Pub/Sub-kuvioista valmistautuessasi pelin rakentamiseen	Johdatus edistyneeseen pelinkehitykseen	Chris
16	Space Game	Piirtäminen kankaalle	Opit Canvas API:stä, jota käytetään elementtien piirtämiseen näytölle	Piirtäminen kankaalle	Chris
17	Space Game	Elementtien liikuttaminen näytöllä	Tutustu, miten elementit saavat liikkeen käyttäen karteesisia koordinaatteja ja Canvas API:ta	Elementtien liikuttaminen	Chris
18	Space Game	Törmäyksentunnistus	Tee, että elementit törmäävät ja reagoivat toisiinsa näppäinyhdistelmillä ja tarjoavat jäähdytystoiminnon pelin suorituskyvyn turvaamiseksi	Törmäyksentunnistus	Chris
19	Space Game	Pisteiden laskeminen	Tee matemaattisia laskelmia pelin tilan ja suorituksen perusteella	Pisteiden laskeminen	Chris
20	Space Game	Pelin lopettaminen ja uudelleenkäynnistys	Opit pelin lopettamisesta ja uudelleenkäynnistämisestä, mukaan lukien resurssien siivous ja muuttujien arvojen nollaus	Lopetusehto	Chris
21	Pankkisovellus	HTML-mallit ja reitit web-sovelluksessa	Opit luomaan monisivuisen verkkosivuston arkkitehtuurin runkoa reitityksen ja HTML-mallien avulla	HTML-mallit ja reitit	Yohan
22	Pankkisovellus	Kirjautumis- ja rekisteröitymislomakkeen rakentaminen	Opit lomakkeiden rakentamisesta ja validointirutiinien käsittelystä	Lomakkeet	Yohan
23	Pankkisovellus	Datan hakeminen ja käyttö	Kuinka data virtaa sovellukseesi, miten hakea, tallentaa ja poistaa sitä	Data	Yohan
24	Pankkisovellus	Tilanhallinnan käsitteet	Opit, miten sovelluksesi säilyttää tilan ja miten hallita sitä ohjelmallisesti	Tilanhallinta	Yohan
25	Selain/VScode-koodi	Työskentely VScoden kanssa	Opit käyttämään koodieditoria	Käytä VScode-koodieditoria	Chris
26	AI Assistants	Työskentely tekoälyn kanssa	Opit rakentamaan oman tekoälyavustajan	AI-avustajaprojekti	Chris

🏫 Pedagogiikka

Oppimateriaalimme on suunniteltu kahden keskeisen pedagogisen periaatteen pohjalta:

• projektioppiminen
• usein toistuvat kyselyt

Ohjelma opettaa JavaScriptin, HTML:n ja CSS:n perusteet sekä nykyaikaisten web-kehittäjien käyttämiä työkaluja ja tekniikoita. Oppilailla on mahdollisuus kehittää käytännön taitoja rakentamalla kirjoituspeli, virtuaaliterraario, ympäristöystävällinen selainlaajennus, avaruustyyppinen peli ja liiketoiminta-pankkisovellus. Sarjan lopussa opiskelijoilla on vankka ymmärrys web-kehityksestä.

🎓 Voit suorittaa tämän oppilaitoksen ensimmäiset oppitunnit Oppimispolku-muodossa Microsoft Learnissa!

Varmistamalla sisällön yhteensopivuuden projektien kanssa prosessi tulee opiskelijoille mielekkäämmäksi ja käsitteiden omaksuminen tehostuu. Kirjoitimme myös useita aloitusoppitunteja JavaScript-perusteista käynnistämään kokonaisuuden, jotka on yhdistetty videosarjaan "Beginners Series to: JavaScript", joiden tekijät osallistuivat tähän oppimateriaalin kokoamiseen.

Lisäksi aloituskysely luokkahuoneen edellä asettaa opiskelijan tavoitteen aiheeseen tutustumiselle, ja luokan jälkeinen toinen kysely tukee oppien säilymistä. Tämä oppimateriaali on suunniteltu joustavaksi ja hauskaksi, ja se voidaan suorittaa kokonaisuudessaan tai osittain. Projektit alkavat pienestä ja monimutkaistuvat viimeistään 12 viikon syklin loppuun mennessä.

Vaikka olemme tietoisesti välttäneet JavaScript-kehysten käyttöönottoa keskittyäksemme web-kehittäjän perusvalmiuksiin ennen kehysten omaksumista, hyvä seuraava askel tämän oppimateriaalin suorittamisen jälkeen on oppia Node.js:stä toisen videosarjan avulla: "Beginner Series to: Node.js".

Tutustu myös käytösohjeisiimme ja osallistumisohjeisiin. Otamme mielellämme vastaan rakentavaa palautettasi!

🧭 Offline-käyttö

Voit käyttää tätä dokumentaatiota offline-tilassa käyttämällä Docsifya. Haarauta tämä repo, asenna Docsify paikallisesti ja kirjoita tämän repokansion juurikansiossa komento docsify serve. Verkkosivusto toimii portissa 3000 paikallisessa koneessasi: localhost:3000.

📘 PDF

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

🎒 Muut kurssit

Tiimimme tuottaa muitakin kursseja! Tutustu:

LangChain

Azure / Edge / MCP / Agents

---

Generatiivisen tekoälyn sarja

---

Perusteet

---

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 tukeva yhteisö, jossa kysymyksiä saa esittää ja tietoa jaetaan vapaasti.

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

Lisenssi

Tämä arkisto on lisensoitu MIT-lisenssillä. Lisätietoja löytyy tiedostosta LICENSE.

---

Vastuuvapauslauseke: Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua Co-op Translator. Vaikka pyrimme tarkkuuteen, ole hyvä ja huomioi, että automaattikäännöksissä saattaa esiintyä virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäiskielellä tulisi pitää virallisena lähteenä. Tärkeissä tiedoissa suositellaan ammattilaisten tekemää ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä johtuvista väärinymmärryksistä tai tulkinnoista.