Frontend Academy · Oppitunti

Frontend-teknologioiden kolmikko

Tutustu siihen, miten HTML, CSS ja JavaScript hoitavat kukin oman tehtävänsä — rakenteen, tyylin ja toiminnallisuuden — ja miten ne yhdessä luovat jokaisen käyttämäsi verkkosivuston.

Oppitunti 2/311 vaihetta

Frontend-teknologioiden kolmikko on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/3. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 3 oppituntia.

Tutustu kolmikkoon 🤝

Frontend perustuu kolmeen työkaluun: HTML, CSS ja JavaScript. Kun opit nämä kolme, voit rakentaa lähes mitä tahansa. Tutustutaan niihin!

Rakenna talo 🏠

Kuvittele rakentavasi taloa. HTML on rakenne, CSS maali ja tyyli, ja JavaScript herättää sen eloon. Niin yksinkertaista se on.

HTML: rakenne

HTML määrittää sivun rakenteen: otsikot, kappaleet, kuvat ja linkit. Se on luuranko, joka pitää kaiken paikoillaan.

Pieni HTML-kurkistus

Tässä on pieni esimerkki. Tämä rivi tekee sivulle vain otsikon. Älä opettele sitä ulkoa, vaan huomaa, miten helppolukuista se on!

<h1>Hello!</h1>

CSS: ulkoasu

CSS määrittää ulkoasun: värit, fontit, välit ja asettelut. Se muuttaa pelkän sivun sellaiseksi, jota oikeasti haluat katsella.

Pieni kurkistus CSS:ään 🎨

Tämä pieni sääntö värittää tekstin siniseksi. Huomaatko? Kuvailet, mitä haluat, ja selain tekee sen. Helppoa hommaa.

h1 { color: blue; }

JavaScript: toiminnallisuus

JavaScript saa sivut tekemään asioita. Napsautukset, ponnahdusikkunat, valikot ja reaaliaikaiset päivitykset. Se muuttaa kuvan oikeaksi kokemukseksi.

Ne toimivat yhdessä

Harvoin käytät vain yhtä niistä. HTML, CSS ja JavaScript toimivat yhdessä jokaisella sivulla. Yhdessä ne ovat pysäyttämättömiä — aivan kuten sinäkin.

Aloita pienestä, kehity nopeasti

Sinun ei tarvitse hallita kaikkia kolmea kerralla. Jo pelkällä HTML:llä saat aikaan oikean verkkosivun. Jokainen askel antaa sinulle uuden supervoiman.

Kolmikko avattu! 🚀

Olet nyt tutustunut koko frontend-työkalupakkiin. Vaikein osuus on nyt tehty! Seuraavaksi tutustumme siihen, millainen jännittävä tulevaisuus frontend-kehittäjänä voi olla.

Pikatarkistus

Vielä yksi nopea kysymys! Mikä työkalu muodostaa verkkosivun RAKENTEEN?

Vastaa interaktiivisessa oppitunnissa

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 41
Oppitunnit: 163

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Frontend-teknologioiden kolmikko” ilmainen?

Kyllä – oppitunnin ”Frontend-teknologioiden kolmikko” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 3 oppituntia.

Mitä opin oppitunnilla ”Frontend-teknologioiden kolmikko”?

Tutustu siihen, miten HTML, CSS ja JavaScript hoitavat kukin oman tehtävänsä — rakenteen, tyylin ja toiminnallisuuden — ja miten ne yhdessä luovat jokaisen käyttämäsi verkkosivuston. Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/3.

Kuinka kauan ”Frontend-teknologioiden kolmikko”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?

Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Frontend Academy