Opi frontend-kehitystä
Opi frontend-kehitystä — Frontend-kehitystä HTML:stä Reactiin live-esikatselulla
Opi frontend-kehitystä on ilmainen iOS- ja Android-sovellus aloittelijoille, suunnittelijoille ja alanvaihtajille, jotka haluavat web-kehittäjiksi. HTML, CSS ja JavaScript näkyvät rinnakkain live-editorissa, ja alla oleva sivu päivittyy kirjoittaessasi. 41 kurssia ja 163 lyhyttä oppituntia vievät sinut ensimmäisestä tagista responsiiviseen asetteluun, TypeScriptiin, Reactiin ja Vueen. Mukana on 20 ohjattua projektia, virheenkorjaustehtäviä ja AI-mentori löytämättä jääneitä bugeja varten.
- Hinta
- Ilmainen, Pro-päivitys
- Alustat
- iOS ja Android
- Kielet
- 22
- Ikäraja
- 4+
- Vaatimukset
- iOS 15.1 tai uudempi
Muuta yhtä riviä ja katso sivun muuttuvan.
Editorissa HTML-, CSS- ja JavaScript-paneelit ovat vierekkäin, ja niiden alla näkyy live-esikatselu. Näin opit merkintäkielen, tyylittelyn ja toiminnallisuuden yhtenä kokonaisuutena etkä kolmena erillisenä aiheena.
Mikä se on
Opi frontend-kehitystä on ilmainen iOS- ja Android-sovellus, joka opettaa frontend-kehitystä eli sitä verkkosivuston osaa, jonka ihmiset näkevät ja jota he käyttävät, puhelimessa toimivan live-HTML-, CSS- ja JavaScript-editorin avulla. Se tarjoaa 41 kurssia ja 163 oppituntia aloittelijasta senior-tasolle. Aiheita ovat webin perusteet, responsiivinen asettelu, JavaScript ja DOM, TypeScript, React, Vue, testaus, saavutettavuus ja suorituskyky. Lisäksi mukana on ohjattuja projekteja, virheenkorjaustehtäviä, työhaastattelukysymyksiä ja AI-mentori.
Sovelluksen sisältö
Miltä se näyttää
Kurssi
Mitä frontend-kurssi sisältää
41 kurssia ja 163 oppituntia sovelluksen omasta kurssilistasta: ensimmäisestä HTML-tagista frontend-arkkitehtuuriin ja senioritason ohjelmistokehitykseen.
Web ja kolme perustaa
Tervetuloa frontend-kehitykseen, miten web toimii, HTML:n perusteet, CSS:n perusteet ja JavaScriptin perusteet.
Asettelu ja responsiivinen suunnittelu
Responsiivisen suunnittelun perusteet, HTML-lomakkeet ja semanttinen merkintä, CSS-asettelun hallinta sekä CSS-muuttujat, siirtymät ja animaatiot.
JavaScript selaimessa
DOM ja selain-API:t, taulukot, objektit ja ES6+, asynkroninen ohjelmointi sekä JavaScript-moduulit ja build-työkalut.
Työskentelytavat ja työkalut
Kehittäjätyökalut ja työskentelytavat, Git ja yhteistyön työskentelytavat sekä modernit frontend-työkalut.
TypeScript
TypeScriptin johdanto, tyyppien ja rajapintojen perusteet sekä edistynyt TypeScript frontend-kehitykseen.
React ja Vue
Reactin perusteet, useEffect ja datan haku, edistyneet hookit ja suunnittelumallit sekä Vue 3:n perusteet, Composition API ja Vuen edistyneet suunnittelumallit.
Data, renderöinti ja reaaliaikaisuus
Tilan hallinta, API-integraatio ja REST, palvelinpuolen renderöinti Next.js:llä ja Nuxt 3:lla, progressiiviset web-sovellukset sekä WebSockets ja reaaliaikainen frontend.
Laatu ja arkkitehtuuri
Saavutettavuus, frontend-testaus, web-suorituskyvyn optimointi, frontend-tietoturva, CSS-arkkitehtuuri, design-järjestelmät, frontend CI/CD ja senioritason frontend-ohjelmistokehitys.
Miten se toimii
Näin opit sovelluksen avulla
Sovelluksen järjestys noudattaa alan oppimisen järjestystä: rakenna ensin sivu, tee siitä sitten toimiva ja opettele sen jälkeen skaalaamiseen tarvittavat työkalut.
Aloita ilmaisella ensimmäisellä kurssilla
Welcome to Frontend Development avaa polun, ja live-editori on ilmainen heti alusta lähtien. Jokainen oppitunti sisältää muutaman minuutin selityksen ja sen jälkeen tehtävän, jossa pääset muuttamaan ja suorittamaan koodia.
Muokkaa paneelia ja lue esikatselua
Muuta HTML:ää, CSS:ää tai JavaScriptiä, niin alla oleva esikatselu päivittyy mukana. Uudet projektit voi aloittaa HTML-, React-, Vue-, Angular-, Node- tai TypeScript-mallista.
Rakenna projekteja ja korjaa oikeita bugeja
Kaksikymmentä ohjattua projektia opastaa rakentamaan vaihe vaiheelta reseptisivun, yhteydenottolomakkeen, korttiruudukon, navigointipalkin ja datataulukon. Lisäksi 15 virheenkorjaustehtävässä saat korjattavaksesi rikkinäisiä sivuja.
Mitä se sisältää
Mitä sovellus sisältää
41
Kurssia aloittelijasta senior-tasolle
163 oppituntia A1:stä C2:een luokiteltuna: webin toiminnasta ja HTML:n perusteista TypeScriptiin, Reactiin, Vue 3:een, tilanhallintaan, Next.js:n ja Nuxt 3:n palvelinpuolen renderöintiin sekä progressiivisiin web-sovelluksiin.
Live
Editori ja välitön esikatselu
HTML-, CSS- ja JavaScript-paneelit, joiden alla näkyy esikatselu, joten muutos näkyy heti. Aloita uusia projekteja useista framework-malleista.
15
Virheenkorjaustehtävää
Tehtäviä oikeista frontend-ongelmista: asettelu hajoaa 375 pikselissä, kuva hidastaa sivua, lomakkeelle ei pääse näppäimistöllä, komponentissa on muistivuoto tai testi menee paikallisesti läpi mutta epäonnistuu CI:ssä.
20
Ohjattua projektia
Pieniä projekteja, jotka selitetään vaihe vaiheelta, kuten reseptisivu, yhteydenottolomake, korttiruudukko, navigointipalkki ja datataulukko.
AI
AI-mentori ja leikkikenttä
Kysy virheestä, oppitunnista tai omasta koodistasi, tai kuvaile sivu AI-leikkikentällä ja katso, kuinka koodi kirjoitetaan. Ilmaiset käyttäjät saavat kolme AI-kysymystä päivässä.
50
Työhaastattelukysymystä vastauksineen
Viisikymmentä frontend- ja web-kehittäjän työhaastattelukysymystä vastauksineen sekä 83 kohdan syntaksi- ja rakennehuoneentaulu ja lyhyiden esimerkkien kirjasto, jonka esimerkit voi avata ja jota voi muokata.
Taustaa
Mitä frontend-kehittäjä oikeastaan oppii – ja missä järjestyksessä?
Frontend-kehittäjä rakentaa selaimessa toimivan osuuden: sivun rakenteen, sen ulkoasun eri näyttöko'oissa ja sen, miten sivu reagoi klikkauksiin, kirjoittamiseen ja vieritykseen. Järkevä järjestys on aloittaa rakenteesta (HTML), siirtyä esitystapaan (CSS), sitten toiminnallisuuteen (JavaScript) ja vasta sen jälkeen suurempia projekteja järjestäviin työkaluihin: TypeScriptiin, Reactin tai Vuen kaltaiseen frameworkiin, testaukseen ja build-vaiheeseen. Frameworkiin siirtyminen ennen kolmen perustan hallintaa on yleisin syy aloittelijoiden jumittumiseen, sillä framework lähinnä piilottaa tavallisen JavaScriptin ja DOM:n oman syntaksinsa taakse.
Semanttinen HTMLmerkitys ennen ulkoasua
Kun valitset otsikon, luettelon, lomakkeen kenttäselitteen tai painikkeen sisällön merkityksen etkä ulkoasun perusteella, annat ruudunlukijoille, hakukoneille ja näppäimistöille jotain, jonka kanssa ne voivat toimia. Se on myös jokaisen sivun edullisin saavutettavuusparannus.
Responsiivinen asetteluyksi sivu, jokaiselle näytölle
Flexbox, grid ja media queryt antavat yhden asettelun mukautua kapeasta puhelimesta leveään näyttöön. Testaaminen jo varhain pienellä leveydellä, kuten 375 pikselillä, paljastaa asetteluvirheet, joiden korjaaminen myöhemmin on tuskallista.
DOMsivu elävänä objektina
Selain muuntaa HTML:n objektipuuksi, jota JavaScript voi lukea ja muuttaa. Jokainen framework on pohjimmiltaan kätevä tapa päivittää tätä puuta, joten sen ymmärtäminen helpottaa huomattavasti Reactin ja Vuen hahmottamista.
Core Web Vitals ja suorituskykynopeus, jonka voi tuntea
Sivu tuntuu hitaalta, jos suuri optimoimaton kuva latautuu myöhään tai sivu hyppii latauksen aikana, vaikka koodi olisi kunnossa. Suorituskyky on taito, joka tulee näkyviin vasta oikeiden sivujen ja oikeiden kuvien kanssa.
Sopivuus
Kenelle se sopii – ja kenelle ei
Se sopii sinulle, jos
- Haluat ryhtyä web-kehittäjäksi ja aloitat nollasta
- Olet suunnittelija ja haluat rakentaa suunnittelemasi sivut
- Osaat jonkin verran HTML:ää ja CSS:ää ja haluat oppia niiden lisäksi JavaScriptiä, TypeScriptiä, Reactia tai Vueta
- Valmistaudut ensimmäiseen frontend-haastatteluusi ja haluat kysymyksiä vastauksineen
- Haluat nähdä sivun muuttuvan kirjoittaessasi mieluummin kuin lukea pitkiä selityksiä
Se ei ole oikea työkalu sinulle, jos
- Sinun on rakennettava ja julkaistava suuri, useista tiedostoista koostuva sivusto, johon tarvitaan edelleen kannettava tietokone ja täysimittainen editori
- Odotat kaiken olevan ilmaista: ensimmäinen kurssi, ensimmäinen projekti, kaksi debuggaushaastetta ja editori ovat ilmaisia, ja Pro avaa kaiken muun
- Haluat backend- tai tietokantakurssin, sillä tämä polku käsittelee selaimessa toimivaa
- Työskentelet jo senioritason frontend-kehittäjänä ja haluat oppituntien sijaan hakuteoksen
Kysymykset
Usein kysytyt kysymykset
Mitä frontend-kehitys on?
Frontend-kehityksellä rakennetaan verkkosivuston tai web-sovelluksen selaimessa toimiva osa: sen rakenne HTML:llä, ulkoasu CSS:llä ja toiminta JavaScriptillä sekä niiden päälle rakennetut frameworkit ja työkalut. Opi frontend-kehitystä opettaa tämän kokonaisuuden tässä järjestyksessä ja näyttää jokaisen muutoksen heti esikatselussa.
Voinko oppia frontend-kehitystä puhelimellani?
Käsitteet ja ensimmäiset sivut voi oppia hyvin puhelimella, koska HTML, CSS ja JavaScript ovat riittävän pieniä muokattaviksi lyhyissä tuokioissa ja esikatselu näyttää tuloksen heti. Sovellus näyttää ruudulla kolme paneelia ja reaaliaikaisen esikatselun. Kannettava tietokone on kätevämpi, kun ylläpidät suurempaa, monista tiedostoista koostuvaa projektia, mutta aloittamiseen sitä ei tarvita.
Kenelle se sopii, ja mistä täydellisen aloittelijan kannattaa aloittaa?
Se sopii täydellisille aloittelijoille, suunnittelijoille, jotka haluavat rakentaa suunnittelemansa asiat, jonkin verran HTML:ää ja CSS:ää osaaville kehittäjille sekä alanvaihtajille, jotka valmistautuvat ensimmäiseen frontend-työpaikkaansa. Aloita tutustumalla webin toimintaan ja HTML:n perusteisiin, jatka sitten CSS:ään ja sen jälkeen JavaScriptiin. Opi frontend-kehitystä etenee tässä järjestyksessä ja alkaa ilmaisella Tervetuloa frontend-kehitykseen -kurssilla.
Opettaako sovellus Reactia ja Vueta?
Kyllä. HTML:n, CSS:n, JavaScriptin ja TypeScriptin jälkeen sovellus tarjoaa React-kursseja perusteista, useEffectistä ja datan hausta sekä edistyneistä hookeista ja suunnittelumalleista, ja Vue 3 -kursseja perusteista, Composition API:sta ja edistyneistä suunnittelumalleista. Lisäksi se käsittelee tilan hallintaa sekä palvelinpuolen renderöintiä Next.js:llä ja Nuxt 3:lla.
Tarvitseeko minun oppia TypeScriptiä?
Ensimmäisen sivun rakentamiseen sitä ei tarvita, mutta useimmat ammattimaiset React- ja Vue-koodikannat käyttävät sitä, joten se kannattaa opetella JavaScriptin perusteiden jälkeen. Sovellus esittelee TypeScriptin ensimmäisen tason kurssilla, syventävällä tyyppejä ja rajapintoja käsittelevällä kurssilla sekä frontend-suunnittelumalleihin keskittyvällä edistyneellä kurssilla.
Miten debuggaushaasteet toimivat?
Jokaisessa 15 debuggaushaasteessa saat korjataksesi rikkinäisen sivun tai komponentin, joka jäljittelee todellista frontend-ongelmaa: esimerkiksi 375 pikselin kohdalla hajoavan asettelun, näppäimistöllä käyttämättömän lomakkeen, komponentin muistivuodon tai testin, joka epäonnistuu vain CI:ssä. Kaksi haastetta on ilmaista.
Voiko se auttaa valmistautumaan frontend-kehittäjän työhaastatteluun?
Se voi auttaa tietopuolisessa valmistautumisessa. Opi frontend-kehitystä sisältää 50 haastattelukysymystä vastauksineen, 83 kohdan syntaksin ja suunnittelumallien lunttilistan sekä testausta, suorituskykyä, saavutettavuutta ja arkkitehtuuria käsitteleviä kursseja — juuri näihin aiheisiin haastatteluissa yleensä siirrytään perusteiden jälkeen. Se ei korvaa omista projekteistasi koostuvan portfolion rakentamista.
Kuinka kauan frontend-kehityksen oppiminen kestää?
Aloittelija, joka harjoittelee hieman joka päivä, pystyy yleensä rakentamaan yksinkertaisia responsiivisia sivuja muutamassa viikossa, kun taas sujuva JavaScriptin ja frameworkin hallinta vie kuukausia. Sovellus jakaa polun muutaman minuutin mittaisiin oppitunteihin ja kannustaa putkilla sekä muistutuksilla, joten edistyminen perustuu säännöllisiin lyhyisiin tuokioihin yhden pitkän opiskelurupeaman sijaan.
Onko Opi frontend-kehitystä ilmainen?
Sen voi ladata ilmaiseksi App Storesta ja Google Playsta. Ensimmäinen kurssi, ensimmäinen ohjattu projekti, kaksi debuggaushaastetta ja koodieditori ovat ilmaisia, samoin kolme AI-mentorin kysymystä päivässä, ja ilmaisversio näyttää mainoksia. Pro avaa kaikki kurssit, projektit ja haasteet, sertifikaattikokeen ja rajattoman AI:n sekä poistaa mainokset.
Mitä alustoja ja kieliä se tukee, ja onko App Store -sovellus sama?
Opi frontend-kehitystä toimii iOS:llä App Storen kautta ja Androidilla Google Playn kautta, 22 kielellä ja ikärajoituksella 4+. App Storen listauksessa nimenä on Learn Frontend Development ja Google Playn listauksessa Opi frontend-kehitystä, mutta kyseessä on sama sovellus. Lopputentin läpäisemisestä saa suorittamistodistuksen.
Aloita
Rakenna ensimmäinen web-sivusi jo tänään
Aloita ilmaiseksi iOS- ja Android-laitteilla 22 kielellä.
Lisää CoddyKitilta
Saatavilla alustoilla iOS.