28 KiB

Raw Blame History

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

Haarauta arkisto: Klikkaa
Kloonaa arkisto: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Liity Azure AI Foundry Discordiin ja tapaa asiantuntijoita sekä muita kehittäjiä

Web-kehitys aloittelijoille - Opetussuunnitelma

Opi web-kehityksen perusteet Microsoft Cloud Advocatesin 12 viikon kattavalla kurssilla. Jokainen 24 oppitunnista keskittyy JavaScriptiin, CSS:ään ja HTML:ään 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!

🌐 Monikielinen tuki

Tuettu GitHub Actionin kautta (automaattinen ja aina ajan tasalla)

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

🧑‍🎓 Oletko opiskelija?

Vieraile Student Hub -sivulla, josta löydät aloittelijaresursseja, opiskelijapaketit ja jopa tapoja saada ilmainen sertifikaattivoucher. Tämä on sivu, jonka kannattaa lisätä kirjanmerkkeihin ja tarkistaa säännöllisesti, sillä sisältö vaihtuu kuukausittain.

📣 Ilmoitus - Uusi projekti Generatiivisen AI:n avulla

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

📣 Ilmoitus - Uusi opetussuunnitelma Generatiivisesta AI:sta JavaScriptille on juuri julkaistu

Älä missaa uutta Generatiivisen AI:n opetussuunnitelmaa!

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

Prompting ja promptin suunnittelu
Teksti- ja kuvasovellusten luominen
Hakusovellukset

Vieraile https://aka.ms/genai-js-course aloittaaksesi!

🌱 Aloittaminen

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

Oppijat, aloita jokainen oppitunti 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ä! Keskustelut ovat tervetulleita keskustelufoorumillamme, jossa moderaattoritiimimme vastaa kysymyksiisi.

Lisätäksesi oppimistasi 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 tarvitaan), vai paikallisesti tietokoneellasi tekstieditorilla, kuten Visual Studio Code.

Luo oma arkisto

Jotta voit helposti tallentaa työsi, suosittelemme luomaan oman kopion tästä arkistosta. Voit tehdä tämän klikkaamalla Use this template -painiketta sivun yläosassa. Tämä luo uuden arkiston GitHub-tilillesi kopion opetussuunnitelmasta.

Seuraa näitä ohjeita:

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

Opetussuunnitelman suorittaminen Codespacessa

Klikkaa luomassasi arkistokopiossa Code-painiketta ja valitse Open with Codespaces. Tämä luo uuden Codespacen, jossa voit työskennellä.

Opetussuunnitelman suorittaminen paikallisesti tietokoneellasi

Jos haluat suorittaa opetussuunnitelman paikallisesti tietokoneellasi, tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, Johdatus ohjelmointikieliin ja työkaluihin, opastaa sinua eri vaihtoehdoissa näille työkaluille, jotta voit valita itsellesi parhaiten sopivan.

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

Kloonaa arkistosi tietokoneellesi. Voit tehdä tämän klikkaamalla Code-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>
```
Avaa kansio Visual Studio Codessa. Voit tehdä tämän klikkaamalla 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 sketchnote
valinnainen lisävideo
ennakkovisa
kirjallinen oppitunti
projektipohjaisissa oppitunneissa vaiheittaiset ohjeet projektin rakentamiseen
tietotestit
haaste
lisälukemista
tehtävä
jälkivisa

Huomio visailuista: Kaikki visailut löytyvät Quiz-app-kansiosta, yhteensä 48 visailua, joissa jokaisessa on kolme kysymystä. Ne ovat saatavilla täällä. Visailusovellusta voi käyttää paikallisesti tai julkaista Azureen; seuraa ohjeita quiz-app-kansiossa.

🗃️ Oppitunnit

	Projektin nimi	Opetettavat käsitteet	Oppimistavoitteet	Linkitetty oppitunti	Tekijä
01	Aloittaminen	Johdatus ohjelmointiin ja työkaluihin	Opi ohjelmointikielten perusperiaatteet ja ohjelmistot, jotka auttavat ammattilaisohjelmoijia työssään	Johdatus ohjelmointikieliin ja työkaluihin	Jasmine
02	Aloittaminen	GitHubin perusteet, sisältäen tiimityöskentelyn	Kuinka käyttää GitHubia projektissasi ja tehdä yhteistyötä muiden kanssa koodipohjassa	Johdatus GitHubiin	Floor
03	Aloittaminen	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 hallintaan	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-manipulaatio	Rakenna JavaScript, joka tekee terrariumista toimivan drag/drop-käyttöliittymän, keskittyen sulkeumiin ja DOM-manipulaatioon	JavaScriptin sulkeumat, DOM-manipulaatio	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 luoda ensimmäiset elementit selainlaajennukseen	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 suorituskyvyn parantamiseksi	Taustatehtävät ja suorituskyky	Jen
15	Avaruuspeli	Edistyneempi pelinkehitys JavaScriptillä	Opi perimästä käyttäen sekä luokkia että koostumusta sekä Pub/Sub-mallista, valmistautuen pelin rakentamiseen	Johdatus edistyneeseen pelinkehitykseen	Chris
16	Avaruuspeli	Piirtäminen canvasille	Opi Canvas API:sta, jota käytetään elementtien piirtämiseen näytölle	Piirtäminen canvasille	Chris
17	Avaruuspeli	Elementtien liikuttaminen näytöllä	Opi, miten elementit voivat saada liikkeen käyttämällä koordinaatistoa ja Canvas API:a	Elementtien liikuttaminen	Chris
18	Avaruuspeli	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	Avaruuspeli	Pisteiden laskeminen	Suorita matemaattisia laskelmia pelin tilan ja suorituskyvyn perusteella	Pisteiden laskeminen	Chris
20	Avaruuspeli	Pelin lopettaminen ja uudelleenkäynnistäminen	Opi pelin lopettamisesta ja uudelleenkäynnistämisestä, mukaan lukien resurssien siivoaminen ja muuttujien arvojen palauttaminen	Lopetusehto	Chris
21	Pankkisovellus	HTML-mallit ja reitit verkkosovelluksessa	Opi luomaan monisivuisen verkkosivuston arkkitehtuurin perusrakenne reitityksen ja HTML-mallien avulla	HTML-mallit ja reitit	Yohan
22	Pankkisovellus	Kirjautumis- ja rekisteröintilomakkeen rakentaminen	Opi lomakkeiden rakentamisesta ja validointirutiinien käsittelystä	Lomakkeet	Yohan
23	Pankkisovellus	Datan hakemisen ja käytön menetelmät	Kuinka data virtaa sisään ja ulos sovelluksestasi, kuinka hakea, tallentaa ja poistaa sitä	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 VScoden kanssa	Opi käyttämään koodieditoria	VScode-koodieditorin käyttö	Chris
26	AI-avustajat	Työskentely tekoälyn kanssa	Opi rakentamaan oma tekoälyavustaja	AI-avustajaprojekti	Chris

🏫 Pedagogiikka

Opetussuunnitelmamme on suunniteltu kahden keskeisen pedagogisen periaatteen mukaisesti:

projektipohjainen oppiminen
säännölliset visailut

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. Opiskelijat saavat käytännön kokemusta rakentamalla kirjoituspelin, virtuaalisen terrariumin, ympäristöystävällisen selainlaajennuksen, avaruusinvader-tyylisen pelin ja yrityksille suunnatun pankkisovelluksen. Sarjan lopussa opiskelijat ovat saavuttaneet vankan ymmärryksen verkkokehityksestä.

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

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

Lisäksi matalan kynnyksen visailu ennen oppituntia suuntaa opiskelijan huomion oppimaan aihetta, kun taas toinen visailu oppitunnin jälkeen varmistaa 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 verkkokehittäjän perusosaamiseen 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 Toimintaohjeisiin ja Osallistumisohjeisiin. Otamme mielellämme vastaan rakentavaa palautettasi!

🧭 Offline-käyttö

Voit käyttää tätä dokumentaatiota offline-tilassa käyttämällä Docsify. 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

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

🎒 Muut kurssit

Tiimimme tuottaa muita kursseja! Tutustu:

Apua ongelmatilanteisiin

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

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

Lisenssi

Tämä arkisto 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ä.

28 KiB Raw Blame History