PricingLoginStart free
Tailwind CSS Academy logo
HTMLNettNivåer A1 → B222 språk

Tailwind CSS Academy

Behersk det utility-first-baserte CSS-rammeverket som brukes av OpenAI, Vercel og Shopify. Lær alle utility-klassene, responsivt design, mørk modus, animasjoner og optimalisering for produksjon. En læringssti fra CoddyKit med 30 korte kurs og 120 interaktive leksjoner, med en AI-veileder tilgjengelig døgnet rundt.

Kurs
30
Leksjoner
120
Interaktive trinn
1,559
Gratis å komme i gang
Kurs 1
Kursinnhold

30 kurs i denne læringsstien

Alle kursene i læringsstien Tailwind CSS Academy, i læringsrekkefølge. Det første er gratis.

1

A14 leksjonerGratis

Oppdag den utility-første filosofien bak Tailwind CSS, og forstå hvordan den skiller seg fra tradisjonelle CSS-rammeverk som Bootstrap. Lær å sette opp Tailwind i et prosjekt og skrive de første stil…

  1. 1Utility-first CSS forklart
  2. 2Installere og konfigurere Tailwind
  3. 3Deres første Tailwind-side
  4. +1 flere
Start læringen gratis
2

A14 leksjonerPRO

Bli kjent med Tailwinds rike utvalg av typografiutilities for å styre skriftstørrelse, tykkelse, linjehøyde, bokstavavstand og tekstjustering. Lær å lage leselig og visuelt tiltalende tekst uten egen…

  1. 1Skriftstørrelse og skriftvekt
  2. 2Tekstfarge og gjennomsiktighet
  3. 3Linjehøyde og bokstavavstand
  4. +1 flere
Start læringen gratisLås opp med PRO
3

A14 leksjonerPRO

Utforsk Tailwinds omfattende fargepalett og lær å bruke bakgrunnsfarger, gradienter og bakgrunnsbilder. Forstå hvordan opasitetsmodifikatorer brukes, og hvordan du lager visuelt innholdsrike flater.

  1. 1Tailwinds fargepalett
  2. 2Bakgrunnsgradienter
  3. 3Gjennomsiktighets- og fargemodifikatorer
  4. +1 flere
Start læringen gratisLås opp med PRO
4

A14 leksjonerPRO

Lær Tailwinds konsekvente avstandsskala for å legge til margin og padding på alle elementer. Forstå snarveier for retninger og negative marginer, slik at du kan styre layouten presist.

  1. 1Tailwinds avstandsskala
  2. 2Utfyllingsverktøy
  3. 3Margverktøy og automatiske marger
  4. +1 flere
Start læringen gratisLås opp med PRO
5

A14 leksjonerPRO

Bruk CSS Flexbox-layout med Tailwinds flex-utilities uten å skrive én eneste linje egen CSS. Bygg horisontale og vertikale layouter, styr justering og håndter linjebryting på en enkel måte.

  1. 1Aktivere flex og retning
  2. 2Justere innhold og elementer
  3. 3Flex-utvidelse, -krymping og -basis
  4. +1 flere
Start læringen gratisLås opp med PRO
6

A24 leksjonerPRO

Utnytt CSS Grid gjennom Tailwinds grid-utilities for å bygge komplekse todimensjonale layouter. Definer kolonner, rader og områder med enkle klassenavn, og styr plasseringen av elementene presist.

  1. 1Definere grid-kolonner
  2. 2Kolonne- og radspenning
  3. 3Grid-rader og automatisk plassering
  4. +1 flere
Start læringen gratisLås opp med PRO
7

A24 leksjonerPRO

Styr elementenes dimensjoner med Tailwinds utilities for bredde, høyde, minimums- og maksimumsbegrensninger samt sideforhold. Bygg responsive komponenter og komponenter med fast størrelse med trygghe…

  1. 1Breddeverktøy
  2. 2Høydeverktøy
  3. 3Minimums- og maksimumsbegrensninger
  4. +1 flere
Start læringen gratisLås opp med PRO
8

A24 leksjonerPRO

Utform kanter og dybde med Tailwinds utilities for border og shadow. Lær å legge til avrundede hjørner, styre kantbredde og -farge og bruke boks-skygger for å skape dybde.

  1. 1Kantlinjebredde og -farge
  2. 2Kantlinjeradius og avrundede hjørner
  3. 3Skygger
  4. +1 flere
Start læringen gratisLås opp med PRO
9

A24 leksjonerPRO

Gjør brukergrensesnittet interaktivt ved å bruke stiler betinget på hover, fokus, aktiv, deaktivert og andre pseudo-tilstander. Lær Tailwinds system med variantprefikser for å styre alle interaksjons…

  1. 1Hover- og active-varianter
  2. 2Focus- og focus-visible-varianter
  3. 3Disabled- og placeholder-varianter
  4. +1 flere
Start læringen gratisLås opp med PRO
10

A24 leksjonerPRO

Bygg layouter som tilpasser seg alle skjermstørrelser med Tailwinds mobile-first-bruddpunkter for responsivt design. Bruk ulike utility-klasser ved bestemte visningsbredder for å lage virkelig respon…

  1. 1Tailwinds breakpoint-system
  2. 2Responsive oppsett med flex og grid
  3. 3Responsiv typografi og avstand
  4. +1 flere
Start læringen gratisLås opp med PRO
11

B14 leksjonerPRO

Implementer mørk modus i webappene dine med Tailwinds innebygde dark-variant. Lær forskjellen mellom class-strategien og media-strategien, og bygg UI-komponenter som ser flotte ut i både lyse og mørk…

  1. 1Strategier for mørk modus
  2. 2Bruke dark-varianter
  3. 3Bygge en bryter for mørk modus
  4. +1 flere
Start læringen gratisLås opp med PRO
12

B14 leksjonerPRO

Utnytt Tailwinds fulle kraft ved å bli fortrolig med filen tailwind.config.js. Lær å utvide standardtemaet, legge til egendefinerte verdier, konfigurere innholdsbaner og administrere plugins.

  1. 1Anatomien til tailwind.config.js
  2. 2Innholdsstier og fjerning av ubrukte klasser
  3. 3Utvide kontra overskrive temaet
  4. +1 flere
Start læringen gratisLås opp med PRO
13

B14 leksjonerPRO

Tilpass Tailwind til merkevaren din ved å legge til egendefinerte farger, integrere Google Fonts og definere en egendefinert avstandsskala. Bygg et prosjektspesifikt designspråk som fortsatt utnytter…

  1. 1Legge til egendefinerte farger
  2. 2Egendefinerte skriftfamilier
  3. 3Egendefinerte avstandsverdier
  4. +1 flere
Start læringen gratisLås opp med PRO
14

B14 leksjonerPRO

Lær når og hvordan du bruker Tailwinds @apply-direktiv til å trekke gjentatte utility-mønstre ut i gjenbrukbare CSS-klasser. Finn balansen mellom den utility-første tilnærmingen og behovet for vedlik…

  1. 1Hva @apply gjør, og når det bør brukes
  2. 2Opprette gjenbrukbare komponentklasser
  3. 3Organisere egendefinert CSS med lag
  4. +1 flere
Start læringen gratisLås opp med PRO
15

B14 leksjonerPRO

Legg til jevne bevegelser i brukergrensesnittet med Tailwinds innebygde utilities for overganger og animasjoner. Lær å styre varighet, easing og forsinkelse, og bruke keyframe-animasjoner for engasje…

  1. 1Transition-verktøy
  2. 2Varighet og easing
  3. 3Innebygde keyframe-animasjoner
  4. +1 flere
Start læringen gratisLås opp med PRO
16

B14 leksjonerPRO

Bygg gjennomarbeidede og gjenbrukbare UI-primitiver med Tailwind utility-klasser. Lær standardmønstrene for knapper med varianter, kort med topp- og bunntekst og små informasjonsmerker.

  1. 1Knappvarianter og tilstander
  2. 2Mønstre for kortkomponenter
  3. 3Merke- og tag-komponenter
  4. +1 flere
Start læringen gratisLås opp med PRO
17

B14 leksjonerPRO

Bygg responsive navigasjonsfelt og sammenleggbare sidestolper med Tailwind-utilities. Lær å håndtere hamburgermenyer på mobil og lage klebrige navigasjonsfelt som forblir synlige når brukerne ruller.

  1. 1Bygge en responsiv navigasjonslinje
  2. 2Fast og klebrig navigasjon
  3. 3Vertikalt sidepaneloppsett
  4. +1 flere
Start læringen gratisLås opp med PRO
18

B14 leksjonerPRO

Utform tilgjengelige og attraktive skjemaelementer med Tailwind-utilities. Lær å lage tekstfelt, nedtrekkslister, avmerkingsbokser, radioknapper og komplette skjemalayouter med valideringstilstander.

  1. 1Style tekstfelt og tekstområder
  2. 2Valgmenyer og avkrysningsbokser
  3. 3Mønstre for skjemalayout
  4. +1 flere
Start læringen gratisLås opp med PRO
19

B14 leksjonerPRO

Bygg UI-mønstre som modaler, dialogbokser og nedtrekksmenyer med Tailwind og minimalt med JavaScript. Lær om posisjonering, z-index-lagdeling og jevne overganger ved åpning og lukking.

  1. 1Struktur for modaldialoger
  2. 2Animasjon for åpning og lukking av modal
  3. 3Nedtrekksmenykomponent
  4. +1 flere
Start læringen gratisLås opp med PRO
20

B14 leksjonerPRO

Forstå Tailwinds Just-In-Time-motor og hvordan den bare genererer CSS-en du bruker. Lær å optimalisere produksjonsbunten, analysere utdatastørrelsen og skrive klasser som JIT-motoren kan oppdage.

  1. 1Slik fungerer JIT-motoren
  2. 2Tillat dynamiske klasser på en safeliste
  3. 3Analysere og redusere pakkestørrelsen
  4. +1 flere
Start læringen gratisLås opp med PRO
21

B24 leksjonerPRO

Etabler et robust system med designtokens i Tailwind-konfigurasjonen for konsekvent tematisering på tvers av merkevarer. Knytt primitive tokens til semantiske tokens, og bygg et skalerbart designsprå…

  1. 1Primitive kontra semantiske tokens
  2. 2Tematisering basert på CSS-variabler
  3. 3Strategi for tematisering av flere merkevarer
  4. +1 flere
Start læringen gratisLås opp med PRO
22

B24 leksjonerPRO

Integrer Tailwind CSS i React- og Next.js-applikasjoner med det offisielle oppsettet. Lær anbefalte fremgangsmåter for å bruke utilities i JSX, håndtere betingede klasser og organisere stiler i kompo…

  1. 1Sette opp Tailwind i Next.js
  2. 2Betingede klasser i React
  3. 3Komponentvarianter med CVA
  4. +1 flere
Start læringen gratisLås opp med PRO
23

B24 leksjonerPRO

Kombiner Tailwind CSS med Headless UI for å bygge fullt tilgjengelige, ustilede komponenter. Bruk egne Tailwind-klasser på menyer, dialogbokser, kombobokser og overganger, samtidig som du beholder ro…

  1. 1Introduksjon til Headless UI
  2. 2Stilisere Headless-meny og rullegardin
  3. 3Bygge tilgjengelige dialogbokser
  4. +1 flere
Start læringen gratisLås opp med PRO
24

B24 leksjonerPRO

Utvid Tailwinds funksjonalitet ved å skrive egendefinerte plugins som legger til nye utilities, komponenter og varianter. Lær plugin-API-et for å kapsle inn gjenbrukbar stil-logikk og dele den på tve…

  1. 1Tailwinds plugin-API
  2. 2Legge til egendefinerte verktøyklasser via en plugin
  3. 3Legge til egendefinerte varianter via en plugin
  4. +1 flere
Start læringen gratisLås opp med PRO
25

B24 leksjonerPRO

Bygg UI-komponenter som oppfyller WCAG-standardene for tilgjengelighet, ved å bruke Tailwind-utilities for fargekontrast, fokushåndtering og støtte for skjermlesere. Skriv HTML-struktur og Tailwind-s…

  1. 1Fargekontrast og lesbar tekst
  2. 2Fokusindikatorer og tastaturnavigasjon
  3. 3ARIA-attributter og skjermlesere
  4. +1 flere
Start læringen gratisLås opp med PRO
26

B24 leksjonerPRO

Ta i bruk profesjonelle anbefalte fremgangsmåter for å levere Tailwind CSS i produksjonsapplikasjoner. Lær om buntauditering, strategier for organisering av klasser, linting og teknikker for ytelseso…

  1. 1Kontrollere CSS-resultatet
  2. 2Klassesortering og Prettier-plugin
  3. 3Linting av Tailwind med ESLint
  4. +1 flere
Start læringen gratisLås opp med PRO
27

B24 leksjonerPRO

Bruk alt du har lært så langt til å bygge en komplett, responsiv markedsføringslandingsside fra grunnen av, kun med Tailwind CSS. Dekk hero-, funksjons-, kundeuttalelses-, pris- og bunntekstseksjoner.

  1. 1Hero- og navigasjonsseksjon
  2. 2Seksjoner for funksjoner og sosial bekreftelse
  3. 3Seksjon med pristabell
  4. +1 flere
Start læringen gratisLås opp med PRO
28

B24 leksjonerPRO

Bygg et komplett administrasjonsdashboard med Tailwind CSS. Lag en sidestolpe, en topplinje, statistikkort, datatabeller og plassholder-widgeter for diagrammer i en helhetlig og responsiv layout.

  1. 1Dashboard-struktur og sidestolpe
  2. 2Topplinje og brødsmuler
  3. 3Statistikkort og KPI-widgeter
  4. +1 flere
Start læringen gratisLås opp med PRO
29

B24 leksjonerPRO

Utforsk hvordan Tailwind inngår i bredere strategier for CSS-arkitektur i store prosjekter. Lær å organisere filer, strukturere komponentlag og la Tailwind fungere sammen med eldre CSS eller andre st…

  1. 1Organisering av filer og mapper
  2. 2Sameksistens med eldre CSS
  3. 3CSS Modules og Tailwind
  4. +1 flere
Start læringen gratisLås opp med PRO
30

B24 leksjonerPRO

Samle alle ferdighetene fra læringsløpet for å bygge et komplett Tailwind-basert designsystem. Definer tokens, bygg et komponentbibliotek, skriv en plugin og dokumenter systemet for bruk i teamet.

  1. 1Planlegge designsystemet
  2. 2Bygge token- og konfigurasjonslaget
  3. 3Bygge et komponentbibliotek
  4. +1 flere
Start læringen gratisLås opp med PRO
CoddyKit PRO

Lås opp alle 30 kursene i denne læringsstien og alle andre læringsstier

AI-veileder, sertifiseringseksamen og sertifikat. Fungerer på web, iOS og Android.

Se alle abonnementene
Årlig$29.90 / årOmtrent $2.49 per månedBetal én gangLivstid$69.99 én gangIngen fornyelser. PRO for alltid.
Kursoversikt

Bli ekspert på Tailwind CSS

Behersk det utility-first-baserte CSS-rammeverket som brukes av OpenAI, Vercel og Shopify. Lær alle utility-klassene, responsivt design, mørk modus, animasjoner og optimalisering for produksjon. Dette læringsløpet består av 30 progressive minikurs, fra helt nybegynner (A1) til viderekommen (B2), med korte, fokuserte leksjoner og raske quizer som hjelper Dem å feste hvert konsept.

Dette vil De lære

De begynner med grunnleggende konsepter og bygger Dem gradvis opp gjennom emner på mellomnivå og viderekomment nivå, der hvert kurs bygger på det forrige. Hver leksjon er praktisk, med eksempler fra virkeligheten og en AI-veileder tilgjengelig når De trenger hjelp.

Slik fungerer det

Hvert kurs er delt inn i fire fokuserte leksjoner. Gjennomfør noen leksjoner om dagen, så behersker De hele læringsløpet på noen uker, ikke måneder.

Verktøy

Øv med AI, ikke bare les

Få mer ut av læringen med AI-drevne verktøy og funksjoner

AI-chatChat med AI-veilederenStill et superspørsmålFå svar på ekspertnivåPROOpprett leksjonAI-drevet leksjonsbyggerPROStart sertifiseringseksamenFå sertifikatet dittPROStart utfordringTest ferdighetene dine

Slik lærer du

  1. 01

    Interaktive leksjoner

    Praktiske kodeøvelser med tilbakemelding i sanntid

  2. 02

    AI-veileder

    Få øyeblikkelig hjelp fra AI-en vår når du står fast

  3. 03

    Innebygd kodeeditor

    Skriv og kjør kode direkte i nettleseren

  4. 04

    Sertifikat

    Få et sertifikat når du fullfører kurset

Fortsett å utforske

Relaterte læringsstier

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.
FAQ

Ofte stilte spørsmål

Er kurset i Tailwind CSS Academy gratis?

Ja. Du kan starte på kurset i Tailwind CSS Academy gratis og fullføre de interaktive leksjonene uten kostnad. Et valgfritt PRO-abonnement låser opp avanserte AI-verktøy og et delbart sertifikat.

Trenger jeg tidligere erfaring for å lære HTML?

Nei. Kurset begynner med det grunnleggende og går gradvis videre til mer avanserte emner, slik at du kan starte selv uten tidligere erfaring med HTML.

Hvordan lærer jeg HTML på CoddyKit?

Du lærer gjennom praksis. Korte, interaktive leksjoner kombinerer en tydelig forklaring med en praktisk kodeøvelse som kjører i sanntid, og en AI-veileder som er tilgjengelig døgnet rundt, gir deg personlig hjelp når du står fast.

Får jeg et sertifikat når jeg fullfører Tailwind CSS Academy?

Ja. PRO-brukere kan ta en eksamen og få et delbart fullføringssertifikat med en verifiserbar kode for kurset i Tailwind CSS Academy.

Kan jeg lære HTML på telefonen?

Ja. CoddyKit er tilgjengelig på nettet og som native iOS- og Android-apper, slik at du kan lære HTML på alle enheter, mens fremdriften synkroniseres mellom dem.

Hvor mye koster CoddyKit PRO?

Det første kurset i Tailwind CSS Academy er gratis. CoddyKit PRO gir tilgang til alle kurs: $5.90 per uke, $7.90 per måned, $29.90 per år eller $69.99 én gang for tilgang på livstid uten fornyelser.

Hvor lang tid tar det å fullføre Tailwind CSS Academy?

Tailwind CSS Academy består av 30 kurs og 120 leksjoner. De fleste leksjonene tar omtrent 5–10 minutter, så hele læringsstien tar rundt 14 timer med praktisk øving i eget tempo.

Start på Tailwind CSS Academy nå

Bli med tusenvis av elever som lærer programmering med AI-drevne leksjoner.

Start læringen gratisSe alle kurs