PricingLoginStart free
Tailwind CSS Academy logo
HTMLWebNiveaus A1 → B222 talen

Tailwind CSS Academy

Beheers het utility-first CSS-framework dat wordt gebruikt door OpenAI, Vercel en Shopify. Leer elke utility, responsive design, de donkere modus, animaties en optimalisatie voor productie. Een CoddyKit-leertraject met 30 korte cursussen en 120 interactieve lessen, met een AI-tutor die 24/7 voor je klaarstaat.

Cursussen
30
Lessen
120
Interactieve stappen
1,559
Gratis beginnen
Cursus 1
Lesprogramma

30 cursussen in dit leertraject

Elke cursus in het leertraject Tailwind CSS Academy, in de juiste leer volgorde. De eerste is gratis.

1

A14 lessenGratis

Ontdek de utility-firstfilosofie achter Tailwind CSS en begrijp waarin deze verschilt van traditionele CSS-frameworks zoals Bootstrap. Leer Tailwind in een project configureren en schrijf uw eerste g…

  1. 1Utility-first CSS uitgelegd
  2. 2Tailwind installeren en configureren
  3. 3Uw eerste Tailwind-pagina
  4. +1 meer
Gratis beginnen met leren
2

A14 lessenPRO

Beheers de uitgebreide set typografieutilities van Tailwind om lettergroottes, gewichten, regelhoogtes, letterspatiëring en tekstuitlijning te regelen. Leer leesbare en visueel aantrekkelijke tekst t…

  1. 1Tekengrootte en tekengewicht
  2. 2Tekstkleur en transparantie
  3. 3Regelhoogte en letterspatiëring
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
3

A14 lessenPRO

Verken het uitgebreide kleurenpalet van Tailwind en leer achtergrondkleuren, gradients en achtergrondafbeeldingen toe te passen. Begrijp hoe u opacity-modifiers gebruikt en visueel rijke oppervlakken…

  1. 1Het kleurenpalet van Tailwind
  2. 2Achtergrondverlopen
  3. 3Transparantie- en kleurmodifiers
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
4

A14 lessenPRO

Leer de consistente spacingschaal van Tailwind om margin en padding aan elk element toe te voegen. Begrijp shortcuts voor richtingen en negatieve margins om de layout nauwkeurig te regelen.

  1. 1De Tailwind-spatiëringsschaal
  2. 2Padding-utilities
  3. 3Margin-utilities en automatische marges
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
5

A14 lessenPRO

Pas CSS Flexbox-layouts toe met de flexutilities van Tailwind zonder één regel custom CSS te schrijven. Bouw horizontale en verticale layouts, regel de uitlijning en beheer wrapping moeiteloos.

  1. 1Flex en richting inschakelen
  2. 2Content rechtvaardigen en items uitlijnen
  3. 3Flex-groei, -krimp en -basis
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
6

A24 lessenPRO

Gebruik CSS Grid via de gridutilities van Tailwind om complexe tweedimensionale layouts te bouwen. Definieer kolommen, rijen en gebieden met eenvoudige class names en regel de plaatsing van items nau…

  1. 1Gridkolommen definiëren
  2. 2Kolommen en rijen overspannen
  3. 3Gridrijen en automatische plaatsing
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
7

A24 lessenPRO

Regel de afmetingen van elementen met de utilities van Tailwind voor width, height, min/max-beperkingen en aspect ratio. Bouw vol vertrouwen responsive en componenten met vaste afmetingen.

  1. 1Breedte-utilities
  2. 2Hoogte-utilities
  3. 3Minimale en maximale beperkingen
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
8

A24 lessenPRO

Geef randen en diepte aan elementen met de border- en shadowutilities van Tailwind. Leer afgeronde hoeken toe te voegen, de randdikte en -kleur te regelen en box shadows toe te passen voor meer diept…

  1. 1Randdikte en randkleur
  2. 2Randradius en afgeronde hoeken
  3. 3Slagschaduwen
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
9

A24 lessenPRO

Voeg interactiviteit toe aan uw UI door stijlen voorwaardelijk toe te passen bij hover, focus, active, disabled en andere pseudo-states. Leer het variant-prefixsysteem van Tailwind om elke interactie…

  1. 1Hover- en active-varianten
  2. 2Focus- en focus-visible-varianten
  3. 3Disabled- en placeholder-varianten
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
10

A24 lessenPRO

Bouw layouts die zich aan elk schermformaat aanpassen met de mobile-first responsive breakpoints van Tailwind. Pas verschillende utility classes toe bij specifieke viewportbreedtes voor echt responsi…

  1. 1Het breakpoint-systeem van Tailwind
  2. 2Responsieve lay-outs met Flex en Grid
  3. 3Responsieve typografie en spatiëring
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
11

B14 lessenPRO

Implementeer dark mode in uw webapps met de ingebouwde dark-variant van Tailwind. Leer het verschil tussen de class- en mediastrategie en bouw UI-componenten die er goed uitzien in zowel lichte als d…

  1. 1Strategieën voor de donkere modus
  2. 2Dark-varianten toepassen
  3. 3Een dark-mode-toggle bouwen
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
12

B14 lessenPRO

Benut de volledige kracht van Tailwind door het bestand tailwind.config.js te beheersen. Leer het standaardthema uit te breiden, aangepaste waarden toe te voegen, contentpaden te configureren en plug…

  1. 1Anatomie van tailwind.config.js
  2. 2Contentpaden en purging
  3. 3Het theme uitbreiden versus overschrijven
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
13

B14 lessenPRO

Stem Tailwind af op uw merk door aangepaste kleuren toe te voegen, Google Fonts te integreren en een aangepaste spacingschaal te definiëren. Bouw een projectspecifieke designtaal die toch alle utilit…

  1. 1Aangepaste kleuren toevoegen
  2. 2Aangepaste fontfamilies
  3. 3Aangepaste spatiëringswaarden
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
14

B14 lessenPRO

Leer wanneer en hoe u de @apply-directive van Tailwind gebruikt om herhaalde utilitypatronen te extraheren naar herbruikbare CSS-classes. Vind een balans tussen de utility-firstaanpak en onderhoudbar…

  1. 1Wat @apply doet en wanneer u het gebruikt
  2. 2Herbruikbare componentclasses maken
  3. 3Aangepaste CSS organiseren met layers
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
15

B14 lessenPRO

Voeg vloeiende beweging toe aan uw UI met de ingebouwde transition- en animationutilities van Tailwind. Leer duration, easing en delay te regelen en keyframe-animaties toe te passen voor boeiende geb…

  1. 1Transition-utilities
  2. 2Duur en easing
  3. 3Ingebouwde keyframe-animaties
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
16

B14 lessenPRO

Bouw verzorgde, herbruikbare UI-primitives met utility classes van Tailwind. Leer standaardpatronen voor buttons met varianten, cards met headers en footers en kleine informatieve badges.

  1. 1Buttonvarianten en -statussen
  2. 2Patronen voor cardcomponenten
  3. 3Badge- en tagcomponenten
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
17

B14 lessenPRO

Bouw responsive navigatiebalken en inklapbare sidebars met utilities van Tailwind. Leer mobiele hamburgermenu's af te handelen en sticky navigatie te maken die zichtbaar blijft tijdens het scrollen.

  1. 1Een responsieve navbar bouwen
  2. 2Sticky en vaste navigatie
  3. 3Verticale sidebarindeling
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
18

B14 lessenPRO

Style toegankelijke en aantrekkelijke formulierelementen met utilities van Tailwind. Leer tekstvelden, selects, checkboxes, radio buttons en complete formlayouts met validatiestates te maken.

  1. 1Tekstinvoervelden en textareas opmaken
  2. 2Selectiemenu's en checkboxen
  3. 3Patronen voor formulierindelingen
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
19

B14 lessenPRO

Bouw overlaypatronen zoals modals, dialogs en dropdownmenu's met Tailwind en minimale JavaScript. Leer positionering, z-index-stacking en vloeiende open- en sluittransities.

  1. 1Structuur van een modal dialoogvenster
  2. 2Openings- en sluitanimatie van een modal
  3. 3Dropdownmenucomponent
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
20

B14 lessenPRO

Begrijp de Just-In-Time-engine van Tailwind en hoe deze alleen de CSS genereert die u gebruikt. Leer uw productie-bundle te optimaliseren, de outputgrootte te analyseren en classes te schrijven die d…

  1. 1Hoe de JIT-engine werkt
  2. 2Dynamische classes op de safelist zetten
  3. 3Bundelgrootte analyseren en verkleinen
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
21

B24 lessenPRO

Zet een robuust systeem van designtokens op in de configuratie van Tailwind voor consistente thematisering van meerdere merken. Koppel primitieve tokens aan semantische tokens en bouw een schaalbare…

  1. 1Primitieve versus semantische tokens
  2. 2Thematisering op basis van CSS-variabelen
  3. 3Strategie voor thematisering van meerdere merken
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
22

B24 lessenPRO

Integreer Tailwind CSS in React- en Next.js-applicaties met de officiële setup. Leer best practices voor het toepassen van utilities in JSX, het beheren van conditionele classes en het organiseren va…

  1. 1Tailwind instellen in Next.js
  2. 2Voorwaardelijke classes in React
  3. 3Componentvarianten met CVA
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
23

B24 lessenPRO

Combineer Tailwind CSS met Headless UI om volledig toegankelijke, ongestileerde componenten te bouwen. Pas uw eigen Tailwind-classes toe op menus, dialogs, comboboxes en transities, met behoud van ro…

  1. 1Introductie tot Headless UI
  2. 2Headless Menu en Dropdown opmaken
  3. 3Toegankelijke dialogen bouwen
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
24

B24 lessenPRO

Breid de functionaliteit van Tailwind uit door custom plugins te schrijven die nieuwe utilities, componenten en varianten toevoegen. Leer de plugin-API om herbruikbare stijl логica in te kapselen en…

  1. 1De Plugin-API van Tailwind
  2. 2Aangepaste utilities toevoegen via een plugin
  3. 3Aangepaste varianten toevoegen via een plugin
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
25

B24 lessenPRO

Bouw UI-componenten die voldoen aan de toegankelijkheidsstandaarden van WCAG met Tailwind-utilities voor kleurcontrast, focusbeheer en ondersteuning van screenreaders. Schrijf HTML-structuren en Tail…

  1. 1Kleurcontrast en leesbare tekst
  2. 2Focusindicatoren en toetsenbordnavigatie
  3. 3ARIA-attributen en schermlezers
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
26

B24 lessenPRO

Pas professionele best practices toe voor het uitrollen van Tailwind CSS in productieapplicaties. Leer bundelaudits, strategieën voor classorganisatie, linting en technieken voor performanceoptimalis…

  1. 1Uw CSS-output controleren
  2. 2Classes sorteren en de Prettier-plugin
  3. 3Tailwind linten met ESLint
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
27

B24 lessenPRO

Pas alles wat u tot nu toe hebt geleerd toe om vanaf nul een complete, responsive marketinglandingspagina te bouwen met alleen Tailwind CSS. Behandel hero-, feature-, testimonial-, pricing- en footer…

  1. 1Hero- en navigatiesectie
  2. 2Secties voor functies en social proof
  3. 3Sectie met een prijstabel
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
28

B24 lessenPRO

Bouw een volledig uitgeruste admin-dashboardinterface met Tailwind CSS. Maak een sidebar, topbar, stat cards, datatabellen en placeholder-widgets voor grafieken in een samenhangende, responsive layou…

  1. 1Dashboardstructuur en sidebar
  2. 2Topbalk en broodkruimelnavigatie
  3. 3Statistiekkaarten en KPI-widgets
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
29

B24 lessenPRO

Verken hoe Tailwind past binnen bredere strategieën voor CSS-architectuur in grootschalige projecten. Leer bestanden te organiseren, componentlagen te structureren en samen te werken met legacy-CSS o…

  1. 1Organisatie van bestanden en mappen
  2. 2Samenwerken met legacy-CSS
  3. 3CSS Modules en Tailwind
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
30

B24 lessenPRO

Breng alle vaardigheden uit deze track samen om een compleet op Tailwind gebaseerd designsysteem te bouwen. Definieer tokens, bouw een componentbibliotheek, schrijf een plugin en documenteer het syst…

  1. 1Het designsysteem plannen
  2. 2De token- en configuratielaag bouwen
  3. 3Een componentbibliotheek bouwen
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
CoddyKit PRO

Ontgrendel alle 30 cursussen in dit leertraject en in elk ander leertraject

AI-begeleider, certificeringsexamen en certificaat. Werkt op het web, iOS en Android.

Alle abonnementen bekijken
Jaarlijks$29.90 per jaarOngeveer $2.49 per maandEenmalig betalenLevenslang$69.99 eenmaligGeen verlengingen. PRO voor altijd.
Cursusoverzicht

Tailwind CSS beheersen

Beheers het utility-first CSS-framework dat wordt gebruikt door OpenAI, Vercel en Shopify. Leer elke utility, responsive design, de donkere modus, animaties en optimalisatie voor productie. Dit leertraject omvat 30 oplopende minicursussen, van absolute beginner (A1) tot gevorderd (B2), met korte, gerichte lessen en snelle quizzen om elk concept goed te verankeren.

Wat je leert

Je begint met de basis en werkt toe naar onderwerpen op gemiddeld en gevorderd niveau, waarbij elke cursus voortbouwt op de vorige. Elke les is praktisch, met echte voorbeelden en een AI-begeleider die beschikbaar is wanneer je hulp nodig hebt.

Hoe het werkt

Elke cursus is verdeeld in vier gerichte lessen. Volg elke dag een paar lessen en je beheerst het volledige leertraject in weken, niet in maanden.

Hulpmiddelen

Oefen met AI in plaats van alleen te lezen

Geef je leerproces een boost met AI-hulpmiddelen en -functies

AI-chatChat met een AI-docentStel een supervraagKrijg antwoorden op expertniveauPROLes makenAI-gestuurde lessenbouwerPROStart het certificeringsexamenBehaal je certificaatPROStart de uitdagingTest je vaardigheden

Zo leer je

  1. 01

    Interactieve lessen

    Praktische codeeroefeningen met realtime feedback

  2. 02

    AI-docent

    Krijg direct hulp van onze AI als je vastloopt

  3. 03

    Ingebouwde editor

    Schrijf en voer code direct uit in je browser

  4. 04

    Certificaat

    Behaal een certificaat wanneer je de cursus afrondt

Verder ontdekken

Gerelateerde leertrajecten

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

Veelgestelde vragen

Is de Tailwind CSS Academy-cursus gratis?

Ja. Je kunt gratis aan de Tailwind CSS Academy-cursus beginnen en de interactieve lessen kosteloos doorlopen. Met een optioneel PRO-abonnement krijg je toegang tot geavanceerde AI-tools en een deelbaar certificaat.

Heb ik voorafgaande ervaring nodig om HTML te leren?

Nee. De cursus begint bij de basis en behandelt geleidelijk steeds geavanceerdere onderwerpen. Je kunt dus ook zonder eerdere ervaring met HTML beginnen.

Hoe leer ik HTML op CoddyKit?

Je leert door te doen. Korte interactieve lessen combineren een duidelijke uitleg met een praktische codeeroefening die in realtime wordt uitgevoerd. Een AI-begeleider is 24/7 beschikbaar voor persoonlijke hulp wanneer je vastloopt.

Krijg ik een certificaat als ik Tailwind CSS Academy afrond?

Ja. PRO-leerlingen kunnen een examen afleggen en een deelbaar certificaat van voltooiing behalen, met een verifieerbare code voor de Tailwind CSS Academy-cursus.

Kan ik HTML op mijn telefoon leren?

Ja. CoddyKit is beschikbaar op het web en als native iOS- en Android-app, zodat je HTML op elk apparaat kunt leren en je voortgang op al je apparaten wordt gesynchroniseerd.

Wat kost CoddyKit PRO?

De eerste cursus van Tailwind CSS Academy is gratis. Met CoddyKit PRO ontgrendel je elke cursus: $5.90 per week, $7.90 per maand, $29.90 per jaar of eenmalig $69.99 voor levenslange toegang zonder verlengingen.

Hoe lang duurt het om Tailwind CSS Academy te voltooien?

Tailwind CSS Academy bevat 30 cursussen en 120 lessen. De meeste lessen duren ongeveer 5–10 minuten, dus het hele leertraject kost ongeveer 14 uur aan praktische oefeningen, in je eigen tempo.

Begin nu met Tailwind CSS Academy

Sluit je aan bij duizenden leerlingen die met AI-ondersteunde lessen leren programmeren.

Gratis beginnen met lerenBekijk alle cursussen