PricingLoginStart free
Tailwind CSS Academy logo
HTMLWebNiveauer A1 → B222 sprog

Tailwind CSS Academy

Bliv fortrolig med det utility-baserede CSS-framework, som OpenAI, Vercel og Shopify har tillid til. Lær alle utilities, responsivt design, mørk tilstand, animationer og optimering til produktion. Et læringsforløb på CoddyKit med 30 korte kurser og 120 interaktive lektioner – med en AI-vejleder ved din side døgnet rundt.

Kurser
30
Lektioner
120
Interaktive trin
1,559
Gratis at komme i gang
Kursus 1
Kursusindhold

30 kurser på denne sti

Alle kurser på Tailwind CSS Academy-stien i læringsrækkefølge. Det første kursus er gratis.

1

A14 lektionerGratis

Opdag filosofien bag utility-first i Tailwind CSS, og forstå, hvordan den adskiller sig fra traditionelle CSS-frameworks som Bootstrap. Lær at opsætte Tailwind i et projekt og skrive Deres første sty…

  1. 1Utility-first CSS forklaret
  2. 2Installation og konfiguration af Tailwind
  3. 3Din første Tailwind-side
  4. +1 flere
Start gratis
2

A14 lektionerPRO

Få styr på Tailwinds omfattende udvalg af typografi-utilities til at styre skriftstørrelser, tykkelser, linjehøjder, bogstavafstand og tekstjustering. Lær at skabe læsevenlig og visuelt indbydende te…

  1. 1Skriftstørrelse og skriftvægt
  2. 2Tekstfarve og opacitet
  3. 3Linjehøjde og bogstavafstand
  4. +1 flere
Start gratisLås op med PRO
3

A14 lektionerPRO

Udforsk Tailwinds omfattende farvepalette, og lær at anvende baggrundsfarver, gradients og baggrundsbilleder. Forstå, hvordan De bruger opacity-modifikatorer og skaber visuelt rige overflader.

  1. 1Tailwinds farvepalette
  2. 2Baggrundsgradienter
  3. 3Opacitets- og farvemodifikatorer
  4. +1 flere
Start gratisLås op med PRO
4

A14 lektionerPRO

Lær Tailwinds konsekvente spacingskala til at tilføje margin og padding til ethvert element. Forstå retningsbestemte genveje og negative marginer, så De kan styre layoutet præcist.

  1. 1Tailwinds afstandsskala
  2. 2Padding-utilities
  3. 3Margin-utilities og auto-marginer
  4. +1 flere
Start gratisLås op med PRO
5

A14 lektionerPRO

Anvend CSS Flexbox-layouts med Tailwinds flex-utilities uden at skrive en eneste linje brugerdefineret CSS. Byg vandrette og lodrette layouts, styr justering og håndtér ombrydning uden besvær.

  1. 1Aktivering af flex og retning
  2. 2Justering af indhold og elementer
  3. 3Flex-grow, shrink og basis
  4. +1 flere
Start gratisLås op med PRO
6

A24 lektionerPRO

Udnyt CSS Grid gennem Tailwinds grid-utilities til at bygge komplekse todimensionelle layouts. Definér kolonner, rækker og områder med enkle klassenavne, og styr elementernes placering præcist.

  1. 1Definition af gridkolonner
  2. 2Spænd over kolonner og rækker
  3. 3Gridrækker og automatisk placering
  4. +1 flere
Start gratisLås op med PRO
7

A24 lektionerPRO

Styr elementernes dimensioner med Tailwinds utilities til bredde, højde, minimums- og maksimumsbegrænsninger samt aspect ratio. Byg responsive komponenter og komponenter med faste størrelser med sikk…

  1. 1Bredde-utilities
  2. 2Højde-utilities
  3. 3Minimums- og maksimumsbegrænsninger
  4. +1 flere
Start gratisLås op med PRO
8

A24 lektionerPRO

Style elementkanter og dybde med Tailwinds border- og shadow-utilities. Lær at tilføje afrundede hjørner, styre kantbredde og -farve samt anvende box shadows for at skabe dybde.

  1. 1Kantbredde og -farve
  2. 2Kantafrunding og afrundede hjørner
  3. 3Boksskygger
  4. +1 flere
Start gratisLås op med PRO
9

A24 lektionerPRO

Tilføj interaktion til Deres UI ved at anvende styles betinget af hover, focus, active, disabled og andre pseudo-states. Lær Tailwinds system med variant-præfikser, så De kan styre enhver interaktion…

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

A24 lektionerPRO

Byg layouts, der tilpasser sig alle skærmstørrelser, med Tailwinds mobile-first-breakpoints til responsivt design. Anvend forskellige utility-klasser ved bestemte viewport-bredder for at skabe ægte r…

  1. 1Tailwinds breakpoint-system
  2. 2Responsive layouts med flex og grid
  3. 3Responsiv typografi og afstand
  4. +1 flere
Start gratisLås op med PRO
11

B14 lektionerPRO

Implementér dark mode i Deres webapps med Tailwinds indbyggede dark-variant. Lær forskellen på class-strategien og media-strategien, og byg UI-komponenter, der ser godt ud i både lyse og mørke temaer.

  1. 1Strategier til mørk tilstand
  2. 2Anvendelse af dark-varianter
  3. 3Byg en toggle til mørk tilstand
  4. +1 flere
Start gratisLås op med PRO
12

B14 lektionerPRO

Få fuldt udbytte af Tailwind ved at mestre filen tailwind.config.js. Lær at udvide standardtemaet, tilføje brugerdefinerede værdier, konfigurere content paths og administrere plugins.

  1. 1Anatomien i tailwind.config.js
  2. 2Content-stier og oprydning
  3. 3Udvidelse kontra tilsidesættelse af temaet
  4. +1 flere
Start gratisLås op med PRO
13

B14 lektionerPRO

Tilpas Tailwind til Deres brand ved at tilføje brugerdefinerede farver, integrere Google Fonts og definere en brugerdefineret spacingskala. Byg et projektspecifikt designsprog, der stadig udnytter al…

  1. 1Tilføjelse af brugerdefinerede farver
  2. 2Brugerdefinerede skriftfamilier
  3. 3Brugerdefinerede afstandsværdier
  4. +1 flere
Start gratisLås op med PRO
14

B14 lektionerPRO

Lær, hvornår og hvordan De bruger Tailwinds @apply-direktiv til at udtrække gentagne utility-mønstre til genanvendelige CSS-klasser. Afvej utility-first-tilgangen mod behovet for komponentabstraktion…

  1. 1Hvad @apply gør, og hvornår det skal bruges
  2. 2Oprettelse af genanvendelige komponentklasser
  3. 3Organisering af tilpasset CSS med layers
  4. +1 flere
Start gratisLås op med PRO
15

B14 lektionerPRO

Tilføj flydende bevægelse til Deres UI med Tailwinds indbyggede utilities til transitions og animationer. Lær at styre varighed, easing og forsinkelse samt anvende keyframe-animationer til engagerend…

  1. 1Transition-utilities
  2. 2Varighed og easing
  3. 3Indbyggede keyframe-animationer
  4. +1 flere
Start gratisLås op med PRO
16

B14 lektionerPRO

Byg gennemarbejdede, genanvendelige UI-primitiver med Tailwind-utility-klasser. Lær standardmønstrene for knapper med varianter, cards med headers og footers samt små informative badges.

  1. 1Knapvarianter og tilstande
  2. 2Mønstre for kortkomponenter
  3. 3Badge- og tagkomponenter
  4. +1 flere
Start gratisLås op med PRO
17

B14 lektionerPRO

Byg responsive navigationsbjælker og sammenklappelige sidebars med Tailwind-utilities. Lær at håndtere mobile hamburger-menuer og skabe sticky-navigation, der bliver synlig, mens brugerne scroller.

  1. 1Byg en responsiv navigationslinje
  2. 2Sticky og fast navigation
  3. 3Layout med lodret sidebar
  4. +1 flere
Start gratisLås op med PRO
18

B14 lektionerPRO

Style tilgængelige og attraktive formularelementer med Tailwind-utilities. Lær at oprette tekstfelter, select-felter, afkrydsningsfelter, radioknapper og komplette formularlayouts med valideringstils…

  1. 1Styling af tekstfelter og tekstområder
  2. 2Select-menuer og afkrydsningsfelter
  3. 3Mønstre for formularlayouts
  4. +1 flere
Start gratisLås op med PRO
19

B14 lektionerPRO

Byg UI-mønstre med overlays som modaler, dialoger og dropdown-menuer med Tailwind og minimal JavaScript. Lær om positionering, z-index-stabling og jævne overgange ved åbning og lukning.

  1. 1Struktur for modaldialoger
  2. 2Animation af åbning og lukning af modal
  3. 3Dropdown-menu-komponent
  4. +1 flere
Start gratisLås op med PRO
20

B14 lektionerPRO

Forstå Tailwinds Just-In-Time-motor, og hvordan den kun genererer den CSS, De bruger. Lær at optimere Deres produktionsbundle, analysere outputstørrelsen og skrive klasser, som JIT-motoren kan regist…

  1. 1Sådan fungerer JIT-motoren
  2. 2Sikkerlistning af dynamiske klasser
  3. 3Analyse og reduktion af bundle-størrelse
  4. +1 flere
Start gratisLås op med PRO
21

B24 lektionerPRO

Etablér et robust system af design tokens i Tailwinds konfiguration, så De kan understøtte konsekvent tematisering på tværs af brands. Knyt primitive tokens til semantiske tokens, og byg et skalerbar…

  1. 1Primitive og semantiske tokens
  2. 2Tematisering baseret på CSS-variabler
  3. 3Strategi for tematisering af flere brands
  4. +1 flere
Start gratisLås op med PRO
22

B24 lektionerPRO

Integrer Tailwind CSS i React- og Next.js-applikationer med den officielle opsætning. Lær best practices for at anvende utilities i JSX, håndtere betingede klasser og organisere styles i komponentbas…

  1. 1Opsætning af Tailwind i Next.js
  2. 2Betingede klasser i React
  3. 3Komponentvarianter med CVA
  4. +1 flere
Start gratisLås op med PRO
23

B24 lektionerPRO

Kombinér Tailwind CSS med Headless UI for at bygge fuldt tilgængelige, ustilede komponenter. Anvend Deres egne Tailwind-klasser på menuer, dialoger, comboboxes og transitions, samtidig med at De beva…

  1. 1Introduktion til Headless UI
  2. 2Styling af headless-menu og dropdown
  3. 3Opbygning af tilgængelige dialogbokse
  4. +1 flere
Start gratisLås op med PRO
24

B24 lektionerPRO

Udvid Tailwinds funktionalitet ved at skrive brugerdefinerede plugins, der tilføjer nye utilities, komponenter og varianter. Lær plugin-API'et at kende, så De kan indkapsle genanvendelig style-logik…

  1. 1Tailwind-plugin-API'en
  2. 2Tilføjelse af brugerdefinerede utilities via plugin
  3. 3Tilføjelse af brugerdefinerede varianter via plugin
  4. +1 flere
Start gratisLås op med PRO
25

B24 lektionerPRO

Byg UI-komponenter, der opfylder WCAG's tilgængelighedsstandarder, med Tailwind-utilities til farvekontrast, fokusstyring og understøttelse af skærmlæsere. Skriv HTML-struktur og Tailwind-styles, der…

  1. 1Farvekontrast og læsbar tekst
  2. 2Fokusindikatorer og tastaturnavigation
  3. 3ARIA-attributter og skærmlæsere
  4. +1 flere
Start gratisLås op med PRO
26

B24 lektionerPRO

Anvend professionelle best practices til at levere Tailwind CSS i produktionsapplikationer. Lær om bundle-auditering, strategier til organisering af klasser, linting og teknikker til optimering af yd…

  1. 1Revision af jeres CSS-output
  2. 2Klassesortering og Prettier-plugin
  3. 3Linting af Tailwind med ESLint
  4. +1 flere
Start gratisLås op med PRO
27

B24 lektionerPRO

Anvend alt, De har lært indtil videre, til at bygge en komplet, responsiv marketing-landing page fra bunden udelukkende med Tailwind CSS. Dæk hero-, feature-, testimonial-, pris- og footer-sektioner.

  1. 1Hero- og navigationssektion
  2. 2Sektioner med funktioner og social proof
  3. 3Sektion med pristabel
  4. +1 flere
Start gratisLås op med PRO
28

B24 lektionerPRO

Konstruér en komplet admin-dashboardgrænseflade med Tailwind CSS. Byg en sidebar, en topbjælke, stat cards, datatabeller og pladsholder-widgets til diagrammer i et sammenhængende, responsivt layout.

  1. 1Dashboardstruktur og sidebar
  2. 2Topbjælke og brødkrummer
  3. 3Statistikkort og KPI-widgets
  4. +1 flere
Start gratisLås op med PRO
29

B24 lektionerPRO

Udforsk, hvordan Tailwind indgår i bredere strategier for CSS-arkitektur, som anvendes i store projekter. Lær at organisere filer, strukturere komponentlag og få Tailwind til at fungere sammen med æl…

  1. 1Organisering af filer og mapper
  2. 2Sameksistens med ældre CSS
  3. 3CSS Modules og Tailwind
  4. +1 flere
Start gratisLås op med PRO
30

B24 lektionerPRO

Saml alle færdighederne fra dette læringsforløb for at bygge et komplet Tailwind-baseret designsystem. Definér tokens, byg et komponentbibliotek, skriv et plugin, og dokumentér systemet til brug i te…

  1. 1Planlægning af designsystemet
  2. 2Opbygning af token- og konfigurationslaget
  3. 3Opbygning af komponentbibliotek
  4. +1 flere
Start gratisLås op med PRO
CoddyKit PRO

Lås op for alle 30 kurser på denne sti og alle kurser på alle andre stier

AI-vejleder, certificeringseksamen og certifikat. Fungerer på web, iOS og Android.

Se alle abonnementer
Årligt$29.90 / årCa. $2.49 om månedenBetal én gangLivstid$69.99 én gangIngen fornyelser. PRO for altid.
Kursusoversigt

Bliv fortrolig med Tailwind CSS

Bliv fortrolig med det utility-baserede CSS-framework, som OpenAI, Vercel og Shopify har tillid til. Lær alle utilities, responsivt design, mørk tilstand, animationer og optimering til produktion. Dette læringsspor dækker 30 progressive minikurser fra helt nybegynder (A1) til avanceret (B2) med korte, fokuserede lektioner og hurtige quizzer, der hjælper dig med at fastholde hvert koncept.

Det lærer du

Du begynder med det grundlæggende og bygger videre gennem emner på mellemtrin og avanceret niveau, hvor hvert kursus bygger videre på det forrige. Alle lektioner er praktiske med virkelige eksempler og en AI-underviser, når du har brug for hjælp.

Sådan fungerer det

Hvert kursus er opdelt i fire fokuserede lektioner. Gennemfør et par lektioner om dagen, så mestrer du hele læringssporet på uger i stedet for måneder.

Værktøjer

Øv dig med AI – læs ikke bare

Få mere ud af din læring med AI-drevne værktøjer og funktioner

AI-chatChat med en AI-underviserStil et superspørgsmålFå svar på ekspertniveauPROOpret lektionAI-drevet værktøj til at oprette lektionerPROStart certificeringseksamenFå dit certifikatPROStart udfordringAfprøv dine færdigheder

Sådan lærer du

  1. 01

    Interaktive lektioner

    Praktiske kodeøvelser med feedback i realtid

  2. 02

    AI-underviser

    Få øjeblikkelig hjælp fra vores AI, når du sidder fast

  3. 03

    Indbygget editor

    Skriv og kør kode direkte i din browser

  4. 04

    Certifikat

    Få et certifikat, når du gennemfører kurset

Udforsk videre

Relaterede 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.
Ofte stillede spørgsmål

Ofte stillede spørgsmål

Er Tailwind CSS Academy-kurset gratis?

Ja. Du kan begynde på Tailwind CSS Academy-kurset gratis og gennemføre de interaktive lektioner uden omkostninger. Et valgfrit PRO-abonnement giver adgang til avancerede AI-værktøjer og et certifikat, der kan deles.

Skal jeg have erfaring på forhånd for at lære HTML?

Nej. Kurset begynder med det grundlæggende og bevæger sig gradvist videre til mere avancerede emner, så du kan starte uden tidligere erfaring med HTML.

Hvordan lærer jeg HTML på CoddyKit?

Du lærer ved at øve dig. Korte interaktive lektioner kombinerer en tydelig forklaring med en praktisk kodeøvelse, der kører i realtid, og en AI-vejleder, der er tilgængelig døgnet rundt, hjælper dig personligt, når du sidder fast.

Får jeg et certifikat, når jeg gennemfører Tailwind CSS Academy?

Ja. PRO-brugere kan tage en eksamen og få et certifikat for gennemførelse af Tailwind CSS Academy-kurset, som kan deles og indeholder en verificerbar kode.

Kan jeg lære HTML på min telefon?

Ja. CoddyKit er tilgængeligt på nettet og som indbyggede iOS- og Android-apps, så du kan lære HTML på enhver enhed, og dine fremskridt synkroniseres på tværs af dem.

Hvad koster CoddyKit PRO?

Det første kursus på Tailwind CSS Academy-stien er gratis. CoddyKit PRO giver adgang til alle kurser: $5.90 om ugen, $7.90 om måneden, $29.90 om året eller $69.99 én gang for livstidsadgang uden fornyelser.

Hvor lang tid tager det at gennemføre Tailwind CSS Academy?

Tailwind CSS Academy har 30 kurser og 120 lektioner. De fleste lektioner tager cirka 5–10 minutter, så hele stien kræver omkring 14 timers praktisk øvelse i dit eget tempo.

Start på Tailwind CSS Academy nu

Slut dig til tusindvis af kursister, der mestrer programmering med AI-drevne lektioner.

Start gratisSe alle kurser