HTML Academy logo
HTMLAloittelijaVerkkoTasot A1 → C122 kieltä

HTML Academy

Rakentakaa vahva perusta web-kehitykselle opiskelemalla HTML:ää HTML Academyssa. CoddyKitin oppimispolku, joka sisältää 40 lyhyttä kurssia ja 159 interaktiivista oppituntia sekä tekoälytuutorin käytettävissäsi ympäri vuorokauden.

Kurssit
40
Oppitunnit
159
Interaktiiviset vaiheet
2,096
Aloita maksutta
Kurssi 1
Kurssisisältö

40 kurssia tässä opintopolussa

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

1

A13 oppituntiaIlmainen

Opettele, miten selaimet jäsentävät HTML:ää, mitä DOCTYPE tekee ja miten html-, head- ja body-elementit järjestävät jokaisen verkkosivun.

2

A14 oppituntiaPRO

Ota otsikot, kappaleet, korostukset, inline-elementit ja tyhjätilan hallinta haltuun HTML:n tekstitageilla.

3

A14 oppituntiaPRO

Rakenna navigointi ankkurielementeillä, absoluuttisilla ja suhteellisilla URL-osoitteilla, uuteen välilehteen avautuvilla linkeillä ja fragmenttitunnisteilla.

4

A14 oppituntiaPRO

Näytä kuvat responsiivisesti img-elementillä, srcsetillä, picture-elementillä ja semanttisilla figure-kuvateksteillä.

5

A14 oppituntiaPRO

Luo järjestämättömiä, järjestettyjä ja kuvauslistoja oikealla sisäkkäisyydellä ja semanttisella merkityksellä.

6

A24 oppituntiaPRO

Rakenna saavutettavia tietotaulukoita oikealla rakenteella, yhdistetyillä soluilla ja taulukon osioilla.

7

A24 oppituntiaPRO

Ymmärrä id-, class-, style-, hidden- ja tabindex-attribuutit sekä mukautetut data-*-attribuutit, joita käytetään kaikissa HTML-elementeissä.

8

A24 oppituntiaPRO

Rakenna saavutettavia verkkolomakkeita syötekenttätyypeillä, otsakkeilla, painikkeilla sekä form-elementin action- ja method-attribuuteilla.

9

A24 oppituntiaPRO

Paranna lomakkeita pudotusvalikoilla, tekstialueilla, valintaruuturyhmillä, valintanapeilla ja datalistiin perustuvalla automaattisella täydennyksellä.

10

A24 oppituntiaPRO

Käytä HTML5:n validointiattribuutteja, kuten required, pattern, min ja max, käyttäjän syötteen tarkistamiseen ennen lähettämistä.

11

A24 oppituntiaPRO

Korvaa yleiskäyttöiset div-elementit merkityksellisillä HTML5-elementeillä, kuten header, nav, main, footer, article ja section.

12

A24 oppituntiaPRO

Tutki aside-, details-, summary-, progress- ja meter-elementtejä sivujen merkityksen ja vuorovaikutteisuuden rikastamiseen.

13

A24 oppituntiaPRO

Ota head-osio haltuun: title, metatunnisteet, viewport, kanoniset URL-osoitteet, robots-direktiivit ja faviconit.

14

A24 oppituntiaPRO

Upota ääntä ja videota natiivisti HTML5:llä, tarjoa useita formaatteja ja lisää tekstitykset track-elementillä ja WebVTT:llä.

15

B14 oppituntiaPRO

Ymmärrä WCAG-tasot, otsikkohierarkia, alt-tekstien strategia ja näppäimistönavigointi osallistavia verkkosivuja varten.

16

B14 oppituntiaPRO

Paranna saavutettavuutta ARIA-rooleilla, nimikkeillä ja kuvauksilla sekä opettele käyttämään aina ensin natiivin HTML:n ratkaisuja.

17

B14 oppituntiaPRO

Tallenna ja käytä HTML-elementtien mukautettuja metatietoja data-*-attribuuteilla, dataset APIlla ja CSS-valitsimilla.

18

B14 oppituntiaPRO

Käytä template-elementtiä ei-aktiivisen merkinnän määrittämiseen, kloonaa se tehokkaasti ja vertaa sitä innerHTML-pohjaiseen renderöintiin.

19

B14 oppituntiaPRO

Piirrä muotoja, tekstiä ja kuvia 2D-canvasille ja animoi niitä requestAnimationFramella.

20

B14 oppituntiaPRO

Upota skaalautuvaa vektorigrafiikkaa suoraan dokumenttiin, käytä perusmuotoja, hallitse viewBoxia ja animoi SVG:tä CSS:llä.

21

B14 oppituntiaPRO

Upota ulkoista sisältöä iframella, ymmärrä hiekkalaatikon käyttö tietoturvan parantamiseen ja käytä laiskaa latausta suorituskyvyn optimointiin.

22

B14 oppituntiaPRO

Tallenna asiakaspuolen tietoja localStoragella ja sessionStoragella, kuuntele storage-tapahtumia ja noudata tietoturvaohjeita.

23

B14 oppituntiaPRO

Toteuta raahaus- ja pudotustoimintoja HTML5:n Drag and Drop APIlla ja dataTransfer-oliolla.

24

B14 oppituntiaPRO

Optimoi sivut hakukoneita ja sosiaalista jakamista varten OpenGraphilla, Twitter Cardseilla, JSON-LD:llä ja hreflangilla.

25

B14 oppituntiaPRO

Rakenna sähköpostiohjelmissa toimivaa HTML:ää taulukkopohjaisilla asetteluilla, inline-tyyleillä ja eri asiakasohjelmien kanssa yhteensopivilla kuvatekniikoilla.

26

B24 oppituntiaPRO

Toteuta vaihtopainikkeiden malleja, välilehtikäyttöliittymiä ja live-alueita sekä testaa niitä oikeilla ruudunlukijoilla.

27

B24 oppituntiaPRO

Nopeuta sivujen latautumista async- ja defer-skripteillä, preload-vihjeillä, laiskasti ladattavilla kuvilla ja resurssivihjeillä.

28

B24 oppituntiaPRO

Määrittele uudelleenkäytettäviä mukautettuja HTML-elementtejä Custom Elements APIlla, elinkaarikutsuilla ja tarkkailtavilla attribuuteilla.

29

B24 oppituntiaPRO

Eristä merkintä ja tyylit Shadow DOMiin, jaa sisältöä slottien avulla ja tarjoa tyylityksen rajapintoja part-ominaisuudella.

30

B24 oppituntiaPRO

Käytä ES-moduuliskriptejä, import mappeja paljaille määritteille, dynaamisia tuonteja ja moduulien federoinnin käsitteitä.

31

B24 oppituntiaPRO

Rakenna progressiivisen parantamisen periaatteella: aloita vankasta HTML:stä, lisää sen päälle CSS ja JavaScript ja tunnista ominaisuudet oikein.

32

B24 oppituntiaPRO

Valmistelkaa HTML maailmanlaajuiselle yleisölle lang-, dir-, bdi-, bdo- ja charset-määritteillä sekä tukemalla oikealta vasemmalle etenevää tekstiä.

33

B24 oppituntiaPRO

Suojatkaa sivut XSS-hyökkäyksiltä, clickjackingilta ja injektioilta CSP:n, sandboxauksen, SRI:n ja turvallisten HTML-käsittelykäytäntöjen avulla.

34

B24 oppituntiaPRO

Hyödyntäkää FormDataa, Constraint Validation APIa, mukautettuja kelvollisuusviestejä ja lomakkeiden tilanhallintaa.

35

B24 oppituntiaPRO

Hallinnoikaa selaimen historiaa pushStaten, popstate-tapahtumien ja SPA-reititykseen tarkoitetun modernin Navigation API:n avulla.

36

B24 oppituntiaPRO

Toteuttakaa laiska lataus, loputon vieritys ja vieritykseen sidotut animaatiokäynnistimet IntersectionObserverin avulla.

37

B24 oppituntiaPRO

Määrittäkää progressiiviset web-sovellukset web app manifestilla, service workerin rekisteröinnillä ja offline-varasivuilta.

38

B24 oppituntiaPRO

Validoikaa merkintä W3C Validatorilla, tarkastakaa HTML Lighthousella ja testatkaa saavutettavuus pa11ylla ja axella.

39

B24 oppituntiaPRO

Tutustukaa uusiin HTML-ominaisuuksiin: Declarative Shadow DOM, Popover API, selectlist ja command-määritteet.

40

C14 oppituntiaPRO

Hallinnoikaa HTML:ää suurissa projekteissa komponenttien erottelun, palvelinpuolen templatoinnin, designjärjestelmien ja styleguide-dokumentaation avulla.

CoddyKit PRO

Avaa kaikki 40 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

HTML: jokaisen verkkosivun taustalla oleva kieli

HTML on verkon rakenteellinen perusta — jokainen selaimen välilehti, lomakkeen lähetys ja upotettu video alkaa merkintäkielestä. Tämä opintopolku kehittää vankan HTML-osaamisen aina kelvollisen dokumentin määrittävistä säännöistä nykyaikaisilla tuotantosivustoilla käytettäviin selain-API-rajapintoihin ja komponenttimalleihin. Tavoitteena ei ole vain tunnisteiden kirjoittaminen, vaan sen ymmärtäminen, miksi kukin elementti on olemassa ja mitä se viestii selaimille, avustaville teknologioille ja hakukoneille.

Mitä opitte

Aloitatte dokumentin rakenteesta, tekstisisällöstä, linkeistä, kuvista ja luetteloista ja siirrytte sitten taulukoihin, lomakkeisiin ja lomakkeiden kelpoisuuden tarkistamiseen käytettäviin määritteisiin. Opintopolku kattaa semanttiset HTML5-elementit, <head>-elementin ja metatiedot, äänen ja videon sekä saavutettavuuden perusteet, kuten ARIA-roolit ja -määritteet. Myöhemmillä kursseilla käsitellään mukautettuja data-määritteitä, HTML-malleja, Canvas- ja SVG-elementtejä, Web Storagea, Drag and Drop APIa, hakukoneoptimointia ja sosiaalisen median metatunnisteita sekä HTML-sähköpostimalleja. Edistyneissä osioissa perehdytään Shadow DOMiin, Web Componentsiin ja mukautettuihin elementteihin, HTML-moduuleihin ja import mapseihin, progressiiviseen parantamiseen, kansainvälistämiseen, tietoturvaan, History- ja Navigation API -rajapintoihin, Intersection Observeriin sekä Progressiivisten verkkosovellusten HTML:n rakentamiseen.

Opintopolku

Neljäkymmentä kurssia etenee tasoilta A1 ja A2 tasojen B1 ja B2 kautta C1-tasolle ja päättyy HTML at Scale -huipennuskurssiin. A1- ja A2-kurssit luovat perustan: dokumentin rakenne, semanttiset elementit, lomakkeet ja metatiedot. B1-tasolla perehdytään saavutettavuuteen, ARIAan, Canvasiin, SVG:hen ja selaimen tallennustilaan. B2 on laajin kokonaisuus, ja siinä käsitellään Web Componentsia, Shadow DOMia, suorituskykyä, tietoturvaa, kansainvälistämistä ja Intersection Observeria. Viimeinen C1-kurssi, HTML at Scale, käsittelee toimintatapoja ja rajoitteita, jotka ovat tärkeitä, kun HTML:ää kirjoitetaan, testataan ja ylläpidetään laajoissa koodikannoissa.

Näin se toimii

Jokainen kurssi koostuu lyhyistä käytännönläheisistä oppitunneista, jotka suoritatte sisäänrakennetussa koodieditorissa ja saatte niistä palautetta reaaliajassa. Käytettävissänne on aina jumitilanteissa auttava tekoälyopettaja, ja etenette omaan tahtiinne — jokainen oppitunti on itsenäinen, joten voitte palata myöhemmin mihin tahansa aiheeseen hakuteoksena.

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

UKK

Usein kysytyt kysymykset

Onko HTML Academy-kurssi ilmainen?

Kyllä. Voit aloittaa HTML 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 HTML Academy-kurssin suorittamisesta?

Kyllä. PRO-oppijat voivat suorittaa kokeen ja saada HTML 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?

HTML 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 HTML Academy-opintopolun suorittaminen kestää?

HTML Academy sisältää 40 kurssia ja 159 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 HTML Academy nyt

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