Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Impara Sfida: Layout Reattivi in Pratica | Reattività e Personalizzazione
Tailwind CSS per lo Sviluppo Web

bookSfida: Layout Reattivi in Pratica

Compito

Completa la struttura HTML fornita inserendo le classi Tailwind CSS mancanti secondo i requisiti di layout indicati.

  • Il contenitore deve avere un padding che varia a seconda dei breakpoint;
    • Padding di default: p-4;
    • Al breakpoint sm: p-6;
    • Al breakpoint md: p-8;
    • Al breakpoint lg: p-10;
    • Al breakpoint xl: p-12.
  • Il testo deve avere colori e dimensioni differenti a seconda dei breakpoint.
    • Dimensione testo di default: text-base, colore: text-gray-700;
    • Al breakpoint sm: text-lg, colore: text-gray-600;
    • Al breakpoint md: text-xl, colore: text-gray-500;
    • Al breakpoint lg: text-2xl, colore: text-gray-400;
    • Al breakpoint xl: text-3xl, colore: text-gray-300.
index.html

index.html

copy
  • Per il contenitore, utilizzare p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
  • Per il testo, utilizzare 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

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 5. Capitolo 2

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

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

bookSfida: Layout Reattivi in Pratica

Scorri per mostrare il menu

Compito

Completa la struttura HTML fornita inserendo le classi Tailwind CSS mancanti secondo i requisiti di layout indicati.

  • Il contenitore deve avere un padding che varia a seconda dei breakpoint;
    • Padding di default: p-4;
    • Al breakpoint sm: p-6;
    • Al breakpoint md: p-8;
    • Al breakpoint lg: p-10;
    • Al breakpoint xl: p-12.
  • Il testo deve avere colori e dimensioni differenti a seconda dei breakpoint.
    • Dimensione testo di default: text-base, colore: text-gray-700;
    • Al breakpoint sm: text-lg, colore: text-gray-600;
    • Al breakpoint md: text-xl, colore: text-gray-500;
    • Al breakpoint lg: text-2xl, colore: text-gray-400;
    • Al breakpoint xl: text-3xl, colore: text-gray-300.
index.html

index.html

copy
  • Per il contenitore, utilizzare p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
  • Per il testo, utilizzare 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

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 5. Capitolo 2
some-alt