Web-Dev-For-Beginners/translations/fi

Web-kehitys aloittelijoille - Opetussuunnitelma

Opi web-kehityksen 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 visailuihin, keskusteluihin ja käytännön tehtäviin. Paranna taitojasi ja optimoi tiedon omaksumisesi tehokkaalla projektipohjaisella pedagogiikallamme. Aloita koodausmatkasi jo tänään!

Liity Azure AI Foundry Discord-yhteisöön

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

1. Haarauta arkisto: Klikkaa
2. Kloonaa arkisto: 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 (automaattisesti 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 | Korean | Lithuanian | Malay | Marathi | Nepali | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Thai | Turkish | Ukrainian | Urdu | Vietnamese

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

🧑‍🎓 Oletko opiskelija?

Käy Student Hub -sivulla, josta löydät aloittelijaresursseja, opiskelijapakkauksia ja jopa tapoja saada ilmainen sertifikaattivoucher. 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!

Uusi haaste lisätty, etsi "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 käyttänyt Agent-tilaa aiemmin, se ei ainoastaan generoi tekstiä, vaan voi myös luoda ja muokata tiedostoja, suorittaa komentoja ja paljon muuta.

📣 Ilmoitus - Uusi projekti Generatiivisen tekoälyn avulla

Uusi AI Assistant -projekti juuri lisätty, tutustu siihen projekti

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

Älä missaa uutta Generatiivisen tekoälyn opetussuunnitelmaa!

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

• Oppitunteja, jotka kattavat kaiken perusteista RAG:iin.
• Keskustele historiallisten hahmojen kanssa GenAI:n ja kumppanisovelluksemme avulla.
• Hauska ja mukaansatempaava tarina, jossa matkustat ajassa!

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

• Kehotus ja kehotustekniikat
• Teksti- ja kuvasovellusten luominen
• Hakusovellukset

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

🌱 Aloittaminen

Opettajat, olemme lisänneet joitakin ehdotuksia siitä, miten tätä opetussuunnitelmaa voi käyttää. Haluaisimme kuulla palautettanne keskustelufoorumillamme!

Oppijat, jokaisen oppitunnin alussa aloita ennakkovisalla ja jatka lukemalla oppituntimateriaali, suorittamalla erilaisia aktiviteetteja ja tarkista ymmärryksesi jälkivisalla.

Parantaaksesi oppimiskokemustasi, yhdistä voimasi muiden kanssa ja työskentele projekteissa yhdessä! Keskusteluja kannustetaan keskustelufoorumillamme, jossa moderaattoritiimimme on valmiina vastaamaan kysymyksiisi.

Jatkaaksesi oppimista suosittelemme tutustumaan Microsoft Learn -sivustoon lisämateriaalien löytämiseksi.

📋 Ympäristön asettaminen

Tämä opetussuunnitelma sisältää valmiin kehitysympäristön! Aloittaessasi voit valita, haluatko käyttää opetussuunnitelmaa Codespacessa (selaimen kautta, ei asennuksia tarvita), tai paikallisesti tietokoneellasi tekstieditorin, kuten Visual Studio Code, avulla.

Luo oma arkisto

Jotta voit helposti tallentaa työsi, suosittelemme, että luot oman kopion tästä arkistosta. Voit tehdä tämän napsauttamalla Käytä tätä mallia -painiketta sivun yläosassa. Tämä luo uuden arkiston GitHub-tilillesi, joka sisältää kopion opetussuunnitelmasta.

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

Opetussuunnitelman suorittaminen Codespacessa

Aiemmin luomassasi arkistossa napsauta Koodi-painiketta ja valitse Avaa Codespacessa. Tämä luo uuden Codespacen, jossa voit työskennellä.

Opetussuunnitelman suorittaminen paikallisesti tietokoneellasi

Jos haluat suorittaa tämän opetussuunnitelman paikallisesti tietokoneellasi, tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, Johdatus ohjelmointikieliin ja työkaluihin, opastaa sinut eri vaihtoehtojen läpi, jotta voit valita sinulle parhaiten sopivat työkalut.

Suosituksemme on käyttää Visual Studio Code -editoria, jossa on myös sisäänrakennettu Terminal. Voit ladata Visual Studio Coden täältä.

1. Kloonaa arkistosi tietokoneellesi. Voit tehdä tämän napsauttamalla Koodi-painiketta ja kopioimalla URL-osoitteen:

   CodeSpace

   Avaa sitten Terminal 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 kloonatun kansion.

Suositellut Visual Studio Code -laajennukset:

• Live Server - HTML-sivujen esikatseluun Visual Studio Codessa
• Copilot - auttaa sinua kirjoittamaan koodia nopeammin

📂 Jokainen oppitunti sisältää:

• valinnainen piirrosmuistio
• valinnainen lisävideo
• alkulämmittelykysely ennen oppituntia
• kirjallinen oppitunti
• projektipohjaisissa oppitunneissa vaiheittaiset ohjeet projektin rakentamiseen
• tietotarkistukset
• haaste
• lisälukemista
• tehtävä
• jälkituntikysely

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

🗃️ Oppitunnit

	Projektin nimi	Opetettavat käsitteet	Oppimistavoitteet	Linkitetty oppitunti	Tekijä
01	Aloitus	Johdatus ohjelmointiin ja kehitystyökaluihin	Opi ohjelmointikielten perusperiaatteet ja ohjelmistot, jotka auttavat ammattilaiskehittäjiä työssään	Johdatus ohjelmointikieliin ja kehitystyökaluihin	Jasmine
02	Aloitus	GitHubin perusteet, sisältäen tiimityöskentelyn	Kuinka käyttää GitHubia projektissasi ja tehdä yhteistyötä muiden kanssa koodipohjassa	Johdatus GitHubiin	Floor
03	Aloitus	Saavutettavuus	Opi verkkosaavutettavuuden perusteet	Saavutettavuuden perusteet	Christopher
04	JS-perusteet	JavaScriptin tietotyypit	JavaScriptin tietotyyppien perusteet	Tietotyypit	Jasmine
05	JS-perusteet	Funktiot ja metodit	Opi funktioista ja metodeista sovelluksen logiikan hallinnassa	Funktiot ja metodit	Jasmine ja Christopher
06	JS-perusteet	Päätöksenteko JS:llä	Opi luomaan ehtoja koodissasi päätöksentekomenetelmien avulla	Päätöksenteko	Jasmine
07	JS-perusteet	Taulukot ja silmukat	Työskentele datan kanssa JavaScriptin taulukoiden ja silmukoiden avulla	Taulukot ja silmukat	Jasmine
08	Terrarium	HTML käytännössä	Rakenna HTML luodaksesi verkkoterrariumin, keskittyen ulkoasun rakentamiseen	Johdatus HTML:ään	Jen
09	Terrarium	CSS käytännössä	Rakenna CSS tyylittääksesi verkkoterrariumin, keskittyen CSS:n perusteisiin, mukaan lukien sivun responsiivisuus	Johdatus CSS:ään	Jen
10	Terrarium	JavaScriptin sulkeumat, DOM-manipulointi	Rakenna JavaScript, jotta terrarium toimii vedä ja pudota -käyttöliittymänä, keskittyen sulkeumiin ja DOM-manipulointiin	JavaScriptin sulkeumat, DOM-manipulointi	Jen
11	Kirjoituspeli	Rakenna kirjoituspeli	Opi käyttämään näppäimistötapahtumia JavaScript-sovelluksesi logiikan ohjaamiseen	Tapahtumapohjainen ohjelmointi	Christopher
12	Vihreä selainlaajennus	Työskentely selainten kanssa	Opi, miten selaimet toimivat, niiden historia ja miten selainlaajennuksen ensimmäiset elementit rakennetaan	Tietoa selaimista	Jen
13	Vihreä selainlaajennus	Lomakkeen rakentaminen, API:n kutsuminen ja muuttujien tallentaminen paikalliseen muistiin	Rakenna selainlaajennuksesi JavaScript-elementit kutsumaan API:a käyttäen paikalliseen muistiin tallennettuja muuttujia	API:t, lomakkeet ja paikallinen muisti	Jen
14	Vihreä selainlaajennus	Taustaprosessit selaimessa, verkkosuorituskyky	Käytä selaimen taustaprosesseja hallitsemaan laajennuksen kuvaketta; opi verkkosuorituskyvystä ja optimoinneista	Taustatehtävät ja suorituskyky	Jen
15	Avaruuspeli	Edistyneempi pelikehitys JavaScriptillä	Opi perimästä käyttäen sekä luokkia että koostamista sekä Pub/Sub-mallista, valmistautuen pelin rakentamiseen	Johdatus edistyneeseen pelikehitykseen	Chris
16	Avaruuspeli	Piirtäminen kankaalle	Opi Canvas API:sta, jota käytetään elementtien piirtämiseen näytölle	Piirtäminen kankaalle	Chris
17	Avaruuspeli	Elementtien liikuttaminen näytöllä	Opi, miten elementit voivat liikkua koordinaatiston ja Canvas API:n avulla	Elementtien liikuttaminen	Chris
18	Avaruuspeli	Törmäysten tunnistus	Tee elementeistä törmääviä ja reagoivia toisiinsa näppäinpainallusten avulla ja tarjoa viivefunktio pelin suorituskyvyn varmistamiseksi	Törmäysten tunnistus	Chris
19	Avaruuspeli	Pisteiden laskeminen	Suorita matemaattisia laskelmia pelin tilan ja suorituskyvyn perusteella	Pisteiden laskeminen	Chris
20	Avaruuspeli	Pelin lopettaminen ja uudelleenkäynnistys	Opi pelin lopettamisesta ja uudelleenkäynnistämisestä, mukaan lukien resurssien siivoaminen ja muuttujien arvojen palauttaminen	Lopetusehto	Chris
21	Pankkisovellus	HTML-mallit ja reititys verkkosovelluksessa	Opi luomaan monisivuisen verkkosivuston arkkitehtuurin perusta reitityksen ja HTML-mallien avulla	HTML-mallit ja reititys	Yohan
22	Pankkisovellus	Kirjautumis- ja rekisteröintilomakkeen rakentaminen	Opi rakentamaan lomakkeita ja käsittelemään validointirutiineja	Lomakkeet	Yohan
23	Pankkisovellus	Datan hakemisen ja käytön menetelmät	Kuinka data kulkee sisään ja ulos sovelluksestasi, kuinka sitä haetaan, tallennetaan ja käsitellään	Data	Yohan
24	Pankkisovellus	Tilanhallinnan käsitteet	Opi, miten sovelluksesi säilyttää tilan ja miten sitä hallitaan ohjelmallisesti	Tilanhallinta	Yohan
25	Selain/VScode-koodi	Työskentely VScodessa	Opi käyttämään koodieditoria	Koodieditorin käyttö VScodessa	Chris
26	AI-avustajat	Työskentely tekoälyn kanssa	Opi rakentamaan oma tekoälyavustaja	AI-avustajaprojekti	Chris

🏫 Pedagogiikka

Opetussuunnitelmamme perustuu kahteen keskeiseen pedagogiseen periaatteeseen:

• projektipohjainen oppiminen
• säännölliset 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. Opiskelijoilla on mahdollisuus hankkia käytännön kokemusta rakentamalla kirjoituspelin, virtuaalisen terrariumin, ympäristöystävällisen selainlaajennuksen, avaruuspelin ja yrityksille suunnatun pankkisovelluksen. Sarjan lopussa opiskelijoilla on vankka ymmärrys verkkokehityksestä.

🎓 Voit suorittaa tämän opetussuunnitelman ensimmäiset oppitunnit Learn Path-kurssina Microsoft Learn -alustalla!

Varmistamalla, että sisältö liittyy projekteihin, prosessi on opiskelijoille kiinnostavampi ja käsitteiden omaksuminen paranee. Kirjoitimme myös useita JavaScriptin perusteisiin liittyviä aloitusoppitunteja, jotka esittelevät käsitteitä, ja ne on yhdistetty videoon "Beginners Series to: JavaScript" -videotutoriaalikokoelmasta, jonka jotkut tämän opetussuunnitelman tekijät ovat laatineet.

Lisäksi matalan kynnyksen kysely ennen oppituntia ohjaa opiskelijan huomion aiheen oppimiseen, kun taas toinen kysely oppitunnin jälkeen varmistaa paremman omaksumisen. 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 loppua kohden.

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

Tutustu Code of Conduct ja Contributing -ohjeisiimme. Otamme mielellämme vastaan rakentavaa palautetta!

🧭 Offline-käyttö

Voit käyttää tätä dokumentaatiota offline-tilassa Docsify avulla. Haaroita tämä repo, asenna Docsify paikalliselle koneellesi ja kirjoita tämän repon juurikansiossa docsify serve. Verkkosivusto palvelee portissa 3000 paikallisessa verkossasi: localhost:3000.

📘 PDF

PDF kaikista oppitunneista löytyy täältä.

🎒 Muut kurssit

Tiimimme tuottaa myös muita kursseja! Tutustu:

• MCP for Beginners
• Edge AI for Beginners
• AI Agents for Beginners
• Generative AI for Beginners .NET
• Generative AI with JavaScript
• Generatiivinen tekoäly Java-kielellä
• Tekoäly aloittelijoille
• Data-analytiikka aloittelijoille
• Koneoppiminen aloittelijoille
• Kyberturvallisuus aloittelijoille
• Web-kehitys aloittelijoille
• IoT aloittelijoille
• XR-kehitys aloittelijoille
• GitHub Copilotin hallinta agenttipohjaiseen käyttöön
• GitHub Copilotin hallinta C#/.NET-kehittäjille
• Valitse oma Copilot-seikkailusi

Apua saatavilla

Jos jäät jumiin tai sinulla on kysymyksiä tekoälysovellusten rakentamisesta, liity:

Jos sinulla on tuotepalautetta tai kohtaat virheitä rakentamisen aikana, vieraile:

Lisenssi

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

---

Vastuuvapauslauseke:
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua Co-op Translator. Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa 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ä.