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…

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…

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…

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.

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.

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…

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.

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…

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…

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…

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…

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…

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…

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…

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…

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.

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.

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.

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.

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…

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…

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…

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…

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…

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…

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…

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…

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…

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…

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…

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.

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

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.