Opi verkkokehityksen perusteet kattavalla 12 viikon kurssillamme, jonka on laatinut Microsoft Cloud Advocates. Jokainen 24 oppitunnista syventyy JavaScriptiin, CSS:ään ja HTML:ään käytännön projektien, kuten terraarioiden, selaimen laajennusten ja avaruuspelien kautta. Osallistu tietokilpailuihin, keskusteluihin ja käytännön tehtäviin. Kehitä taitojasi ja optimoi tietojesi omaksuminen tehokkaan projektilähtöisen pedagogiikkamme avulla. Aloita koodausmatkasi tänään!
Liity Azure AI Foundryn Discord-yhteisöön
Seuraa 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 Foundryn Discordiin ja tapaa asiantuntijoita sekä muita kehittäjiä
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ä repositorio sisältää yli 50 kieliversiota, 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"Saat kaiken tarvittavan kurssin suorittamiseen paljon nopeammalla latauksella.
Jos haluat, että muita käännöskieliä tuetaan, ne löytyvät täältä
Vieraile Student Hub -sivulla, josta löydät aloittelijoille suunnattuja resursseja, opiskelijapaketit ja jopa tapoja saada ilmainen todistuksen voucher. Tämä sivu kannattaa lisätä kirjanmerkkeihin ja tarkistaa säännöllisesti, koska sisältö vaihtuu kuukausittain.
Uusi haaste lisätty, etsi "GitHub Copilot Agent Challenge 🚀" useimmista luvuista. Tämä on uusi haaste, jonka voit suorittaa käyttäen GitHub Copilotia ja Agent-tilaa. Jos et ole aiemmin käyttänyt Agent-tilaa, se pystyy tuottamaan ei pelkästään tekstiä, vaan myös luomaan ja muokkaamaan tiedostoja, suorittamaan komentoja ja muuta.
Uusi AI-avustajaprojekti juuri lisätty, tutustu projektiin
Älä missaa uutta Generatiivisen AI:n opetussuunnitelmaamme!
Siirry sivulle https://aka.ms/genai-js-course aloittaaksesi!
- Oppitunnit kattavat kaiken perusteista RAG:iin saakka.
- Keskustele historiallisten hahmojen kanssa GenAI:n ja kumppanisovelluksemme avulla.
- Hauska ja mukaansatempaava kertomus, jossa aikamatkustat!
Jokaisessa oppitunnissa on suoritettava tehtävä, tietotesti ja haaste, jotka ohjaavat oppimaan aiheita kuten:
- Kehote- ja prompteinsinööritaito
- Tekstin ja kuvan sovellustuotanto
- Hakusovellukset
Siirry sivulle https://aka.ms/genai-js-course aloittaaksesi!
Opettajat, olemme lisänneet joitakin ehdotuksia tämän opetussuunnitelman käyttöön. Arvostamme palautettanne keskustelufoorumillamme!
Oppijat, jokaiselle oppitunnille, aloita ennakko-oppitentin tekemisellä ja etene lukemalla luentomateriaali, suorittamalla erilaiset tehtävät ja tarkista ymmärryksesi jälkitentin avulla.
Parantaaksesi oppimiskokemustasi, yhdistä voimasi vertaistesi kanssa projektien parissa! Keskusteluja suositaan keskustelufoorumillamme, jossa moderaattoritiimimme on valmiina vastaamaan kysymyksiisi.
Koulutuksesi syventämiseksi suosittelemme lämpimästi tutustumaan Microsoft Learniin lisäoppimateriaaleja varten.
Tässä opetussuunnitelmassa on kehitysympäristö valmiina käytettäväksi! Aloittaessasi voit valita opetussuunnitelman ajamisen Codespace -ympäristössä (selainpohjainen, ei asennuksia tarvitseva ympäristö) tai paikallisesti tietokoneellasi käyttämällä tekstieditoria, kuten Visual Studio Codea.
Jotta voit helposti tallentaa työsi, on suositeltavaa luoda oma kopio tästä repositoriosta. Voit tehdä sen klikkaamalla sivun ylälaidassa olevaa Use this template -painiketta. Tämä luo uuden repositorion GitHub-tilillesi, jossa on kopio opetussuunnitelmasta.
Seuraa nämä vaiheet:
- Forkkaa repositorio: Klikkaa "Fork" -painiketta tämän sivun oikeassa yläkulmassa.
- Kloonaa repositorio:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Luo omaan kopioosi tästä repositoriosta, jonka teit, klikkaa Code -painiketta ja valitse Open with Codespaces. Tämä luo sinulle uuden Codespace-ympäristön työskentelyä varten.
Suorittaaksesi tämän opetussuunnitelman paikallisesti tietokoneellasi tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, Johdanto ohjelmointikieliin ja työkaluihin, opastaa sinua erilaisten työkaluvaihtoehtojen läpi, joista voit valita sinulle parhaiten sopivat.
Suosittelemme käyttämään editorina Visual Studio Codea, jossa on myös sisäänrakennettu Komentorivi. Voit ladata Visual Studio Coden tästä.
-
Kloonaa arkistosi 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>
-
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 esikatselua varten Visual Studio Codessa
- Copilot - auttaa sinua kirjoittamaan koodia nopeammin
- valinnaisen sketchnoten
- valinnaisen tukevan videon
- lämmittelykyselyn ennen oppituntia
- kirjallisen oppitunnin
- projektipohjaisissa oppitunneissa vaiheittaiset ohjeet projektin rakentamiseen
- tietämyksen tarkistukset
- haasteen
- tukevan lukemisen
- tehtävän
- oppitunnin jälkeisen kyselyn
Huomio kyselyistä: Kaikki kyselyt ovat Quiz-app-kansiossa, yhteensä 48 kyselyä, joissa jokaisessa on kolme kysymystä. Ne ovat saatavilla tästä. Kyselysovellusta voi käyttää paikallisesti tai ottaa käyttöön Azuren kautta; noudata ohjeita
quiz-app-kansiossa.
| Projektin nimi | Käsitellyt käsitteet | Oppimistavoitteet | Linkitetty oppitunti | Tekijä | |
|---|---|---|---|---|---|
| 01 | Getting Started | Ohjelmoinnin perusteet ja työkalut | Opi useimpien ohjelmointikielten perustukset ja ohjelmistot, jotka auttavat ammattilaiskehittäjiä työssään | Johdatus ohjelmointikieliin ja työkaluihin | Jasmine |
| 02 | Getting Started | GitHubin perusteet, sisältää yhteistyön tiimissä | Kuinka käyttää GitHubia projektissasi, miten tehdä yhteistyötä muiden kanssa koodikannan parissa | Johdatus GitHubiin | Floor |
| 03 | Getting Started | Esteettömyys | Opi verkkosisällön saavutettavuuden perusteet | Esteettömyyden perusteet | Christopher |
| 04 | JS Basics | JavaScriptin tietotyypit | JavaScriptin tietotyyppien perusteet | Tietotyypit | Jasmine |
| 05 | JS Basics | Funktiot ja metodit | Opi funktioista ja metodeista sovelluksen logiikan hallinnassa | Funktiot ja metodit | Jasmine ja Christopher |
| 06 | JS Basics | Päätöksenteko JS:llä | Opi luomaan ehtoisuuksia koodissasi päätöksentekomenetelmillä | Päätöksenteko | Jasmine |
| 07 | JS Basics | Taulukot ja silmukat | Työskentele datan kanssa taulukoiden ja silmukoiden avulla JavaScriptissä | Taulukot ja silmukat | Jasmine |
| 08 | Terrarium | HTML käytännössä | Rakenna HTML luodaksesi verkkoterraarion keskittyen asettelun rakentamiseen | Johdatus HTML:ään | Jen |
| 09 | Terrarium | CSS käytännössä | Luo CSS tyylitelläksesi verkkoterraariota, keskittyen CSS:n perusteisiin ja sivun responsiivisuuteen | Johdatus CSS:ään | Jen |
| 10 | Terrarium | JavaScript Closuret, DOM-manipulointi | Rakenna JavaScript, joka tekee terrariumin toimivaksi drag/drop-käyttöliittymänä, keskittyen closureihin ja DOM-manipulointiin | JavaScript Closuret, DOM-manipulointi | Jen |
| 11 | Typing Game | Typing-pelin rakentaminen | Opi käyttämään näppäimistötapahtumia JavaScript-sovelluksesi logiikan ohjaamiseen | Tapahtumaohjautuva ohjelmointi | Christopher |
| 12 | Green Browser Extension | Toimiminen selaimissa | Opi, miten selaimet toimivat, niiden historia ja miten rakentaa selaimien laajennuksen ensimmäiset elementit | Tietoa selaimista | Jen |
| 13 | Green Browser Extension | Lomakkeen rakentaminen, API:n käyttäminen ja muuttujien tallentaminen paikalliseen muistiin | Rakenna selainlaajennuksen JavaScript-elementit API-kutsujen tekemiseen käyttäen paikalliseen muistiin tallennettuja muuttujia | API:t, lomakkeet ja paikallinen muisti | Jen |
| 14 | Green Browser Extension | Taustaprosessit selaimessa ja verkkosuorituskyky | Käytä selaimen taustaprosesseja laajennuksen kuvakkeen hallintaan; opi verkkosuorituskyvystä ja joistakin optimoinneista | Taustatehtävät ja suorituskyky | Jen |
| 15 | Space Game | Edistyneempi pelinkehitys JavaScriptillä | Opi perinnäisyydestä käyttäen sekä luokkia että koostetta sekä Pub/Sub-mallista pelin rakentamista varten | Johdatus edistyneeseen pelinkehitykseen | Chris |
| 16 | Space Game | Piirtäminen canvakselle | Opi Canvas API:sta, jota käytetään elementtien piirtämiseen näytölle | Piirtäminen canvakselle | Chris |
| 17 | Space Game | Elementtien liikuttaminen näytöllä | Tutustu, miten elementtejä voi liikuttaa käyttäen karteesisia koordinaatteja ja Canvas API:a | Elementtien liikuttaminen | Chris |
| 18 | Space Game | Törmäysten havaitseminen | Tee elementtien törmäämisestä ja reagoimisesta toisiinsa näppäinpainallusten avulla ja lisää cooldown-toiminto pelin suorituskyvyn varmistamiseksi | Törmäysten havaitseminen | Chris |
| 19 | Space Game | Pisteiden seuranta | Tee matemaattisia laskelmia pelin tilan ja suorituskyvyn perusteella | Pisteiden seuranta | Chris |
| 20 | Space Game | Pelin lopetus ja uudelleen käynnistys | Opi pelin lopettamisesta ja uudelleenkäynnistyksestä, mukaan lukien resurssien siivouksesta ja muuttujien nollauksesta | Lopetusehto | Chris |
| 21 | Banking App | HTML-mallit ja reititys web-sovelluksessa | Opi luomaan monisivuisen verkkosivuston runko reitityksen ja HTML-mallien avulla | HTML-mallit ja reititys | Yohan |
| 22 | Banking App | Kirjautumis- ja rekisteröitymislomakkeen rakentaminen | Opi lomakkeiden rakentamisesta ja validoinnin käsittelystä | Lomakkeet | Yohan |
| 23 | Banking App | Tietojen hakemisen ja käytön menetelmät | Kuinka tieto virtaa sovelluksessasi, miten sitä haetaan, tallennetaan ja hävitetään | Tieto | Yohan |
| 24 | Banking App | Tilanhallinnan käsitteet | Opi, miten sovelluksesi säilyttää tilaa ja hallinnoi 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 | Tekoälyavustajaprojekti | Chris |
Oppimateriaalimme on suunniteltu kahden keskeisen pedagogisen periaatteen pohjalta:
- 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 web-kehittäjät käyttävät. Opiskelijat saavat käytännön kokemusta rakentamalla kirjoituspelin, virtuaalisen terrarion, ympäristöystävällisen selainlaajennuksen, avaruuslajin pelin sekä pankkisovelluksen yrityksille. Sarjan lopuksi opiskelijoilla on vankka ymmärrys web-kehityksestä.
🎓 Voit suorittaa tämän oppimateriaalin ensimmäiset oppitunnit osana Learn Path -opintopolkua Microsoft Learnissä!
Sisällön linkittäminen projekteihin tekee prosessista opiskelijalle mielekkäämpää ja käsitteiden muistaminen paranee. Kirjoitimme myös useita aloittavia JavaScriptin perusteisiin keskittyviä oppitunteja, joissa perehdytään käsitteisiin, ja ne ovat parina videon kanssa "Beginners Series to: JavaScript" kokoelmasta, jonka osa tekijöistä osallistui tämän oppimateriaalin laadintaan.
Lisäksi kevyt kysely ennen luentoa asettaa opiskelijan opiskelutavoitetta ja toinen kysely luennon jälkeen varmistaa sisällön parempaa omaksumista. Tämä oppimateriaali on tarkoitettu joustavaksi ja hauskaksi, ja sen voi suorittaa kokonaan tai osittain. Projektit alkavat yksinkertaisista ja monimutkaistuvat 12 viikon jaksolla.
Vaikka tarkoituksella vältimme JavaScript-kirjastojen esittelyä keskittyäksemme verkkokehittäjän perustaitoihin ennen kirjastoihin siirtymistä, seuraava hyvä askel tämän oppimateriaalin jälkeen olisi Node.js:n opiskelu toisen videosarjan avulla: "Beginner Series to: Node.js".
Tutustu käyttäytymissääntöihimme ja osallistumisohjeisiimme. Otamme mielellämme vastaan rakentavaa palautettasi!
Voit käyttää tätä dokumentaatiota offline-tilassa käyttämällä Docsify. Haarauta tämä arkisto, asenna Docsify paikallisesti koneellesi, ja kirjoita tämän arkiston juurikansiossa docsify serve. Sivusto palvelee portissa 3000 paikallisessa ympäristössä: localhost:3000.
Kaikkiin oppitunteihin liittyvän PDF:n löydät täältä here.
Tiimimme tuottaa myös muita kursseja! Tutustu:
-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA){kind=icon}
-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC){kind=icon}
-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9){kind=icon}
Jos juutut 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 palautetta tuotteesta tai löydät virheitä rakentaessasi, käy:
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, ota huomioon, että automaattikäännöksissä saattaa esiintyä virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen omalla kielellä tulisi 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ä johtuvista väärinymmärryksistä tai tulkinnoista.