32 KiB

Raw Blame History

Verkkokehitys aloittelijoille - Opetussuunnitelma

Opi verkkokehityksen perusteet Microsoft Cloud Advocatesin 12 viikon kattavassa kurssissa. Jokainen 24 oppitunnista syventyy JavaScriptiin, CSS:ään ja HTML:ään käytännön projektien, kuten terrarionien, selainlaajennusten ja avaruuspeliensä kautta. Osallistu tietovisailuihin, keskusteluihin ja käytännön tehtäviin. Kehitä taitojasi ja optimoi oppimisesi tehokkaan projektioppimisen menetelmämme avulla. Aloita koodausmatkasi jo tänään!

Liity Azure AI Foundry Discord -yhteisöön

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

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

🌐 Monikielinen tuki

Tuettu GitHub Actionin kautta (Automaattinen & aina ajan tasalla)

Haluatko kloonata paikallisesti?

Tämä repositorio sisältää yli 50 kielen käännökset, mikä lisää merkittävästi latauskokoa. Jos haluat kloonata ilman käännöksiä, käytä sparse checkoutia:
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'
Saat kaiken tarvitsemasi kurssin suorittamiseen huomattavasti nopeammalla latauksella.

Jos haluat lisää tuettuja käännöskieliä, ne on listattu tässä

🧑‍🎓 Oletko opiskelija?

Vieraile Student Hub -sivulla, jolta löydät aloittelijan resurssit, opiskelijapaketit ja jopa tapoja saada ilmainen sertifikaattikuponki. Tämä on sivu, jonka haluat lisätä kirjanmerkkeihin ja tarkistaa säännöllisesti, sillä päivitämme sisältöä kuukausittain.

📣 Ilmoitus - Uudet GitHub Copilot Agent -tilan haasteet suoritettaviksi!

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

📣 Ilmoitus - Uusi Generatiivisen tekoälyn projekti

Uusi AI-avustajaprojekti juuri lisätty, tutustu projektiin tästä

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

Älä jää paitsi uudesta Generatiivisen AI:n opetussuunnitelmastamme!

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

Oppitunnit kattavat kaiken perusteista RAG:iin.
Vuorovaikutus historiallisten hahmojen kanssa GenAI:n ja lisäsovelluksemme kautta.
Hauska ja mukaansatempaava tarinankerronta, matkustat ajassa!

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

Kehotteen kirjoittaminen ja kehoteinsinööritys
Teksti- ja kuva-applikaatioiden generointi
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 saada palautetta keskustelufoorumillamme!

Oppijat, jokaista oppituntia varten aloita esiluentotestillä ja jatka luentomateriaalin lukemisella, erilaisten aktiviteettien suorittamisella ja tarkista ymmärryksesi jälkiluentotestillä.

Paranna oppimiskokemustasi yhdistämällä vertaisryhmiesi kanssa projektityöhön! Keskusteluja suositellaan keskustelufoorumillamme, jossa moderaattoritiimimme on valmiina vastaamaan kysymyksiisi.

Jatkaaksesi opiskelua suosittelemme vahvasti tutustumaan Microsoft Learniin lisäoppimateriaalien saamiseksi.

📋 Ympäristön pystyttäminen

Tässä opetussuunnitelmassa on valmiiksi määritetty kehitysympäristö! Voit aloittaessasi valita suorittavasi opetussuunnitelman Codespacessa (selainnäkymäinen, asennuksia ei tarvita), tai paikallisesti tietokoneellasi tekstieditorilla, kuten Visual Studio Code.

Luo oma repositoriosi

Työsi tallentamisen helpottamiseksi on suositeltavaa luoda oma kopiosi tästä repositoriosta. Voit tehdä sen klikkaamalla sivun ylälaidasta kohtaa Use this template. Tämä luo uuden repositorion GitHub-tilillesi kopiona opetussuunnitelmasta.

Noudata näitä ohjeita:

Forkkaa repositorio: Klikkaa oikeasta yläkulmasta "Fork".
Kloonaa repositorio: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Opetussuunnitelman suorittaminen Codespacessa

Omassa kopiossasi tästä repositoriosta, jonka loit, klikkaa Code ja valitse Open with Codespaces. Tämä luo sinulle uuden Codespace-työtilan.

Opetussuunnitelman suorittaminen paikallisesti tietokoneella

Jos haluat suorittaa opetussuunnitelman paikallisesti tietokoneellasi, tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, Ohjelmointikieliin ja työkaluisiin perehtyminen, opastaa sinut eri vaihtoehdoissa kuhunkin näistä työkaluista, jotta voit valita sinulle parhaiten sopivat.

Suosittelemme käyttämään editorina Visual Studio Codea, joka sisältää myös sisäänrakennetun Päätteen. Voit ladata Visual Studio Coden tästä.

Kloonaa repositoriosi tietokoneellesi. Voit tehdä tämän klikkaamalla Code ja kopioimalla URL-osoitteen:

CodeSpace Sitten avaa Terminal Visual Studio Code -sovelluksessa ja suorita seuraava komento korvaten <your-repository-url> äsken kopioimallasi URL-osoitteella:
```
git clone <your-repository-url>
```
Avaa kansio Visual Studio Codessa. Voit tehdä tämän valitsemalla File > Open Folder ja valitsemalla juuri kloonatun kansion.

Suositellut Visual Studio Code -laajennukset:

Live Server - HTML-sivujen esikatseluun suoraan Visual Studio Codessa

Copilot - auttamaan koodin kirjoittamisessa nopeammin

📂 Jokainen oppitunti sisältää:

valinnaisen muistion
valinnaisen lisävideo
ennakkoharjoituksen / lämmittelykyselyn
kirjallisen oppitunnin
projektipohjaisissa oppitunneissa ohjeet projektin rakentamiseen vaihe vaiheelta
tietotarkistuksia
haasteen
lisälukemista
tehtävän
jälkioppitunnin kyselyn

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

🗃️ Oppitunnit

	Projektin nimi	Opitut käsitteet	Oppimistavoitteet	Linkitetty oppitunti	Tekijä
01	Aloittaminen	Johdatus ohjelmointiin ja työkaluihin	Opit ohjelmointikielten perustan ja ohjelmistot, jotka auttavat ammattilaisia työssään	Intro to Programming Languages and Tools of the Trade	Jasmine
02	Aloittaminen	GitHubin perusteet, myös tiimityöskentely	Kuinka käyttää GitHubia projektissa ja miten tehdä yhteistyötä koodipohjalla	Intro to GitHub	Floor
03	Aloittaminen	Esteettömyys	Opit verkkosivujen esteettömyyden perusteet	Accessibility Fundamentals	Christopher
04	JS Basics	JavaScriptin tietotyypit	JavaScriptin tietotyyppien perusteet	Data Types	Jasmine
05	JS Basics	Funktiot ja metodit	Opit sovelluksen logiikan hallinnan funktioiden ja metodien avulla	Functions and Methods	Jasmine ja Christopher
06	JS Basics	Päätöksenteko JavaScriptillä	Kuinka luoda ehtoja koodissasi päätöksentekomenetelmien avulla	Making Decisions	Jasmine
07	JS Basics	Taulukot ja silmukat	Työskentele datan kanssa taulukoiden ja silmukoiden avulla JavaScriptissä	Arrays and Loops	Jasmine
08	Terrarium	HTML käytännössä	Rakenna HTML luodaksesi online-terraariumin, keskittyen layoutin rakentamiseen	Introduction to HTML	Jen
09	Terrarium	CSS käytännössä	Rakenna CSS tyylittääksesi online-terraariumia, keskittyen CSS:n perusteisiin mukaan lukien sivun responsiivisuuden tekemisen	Introduction to CSS	Jen
10	Terrarium	JavaScriptin sulut (closures), DOM-manipulointi	Rakenna JavaScript, joka tekee terraariumista toimivan drag/drop-käyttöliittymän, keskittyen sulkuihin ja DOM-manipulointiin	JavaScript Closures, DOM manipulation	Jen
11	Typing Game	Kirjoituspelin rakentaminen	Opit käyttämään näppäimistötapahtumia JavaScript-sovelluksen logiikan ohjaamiseen	Event-Driven Programming	Christopher
12	Green Browser Extension	Työskentely selainten kanssa	Opit, miten selaimet toimivat, niiden historian ja miten luoda ensimmäiset elementit selaimen laajennukseen	About Browsers	Jen
13	Green Browser Extension	Lomakkeen rakentaminen, API-kutsut ja muuttujien tallennus paikalliseen muistiin	Rakenna selaimen laajennuksen JavaScript-elementit API:n kutsumiseen käyttäen muuttujiin tallennettuja paikalliseen muistiin	APIs, Forms, and Local Storage	Jen
14	Green Browser Extension	Taustaprosessit selaimessa, verkkosivuston suorituskyky	Käytä selaimen taustaprosesseja hallitsemaan laajennuksen kuvaketta; opi web-suorituskyvystä ja optimoinnista	Background Tasks and Performance	Jen
15	Space Game	Edistyneempi pelikehitys JavaScriptillä	Opit periytymisestä luokkien ja koostumisen avulla sekä Pub/Sub-kuvion, valmistautuen pelin rakentamiseen	Introduction to Advanced Game Development	Chris
16	Space Game	Piirtäminen kankaalle	Opit Canvas API:sta, jota käytetään elementtien piirtämiseen näytölle	Drawing to Canvas	Chris
17	Space Game	Elementtien liikuttaminen ruudulla	Opi, miten elementtejä voi liikuttaa kartesisilla koordinaateilla ja Canvas API:lla	Moving Elements Around	Chris
18	Space Game	Törmäyksentunnistus	Tee elementeistä törmäileviä ja reagoivia toisiinsa näppäinpainallusten avulla, ja lisää cooldown-funktio pelin suorituskyvyn varmistamiseksi	Collision Detection	Chris
19	Space Game	Pisteiden kirjaaminen	Suorita matemaattisia laskuja pelin tilan ja suorituskyvyn mukaan	Keeping Score	Chris
20	Space Game	Pelin lopetus ja uudelleenkäynnistys	Opit pelin lopettamisesta ja uudelleenkäynnistyksestä, mukaan lukien resurssien siistimisestä ja muuttujien nollaamisesta	The Ending Condition	Chris
21	Banking App	HTML-mallit ja reititykset web-sovelluksessa	Opit rakentamaan monisivuisen verkkosivuston arkkitehtuurin reitityksen ja HTML-mallien avulla	HTML Templates and Routes	Yohan
22	Banking App	Kirjautumis- ja rekisteröitymislomakkeen rakentaminen	Opit lomakkeiden rakentamisesta ja validointirutiinien hallinnasta	Forms	Yohan
23	Banking App	Tietojen hakemisen ja käytön menetelmät	Kuinka tieto virtaa sovellukseen ja sieltä ulos, miten hakea, tallentaa ja poistaa sitä	Data	Yohan
24	Banking App	Tilanhallinnan käsitteet	Opit, kuinka sovelluksesi säilyttää tilaa ja miten sitä hallitaan ohjelmallisesti	State Management	Yohan
25	Browser/VScode Code	Työskentely VScoden kanssa	Opit käyttämään koodieditoria	Use VScode Code Editor	Chris
26	AI Assistants	Työskentely tekoälyn kanssa	Opit rakentamaan oman tekoälyavustajan	AI Assistant project	Chris

🏫 Pedagogiikka

Opetussuunnitelmamme on suunniteltu kahden keskeisen pedagogisen periaatteen mukaan:

projektipohjainen oppiminen
usein toistuvat kyselyt

Ohjelma opettaa JavaScriptin, HTML:n ja CSS:n perusteet sekä viimeisimmät työkalut ja tekniikat, joita nykyiset web-kehittäjät käyttävät. Oppilaat pääsevät kehittämään käytännön kokemusta rakentamalla kirjoituspelin, virtuaalisen terraariumin, ympäristöystävällisen selaimen laajennuksen, avaruuslainen henkisen pelin ja pankkisovelluksen yrityksille. Sarjan lopussa oppilaat ovat saaneet vankan ymmärryksen web-kehityksestä.

🎓 Voit suorittaa tämän opetussuunnitelman ensimmäiset oppitunnit Microsoft Learnin Learn Path -polun kautta!

Varmistamalla, että sisältö vastaa projekteja, prosessi on opiskelijoille mielekkäämpi ja käsitteiden muistaminen tehostuu. Kirjoitimme lisäksi useita aloitusoppitunteja JavaScriptin perusteista esitelläksemme käsitteitä, yhdistettynä videoihin "Beginners Series to: JavaScript" -videokokoelmasta, joiden tekijät osallistuivat tähän opetussuunnitelmaan.

Lisäksi oppituntia edeltävä matalariskinen kysely asettaa opiskelijalle opiskeluaiheen tavoitteen, ja oppitunnin jälkeinen toinen kysely varmistaa jatkumon. Tämä opetussuunnitelma on suunniteltu joustavaksi ja hauskaksi, ja sen voi suorittaa kokonaisuudessaan tai osittain. Projektit alkavat pieninä ja muuttuvat yhä vaativammiksi 12 viikon aikana.

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

Tutustu käyttäytymissääntöihimme ja osallistumisohjeisiin. Arvostamme rakentavaa palautettasi!

🧭 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 siirry tämän repositorion juurikansioon, kirjoita docsify serve. Sivusto palvelee portissa 3000 paikallisessa koneessasi: localhost:3000.

📘 PDF

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

🎒 Muut kurssit

Tiimimme tuottaa myös muita kursseja! Tutustu:

LangChain

Azure / Edge / MCP / Agents

Generative AI Series

Core Learning

Copilot Series

Apua saatavana

Jos jumitut tai sinulla on kysyttävää tekoälysovellusten rakentamisesta. Liity muiden oppijoiden ja kokeneiden kehittäjien keskusteluihin MCP:stä. Se on kannustava yhteisö, jossa kysymykset ovat tervetulleita ja tieto jaetaan vapaasti.

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

Lisenssi

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

Vastuuvapauslauseke:
Tämä asiakirja on käännetty tekoälypohjaisella käännöspalvelulla Co-op Translator. Vaikka pyrimme tarkkuuteen, automaattisissa käännöksissä saattaa esiintyä virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen omalla kielellä tulee pitää virallisena lähteenä. Tärkeiden tietojen osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä aiheutuvista väärinymmärryksistä tai tulkinnoista.

32 KiB Raw Blame History