Opi CSS tekemällä — CSS-koodausharjoittelua puhelimella live HTML- ja CSS-editorin avulla

Useimmat aloittelijoiden layout-ongelmat johtuvat kolmesta asiasta. Box Model: padding ja reunukset lisäävät oletuksena elementin ilmoitettuun leveyteen, joten laatikosta tulee kirjoittamaasi lukua leveämpi. Specificity: jossain muualla oleva tarkempi sääntö ohittaa oman sääntösi huomaamatta. Ja väärä layout-työkalu: yrität rakentaa kaksiulotteisen sivun Flexboxilla, joka on tarkoitettu yhdelle riville. Opi CSS tekemällä etenee näissä kursseissa juuri tässä järjestyksessä, jotta ymmärrät nämä kolme asiaa sen sijaan, että joutuisit selvittämään ne yrityksen ja erehdyksen kautta.

Vähän, ja voit opetella tarvittavat asiat oppituntien ohessa sen sijaan, että opettelisit kaiken ensin. CSS kuvaa, miten HTML-elementit esitetään, joten riittää, että tiedät sivun koostuvan elementeistä — otsikoista, kappaleista, luetteloista ja kuvista. Sovelluksen live-editori näyttää HTML:n ja CSS:n yhdessä, joten niiden yhteys näkyy ensimmäisestä oppitunnista alkaen.

Flexbox järjestää kohteet yhdelle riville — esimerkiksi painikerivin tai navigointipalkin — ja jakaa ylimääräisen tilan tämän yhden akselin suunnassa. Grid määrittää rivit ja sarakkeet samanaikaisesti, joten kohteet sijoitetaan oikeaan kaksiulotteiseen ruudukkoon sen sijaan, että niitä siirrettäisiin marginaaleilla. Sivutason layout tehdään yleensä Gridillä, ja sen sisällä oleva yksittäinen ohjainrivi yleensä Flexboxilla. Kurssi opettaa molemmat, ennen kuin jätät valinnan sinulle.

CSS ratkaisee ristiriitaiset säännöt ensin specificityn ja vasta sitten lähdejärjestyksen perusteella. ID-selector voittaa class-selectorin, ja class voittaa tavallisen elementtiselctorin riippumatta siitä, kumpi esiintyy stylesheetissä myöhemmin. Siksi oikealta näyttävä sääntö voi silti hävitä toiselle, jonka olet unohtanut muualle — sovelluksen Specificity & Cascade -kurssi on tehty juuri sitä varten, että tämä järjestys muuttuu ennakoitavaksi eikä jää mysteeriksi.

Kyllä, CSS kannattaa edelleen opetella suoraan. Tailwindin kaltaiset utility-frameworkit rakentuvat CSS:n käsitteiden päälle eivätkä korvaa niitä — kun utility class ei toimi odotetusti, Box Modelin, specificityn ja taustalla olevien layout-järjestelmien ymmärtäminen auttaa pääsemään eteenpäin. CSS on myös yksi nopeimmista taidoista, joissa näet tuloksia, sillä jokainen muutos näkyy sivulla heti.

Säännöllisyys on tärkeämpää kuin tuntien kokonaismäärä. Kun opiskelet lyhyitä päivittäisiä oppitunteja, useimmat aloittelijat hallitsevat selectorit, välit, typografian sekä Flexboxin tai Gridin perusteet luottavaisin mielin muutamassa viikossa — paljon ennen vaikeampia aiheita, kuten specificityn reunaehtoja tai container queries -kyselyitä. Sovelluksen 20 ohjattua projektia on tarkoitettu juuri tämän vaiheen harjoitteluun, yksi oikea sivu kerrallaan.

Sovelluksen voi ladata ilmaiseksi App Storesta ja Google Playsta. Ensimmäinen kurssi, ensimmäinen ohjattu projekti, kaksi bugienetsintätehtävää ja live-editori ovat ilmaisia, ja käytössäsi on päivittäinen AI Mentor -kiintiö. Pro avaa kaikki kurssit, kaikki 20 projektia ja 20 tehtävää, certificate-kokeen sekä AI Mentorin rajoittamattoman käytön, ja poistaa mainokset.

Opi CSS tekemällä on saatavilla iPhonelle ja iPadille App Storessa sekä Androidille Google Playssa. Käyttöliittymä on saatavilla 22 kielellä, ja ikäraja on 4+. Se sopii täydellisille aloittelijoille, suunnittelijoille, jotka haluavat tyylitellä omat sivunsa, sekä alanvaihtajille ja opiskelijoille, jotka valmistautuvat front-end-haastatteluihin.

Pikakatselu tarvitsee nimenomaan yhteyden HTML:n ja CSS:n renderöimiseen, minkä sovellus kertoo sen sijaan, että toiminto vain heikkenisi huomaamatta. Oppituntien tekstit ja lukumateriaali on suunniteltu toimimaan myös epävakaalla yhteydellä, mikä kattaa useimmat työmatkat, mutta täysin offline-tilassa toimivaa live-esikatselua tämä editori ei tarjoa.

Opi CSS tekemällä toimii iOS:llä App Storen kautta ja Androidilla Google Playn kautta, ja sovellus on saatavilla 22 kielellä. Ikäraja on 4+. Kun läpäiset loppukokeen, sovellus myöntää suorittamistodistuksen — todisteen tekemästäsi työstä, josta on hyötyä CV:ssä yhdessä ohjattujen projektien kanssa, joista voit kertoa. Se ei kuitenkaan ole akkreditoitu pätevyys.