PricingLoginStart free
Tailwind CSS Academy logo
HTMLVerkkoTasot A1 → B222 kieltä

Tailwind CSS Academy

Hallitkaa OpenAI:n, Vercelin ja Shopifyn suosima utility-first-CSS-kehys. Oppikaa kaikki utility-luokat, responsiivinen suunnittelu, tumma tila, animaatiot ja tuotantokäytön optimointi. CoddyKitin oppimispolku, joka sisältää 30 lyhyttä kurssia ja 120 interaktiivista oppituntia sekä tekoälytuutorin käytettävissäsi ympäri vuorokauden.

Kurssit
30
Oppitunnit
120
Interaktiiviset vaiheet
1,559
Aloita maksutta
Kurssi 1
Kurssisisältö

30 kurssia tässä opintopolussa

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

1

A14 oppituntiaIlmainen

Tutustukaa Tailwind CSS:n utility-first-ajatteluun ja ymmärtäkää, miten se eroaa perinteisistä CSS-kehyksistä, kuten Bootstrapista. Opitte määrittämään Tailwindin projektiin ja kirjoittamaan ensimmäi…

  1. 1Utility-first CSS selitettynä
  2. 2Tailwindin asentaminen ja määrittäminen
  3. 3Ensimmäinen Tailwind-sivunne
  4. +1 lisää
Aloita opiskelu maksutta
2

A14 oppituntiaPRO

Ottakaa Tailwindin monipuoliset typografia-utilityt haltuun hallitaksenne fonttikokoja, -paksuuksia, rivikorkeuksia, kirjainvälejä ja tekstin tasausta. Opitte tekemään tekstistä helppolukuista ja vis…

  1. 1Fonttikoko ja fontin paksuus
  2. 2Tekstin väri ja peittävyys
  3. 3Rivinkorkeus ja kirjainvälistys
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
3

A14 oppituntiaPRO

Tutustukaa Tailwindin laajaan väripalettiin ja oppikaa käyttämään taustavärejä, liukuvärejä ja taustakuvia. Ymmärrätte opacity-muokkainten käytön ja opitte luomaan visuaalisesti rikkaita pintoja.

  1. 1Tailwindin väripaletti
  2. 2Taustagradientit
  3. 3Peittävyys- ja värimuunnokset
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
4

A14 oppituntiaPRO

Opitte Tailwindin yhdenmukaisen väliskaalan, jolla lisätään margin- ja padding-arvoja mille tahansa elementille. Ymmärrätte suuntakohtaiset lyhenteet ja negatiiviset marginit, joiden avulla hallitset…

  1. 1Tailwindin välistysasteikko
  2. 2Padding-utilityt
  3. 3Margin-utilityt ja automaattiset marginaalit
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
5

A14 oppituntiaPRO

Toteutatte CSS Flexbox -asetteluja Tailwindin flex-utilityilla kirjoittamatta riviäkään omaa CSS:ää. Rakennatte vaaka- ja pystysuuntaisia asetteluja, hallitsette kohdistusta ja käsittelette rivittymi…

  1. 1Flexin ja suunnan käyttöönotto
  2. 2Sisällön perustelu ja kohteiden tasaus
  3. 3Flexin kasvaminen, kutistuminen ja perusta
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
6

A24 oppituntiaPRO

Hyödynnätte CSS Gridiä Tailwindin grid-utilityilla monimutkaisten kaksiulotteisten asettelujen rakentamiseen. Määritätte sarakkeet, rivit ja alueet yksinkertaisilla luokkanimillä ja hallitsette eleme…

  1. 1Grid-sarakkeiden määrittäminen
  2. 2Sarakkeiden ja rivien yli ulottuminen
  3. 3Grid-rivit ja automaattinen sijoittelu
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
7

A24 oppituntiaPRO

Hallitsette elementtien mittoja Tailwindin leveys-, korkeus-, minimi- ja maksimiarvojen sekä kuvasuhteen utilityilla. Rakennatte responsiivisia ja kiinteän kokoisia komponentteja luottavaisin mielin.

  1. 1Leveysutilityt
  2. 2Korkeusutilityt
  3. 3Minimi- ja maksimirajoitteet
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
8

A24 oppituntiaPRO

Tyylittelette elementtien reunoja ja syvyyttä Tailwindin border- ja shadow-utilityilla. Opitte lisäämään pyöristetyt kulmat, hallitsemaan reunuksen leveyttä ja väriä sekä käyttämään laatikkovarjoja s…

  1. 1Reunuksen leveys ja väri
  2. 2Reunuksen säde ja pyöristetyt kulmat
  3. 3Laatikkovarjot
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
9

A24 oppituntiaPRO

Lisäätte käyttöliittymään vuorovaikutteisuutta käyttämällä tyylejä ehdollisesti hover-, focus-, active-, disabled- ja muissa pseudotiloissa. Opitte Tailwindin variant-etuliitejärjestelmän, jolla hall…

  1. 1Hover- ja active-muunnelmat
  2. 2Focus- ja focus-visible-muunnelmat
  3. 3Disabled- ja placeholder-muunnelmat
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
10

A24 oppituntiaPRO

Rakennatte eri näyttökokoihin mukautuvia asetteluja Tailwindin mobile-first-responsiivisilla breakpointeilla. Käytätte eri utility-luokkia tietyissä näkymän leveyksissä ja luotte aidosti responsiivis…

  1. 1Tailwindin breakpoint-järjestelmä
  2. 2Responsiiviset asettelut Flexillä ja Gridillä
  3. 3Responsiivinen typografia ja välistys
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
11

B14 oppituntiaPRO

Toteutatte verkkosovelluksiin tumman tilan Tailwindin sisäänrakennetulla dark-variantilla. Opitte luokkastrategian ja media-strategian erot sekä rakennatte käyttöliittymäkomponentteja, jotka näyttävä…

  1. 1Tumman tilan strategiat
  2. 2Tummien muunnelmien käyttäminen
  3. 3Tumman tilan vaihtokytkimen rakentaminen
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
12

B14 oppituntiaPRO

Hyödynnätte Tailwindin koko tehon ottamalla tailwind.config.js-tiedoston haltuun. Opitte laajentamaan oletusteemaa, lisäämään mukautettuja arvoja, määrittämään content-polut ja hallitsemaan plugineja.

  1. 1tailwind.config.js-tiedoston rakenne
  2. 2Content-polut ja käyttämättömien luokkien poisto
  3. 3Teeman laajentaminen ja ohittaminen
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
13

B14 oppituntiaPRO

Sovitatte Tailwindin brändinne mukaiseksi lisäämällä mukautettuja värejä, integroimalla Google Fonts -fontteja ja määrittämällä oman väliskaalan. Rakennatte projektille ominaisen suunnittelukielen hy…

  1. 1Mukautettujen värien lisääminen
  2. 2Mukautetut fonttiperheet
  3. 3Mukautetut välistysarvot
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
14

B14 oppituntiaPRO

Opitte, milloin ja miten Tailwindin @apply-direktiiviä käytetään toistuvien utility-kuvioiden irrottamiseen uudelleenkäytettäviksi CSS-luokiksi. Tasapainotatte utility-first-lähestymistavan ja ylläpi…

  1. 1Mitä @apply tekee ja milloin sitä käytetään
  2. 2Uudelleenkäytettävien komponenttiluokkien luominen
  3. 3Mukautetun CSS:n järjestäminen tasoilla
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
15

B14 oppituntiaPRO

Lisäätte käyttöliittymään sulavaa liikettä Tailwindin sisäänrakennetuilla transition- ja animation-utilityilla. Opitte hallitsemaan kestoa, easing-arvoja ja viivettä sekä käyttämään keyframe-animaati…

  1. 1Siirtymäutilityt
  2. 2Kesto ja kiihdytys
  3. 3Sisäänrakennetut keyframe-animaatiot
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
16

B14 oppituntiaPRO

Rakennatte viimeisteltyjä ja uudelleenkäytettäviä käyttöliittymän peruskomponentteja Tailwindin utility-luokilla. Opitte painikkeiden variantit, otsake- ja alatunnisteelliset kortit sekä pienet infor…

  1. 1Painikkeiden muunnelmat ja tilat
  2. 2Korttikomponenttien mallit
  3. 3Badge- ja tag-komponentit
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
17

B14 oppituntiaPRO

Rakennatte responsiivisia navigointipalkkeja ja kokoon taittuvia sivupalkkeja Tailwind-utilityilla. Opitte käsittelemään mobiilin hamburger-valikoita ja luomaan tahmeasti paikallaan pysyvän navigoinn…

  1. 1Responsiivisen navigointipalkin rakentaminen
  2. 2Tahmea ja kiinteä navigointi
  3. 3Pystysuuntainen sivupalkkiasettelu
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
18

B14 oppituntiaPRO

Tyylittelette saavutettavia ja näyttäviä lomake-elementtejä Tailwind-utilityilla. Opitte luomaan tekstikenttiä, valintalistoja, valintaruutuja, radiopainikkeita ja kokonaisia lomakeasetteluja validoi…

  1. 1Tekstikenttien ja tekstialueiden tyylittely
  2. 2Valikot ja valintaruudut
  3. 3Lomakkeiden asettelumallit
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
19

B14 oppituntiaPRO

Rakennatte overlay-käyttöliittymäkuvioita, kuten modaaleja, dialogeja ja pudotusvalikoita, Tailwindilla ja minimaalisella JavaScriptillä. Opitte sijoittelun, z-index-pinoamisen ja sulavat avaus- ja s…

  1. 1Modaalisen valintaikkunan rakenne
  2. 2Modaalin avaus- ja sulkemisanimaatio
  3. 3Pudotusvalikkokomponentti
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
20

B14 oppituntiaPRO

Ymmärrätte Tailwindin Just-In-Time-moottoria ja sitä, miten se tuottaa vain käyttämänne CSS:n. Opitte optimoimaan tuotantobundlen, analysoimaan tulosteen kokoa ja kirjoittamaan luokkia, jotka JIT-moo…

  1. 1JIT-moottorin toiminta
  2. 2Dynaamisten luokkien sallittujen luokkien luettelo
  3. 3Bundlen koon analysointi ja pienentäminen
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
21

B24 oppituntiaPRO

Perustatte Tailwindin asetuksiin vankan suunnittelutoken-järjestelmän yhdenmukaista usean brändin teemoitusta varten. Yhdistätte primitiiviset tokenit semanttisiin tokeneihin ja rakennatte skaalautuv…

  1. 1Primitiiviset ja semanttiset tokenit
  2. 2CSS-muuttujiin perustuva teemoitus
  3. 3Usean brändin teemoitusstrategia
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
22

B24 oppituntiaPRO

Integroitte Tailwind CSS:n React- ja Next.js-sovelluksiin virallisen määrityksen avulla. Opitte parhaat käytännöt utilityjen käyttämiseen JSX:ssä, ehdollisten luokkien hallintaan ja tyylien järjestäm…

  1. 1Tailwindin käyttöönotto Next.js:ssä
  2. 2Ehdolliset luokat Reactissa
  3. 3Komponenttivariantit CVA:lla
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
23

B24 oppituntiaPRO

Yhdistätte Tailwind CSS:n Headless UI:hin rakentaaksenne täysin saavutettavia, tyylittelemättömiä komponentteja. Käytätte omia Tailwind-luokkianne valikoissa, dialogeissa, combobox-komponenteissa ja…

  1. 1Johdatus Headless UI:hin
  2. 2Headless Menu- ja Dropdown-komponenttien tyylittely
  3. 3Saavutettavien dialogien rakentaminen
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
24

B24 oppituntiaPRO

Laajennatte Tailwindin toiminnallisuutta kirjoittamalla mukautettuja plugineja, jotka lisäävät uusia utilityja, komponentteja ja variantteja. Opitte plugin-rajapinnan, jolla kapseloitte uudelleenkäyt…

  1. 1Tailwindin Plugin-rajapinta
  2. 2Mukautettujen apuluokkien lisääminen pluginilla
  3. 3Mukautettujen varianttien lisääminen pluginilla
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
25

B24 oppituntiaPRO

Rakennatte WCAG-saavutettavuusstandardit täyttäviä käyttöliittymäkomponentteja käyttämällä Tailwind-utilityja kontrastiin, fokuksen hallintaan ja ruudunlukijatukeen. Kirjoitatte HTML-rakenteen ja Tai…

  1. 1Värikontrasti ja luettava teksti
  2. 2Fokusosoittimet ja näppäimistönavigointi
  3. 3ARIA-määritteet ja ruudunlukijat
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
26

B24 oppituntiaPRO

Omaksutte ammattimaiset parhaat käytännöt Tailwind CSS:n julkaisemiseen tuotantosovelluksissa. Opitte bundlen auditointia, luokkien järjestämisstrategioita, linttausta ja suurten tiimien käyttämiä su…

  1. 1CSS-tulosteen tarkastaminen
  2. 2Luokkien järjestäminen ja Prettier-plugin
  3. 3Tailwindin linttaus ESLintillä
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
27

B24 oppituntiaPRO

Sovellatte tähän asti oppimaanne ja rakennatte alusta alkaen täydellisen responsiivisen markkinoinnin landing pagen käyttäen vain Tailwind CSS:ää. Toteutatte hero-, ominaisuus-, suosittelu-, hinnoitt…

  1. 1Hero- ja navigaatio-osio
  2. 2Ominaisuus- ja sosiaalisen todisteen osiot
  3. 3Hinnoittelutaulukko-osio
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
28

B24 oppituntiaPRO

Rakennatte monipuolisen ylläpidon dashboard-käyttöliittymän Tailwind CSS:llä. Toteutatte sivupalkin, yläpalkin, tilastokortit, datataulukot ja kaavioiden paikkamerkkiwidgetit yhtenäiseksi ja responsi…

  1. 1Hallintapaneelin runko ja sivupalkki
  2. 2Yläpalkki ja murupolut
  3. 3Tilastokortit ja KPI-widgetit
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
29

B24 oppituntiaPRO

Tutustukaa siihen, miten Tailwind sopii suuriin projekteihin käytettäviin laajempiin CSS-arkkitehtuuristrategioihin. Opitte järjestämään tiedostoja, jäsentämään komponenttikerroksia ja käyttämään Tai…

  1. 1Tiedostojen ja kansioiden järjestäminen
  2. 2Yhteiselo vanhan CSS:n kanssa
  3. 3CSS Modules ja Tailwind
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
30

B24 oppituntiaPRO

Kokoatte oppipolun kaikki taidot ja rakennatte täydellisen Tailwind-pohjaisen suunnittelujärjestelmän. Määritätte tokenit, rakennatte komponenttikirjaston, kirjoitatte pluginin ja dokumentoitte järje…

  1. 1Design-järjestelmän suunnittelu
  2. 2Token- ja asetustason rakentaminen
  3. 3Komponenttikirjaston rakentaminen
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
CoddyKit PRO

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

Tailwind CSS:n hallinta

Hallitkaa OpenAI:n, Vercelin ja Shopifyn suosima utility-first-CSS-kehys. Oppikaa kaikki utility-luokat, responsiivinen suunnittelu, tumma tila, animaatiot ja tuotantokäytön optimointi. Tämä kokonaisuus sisältää 30 etenevää minikurssia täydestä aloittelijatasosta (A1) edistyneelle tasolle (B2), lyhyine, kohdennettuine oppitunteineen ja nopeine tietovisoineen, jotka auttavat vakiinnuttamaan jokaisen käsitteen.

Mitä opitte

Aloitatte perusteista ja etenette keskitason ja edistyneisiin aiheisiin niin, että jokainen kurssi rakentuu edellisen päälle. Jokainen oppitunti on käytännönläheinen ja sisältää todellisia esimerkkejä. Tarvittaessa käytettävissänne on tekoälyohjaaja.

Näin se toimii

Jokainen kurssi on jaettu neljään kohdennettuun oppituntiin. Kun suoritatte muutaman oppitunnin päivässä, hallitsette koko kokonaisuuden viikoissa, ette kuukausissa.

Työkalut

Harjoittele tekoälyn avulla – älä vain lue

Tehosta oppimistasi tekoälypohjaisilla työkaluilla ja ominaisuuksilla

TekoälychatKeskustele tekoälytuutorin kanssaEsitä superkysymysSaat asiantuntijatason vastauksiaPROLuo oppituntiTekoälypohjainen oppituntien luontityökaluPROAloita sertifiointikoeHanki sertifikaattiPROAloita 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

Frontend Academy logoFrontend AcademyDevelop visually stunning and responsive websites with Frontend Development Academy.Web Accessibility Academy logoWeb Accessibility AcademyBuild inclusive websites everyone can use. Master semantic HTML, ARIA, keyboard and scree…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.HTML for Kids logoHTML for KidsIntroduce kids to web development with fun and easy HTML lessons at HTML for Kids.
UKK

Usein kysytyt kysymykset

Onko Tailwind CSS Academy-kurssi ilmainen?

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

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

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

Tailwind CSS Academy sisältää 30 kurssia ja 120 oppituntia. Useimmat oppitunnit kestävät noin 5–10 minuuttia, joten koko opintopolun suorittamiseen kuluu omaan tahtiin noin 14 tuntia käytännön harjoittelua.

Aloita Tailwind CSS Academy nyt

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

Aloita opiskelu maksuttaSelaa kaikkia kursseja