Web-Dev-For-Beginners/translations/fi

Web-kehitys aloittelijoille - Opintokokonaisuus

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 oppimisesi tehokkaalla projektipohjaisella pedagogiikalla. Aloita koodausmatkasi jo tänään!

🧑‍🎓 Oletko opiskelija?

Käy Student Hub -sivulla, josta löydät aloittelijoille suunnattuja resursseja, 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 - Uusi opintokokonaisuus Generatiivisesta tekoälystä JavaScriptille on juuri julkaistu

Älä missaa uutta Generatiivisen tekoälyn opintokokonaisuutta!

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

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

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

• Promptit ja promptien suunnittelu
• Teksti- ja kuvapohjaisten sovellusten luominen
• Hakusovellukset

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

🌱 Aloittaminen

Opettajat, olemme lisänneet joitakin ehdotuksia siitä, miten tätä opintokokonaisuutta voi käyttää. Kuulemme mielellämme palautettanne keskustelufoorumillamme!

Oppijat, aloita jokainen oppitunti ennakkovisalla ja jatka lukemalla oppituntimateriaali, suorittamalla erilaisia aktiviteetteja ja tarkistamalla ymmärryksesi jälkivisalla.

Parantaaksesi oppimiskokemustasi, yhdistä voimasi muiden kanssa ja työskentele projekteissa yhdessä! Keskustelut ovat tervetulleita keskustelufoorumillamme, jossa moderaattoritiimimme vastaa kysymyksiisi.

Lisäopiskelua varten suosittelemme tutustumaan Microsoft Learn -sivustoon, josta löydät lisämateriaaleja.

📋 Ympäristön asettaminen

Tämä opintokokonaisuus sisältää valmiin kehitysympäristön! Aloittaessasi voit valita, haluatko käyttää opintokokonaisuutta Codespacessa (selaimen kautta, ei asennuksia) vai 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 napsauttamalla Use this template -painiketta sivun yläosassa. Tämä luo uuden repositorion GitHub-tilillesi opintokokonaisuuden kopion kanssa.

Seuraa näitä ohjeita:

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

Opintokokonaisuuden suorittaminen Codespacessa

Kopioimassasi repositoriossa napsauta Code-painiketta ja valitse Open with Codespaces. Tämä luo uuden Codespacen, jossa voit työskennellä.

Opintokokonaisuuden suorittaminen paikallisesti tietokoneellasi

Jos haluat suorittaa opintokokonaisuuden 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 itsellesi 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 repositoriosi tietokoneellesi. Voit tehdä tämän napsauttamalla Code-painiketta ja kopioimalla URL-osoitteen:

   

   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 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ää:

• valinnainen luonnoskuva
• valinnainen lisävideo
• ennakkovisa
• kirjallinen oppitunti
• projektipohjaisissa oppitunneissa vaiheittaiset ohjeet projektin rakentamiseen
• tietotestit
• haaste
• lisälukemista
• tehtävä
• jälkivisa

Huomio visoista: Kaikki visat löytyvät Quiz-app-kansiosta, yhteensä 48 visaa, joissa on kolme kysymystä kussakin. Ne on linkitetty oppitunneista, ja visasovelluksen voi suorittaa paikallisesti tai julkaista Azureen; seuraa ohjeita quiz-app-kansiossa. Visat lokalisoidaan vähitellen.

🗃️ Oppitunnit

	Projektin nimi	Opetettavat käsitteet	Oppimistavoitteet	Linkitetty oppitunti	Tekijä
01	Aloittaminen	Johdatus ohjelmointiin ja työkaluihin	Opi ohjelmointikielten perusperiaatteet ja ohjelmistoista, jotka auttavat ammattilaisia työssään	Johdatus ohjelmointikieliin ja työkaluihin	Jasmine
02	Aloittaminen	GitHubin perusteet, sisältää tiimityöskentelyn	Kuinka käyttää GitHubia projektissasi ja tehdä yhteistyötä muiden kanssa koodipohjassa	Johdatus GitHubiin	Floor
03	Aloittaminen	Saavutettavuus	Opi web-saavutettavuuden perusteet	Saavutettavuuden perusteet	Christopher
04	JS-perusteet	JavaScriptin tietotyypit	JavaScriptin tietotyyppien perusteet	Tietotyypit	Jasmine
05	JS-perusteet	Funktiot ja metodit	Opi funktioista ja metodeista, jotka hallitsevat sovelluksen logiikkaa	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	Terraario	HTML käytännössä	Rakenna HTML luodaksesi online-terraarion, keskittyen ulkoasun rakentamiseen	Johdatus HTML:ään	Jen
09	Terraario	CSS käytännössä	Rakenna CSS tyylitelläksesi online-terraarion, keskittyen CSS:n perusteisiin, mukaan lukien sivun responsiivisuus	Johdatus CSS:ään	Jen
10	Terraario	JavaScriptin sulkeet, DOM-manipulaatio	Rakenna JavaScript, joka tekee terraariosta toimivan drag/drop-käyttöliittymän, keskittyen sulkeisiin ja DOM-manipulaatioon	JavaScriptin sulkeet, DOM-manipulaatio	Jen
11	Kirjoituspeli	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, miten selaimet toimivat, niiden historia ja miten luoda ensimmäiset elementit selainlaajennukselle	Tietoa selaimista	Jen
13	Green Browser Extension	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	Green Browser Extension	Taustaprosessit selaimessa, verkkosuorituskyky	Käytä selaimen taustaprosesseja hallitsemaan laajennuksen kuvaketta; opi verkkosuorituskyvystä ja optimoinneista sen parantamiseksi	Taustatehtävät ja suorituskyky	Jen
15	Space Game	Edistyneempi pelinkehitys JavaScriptillä	Opi perinnästä sekä luokkien että koostamisen avulla ja Pub/Sub-mallista, valmistautuessasi 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ä	Tutustu siihen, miten elementit voivat saada liikettä koordinaatiston ja Canvas API:n avulla	Elementtien liikuttaminen	Chris
18	Space Game	Törmäysten tunnistaminen	Tee elementeistä törmääviä ja reagoivia toisiinsa näppäinpainallusten avulla ja tarjoa viivefunktio pelin suorituskyvyn varmistamiseksi	Törmäysten tunnistaminen	Chris
19	Space Game	Pisteiden laskeminen	Suorita matemaattisia laskelmia pelin tilan ja suorituskyvyn perusteella	Pisteiden laskeminen	Chris
20	Space Game	Pelin lopettaminen ja uudelleenkäynnistäminen	Opi pelin lopettamisesta ja uudelleenkäynnistämisestä, mukaan lukien resurssien siivoaminen ja muuttujien arvojen palauttaminen	Lopetusehto	Chris
21	Banking App	HTML-mallipohjat ja reitit verkkosovelluksessa	Opi luomaan monisivuisen verkkosivuston arkkitehtuurin perusta reitityksen ja HTML-mallipohjien avulla	HTML-mallipohjat ja reitit	Yohan
22	Banking App	Kirjautumis- ja rekisteröintilomakkeen rakentaminen	Opi lomakkeiden rakentamisesta ja validointirutiinien käsittelystä	Lomakkeet	Yohan
23	Banking App	Tiedon hakemisen ja käyttämisen menetelmät	Miten tieto kulkee sovelluksessasi, miten sitä haetaan, tallennetaan ja hävitetään	Tiedot	Yohan
24	Banking App	Tilanhallinnan käsitteet	Opi, miten sovelluksesi säilyttää tilan ja miten sitä hallitaan ohjelmallisesti	Tilanhallinta	Yohan

🏫 Pedagogiikka

Opetussuunnitelmamme on suunniteltu kahden keskeisen pedagogisen periaatteen mukaisesti:

• projektipohjainen oppiminen
• säännölliset 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, virtuaalisen terraarion, ympäristöystävällisen selainlaajennuksen, avaruuspelin ja yrityksille suunnatun pankkisovelluksen. Sarjan lopussa opiskelijat ovat saavuttaneet vankan ymmärryksen web-kehityksestä.

🎓 Voit ottaa tämän opetussuunnitelman ensimmäiset oppitunnit Learn Path -muodossa Microsoft Learnissa!

Varmistamalla, että sisältö liittyy projekteihin, prosessi muuttuu opiskelijoille kiinnostavammaksi ja käsitteiden muistaminen paranee. Kirjoitimme myös useita aloitusoppitunteja JavaScriptin perusteista käsitteiden esittelemiseksi, yhdistettynä videoon "Beginners Series to: JavaScript" -videotutoriaalikokoelmasta, joiden tekijät osallistuivat tämän opetussuunnitelman laatimiseen.

Lisäksi matalan kynnyksen tietovisa ennen oppituntia suuntaa opiskelijan huomion aiheen oppimiseen, kun taas toinen tietovisa oppitunnin jälkeen varmistaa käsitteiden paremman muistamisen. 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 loppuun mennessä.

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

Tutustu Code of Conduct ja Contributing -ohjeisiin. Otamme mielellämme vastaan rakentavaa palautettasi!

🧭 Offline-käyttö

Voit käyttää tätä dokumentaatiota offline-tilassa käyttämällä Docsify. Haarauta tämä repo, asenna Docsify paikalliselle koneellesi ja kirjoita tämän repon juurikansiossa docsify serve. Verkkosivusto palvelee portissa 3000 paikallisessa isännässäsi: localhost:3000.

📘 PDF

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

🎒 Muut kurssit

Tiimimme tuottaa myös muita kursseja! Tutustu:

• Generative AI for Beginners
• Generative AI for Beginners .NET
• Generative AI with JavaScript
• Generative AI with Java
• AI for Beginners
• Data Science for Beginners
• ML for Beginners
• Cybersecurity for Beginners
• Web Dev for Beginners
• IoT for Beginners
• XR Development for Beginners
• Mastering GitHub Copilot for Agentic use
• Mastering GitHub Copilot for C#/.NET Developers
• Choose Your Own Copilot Adventure

Lisenssi

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

---

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äinen asiakirja 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ä.