PricingLoginStart free
Frontend Academy logo
HTMLAloittelijaVerkkoTasot A1 → C222 kieltä

Frontend Academy

Kehittäkää visuaalisesti näyttäviä ja responsiivisia verkkosivustoja Frontend Development Academyn avulla. CoddyKitin oppimispolku, joka sisältää 41 lyhyttä kurssia ja 163 interaktiivista oppituntia sekä tekoälytuutorin käytettävissäsi ympäri vuorokauden.

Kurssit
41
Oppitunnit
163
Interaktiiviset vaiheet
2,186
Aloita maksutta
Kurssi 1
GET IT ONGoogle PlayDownload on theApp Store
Kurssisisältö

41 kurssia tässä opintopolussa

Kaikki Frontend Academy-opintopolun kurssit suoritusjärjestyksessä. Ensimmäinen on ilmainen.

1

A13 oppituntiaIlmainen

Ymmärtäkää, mitä frontend-kehittäjät todella tekevät, miksi ala kuuluu kysytyimpiin ja luovimpiin teknologia-aloihin ja miten HTML, CSS ja JavaScript toimivat yhdessä.

  1. 1Mitä frontend-kehitys on?
  2. 2Frontend-teknologioiden kolmikko
  3. 3Tulevaisuutesi frontend-kehittäjänä
Aloita opiskelu maksutta
2

A14 oppituntiaPRO

Ymmärtäkää verkon perusteet: miten selaimet pyytävät sivuja, mitä DNS tekee, miten HTTP toimii ja mitä tapahtuu, kun kirjoitatte URL-osoitteen. Kurssin jälkeen tiedätte tarkalleen, mitä selain tekee…

  1. 1Selaimet, DNS ja HTTP: pyynnön elinkaari
  2. 2HTML, CSS ja JavaScript: kunkin kerroksen tehtävä
  3. 3Miten sivu renderöityy: DOM, CSSOM, asettelu ja piirto
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
3

A14 oppituntiaPRO

Oppikaa jokaisen verkkosivun rakennuspalikat. Kirjoittakaa kelvollisia HTML5-dokumentteja semanttisilla elementeillä, jäsentäkää sisältö otsikoilla ja luetteloilla, upottakaa kuvia ja linkkejä sekä r…

  1. 1Dokumentin rakenne: DOCTYPE, html, head ja body
  2. 2Semanttiset tunnisteet: header, nav, main, article ja footer
  3. 3Teksti, kuvat, linkit ja luettelot
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
4

A14 oppituntiaPRO

Muotoilkaa HTML:ää varmoin ottein. Oppikaa, miten kaskadi ja spesifisyys toimivat, käyttäkää värejä ja typografiaa, hallitkaa laatikkomalli sekä ohjatkaa asettelua display-ominaisuuksilla ja sijoitte…

  1. 1Valitsimet ja kaskadi
  2. 2Värit, typografia ja laatikkomalli
  3. 3Display: block-, inline-, flex- ja grid-perusteet
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
5

A14 oppituntiaPRO

Kirjoittakaa ensimmäiset JavaScript-ohjelmanne. Oppikaa ilmoittamaan muuttujia, työskentelemään primitiivisten tietotyyppien kanssa, määrittelemään funktioita ja ohjaamaan ohjelman kulkua ehtolauseil…

  1. 1Muuttujat: let, const, var ja näkyvyysalue
  2. 2Tietotyypit: string, number, boolean, null ja undefined
  3. 3Funktiot: määritykset, lausekkeet ja nuolifunktiot
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
6

A14 oppituntiaPRO

Työskentele kuin frontend-kehittäjä ammattilainen. Ota Chrome DevTools haltuun tarkastelua ja vianmääritystä varten, määritä VSCode hyödyllisine laajennuksineen ja ota käyttöön koodin laatutyökalut,…

  1. 1Chrome DevTools: Elements, Console ja Network
  2. 2VSCode: laajennukset, Emmet ja pikanäppäimet
  3. 3Prettier- ja ESLint-asetukset
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
7

A24 oppituntiaPRO

Lisää JavaScriptiin tyypit ja löydä virheet ennen kuin ne päätyvät selaimeen. Opettele TypeScriptin tyyppijärjestelmä, määritä muuttujien ja funktioiden tyypit, määrittele rajapintoja ja käännä TypeS…

  1. 1Miksi TypeScript: tyypit havaitsevat virheet käännösaikana
  2. 2Primitiivityypit, union-tyypit ja tyyppialiaset
  3. 3Interfacet ja objektityypit
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
8

A24 oppituntiaPRO

Tehkää HTML:stä interaktiivista JavaScriptillä. Valitkaa elementtejä, kuunnelkaa tapahtumia, lukekaa ja muuttakaa sisältöä sekä luokaa ja poistakaa elementtejä dynaamisesti Document Object Modelin av…

  1. 1querySelector ja querySelectorAll
  2. 2addEventListener ja Event-objekti
  3. 3Sisällön muuttaminen: textContent, innerHTML ja classList
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
9

A24 oppituntiaPRO

Rakenna asetteluja, jotka toimivat kaikenkokoisilla näytöillä. Opettele viewport-metaelementin käyttö, hyödynnä Flexboxia ja Grid-asettelua joustaviin rakenteisiin ja kirjoita media queryt mobile fir…

  1. 1Viewport-metatunniste
  2. 2Flexbox asetteluun
  3. 3CSS Grid asetteluun
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
10

A24 oppituntiaPRO

Syvennä HTML-osaamistasi. Rakenna täysin saavutettavia lomakkeita ARIA-attribuuteilla, hyödynnä kaikkia HTML5:n syötekenttätyyppejä, käytä selaimen omaa validointia ja kirjoita merkintää, joka välitt…

  1. 1Lomakeohjaimet: input-tyypit, select ja textarea
  2. 2ARIA ja saavutettavuus: label, role ja aria-*
  3. 3Semanttinen HTML5: semantiikka ja div-kaaos
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
11

A24 oppituntiaPRO

Kehitä JavaScript-osaamistasi modernilla syntaksilla ja tehokkailla sisäänrakennetuilla metodeilla. Muokkaa taulukoita map-, filter- ja reduce-metodeilla, pura olioita destrukturoinnilla, levitä tiet…

  1. 1Taulukkometodit: map, filter, reduce ja find
  2. 2Objektien destrukturointi ja spread
  3. 3Template literalit ja optional chaining
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
12

A24 oppituntiaPRO

Käytä Gitiä tehokkaasti frontend-kehittäjänä. Opettele työn tallentamisen keskeiset komennot, ymmärrä haarojen käyttö ominaisuuksien kehittämisessä, pushaa GitHubiin ja tee yhteistyötä pull requestie…

  1. 1git init, add, commit ja status
  2. 2Haarautuminen: branch, checkout ja merge
  3. 3Etärepositoriot: push, pull ja clone
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
13

A24 oppituntiaPRO

Herätä käyttöliittymät eloon CSS-animaatioilla. Käytä mukautettuja ominaisuuksia ylläpidettävien suunnittelutunnisteiden toteuttamiseen, lisää tilan muutoksiin sulavia siirtymiä, rakenna keyframe-ani…

  1. 1CSS:n mukautetut ominaisuudet: määrittäminen ja päivittäminen
  2. 2Siirtymät: ominaisuus, kesto ja ajoitus
  3. 3@keyframes-animaatiot
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
14

B14 oppituntiaPRO

Siirry perusteita pidemmälle ja ota CSS-asettelu todella haltuun. Tutki Flexboxin tasausta ja rivitystä perusteellisesti, hyödynnä CSS Gridin template area -alueita ja auto-fitiä, yhdistä molemmat te…

  1. 1Flexboxin syventävä käsittely: tasaus, rivittyminen ja järjestys
  2. 2CSS Grid: template-areas, auto-fit ja minmax
  3. 3Flexboxin ja Gridin yhdistäminen
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
15

B14 oppituntiaPRO

Ymmärrä moderni JavaScript-työkaluketju. Käytä ES-moduulisyntaksia, hallitse paketteja npm:llä, käynnistä välittömiä kehityspalvelimia Vitellä ja opettele tuotantopakettien koon pitämiseen tarvittava…

  1. 1ES-moduulit: import, export ja dynamic import
  2. 2npm ja package.json: riippuvuudet ja skriptit
  3. 3Vite: kehityspalvelin ja build
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
16

B14 oppituntiaPRO

Syvenny TypeScriptin tyyppijärjestelmään. Kirjoita uudelleenkäytettäviä geneerisiä funktioita, muunna rajapintoja utility-tyypeillä, rakenna mapped- ja conditional-tyyppejä ja rajaa tyyppejä turvalli…

  1. 1Generics: T, extends ja rajoitteet
  2. 2Apuohjelmatyypit: Partial, Required, Pick ja Omit
  3. 3Mapitetut ja ehdolliset tyypit
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
17

B14 oppituntiaPRO

Rakenna ensimmäiset React-sovelluksesi. Ymmärrä JSX-syntaksi, kokoa käyttöliittymiä funktionaalisista komponenteista, välitä tietoja propsien avulla ja hallitse paikallista tilaa useState-hookilla in…

  1. 1JSX: syntaksi ja transpilaus
  2. 2Funktionaaliset komponentit ja propsit
  3. 3useState-hook: tila ja uudelleenrenderöinnit
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
18

B14 oppituntiaPRO

Pidä React-komponentit synkronoituna ulkoisten järjestelmien kanssa. Opettele, miten useEffect toimii, hae tietoja rajapinnoista komponentin alustuksen yhteydessä, näytä lataus- ja virhetilat ja siiv…

  1. 1useEffectin perusteet: riippuvuudet ja siivous
  2. 2Tietojen hakeminen komponentin alustuksessa
  3. 3Lataus- ja virhetilojen käsittely
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
19

B14 oppituntiaPRO

Rakenna ensimmäiset Vue 3 -sovelluksesi Single-File Components -komponenteilla. Opettele Options API, keskeiset direktiivit sekä tietojen välittäminen isäntä- ja lapsikomponenttien välillä propsien j…

  1. 1Vue SFC: script, template ja style
  2. 2Options API: data, methods ja computed
  3. 3Direktiivit: v-if, v-for, v-bind ja v-on
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
20

B14 oppituntiaPRO

Rakenna käyttöliittymiä, joita kaikki voivat käyttää. Ymmärrä WCAG:n vaatimustenmukaisuustasot, käytä semanttista HTML:ää saavutettavuuden perustana, sovella ARIA-rooleja ja -attribuutteja oikein ja…

  1. 1WCAG-tasot A, AA ja AAA
  2. 2Semanttinen HTML perustana
  3. 3ARIA-roolit ja -attribuutit
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
21

B24 oppituntiaPRO

Ota asynkroninen JavaScript haltuun perusteista alkaen. Ymmärrä tapahtumasilmukka, siirry callback-malleista Promiseihin ja kirjoita selkeää async/await-koodia asianmukaisella virheenkäsittelyllä.

  1. 1Tapahtumasilmukka: call stack, jono ja microtaskit
  2. 2Callbackit ja callback-helvetti
  3. 3Promiset: then, catch, finally ja Promise.all
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
22

B24 oppituntiaPRO

Ota Reactin koko hooks-rajapinta haltuun. Jaa tietoja ilman propsien välitystä komponenttipuussa useContextilla, hallitse monimutkaista tilaa useReducerilla, optimoi suorituskykyä useMemolla ja useCa…

  1. 1useContext globaalin tilan hallintaan
  2. 2useReducer monimutkaiseen tilaan
  3. 3useMemo ja useCallback suorituskyvyn parantamiseen
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
23

B24 oppituntiaPRO

Ota Vue 3:n koko teho käyttöön Composition APIlla. Käytä refiä ja reactivea reaktiiviseen tilaan, computedia ja watchia johdettuihin arvoihin ja sivuvaikutuksiin sekä rakenna uudelleenkäytettäviä com…

  1. 1ref() ja reactive()
  2. 2computed() ja watch()
  3. 3setup()-funktio ja script setup
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
24

B24 oppituntiaPRO

Hallitse sovelluksen yhteistä tilaa tehokkaasti. Opettele Reactin Redux Toolkit, kevyempi vaihtoehto Zustand, Vuen Pinia sekä periaatteet, joiden avulla päätät, milloin globaalia tilaa todella tarvit…

  1. 1Redux Toolkit: createSlice ja configureStore
  2. 2Zustand kevyeen React-tilanhallintaan
  3. 3Pinia Vuelle: defineStore ja storeToRefs
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
25

B24 oppituntiaPRO

Kirjoita frontend-koodillesi automaattisia testejä. Ota Jest käyttöön, testaa React-komponentteja Testing Librarylla, testaa Vue-komponentteja ja mokkaa moduulit sekä API-kutsut, jotta testit pysyvät…

  1. 1Jest-asetukset ja perustestit
  2. 2@testing-library/react: render ja userEvent
  3. 3@testing-library/vue: komponenttien mountaus
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
26

B24 oppituntiaPRO

Kirjoita skaalautuvaa CSS:ää. Opettele BEM-nimeämiskäytäntö ennakoitavia valitsimia varten, rajaa tyylit CSS Modulesilla, lisää CSS:ää suoraan JavaScriptiin styled-componentsilla ja Emotionilla ja ot…

  1. 1BEM-metodologia: Block, Element ja Modifier
  2. 2CSS Modules: rajatut luokan nimet
  3. 3CSS-in-JS: Styled-components ja Emotion
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
27

B24 oppituntiaPRO

Yhdistä frontendisi backend-rajapintoihin. Käytä natiivia Fetch APIa kaikille HTTP-metodeille, lisää Axios interceptorien ja base URL -osoitteiden käyttöön, käsittele HTTP-virheet hallitusti ja välim…

  1. 1Fetch API: GET, POST, PUT ja DELETE
  2. 2Axios: interceptors ja base URL
  3. 3Virheenkäsittely: HTTP-tilakoodit
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
28

B24 oppituntiaPRO

Rakenna tuotantovalmiita React-sovelluksia Next.js:llä. Ymmärrä sekä Pages Router että moderni App Router, erota Server Componentit Client Componenteista, valitse oikea renderöintistrategia ja lisää…

  1. 1Pages Router vai App Router
  2. 2Palvelinkomponentit ja asiakaskomponentit
  3. 3SSG, SSR ja ISR
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
29

B24 oppituntiaPRO

Rakenna täyden pinon Vue-sovelluksia Nuxt 3:lla. Käytä tiedostopohjaista reititystä ja automaattisia tuonteja toisteisen koodin vähentämiseen, hae palvelimen tietoja composableilla, laajenna toiminna…

  1. 1Tiedostopohjainen reititys ja automaattiset tuonnit
  2. 2useFetch ja useAsyncData
  3. 3Nuxt-moduulit: Image, Auth ja i18n
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
30

B24 oppituntiaPRO

Muuta verkkosivustot sovellusmaisiksi kokemuksiksi. Kirjoita asennettavuutta varten Web App Manifest, rekisteröi Service Workerit offline-tukea varten, toteuta välimuististrategioita ja lisää push-il…

  1. 1Web App Manifest
  2. 2Service Workerin rekisteröinti ja elinkaari
  3. 3Offline-välimuististrategiat: CacheFirst ja NetworkFirst
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
31

B24 oppituntiaPRO

Rakenna reaaliaikaisia käyttöliittymiä. Käytä natiivia WebSocket APIa, integroi Socket.io-asiakaskirjasto, vastaanota palvelimen lähettämiä tapahtumia yksisuuntaisia tietovirtoja varten ja sovella re…

  1. 1WebSocket API: open, message, close ja error
  2. 2Socket.io-asiakkaan integrointi
  3. 3Server-Sent Events yksisuuntaiseen suoratoistoon
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
32

B24 oppituntiaPRO

Ota nopeasti kehittyvä JavaScript-työkaluketju haltuun. Laajenna Viteä liitännäisillä ja käytä sitä SSR:ään, ymmärrä, miten esbuild saavuttaa nopeutensa, hallitse workspaceja pnpm:llä ja nopeuta mono…

  1. 1Vite: laajennusjärjestelmä ja SSR-tila
  2. 2esbuild: nopeus ja rajoitukset
  3. 3pnpm Workspaces monorepoja varten
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
33

C14 oppituntiaPRO

Tee sivustoistasi nopeita ja mittaa parannukset. Ymmärrä Core Web Vitals -mittarit, suorita Lighthouse-auditointeja, optimoi kuvat verkkoa varten ja pienennä JavaScript-paketin kokoa koodin jaolla ja…

  1. 1Core Web Vitals: LCP, FID ja CLS
  2. 2Lighthouse-auditoinnit ja pisteytys
  3. 3Kuvien optimointi: lazy loading ja WebP-formaatti
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
34

C14 oppituntiaPRO

Vie TypeScript äärirajoilleen. Rakenna tyyppejä template literal -tyypeillä, määritä React-komponenttien ja hookien tyypit täsmällisillä geneerisillä tyypeillä, ota strict-tila käyttöön turvattomien…

  1. 1Template Literal -tyypit
  2. 2Dekoraattorit ja metadata
  3. 3TypeScript Reactin kanssa: FC:n geneeriset tyypit ja hookit
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
35

C14 oppituntiaPRO

Kirjoita React-koodia kirjastojen tekijöiden tapaan. Rakenna Contextin varaan perustuvia yhdistelmäkomponentteja, jaa poikkileikkaavia huolenaiheita render props- ja HOC-malleilla, renderöi puun ulko…

  1. 1Yhdistelmäkomponentit Contextin avulla
  2. 2Render Props- ja HOC-mallit
  3. 3Portaalit modaalisille ikkunoille ja työkaluvihjeille
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
36

C14 oppituntiaPRO

Ota ammattilaissovelluksissa käytetyt Vue 3:n edistyneet mallit haltuun. Jaa logiikkaa komponenttipuussa provide/inject-mallilla, lataa komponentteja asynkronisesti Suspensella, kirjoita mukautettuja…

  1. 1provide() ja inject() riippuvuuksien injektointiin
  2. 2Asynkroniset komponentit ja Suspense
  3. 3Mukautetut direktiivit
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
37

C14 oppituntiaPRO

Suunnittele frontend-sovelluksia, jotka skaalautuvat suurille tiimeille. Sovella Atomic Designia komponenttihierarkioihin, hallitse useita paketteja Turborepo-monorepoilla, toteuta micro-frontendien…

  1. 1Atominen suunnittelu: atomit, molekyylit ja organismit
  2. 2Monorepon käyttöönotto Turborepolla
  3. 3Mikrofrontendit: Module Federation
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
38

C14 oppituntiaPRO

Rakenna ja ylläpidä jaettua komponenttikirjastoa. Dokumentoi komponentit Storybookilla, määrittele suunnittelutunnisteet Style Dictionarylla, versioi ja julkaise npm:ään ja integroi järjestelmä sitä…

  1. 1Storybook: storyt, Controls ja Docs
  2. 2Suunnittelutokenit Style Dictionarylla
  3. 3Versiointi ja julkaiseminen npm:ään
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
39

C14 oppituntiaPRO

Suojaa käyttäjiäsi verkkoturvallisuusuhilta. Estä XSS-tapaukset tulosteen koodauksella ja Content Security Policylla, suojaa CSRF:ltä SameSite-evästeillä ja tunnisteilla, määritä CSP-otsakkeet ja tot…

  1. 1XSS:n torjunta: tulosteen koodaus ja CSP
  2. 2CSRF: SameSite-evästeet ja tokenit
  3. 3Content Security Policy: nonce ja hash
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
40

C14 oppituntiaPRO

Automatisoi frontendisi julkaisu. Kirjoita GitHub Actions -työnkulkuja, jotka tarkistavat tyylin, testaavat ja koostavat koodin jokaisella pushilla, julkaise automaattisesti Verceliin, Netlifyhin ja…

  1. 1GitHub Actions frontendille: lint, test ja build
  2. 2Käyttöönotto Vercelissä, Netlifyssa ja Cloudflare Pagesissa
  3. 3Ympäristömuuttujat CI:ssä
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
41

C24 oppituntiaPRO

Työskentele senioritasolla. Lähesty järjestelmäsuunnittelun haastatteluja frontend-näkökulmasta, rakenna tervettä koodikatselmointikulttuuria, kehitä juniorikehittäjiä mentoroinnin ja dokumentoinnin…

  1. 1Frontend-järjestelmäsuunnittelun haastattelut
  2. 2Koodikatselmointikulttuuri ja PR-käytännöt
  3. 3Mentorointi ja tekninen dokumentaatio
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
CoddyKit PRO

Avaa kaikki 41 tämän opintopolun kurssia ja kaikki muut opintopolut

Tekoälytuutori, sertifiointikoe ja suoritustodistus. Toimii verkossa sekä iOS- ja Android-laitteilla.

Näytä kaikki paketit
Vuosittain$29.90 / vuosiNoin $2.49 kuukaudessaMaksa kerranElinikäinen$69.99 KerranEi uusimisia. PRO ikuisesti.
Kurssin yleiskatsaus

Modernin frontend-kehityksen koko kirjo

Frontend-kehitys on ala, jossa koodi muutetaan kaikeksi, mitä käyttäjä selaimessa näkee ja käyttää — HTML-rakenteeksi, CSS-esitystavaksi, JavaScript-toiminnallisuudeksi sekä niitä tuotantoympäristössä yhdistäviksi viitekehyksiksi ja työkaluiksi. Tämä opintopolku kattaa koko pinon: verkkosivun toimittamisesta tyyppejä turvallisesti hyödyntävien React- ja Vue-sovellusten kirjoittamiseen, suorituskyvyn optimointiin ja julkaisemiseen CI/CD-putken kautta.

Mitä opit

Aloitat HTML:n, CSS:n ja JavaScriptin perusteista ja opit sen jälkeen käyttämään sujuvasti TypeScriptiä, DOM:ia ja selain-API:ja sekä responsiivista suunnittelua ja ES6+-malleja, kuten asynkronista ohjelmointia ja moduuleja. Sen jälkeen siirryt Reactiin (hookit, edistyneet mallit, Next.js:n SSR) ja Vue 3:een (Composition API, Nuxt 3:n SSR), tilanhallintaan, frontend-testaukseen, CSS-arkkitehtuuriin ja WebSockets-toteutettuihin reaaliaikaisiin käyttöliittymiin. Opintopolun lopussa käsitellään verkon suorituskyvyn optimointia, frontend-tietoturvaa, suunnittelujärjestelmiä sekä frontendin CI/CD:tä ja DevOpsia.

Oppimispolku

Neljäkymmentäyksi kurssia kattaa tasot A1:stä C2:een. A1- ja A2-kurssit luovat perustan: miten verkko toimii, semanttinen merkkaus, CSS-animaatiot, Git ja TypeScriptin perusteet. B1- ja B2-kurssit kehittävät ammatillista osaamista: CSS Layout Mastery, JavaScript Modules and Build Tools, Reactin ja Vue 3:n perusteet, API-integraatiot, Progressive Web Apps sekä palvelinpuolen renderöinti Next.js:llä ja Nuxt 3:lla. C1-kursseilla käsitellään senioritason aiheita: Advanced TypeScript for Frontend, React Advanced Patterns, Vue Advanced Patterns, Frontend Architecture, Design Systems and Component Libraries, Frontend Security sekä Frontend CI/CD and DevOps. Opintopolku päättyy C2-tasolle kurssiin Senior Frontend Engineering, joka kokoaa kaiken tuotantotason käytännöiksi.

Näin se toimii

Jokainen kurssi koostuu lyhyistä, käytännönläheisistä oppitunneista, jotka suoritat sisäänrakennetussa koodieditorissa reaaliaikaisen palautteen avulla. Saatavillasi on AI-tutor aina, kun jäät jumiin, ja jokainen käsite vahvistuu harjoituksilla, jotka jäljittelevät selaimen ja viitekehysten todellista toimintaa keinotekoisten esimerkkien sijaan.

Työkalut

Harjoittele tekoälyn avulla – älä vain lue

Tehosta oppimistasi tekoälypohjaisilla työkaluilla ja ominaisuuksilla

Tekoälypohjainen koodigeneraattoriLuo koodia tekoälyn avullaTekoälypohjainen virheenkorjausEtsi ja korjaa koodivirheetPROTekoälyn koodianalyysiPerusteellinen koodianalyysiPROTekoälychatKeskustele tekoälytuutorin kanssaEsitä superkysymysSaat asiantuntijatason vastauksiaPROLuo oppituntiTekoälypohjainen oppituntien luontityökaluPROAloita sertifiointikoeHanki sertifikaattiPROKoodieditoriKirjoita ja suorita koodiaAloita haasteTestaa taitosi

Näin opiskelet

  1. 01

    Interaktiiviset oppitunnit

    Käytännön koodiharjoituksia ja reaaliaikaista palautetta

  2. 02

    Tekoälytuutori

    Saat heti apua tekoälyltä, kun jäät jumiin

  3. 03

    Sisäänrakennettu editori

    Kirjoita ja suorita koodia suoraan selaimessa

  4. 04

    Sertifikaatti

    Saat sertifikaatin suoritettuasi kurssin

Tutustu lisää

Aiheeseen liittyvät opintopolut

HTML for Kids logoHTML for KidsIntroduce kids to web development with fun and easy HTML lessons at HTML for Kids.HTML Academy logoHTML AcademyBuild strong foundations in web development by learning HTML at HTML Academy.Angular Academy logoAngular AcademyLearn Angular to build scalable and modern web applications with Angular Academy.Vue Academy logoVue AcademyCreate interactive and efficient user interfaces with Vue.js through Vue Academy.Sveltejs Academy logoSveltejs AcademyBuild fast and simple user interfaces with modern techniques at Svelte Academy.Web Accessibility Academy logoWeb Accessibility AcademyBuild inclusive websites everyone can use. Master semantic HTML, ARIA, keyboard and scree…
UKK

Usein kysytyt kysymykset

Onko Frontend Academy-kurssi ilmainen?

Kyllä. Voit aloittaa Frontend Academy-kurssin ilmaiseksi ja suorittaa sen vuorovaikutteiset oppitunnit maksutta. Valinnainen PRO-tilaus avaa käyttöön edistyneet tekoälytyökalut ja jaettavan todistuksen.

Tarvitsenko aiempaa kokemusta oppiakseni HTML?

Et tarvitse. Kurssi alkaa perusteista ja etenee vähitellen edistyneempiin aiheisiin, joten voit aloittaa, vaikka sinulla ei olisi aiempaa HTML-kokemusta.

Miten opin HTML CoddyKitissä?

Opit tekemällä. Lyhyillä vuorovaikutteisilla oppitunneilla selkeä teoria yhdistyy käytännön koodiharjoitukseen, joka suoritetaan reaaliajassa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori auttaa henkilökohtaisesti aina, kun jäät jumiin.

Saanko todistuksen Frontend Academy-kurssin suorittamisesta?

Kyllä. PRO-oppijat voivat suorittaa kokeen ja saada Frontend Academy-kurssin suorittamisesta jaettavan todistuksen, jonka koodi voidaan tarkistaa.

Voinko oppia HTML puhelimellani?

Kyllä. CoddyKit on käytettävissä verkossa sekä iOS- ja Android-natiivisovelluksina, joten voit oppia HTML millä tahansa laitteella, ja edistymisesi synkronoituu niiden välillä.

Paljonko CoddyKit PRO maksaa?

Frontend Academy-opintopolun ensimmäinen kurssi on ilmainen. CoddyKit PRO avaa kaikki kurssit: $5.90 viikossa, $7.90 kuukaudessa, $29.90 vuodessa tai $69.99 kerran maksettuna, jolloin saat elinikäisen käyttöoikeuden ilman uusimisia.

Kuinka kauan Frontend Academy-opintopolun suorittaminen kestää?

Frontend Academy sisältää 41 kurssia ja 163 oppituntia. Useimmat oppitunnit kestävät noin 5–10 minuuttia, joten koko opintopolun suorittamiseen kuluu omaan tahtiin noin 19 tuntia käytännön harjoittelua.

Aloita Frontend Academy nyt

Liity tuhansien oppijoiden joukkoon ja opi ohjelmointia tekoälyä hyödyntävillä oppitunneilla.

Aloita opiskelu maksuttaSelaa kaikkia kursseja