Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Utmaning: Responsiva Layouter i Praktiken | Responsivitet och Anpassning
Tailwind CSS för webbutveckling

bookUtmaning: Responsiva Layouter i Praktiken

Uppgift

Slutför den tillhandahållna HTML-strukturen genom att fylla i de saknade Tailwind CSS-klasserna enligt de angivna layoutkraven.

  • Behållaren ska ha padding som ändras vid olika brytpunkter;
    • Standardpadding: p-4;
    • Vid sm brytpunkt: p-6;
    • Vid md brytpunkt: p-8;
    • Vid lg brytpunkt: p-10;
    • Vid xl brytpunkt: p-12.
  • Texten ska ha olika färger och storlekar vid olika brytpunkter.
    • Standard textstorlek: text-base, färg: text-gray-700;
    • Vid sm brytpunkt: text-lg, färg: text-gray-600;
    • Vid md brytpunkt: text-xl, färg: text-gray-500;
    • Vid lg brytpunkt: text-2xl, färg: text-gray-400;
    • Vid xl brytpunkt: text-3xl, färg: text-gray-300.
index.html

index.html

copy
  • För containern, använd p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
  • För texten, använd 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

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 5. Kapitel 2

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Awesome!

Completion rate improved to 3.57

bookUtmaning: Responsiva Layouter i Praktiken

Svep för att visa menyn

Uppgift

Slutför den tillhandahållna HTML-strukturen genom att fylla i de saknade Tailwind CSS-klasserna enligt de angivna layoutkraven.

  • Behållaren ska ha padding som ändras vid olika brytpunkter;
    • Standardpadding: p-4;
    • Vid sm brytpunkt: p-6;
    • Vid md brytpunkt: p-8;
    • Vid lg brytpunkt: p-10;
    • Vid xl brytpunkt: p-12.
  • Texten ska ha olika färger och storlekar vid olika brytpunkter.
    • Standard textstorlek: text-base, färg: text-gray-700;
    • Vid sm brytpunkt: text-lg, färg: text-gray-600;
    • Vid md brytpunkt: text-xl, färg: text-gray-500;
    • Vid lg brytpunkt: text-2xl, färg: text-gray-400;
    • Vid xl brytpunkt: text-3xl, färg: text-gray-300.
index.html

index.html

copy
  • För containern, använd p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
  • För texten, använd 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

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 5. Kapitel 2
some-alt