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

Tailwind CSS Academy

Bemästra det utility-baserade CSS-ramverk som OpenAI, Vercel och Shopify förlitar sig på. Lär er alla utilities, responsiv design, mörkt läge, animationer och optimering för produktion. En lärstig från CoddyKit med 30 korta kurser och 120 interaktiva lektioner, med en AI-handledare till hands dygnet runt.

Kurser
30
Lektioner
120
Interaktiva steg
1,559
Gratis att börja
Kurs 1
Kursplan

30 kurser i den här lärvägen

Alla kurser i lärvägen Tailwind CSS Academy, i rätt ordning. Den första är gratis.

1

A14 lektionerGratis

Upptäck den utility-first-filosofi som ligger bakom Tailwind CSS och förstå hur den skiljer sig från traditionella CSS-ramverk som Bootstrap. Lär er konfigurera Tailwind i ett projekt och skriva era…

  1. 1Utility-first CSS förklarat
  2. 2Installera och konfigurera Tailwind
  3. 3Er första Tailwind-sida
  4. +1 till
Börja lära dig gratis
2

A14 lektionerPRO

Bemästra Tailwinds omfattande uppsättning typografiutilities för att styra teckenstorlek, vikt, radhöjd, teckenavstånd och textjustering. Lär er skapa lättläst och visuellt tilltalande text utan någo…

  1. 1Teckenstorlek och teckenvikt
  2. 2Textfärg och opacitet
  3. 3Radhöjd och teckenavstånd
  4. +1 till
Börja lära dig gratisLås upp med PRO
3

A14 lektionerPRO

Utforska Tailwinds omfattande färgpalett och lär er tillämpa bakgrundsfärger, gradienter och bakgrundsbilder. Förstå hur opacitetsmodifierare används och skapa visuellt innehållsrika ytor.

  1. 1Tailwinds färgpalett
  2. 2Bakgrundsgradienter
  3. 3Opacitets- och färgmodifierare
  4. +1 till
Börja lära dig gratisLås upp med PRO
4

A14 lektionerPRO

Lär er Tailwinds konsekventa skala för mellanrum och lägg till margin och padding på valfritt element. Förstå riktningsbaserade genvägar och negativa marginaler för att styra layouten med precision.

  1. 1Tailwinds avståndsskala
  2. 2Verktyg för inre marginaler
  3. 3Verktyg för yttre marginaler och automatiska marginaler
  4. +1 till
Börja lära dig gratisLås upp med PRO
5

A14 lektionerPRO

Tillämpa CSS Flexbox-layouter med Tailwinds flexutilities utan att skriva en enda rad egen CSS. Bygg horisontella och vertikala layouter, styr justering och hantera radbrytning på ett enkelt sätt.

  1. 1Aktivera flex och ange riktning
  2. 2Justera innehåll och placera element
  3. 3Flex-grow, flex-shrink och flex-basis
  4. +1 till
Börja lära dig gratisLås upp med PRO
6

A24 lektionerPRO

Använd CSS Grid via Tailwinds gridutilities för att bygga komplexa tvådimensionella layouter. Definiera kolumner, rader och områden med enkla klassnamn och styr elementens placering med precision.

  1. 1Definiera gridkolumner
  2. 2Spänna över kolumner och rader
  3. 3Gridrader och automatisk placering
  4. +1 till
Börja lära dig gratisLås upp med PRO
7

A24 lektionerPRO

Styr elementens dimensioner med Tailwinds utilities för bredd, höjd, minimi- och maximibegränsningar samt aspektförhållanden. Bygg responsiva komponenter och komponenter med fasta storlekar med trygg…

  1. 1Verktyg för bredd
  2. 2Verktyg för höjd
  3. 3Minimi- och maximibegränsningar
  4. +1 till
Börja lära dig gratisLås upp med PRO
8

A24 lektionerPRO

Formge elementens kanter och djup med Tailwinds border- och shadowutilities. Lär er lägga till rundade hörn, styra kantens bredd och färg samt använda boxskuggor för att skapa djup.

  1. 1Kantlinjens bredd och färg
  2. 2Kantlinjeradie och rundade hörn
  3. 3Lådor med skuggor
  4. +1 till
Börja lära dig gratisLås upp med PRO
9

A24 lektionerPRO

Lägg till interaktivitet i gränssnittet genom att villkorligt tillämpa stilar vid hover, focus, active, disabled och andra pseudo-tillstånd. Lär er Tailwinds system med variantprefix för att styra va…

  1. 1Varianter för hovring och aktivt läge
  2. 2Varianter för fokus och synligt fokus
  3. 3Varianter för inaktiverade element och platshållare
  4. +1 till
Börja lära dig gratisLås upp med PRO
10

A24 lektionerPRO

Bygg layouter som anpassar sig till alla skärmstorlekar med Tailwinds mobile-first-brytpunkter för responsiv design. Tillämpa olika utility-klasser vid specifika viewport-bredder för att skapa verkli…

  1. 1Tailwinds brytpunktssystem
  2. 2Responsiva layouter med flex och grid
  3. 3Responsiv typografi och spacing
  4. +1 till
Börja lära dig gratisLås upp med PRO
11

B14 lektionerPRO

Implementera dark mode i era webbappar med Tailwinds inbyggda dark-variant. Lär er skillnaden mellan klassstrategin och mediestrategin och bygg UI-komponenter som ser bra ut i både ljusa och mörka te…

  1. 1Strategier för mörkt läge
  2. 2Tillämpa varianter för mörkt läge
  3. 3Bygg en växlare för mörkt läge
  4. +1 till
Börja lära dig gratisLås upp med PRO
12

B14 lektionerPRO

Få ut hela kraften ur Tailwind genom att bemästra filen tailwind.config.js. Lär er utöka standardtemat, lägga till anpassade värden, konfigurera innehållssökvägar och hantera pluginer.

  1. 1Anatomin hos tailwind.config.js
  2. 2Innehållssökvägar och rensning
  3. 3Utöka eller ersätta temat
  4. +1 till
Börja lära dig gratisLås upp med PRO
13

B14 lektionerPRO

Anpassa Tailwind efter ert varumärke genom att lägga till anpassade färger, integrera Google Fonts och definiera en anpassad skala för mellanrum. Bygg ett projektspecifikt designspråk som fortfarande…

  1. 1Lägga till anpassade färger
  2. 2Anpassade teckensnittsfamiljer
  3. 3Anpassade avståndsvärden
  4. +1 till
Börja lära dig gratisLås upp med PRO
14

B14 lektionerPRO

Lär er när och hur Tailwinds direktiv @apply används för att samla upprepade utility-mönster i återanvändbara CSS-klasser. Balansera utility-first-metoden mot behovet av lättunderhållna komponentabst…

  1. 1Vad @apply gör och när det bör användas
  2. 2Skapa återanvändbara komponentklasser
  3. 3Organisera anpassad CSS med lager
  4. +1 till
Börja lära dig gratisLås upp med PRO
15

B14 lektionerPRO

Lägg till mjuka rörelser i gränssnittet med Tailwinds inbyggda utilities för övergångar och animationer. Lär er styra varaktighet, easing och fördröjning samt tillämpa keyframe-animationer för engage…

  1. 1Övergångsverktyg
  2. 2Varaktighet och easing
  3. 3Inbyggda keyframe-animationer
  4. +1 till
Börja lära dig gratisLås upp med PRO
16

B14 lektionerPRO

Bygg välformgivna och återanvändbara UI-primitiver med Tailwinds utility-klasser. Lär er standardmönster för knappar med varianter, kort med sidhuvuden och sidfötter samt små informationsbadges.

  1. 1Knappvarianter och tillstånd
  2. 2Mönster för kortkomponenter
  3. 3Badge- och taggkomponenter
  4. +1 till
Börja lära dig gratisLås upp med PRO
17

B14 lektionerPRO

Bygg responsiva navigeringsfält och utfällbara sidebars med Tailwind-utilities. Lär er hantera mobila hamburgermenyer och skapa klistrad navigering som finns kvar när användaren scrollar.

  1. 1Bygga en responsiv navbar
  2. 2Fast och klistrad navigering
  3. 3Layout med vertikalt sidofält
  4. +1 till
Börja lära dig gratisLås upp med PRO
18

B14 lektionerPRO

Formge tillgängliga och attraktiva formulärelement med Tailwind-utilities. Lär er skapa textfält, select-menyer, kryssrutor, radioknappar och kompletta formulärlayouter med valideringstillstånd.

  1. 1Formatera textfält och textområden
  2. 2Väljmenyer och kryssrutor
  3. 3Mönster för formulärlayouter
  4. +1 till
Börja lära dig gratisLås upp med PRO
19

B14 lektionerPRO

Bygg UI-mönster för överlagringar, som modaler, dialogrutor och dropdown-menyer, med Tailwind och minimal JavaScript. Lär er positionering, z-index-stapling och mjuka övergångar vid öppning och stäng…

  1. 1Struktur för modaldialoger
  2. 2Animation för att öppna och stänga modaler
  3. 3Dropdownmenykomponent
  4. +1 till
Börja lära dig gratisLås upp med PRO
20

B14 lektionerPRO

Förstå Tailwinds Just-In-Time-motor och hur den endast genererar den CSS ni använder. Lär er optimera er produktionsbundle, analysera utdata och skriva klasser som JIT-motorn kan upptäcka.

  1. 1Så fungerar JIT-motorn
  2. 2Säkerlistning av dynamiska klasser
  3. 3Analysera och minska paketstorleken
  4. +1 till
Börja lära dig gratisLås upp med PRO
21

B24 lektionerPRO

Etablera ett robust system med designtokens i Tailwinds konfiguration för konsekvent tematisering av flera varumärken. Mappa primitiva tokens till semantiska tokens och bygg ett skalbart designspråk…

  1. 1Primitiva kontra semantiska tokens
  2. 2Tematisering baserad på CSS-variabler
  3. 3Strategi för tematisering av flera varumärken
  4. +1 till
Börja lära dig gratisLås upp med PRO
22

B24 lektionerPRO

Integrera Tailwind CSS i React- och Next.js-applikationer med den officiella konfigurationen. Lär er bästa praxis för att tillämpa utilities i JSX, hantera villkorliga klasser och organisera stilar i…

  1. 1Konfigurera Tailwind i Next.js
  2. 2Villkorliga klasser i React
  3. 3Komponentvarianter med CVA
  4. +1 till
Börja lära dig gratisLås upp med PRO
23

B24 lektionerPRO

Kombinera Tailwind CSS med Headless UI för att bygga helt tillgängliga, oformaterade komponenter. Tillämpa era egna Tailwind-klasser på menyer, dialogrutor, comboboxar och övergångar samtidigt som ni…

  1. 1Introduktion till Headless UI
  2. 2Styla Headless-menyer och rullgardinsmenyer
  3. 3Bygg tillgängliga dialogrutor
  4. +1 till
Börja lära dig gratisLås upp med PRO
24

B24 lektionerPRO

Utöka Tailwinds funktionalitet genom att skriva anpassade pluginer som lägger till nya utilities, komponenter och varianter. Lär er plugin-API:et för att kapsla in återanvändbar stil-logik och dela d…

  1. 1Tailwinds plugin-API
  2. 2Lägg till anpassade verktyg via en plugin
  3. 3Lägg till anpassade varianter via en plugin
  4. +1 till
Börja lära dig gratisLås upp med PRO
25

B24 lektionerPRO

Bygg UI-komponenter som uppfyller WCAG:s tillgänglighetsstandarder med Tailwind-utilities för färgkontrast, fokushantering och stöd för skärmläsare. Skriv HTML-struktur och Tailwind-stilar som funger…

  1. 1Färgkontrast och läsbar text
  2. 2Fokusindikatorer och tangentbordsnavigering
  3. 3ARIA-attribut och skärmläsare
  4. +1 till
Börja lära dig gratisLås upp med PRO
26

B24 lektionerPRO

Tillämpa professionell bästa praxis för att leverera Tailwind CSS i produktionsapplikationer. Lär er granska bundlar, strategier för klassorganisation, lintning och tekniker för prestandaoptimering s…

  1. 1Granska er CSS-utdata
  2. 2Klassortering och Prettier-plugin
  3. 3Linting av Tailwind med ESLint
  4. +1 till
Börja lära dig gratisLås upp med PRO
27

B24 lektionerPRO

Tillämpa allt ni har lärt er hittills för att från grunden bygga en komplett och responsiv landningssida för marknadsföring med enbart Tailwind CSS. Gå igenom sektioner för hero, funktioner, kundomdö…

  1. 1Hero- och navigeringssektion
  2. 2Sektioner för funktioner och sociala bevis
  3. 3Sektion med pristabell
  4. +1 till
Börja lära dig gratisLås upp med PRO
28

B24 lektionerPRO

Skapa ett komplett gränssnitt för en admin-dashboard med Tailwind CSS. Bygg en sidebar, ett toppfält, statistikkort, datatabeller och platshållarwidgets för diagram i en enhetlig och responsiv layout.

  1. 1Dashboardskal och sidofält
  2. 2Övre fält och brödsmulor
  3. 3Statistikkort och KPI-widgetar
  4. +1 till
Börja lära dig gratisLås upp med PRO
29

B24 lektionerPRO

Utforska hur Tailwind passar in i bredare strategier för CSS-arkitektur i storskaliga projekt. Lär er organisera filer, strukturera komponentlager och samexistera med äldre CSS eller andra stylingver…

  1. 1Fil- och mapporganisation
  2. 2Samexistera med äldre CSS
  3. 3CSS Modules och Tailwind
  4. +1 till
Börja lära dig gratisLås upp med PRO
30

B24 lektionerPRO

Samla alla färdigheter från det här spåret för att bygga ett komplett Tailwind-baserat designsystem. Definiera tokens, bygg ett komponentbibliotek, skriv en plugin och dokumentera systemet för teamet…

  1. 1Planera designsystemet
  2. 2Bygg token- och konfigurationslagret
  3. 3Bygg komponentbiblioteket
  4. +1 till
Börja lära dig gratisLås upp med PRO
CoddyKit PRO

Lås upp alla 30 kurser i den här lärvägen och alla andra lärvägar

AI-handledare, certifieringsprov och certifikat. Fungerar på webben, iOS och Android.

Se alla abonnemang
Årsvis$29.90 / årCirka $2.49 i månadenBetala en gångLivstid$69.99 en gångInga förnyelser. PRO för alltid.
Kursöversikt

Bemästra Tailwind CSS

Bemästra det utility-baserade CSS-ramverk som OpenAI, Vercel och Shopify förlitar sig på. Lär er alla utilities, responsiv design, mörkt läge, animationer och optimering för produktion. Det här spåret omfattar 30 progressiva minikurser från nybörjarnivå (A1) till avancerad nivå (B2), med korta, fokuserade lektioner och snabba kunskapstest som hjälper er att befästa varje koncept.

Det här får ni lära er

Ni börjar med grunderna och bygger vidare med ämnen på medel- och avancerad nivå, där varje kurs bygger på den föregående. Varje lektion är praktiskt inriktad, med verkliga exempel och en AI-handledare som finns till hands när ni behöver hjälp.

Så fungerar det

Varje kurs är uppdelad i fyra fokuserade lektioner. Genomför några lektioner om dagen så behärskar ni hela spåret på veckor i stället för månader.

Verktyg

Öva med AI – läs inte bara

Ta lärandet till nästa nivå med AI-drivna verktyg och funktioner

AI-chattChatta med AI-handledarenStäll en superfrågaFå svar på expertnivåPROSkapa lektionAI-driven lektionsskaparePROPåbörja certifieringsprovetFå ditt certifikatPROStarta utmaningTesta dina kunskaper

Så lär du dig

  1. 01

    Interaktiva lektioner

    Praktiska kodövningar med feedback i realtid

  2. 02

    AI-handledare

    Få omedelbar hjälp av vår AI när du kör fast

  3. 03

    Inbyggd kodredigerare

    Skriv och kör kod direkt i webbläsaren

  4. 04

    Certifikat

    Få ett certifikat när du slutför kursen

Fortsätt utforska

Relaterade lärvägar

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

Vanliga frågor

Är kursen i Tailwind CSS Academy gratis?

Ja. Ni kan börja kursen i Tailwind CSS Academy gratis och genomföra de interaktiva lektionerna utan kostnad. Med en valfri PRO-prenumeration får Ni tillgång till avancerade AI-verktyg och ett certifikat som kan delas.

Behöver jag tidigare erfarenhet för att lära mig HTML?

Nej. Kursen börjar med grunderna och går stegvis vidare till mer avancerade ämnen, så Ni kan börja även utan tidigare erfarenhet av HTML.

Hur lär jag mig HTML på CoddyKit?

Ni lär Er genom att göra. Korta interaktiva lektioner kombinerar tydliga förklaringar med praktiska kodövningar som körs i realtid, och en AI-handledare som är tillgänglig dygnet runt ger personlig hjälp när Ni kör fast.

Får jag ett certifikat när jag har slutfört Tailwind CSS Academy?

Ja. PRO-användare kan göra ett prov och få ett delbart intyg på att de har slutfört kursen i Tailwind CSS Academy, med en verifierbar kod.

Kan jag lära mig HTML i mobilen?

Ja. CoddyKit finns på webben och som inbyggda iOS- och Android-appar, så Ni kan lära Er HTML på valfri enhet och synkronisera Era framsteg mellan dem.

Vad kostar CoddyKit PRO?

Den första kursen i Tailwind CSS Academy är gratis. CoddyKit PRO låser upp alla kurser: $5.90 per vecka, $7.90 per månad, $29.90 per år eller $69.99 en gång för livstidsåtkomst utan förnyelser.

Hur lång tid tar det att slutföra Tailwind CSS Academy?

Tailwind CSS Academy har 30 kurser och 120 lektioner. De flesta lektioner tar cirka 5–10 minuter, så hela lärvägen motsvarar ungefär 14 timmars praktisk övning i egen takt.

Börja med Tailwind CSS Academy nu

Anslut Er till tusentals deltagare som lär sig programmering med AI-drivna lektioner.

Börja lära dig gratisBläddra bland alla kurser