Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Learn Challenge: Responsive Layouts in Practice | Responsiveness and Customization
Tailwind CSS for Web Development

bookChallenge: Responsive Layouts in Practice

Task

Complete the provided HTML structure by filling in the missing Tailwind CSS classes according to the given layout requirements.

  • The container should have padding that changes at different breakpoints;
    • Default padding: p-4;
    • At sm breakpoint: p-6;
    • At md breakpoint: p-8;
    • At lg breakpoint: p-10;
    • At xl breakpoint: p-12.
  • The text should have different colors and sizes at different breakpoints.
    • Default text size: text-base, color: text-gray-700;
    • At sm breakpoint: text-lg, color: text-gray-600;
    • At md breakpoint: text-xl, color: text-gray-500;
    • At lg breakpoint: text-2xl, color: text-gray-400;
    • At xl breakpoint: text-3xl, color: text-gray-300.
index.html

index.html

copy
  • For the container, use p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
  • For the text, use 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

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 5. ChapterΒ 2

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

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

bookChallenge: Responsive Layouts in Practice

Swipe to show menu

Task

Complete the provided HTML structure by filling in the missing Tailwind CSS classes according to the given layout requirements.

  • The container should have padding that changes at different breakpoints;
    • Default padding: p-4;
    • At sm breakpoint: p-6;
    • At md breakpoint: p-8;
    • At lg breakpoint: p-10;
    • At xl breakpoint: p-12.
  • The text should have different colors and sizes at different breakpoints.
    • Default text size: text-base, color: text-gray-700;
    • At sm breakpoint: text-lg, color: text-gray-600;
    • At md breakpoint: text-xl, color: text-gray-500;
    • At lg breakpoint: text-2xl, color: text-gray-400;
    • At xl breakpoint: text-3xl, color: text-gray-300.
index.html

index.html

copy
  • For the container, use p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
  • For the text, use 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

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 5. ChapterΒ 2
some-alt