Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Leer Uitdaging: Responsieve Lay-outs in de Praktijk | Responsiviteit en Aanpassing
Tailwind CSS voor Webontwikkeling

bookUitdaging: Responsieve Lay-outs in de Praktijk

Opdracht

Vul de meegeleverde HTML-structuur aan door de ontbrekende Tailwind CSS-klassen in te vullen volgens de opgegeven layouteisen.

  • De container moet padding hebben die verandert bij verschillende breakpoints;
    • Standaard padding: p-4;
    • Bij sm breakpoint: p-6;
    • Bij md breakpoint: p-8;
    • Bij lg breakpoint: p-10;
    • Bij xl breakpoint: p-12.
  • De tekst moet verschillende kleuren en groottes hebben bij verschillende breakpoints.
    • Standaard tekstgrootte: text-base, kleur: text-gray-700;
    • Bij sm breakpoint: text-lg, kleur: text-gray-600;
    • Bij md breakpoint: text-xl, kleur: text-gray-500;
    • Bij lg breakpoint: text-2xl, kleur: text-gray-400;
    • Bij xl breakpoint: text-3xl, kleur: text-gray-300.
index.html

index.html

copy
  • Voor de container, gebruik p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
  • Voor de tekst, gebruik text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl text-gray-700 sm:text-gray-600 md:text-gray-500 lg:text-gray-400 xl:text-gray-300.
index.html

index.html

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 5. Hoofdstuk 2

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Suggested prompts:

Can you show me where to place these Tailwind classes in the HTML structure?

Do you have a specific element in the HTML that should use these classes?

Would you like an example of the completed HTML structure with the required Tailwind classes?

Awesome!

Completion rate improved to 3.57

bookUitdaging: Responsieve Lay-outs in de Praktijk

Veeg om het menu te tonen

Opdracht

Vul de meegeleverde HTML-structuur aan door de ontbrekende Tailwind CSS-klassen in te vullen volgens de opgegeven layouteisen.

  • De container moet padding hebben die verandert bij verschillende breakpoints;
    • Standaard padding: p-4;
    • Bij sm breakpoint: p-6;
    • Bij md breakpoint: p-8;
    • Bij lg breakpoint: p-10;
    • Bij xl breakpoint: p-12.
  • De tekst moet verschillende kleuren en groottes hebben bij verschillende breakpoints.
    • Standaard tekstgrootte: text-base, kleur: text-gray-700;
    • Bij sm breakpoint: text-lg, kleur: text-gray-600;
    • Bij md breakpoint: text-xl, kleur: text-gray-500;
    • Bij lg breakpoint: text-2xl, kleur: text-gray-400;
    • Bij xl breakpoint: text-3xl, kleur: text-gray-300.
index.html

index.html

copy
  • Voor de container, gebruik p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
  • Voor de tekst, gebruik text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl text-gray-700 sm:text-gray-600 md:text-gray-500 lg:text-gray-400 xl:text-gray-300.
index.html

index.html

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 5. Hoofdstuk 2
some-alt