Web-Dev-For-Beginners/translations/fi

Verkkokehitys aloittelijoille – Opetussuunnitelma

Opi verkkokehityksen perusteet Microsoft Cloud Advocatesin 12 viikon kattavan kurssin avulla. Jokainen 24 oppitunnista sukeltaa JavaScriptin, CSS:n ja HTML:n maailmaan käytännön projekteilla, kuten terraarioilla, selainlaajennuksilla ja avaruuspeleillä. Osallistu tietovisoihin, keskusteluihin ja käytännön tehtäviin. Kehitä taitojasi ja optimoi tiedon omaksuminen tehokkaan projektiperusteisen opetuksen avulla. Aloita koodausmatkasi tänään!

Liity Azure AI Foundryn Discord-palvelimeen ja tapaa asiantuntijoita ja muita kehittäjiä.

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

1. Tee forkki arkistosta: Klikkaa
2. Kloonaa arkisto: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Liity Azure AI Foundryn Discordiin ja tapaa asiantuntijat ja kehittäjäkollegat

🌐 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 | Khmer | 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ä arkisto sisältää yli 50 käännettyä kieltä, mikä lisää huomattavasti latauskokoa. Kloonataksesi ilman käännöksiä, käytä sparse checkoutia:

Bash / macOS / Linux:

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'

CMD (Windows):

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

Jos haluat lisää käännöksiä, tuetut kielet löytyvät täältä. tästä

🧑‍🎓 Oletko opiskelija?

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

📣 Ilmoitus – Uudet GitHub Copilot Agent -tilan haasteet suoritettavaksi!

Uusi haaste lisätty, etsi „GitHub Copilot Agent Challenge 🚀” useimmista luvuista. Tämä on uusi haaste sinulle käytettäväksi GitHub Copilotin ja Agent-tilan avulla. Jos et ole aiemmin käyttänyt Agent-tilaa, se pystyy tuottamaan tekstiä, mutta myös luomaan ja muokkaamaan tiedostoja, suorittamaan komentoja ja muuta.

📣 Ilmoitus – Uusi Generatiiviseen tekoälyyn perustuva projekti rakenteilla

Uusi tekoälyavustajaprojekti juuri lisätty, tutustu projektiin

📣 Ilmoitus – Uusi opetussuunnitelma generatiivisesta tekoälystä JavaScriptillä juuri julkaistu

Älä missaa uutta Generatiivisen tekoälyn opetussuunnitelmaamme!

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

• Oppitunnit kattavat kaiken perusasioista RAG:iin (Retrieval-Augmented Generation).
• Vuorovaikutusta historiallisten hahmojen kanssa GenAI:n ja seurassovelluksemme avulla.
• Hauska ja mukaansatempaava tarinankerronta, matkustat ajassa!

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

• Kehote- ja kehotesuunnittelu
• Tekstin ja kuvan sovellusgenerointi
• Hakusovellukset

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

🌱 Aloita

Opettajat, olemme lisänneet joitakin vinkkejä kuinka käyttää tätä opetussuunnitelmaa. Arvostamme palautettanne keskustelufoorumissamme!

Oppijat, aloita jokainen oppitunti esiluentokyselyllä ja jatka lukemalla luentomateriaalit, tekemällä eri harjoitukset ja tarkista ymmärryksesi jälkiluentokyselyllä.

Paranna oppimiskokemustasi yhdistämällä muiden oppijoiden kanssa työskentelemään projekteissa yhdessä! Keskusteluja suositellaan keskustelufoorumissamme, jossa moderaattoritiimimme vastaa kysymyksiisi.

Jatkaaksesi opiskelua suosittelemme lämpimästi tutustumaan Microsoft Learniin saadaksesi lisämateriaaleja.

📋 Ympäristön asennus

Tämä opetussuunnitelma sisältää valmiin kehitysympäristön! Aloittaessasi voit valita suorittaa opetussuunnitelman Codespacessa (selainpohjainen ympäristö, johon ei tarvitse asentaa mitään) tai paikallisesti tietokoneellasi tekstieditorilla kuten Visual Studio Code.

Luo oma arkistosi

Työsi tallentamisen helpottamiseksi on suositeltavaa tehdä oma kopiosi tästä arkistosta. Voit tehdä sen klikkaamalla sivun ylälaidassa painiketta Use this template. Tämä luo uuden arkiston GitHub-tilillesi opetussuunnitelman kopion kanssa.

Noudata näitä ohjeita:

1. Tee forkki arkistosta: Klikkaa sivun oikeassa yläkulmassa olevaa "Fork"-painiketta.
2. Kloonaa arkisto: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Opetussuunnitelman suorittaminen Codespacessa

Oman luomasi kopion arkistosta kohdalla klikkaa Code-painiketta ja valitse Open with Codespaces. Tämä luo sinulle uuden Codespace-työalueen.

Opetussuunnitelman suorittaminen paikallisesti tietokoneella

Suorittaaksesi opetussuunnitelman paikallisesti sinun tulee asentaa tekstieditori, selain ja komentorivityökalu. Ensimmäinen oppituntimme, Johdatus ohjelmointikieliin ja työkaluihin, esittelee sinulle erilaisia vaihtoehtoja jokaiselle näistä työkaluista, jotta voit valita sinulle parhaiten sopivat.

Suosittelemme käyttämään tekstieditorina Visual Studio Codea, joka sisältää myös sisäisen Komentorivin (Terminaalin). 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 Terminal Visual Studio Code -sovelluksessa ja suorita seuraava komento korvaamalla <your-repository-url> juuri kopioimallasi URL-osoitteella:

   git clone <your-repository-url>
   

2. Avaa kansio Visual Studio Codessa. Voit tehdä tämän napsauttamalla File > Open Folder ja valitsemalla juuri kloonaamasi kansion.

Suositellut Visual Studio Code -laajennukset:

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

📂 Jokainen oppitunti sisältää:

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

Huomautus kyselyistä: Kaikki kyselyt löytyvät Quiz-app-kansiosta, yhteensä 48 kyselyä, joissa jokaisessa on kolme kysymystä. Ne ovat saatavilla tässä. Quiz-sovellusta voi ajaa paikallisesti tai ottaa käyttöön Azuren kautta; noudata ohjeita quiz-app-kansiossa.

🗃️ Oppitunnit

	Projektin nimi	Käsiteltävät käsitteet	Oppimistavoitteet	Linkitetty oppitunti	Tekijä
01	Aloittaminen	Johdatus ohjelmointiin ja työkaluihin	Opi ohjelmointikielten perusperiaatteet 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 projektissa, kuinka tehdä yhteistyötä muiden kanssa koodipohjan parissa	Johdatus GitHubiin	Floor
03	Aloittaminen	Esteettömyys	Opi web-estettömyyden perusteet	Esteettömyyden perusteet	Christopher
04	JS Perusteet	JavaScriptin tietotyypit	JavaScriptin tietotyyppien perusteet	Tietotyypit	Jasmine
05	JS Perusteet	Funktiot ja metodit	Opi funktioista ja metodeista sovelluksen logiikan hallintaan	Funktiot ja metodit	Jasmine ja Christopher
06	JS Perusteet	Päätöksenteko JS:llä	Opi luomaan ehtoisuuksia koodissasi päätöksentekomenetelmillä	Päätöksenteko	Jasmine
07	JS Perusteet	Taulukot ja silmukat	Työskentele datan kanssa käyttäen taulukoita ja silmukoita JavaScriptissä	Taulukot ja silmukat	Jasmine
08	Terrarium	HTML käytännössä	Rakenna HTML luodaksesi online-terrarion, keskitytään sivun asetteluun	Johdatus HTML:ään	Jen
09	Terrarium	CSS käytännössä	Rakenna CSS tyylittelemään online-terrariota, keskitytään CSS:n perusteisiin, mukaan lukien responsiivisuus	Johdatus CSS:ään	Jen
10	Terrarium	JavaScriptin sulkeet, DOM-manipulointi	Rakenna JavaScript, joka tekee terrariosta toimivan vedä/posta -käyttöliittymän, painottaen sulkeita ja DOM-manipulointia	JavaScript-sulkeet, DOM-manipulointi	Jen
11	Typing Game	Rakenna kirjoituspeli	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 selainten toiminnasta, historiasta ja selaimen laajennuksen ensimmäisten elementtien luomisesta	Tietoa selaimista	Jen
13	Green Browser Extension	Lomakkeen rakentaminen, API-kutsut ja muuttujien tallennus paikalliseen tallennustilaan	Rakenna selaimen laajennuksen JavaScript-elementit, jotka kutsuvat API:a käyttäen paikalliseen tallennustilaan tallennettuja muuttujia	API:t, lomakkeet ja paikallinen tallennus	Jen
14	Green Browser Extension	Taustaprosessit selaimessa, web-suorituskyky	Hyödynnä selaimen taustaprosesseja laajennuksen kuvakkeen hallintaan; opi web-suorituskyvystä ja joistakin optimoinneista suorituskyvyn parantamiseksi	Taustatehtävät ja suorituskyky	Jen
15	Space Game	Edistyneempi pelikehitys JavaScriptillä	Opi perinnöstä käyttäen luokkia ja koostamista sekä Pub/Sub-mallia pelin rakentamista varten	Johdatus edistyneeseen pelikehitykseen	Chris
16	Space Game	Piirtäminen canvasilla	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ä	Tutustu, kuinka elementit saavat liikkeen käyttäen karteesisia koordinaatteja ja Canvas API:a	Elementtien liikuttaminen	Chris
18	Space Game	Törmäystunnistus	Tee elementeistä törmäyskelpoisia ja reagoi toisiinsa näppäinten avulla, sekä lisää viivefunktio pelin suorituskyvyn turvaamiseksi	Törmäystunnistus	Chris
19	Space Game	Pistelasku	Suorita matemaattisia laskelmia pelin tilan ja suorituskyvyn perusteella	Pistelasku	Chris
20	Space Game	Pelin lopettaminen ja uudelleenkäynnistys	Opi pelin lopettamisesta ja uudelleenkäynnistyksestä, mukaan lukien resurssien siivous ja muuttujien nollaaminen	Lopetusehto	Chris
21	Banking App	HTML-mallit ja reitit web-sovelluksessa	Opi luomaan monisivuisen verkkosivuston arkkitehtuurin runko reitityksen ja HTML-mallien avulla	HTML-mallit ja reitit	Yohan
22	Banking App	Kirjautumis- ja rekisteröintilomakkeen rakentaminen	Opi lomakkeiden rakentamisesta ja validointirutiinien käsittelystä	Lomakkeet	Yohan
23	Banking App	Tietojen hakemisen ja käytön menetelmät	Kuinka data virtaa sovellukseen ja sieltä pois, kuinka hakea sitä, tallentaa ja käsitellä	Data	Yohan
24	Banking App	Tilanhallinnan käsitteet	Opi kuinka sovelluksesi säilyttää tilan ja hallitsee sitä ohjelmallisesti	Tilanhallinta	Yohan
25	Browser/VScode Code	Työskentely VScoden kanssa	Opi käyttämään koodieditoria	Käytä VScode -koodieditoria	Chris
26	AI Assistants	Työskentely tekoälyn kanssa	Opi rakentamaan oma tekoälyavustajasi	AI-avustajaprojekti	Chris

🏫 Pedagogiikka

Oppiaineemme on suunniteltu kahden tärkeän pedagogisen periaatteen pohjalta:

• projektilähtöinen oppiminen
• tiheät kyselyt

Ohjelma opettaa JavaScriptin, HTML:n ja CSS:n perusteet sekä uusimmat työkalut ja tekniikat, joita nykyiset web-kehittäjät käyttävät. Opiskelijat pääsevät käytännön kokemukseen rakentamalla kirjoituspelin, virtuaaliterrarion, ympäristöystävällisen selaimen laajennuksen, avaruuslajityylisen pelin ja pankkisovelluksen yrityksille. Sarjan lopussa opiskelijoilla on vahva ymmärrys web-kehityksestä.

🎓 Voit suorittaa tämän opintokokonaisuuden ensimmäiset oppitunnit Microsoft Learnissä Learn Pathin kautta!

Varmistamalla, että sisältö vastaa projekteja, prosessi on opiskelijoille kiinnostavampi ja käsitteiden pysyvyys paranee. Kirjoitimme myös useita alkutason JavaScript-perusteiden oppitunteja käsitteiden esittelyä varten, jotka yhdistettiin videoon "Beginners Series to: JavaScript" -video-opetusmateriaalikokoelmasta, jonka jotkut tekijöistä osallistuivat tämän opetussuunnitelman laatimiseen.

Lisäksi matalan panoksen kysely ennen tuntia suuntaa opiskelijan aikomuksen oppia aihetta, ja toinen kysely 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 pienestä ja monimutkaistuvat vähitellen 12 viikon aikana.

Vaikka olemme tietoisesti välttäneet JavaScript-kehysten esittelyä keskittyäksemme web-kehittäjälle tarvittaviin perusvalmiuksiin ennen kehyksen käyttöönottoa, hyvä seuraava askel tämän opetussuunnitelman jälkeen olisi opiskella Node.js:ää toisen videosarjan kautta: "Beginner Series to: Node.js".

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

🧭 Offline-käyttö

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

📘 PDF

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

🎒 Muut kurssit

Tiimimme tuottaa muita kursseja! Tutustu:

LangChain

Azure / Edge / MCP / Agentit

---

Generatiivinen AI -sarja

---

Ydinopinnot

---

Copilot-sarja

Apua

Jos jäät jumiin tai sinulla on kysyttävää tekoälysovellusten rakentamisesta, liity muiden oppijoiden ja kokeneiden kehittäjien keskusteluihin MCP:stä. Se on kannustava yhteisö, jossa kysymyksiä voi esittää ja tietoa jaetaan vapaasti.

Jos sinulla on palautetta tuotteesta tai kohtaat virheitä rakennusvaiheessa, vieraile:

Lisenssi

Tämä arkisto on lisensoitu MIT-lisenssillä. Lisätietoja on tiedostossa 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ä automaattikäännöksissä voi esiintyä virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen omalla kielellä tulee pitää auktoriteettisena lähteenä. Tärkeiden tietojen osalta suositellaan ammattilaisen tekemää käännöstä. Emme ole vastuussa tämän käännöksen käytöstä aiheutuvista väärinymmärryksistä tai virhetulkinnoista.