CSS Academy logo
CSSAloittelijaVerkkoTasot A1 → C122 kieltä

CSS Academy

Opitte parantamaan verkkosivujen ulkoasua CSS:n avulla kattavilla CSS Academyn oppitunneilla. 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,047
Aloita maksutta
Kurssi 1
Kurssisisältö

40 kurssia tässä opintopolussa

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

1

A13 oppituntiaIlmainen

Oppikaa CSS:n perussyntaksi ja HTML-elementtien kohdentaminen elementti-, luokka-, ID-, attribuutti- ja yhdistelmävalitsimilla.

2

A14 oppituntiaPRO

Ottakaa CSS:n väriarvot ja taustaominaisuudet haltuun visuaalisesti näyttävien verkkosivujen luomista varten.

3

A14 oppituntiaPRO

Muotoilkaa tekstisisältöä fonteilla, koolla, leikkauksilla, tasauksella ja mukautettujen fonttien lataustekniikoilla.

4

A24 oppituntiaPRO

Ymmärtäkää, miten jokainen HTML-elementti on laatikko, ja hallitkaa sen kokoa, välistystä, reunoja ja varjoja.

5

A24 oppituntiaPRO

Hallitkaa elementtien kulkua dokumentissa block-, inline- ja inline-block-näyttötiloilla.

6

A24 oppituntiaPRO

Irrottakaa elementtejä normaalista työnkulusta CSS:n position-arvoilla ja hallitkaa kerrostusta z-indexillä.

7

A24 oppituntiaPRO

Ottakaa absoluuttiset ja suhteelliset CSS-yksiköt haltuun skaalautuvien ja responsiivisten asettelujen luomista varten.

8

A24 oppituntiaPRO

Kohdentakaa elementtejä niiden tilan, sijainnin ja suhteiden perusteella pseudo-luokilla.

9

A24 oppituntiaPRO

Lisätkää koristeellista sisältöä ja muotoilkaa elementtien tiettyjä osia CSS:n pseudo-elementeillä.

10

B14 oppituntiaPRO

Rakentakaa yksiulotteisia asetteluja CSS Flexboxilla ja hallitkaa suuntaa, tasausta ja rivittymistä.

11

B14 oppituntiaPRO

Luokaa tehokkaita kaksiulotteisia asetteluja CSS Gridillä hyödyntäen raitoja, välejä ja mallialueita.

12

B14 oppituntiaPRO

Rakentakaa asetteluja, jotka mukautuvat kauniisti kaikenkokoisille näytöille joustavien leveyksien ja responsiivisten tekniikoiden avulla.

13

B14 oppituntiaPRO

Soveltakaa eri tyylejä näytön koon, suunnan ja käyttäjän asetusten perusteella media queryillä.

14

B14 oppituntiaPRO

Luokaa ylläpidettäviä tyylitiedostoja mukautetuilla ominaisuuksilla, joita voi käyttää uudelleen ja päivittää dynaamisesti.

15

B14 oppituntiaPRO

Lisätkää CSS-ominaisuuksien tilamuutoksiin sulavia animaatioita transition-lyhytominaisuudella ja ajoitusfunktioilla.

16

B14 oppituntiaPRO

Luokaa monimutkaisia monivaiheisia animaatioita @keyframes-säännöllä ja animation-lyhytominaisuudella.

17

B14 oppituntiaPRO

Siirtäkää, kääntäkää, skaalatkaa ja kallistakaa elementtejä 2D- ja 3D-avaruudessa CSS transform -funktioilla.

18

B14 oppituntiaPRO

Ymmärtäkää perusteellisesti, miten CSS ratkaisee voittavat tyylit, kun useat säännöt kohdistuvat samaan elementtiin.

19

B14 oppituntiaPRO

Käyttäkää tehokkaita CSS-funktioita dynaamisiin laskutoimituksiin, joustavaan mitoitukseen, Grid-asetteluihin ja nykyaikaiseen värien käsittelyyn.

20

B14 oppituntiaPRO

Lisätkää elementteihin ja kuviin visuaalisia tehosteita CSS-suodattimilla ja sekoitustilojen kompositoinnilla.

21

B14 oppituntiaPRO

Hallitkaa vierityskäyttäytymistä, tarttumiskohtia ja ylivuodon rajaamista sujuvien käyttökokemusten luomiseksi.

22

B14 oppituntiaPRO

Toteuttakaa automaattinen ja manuaalinen tumma tila CSS-muuttujilla, color-schemella ja media queryillä.

23

B14 oppituntiaPRO

Ottakaa selaimen DevTools haltuun CSS-asettelun, animaatioiden ja laskettujen tyylien tarkastelua ja virheenkorjausta varten.

24

B24 oppituntiaPRO

Menkää perusteita pidemmälle edistyneessä Flexbox-tasauksessa, järjestyksessä ja käytännön asettelumalleissa.

25

B24 oppituntiaPRO

Ottakaa CSS Gridin koko teho käyttöön nimettyjen linjojen, automaattisen sijoittelun, subgridin ja monimutkaisten mallien avulla.

26

B24 oppituntiaPRO

Järjestäkää suuret CSS-koodikannat arkkitehtuurimallien, nimeämiskäytäntöjen ja tiedostorakenteiden avulla.

27

B24 oppituntiaPRO

Luokaa suorakulmioista poikkeavia elementtejä ja tekstin ympärille kiertyviä muotoja clip-pathilla ja CSS Shapesilla.

28

B24 oppituntiaPRO

Kirjoittakaa suunnasta riippumatonta CSS:ää, joka toimii sekä vasemmalta oikealle että oikealta vasemmalle kirjoittavissa kielissä loogisten ominaisuuksien avulla.

29

B24 oppituntiaPRO

Soveltakaa tyylejä komponentin säilön koon, ei näkymäalueen, perusteella container queryillä.

30

B24 oppituntiaPRO

Hallinnoikaa CSS-kaskadin prioriteettia eksplisiittisesti @layerillä ja poistakaa spesifisyysristiriidat suurista koodikannoista.

31

B24 oppituntiaPRO

Tehostakaa CSS:n kirjoittamista muuttujilla, sisäkkäisyydellä, mixineillä ja funktioilla Sass-esikääntäjän avulla.

32

B24 oppituntiaPRO

Muun­takaa ja optimoikaa CSS:ää PostCSS-lisäosilla, jotka hoitavat autoprefixingin, pienentämisen ja mukautetut muunnokset.

33

B24 oppituntiaPRO

Tutustukaa komponenttikohtaiseen tyylittelyyn styled-componentsilla, Emotionilla, CSS Modulesilla ja Vanilla Extractilla.

34

B24 oppituntiaPRO

Rakentakaa skaalautuvia suunnittelujärjestelmiä suunnittelutokeneilla ja usean brändin teemoituksella CSS:n mukautettujen ominaisuuksien avulla.

35

B24 oppituntiaPRO

Varmistakaa CSS:n oikeellisuus ja visuaalinen yhdenmukaisuus regressiotestauksella, yksikkötesteillä ja saavutettavuusauditoinneilla.

36

B24 oppituntiaPRO

Rakentakaa tuotantovalmiita käyttöliittymäkomponentteja, kuten kortteja, modaali-ikkunoita, pudotusvalikoita ja välilehtiä, pelkillä CSS-tekniikoilla.

37

B24 oppituntiaPRO

Toteuttakaa edistyneitä ja käytännöllisiä asettelumalleja moderneilla CSS Grid- ja Flexbox-tekniikoilla.

38

C14 oppituntiaPRO

Laajentakaa itse CSS:ää JavaScriptillä Houdini-rajapintojen avulla mukautettuja ominaisuuksia, maalausta ja asettelua varten.

39

C14 oppituntiaPRO

Optimoikaa CSS:n toimituksen ja renderöinnin suorituskykyä perehtymällä selaimen renderöintiputkeen.

40

C14 oppituntiaPRO

Tutustukaa CSS:n uusimpaan kehitykseen: natiivi sisäkkäisyys, :has(), rajatut tyylit ja View Transitions.

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

CSS: verkkoa tyylittelevä kieli

CSS hallitsee verkkosivun kaikki visuaaliset yksityiskohdat — värit, asettelun, välit, animaatiot ja responsiivisuuden. Se on kehittynyt yksinkertaisesta esityskerroksesta kokonaiseksi suunnittelujärjestelmien kieleksi, jossa nykyaikaiset ominaisuudet, kuten konttikyselyt, @layer, loogiset ominaisuudet ja Houdini API, antavat kehittäjille tarkan hallinnan renderöintiin. Tämä opintopolku kattaa CSS:n koko laajuuden ensimmäisen valitsimen kirjoittamisesta suurissa tuotantokoodikannoissa käytettävien skaalautuvien suunnittelujärjestelmien arkkitehtuuriin.

Mitä opitte

Aloitatte syntaksista, valitsimista, väreistä ja typografiasta ja rakennatte sitten vankan ymmärryksen laatikkomallista, display-ominaisuuksista ja sijoittelusta. Sen jälkeen perehdytte Flexboxiin ja CSS Gridiin sekä tavallisissa että edistyneissä asetteluissa, sovellatte responsiivista suunnittelua ja media queryja sekä käytätte CSS-muuttujia, mukautettuja funktioita ja suunnittelutunnisteita ylläpidettävien teemojen luomiseen. Käsittelette myös siirtymät, keyframe-animaatiot, muunnokset, suodattimet, sekoitustilat ja tumman tilan sekä Sassiin, PostCSS:ään ja CSS-in-JS-malleihin liittyvät nykyaikaiset työkalut. Opintopolku päättyy CSS-arkkitehtuuriin, jossa käsitellään BEM:iä, spesifisyyttä ja kaskadia, konttikyselyjä, @layer-kaskadikerroksia, CSS Houdinia ja suorituskykyä.

Opintopolku

Neljäkymmentä kurssia ulottuu tasolta A1 tasolle C1. Varhaiset A1- ja A2-kurssit luovat perustan: valitsimet, laatikkomalli, pseudoluokat, pseudoelementit ja yksiköt. B1-kursseilla käsitellään Flexboxia, Grid-asettelua, responsiivista suunnittelua, animaatioita, DevToolsin avulla tehtävää vianmääritystä ja CSS-funktioita. B2-kursseilla siirrytään edistyneeseen Flexboxiin ja Gridiin, Sassiin, PostCSS:ään, CSS-in-JS:ään, suunnittelutunnisteisiin, CSS Shapesiin, loogisiin ominaisuuksiin, konttikyselyihin ja CSS Layersiin. Kolme C1-kurssia — CSS Houdini, CSS Performance ja CSS Future — käsittelevät alustan uusinta kehitystä.

Näin se toimii

Jokainen kurssi on jaettu lyhyisiin, keskittyneisiin oppitunteihin, jotka suoritatte suoraan sisäänrakennetussa editorissa ja saatte niistä palautetta reaaliajassa. Käytettävissänne on aina jumitilanteissa auttava tekoälyopettaja, ja eteneminen on tarkoituksella asteittaista: jokainen käsite vahvistaa edellistä ennen seuraavan esittelyä.

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 CSS Academy-kurssi ilmainen?

Kyllä. Voit aloittaa CSS 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 CSS?

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

Miten opin CSS 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 CSS Academy-kurssin suorittamisesta?

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

Voinko oppia CSS puhelimellani?

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

Paljonko CoddyKit PRO maksaa?

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

CSS 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 CSS Academy nyt

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