Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Haaste: Hallitse Väliapuohjelmat | Layoutin Perusteet
Tailwind CSS Verkkokehitykseen

bookHaaste: Hallitse Väliapuohjelmat

Tehtävä

Täydennä annettu HTML-rakenne lisäämällä puuttuvat Tailwind CSS -luokat annettujen välistysvaatimusten mukaisesti.

  • Ensimmäinen div: Lisää 2rem (32px) marginaali kaikille sivuille ja 1rem (16px) täyte kaikille sivuille;
  • Toinen div: Lisää 1rem (16px) yläreunan marginaali ja 2rem (32px) alareunan marginaali. Lisää 0,5rem (8px) täyte kaikille sivuille;
  • Kolmas div: Lisää 1,5rem (24px) oikean reunan marginaali ja 0,75rem (12px) vasemman reunan marginaali. Lisää 1,5rem (24px) täyte kaikille sivuille.
index.html

index.html

copy
  1. Ensimmäiselle div:lle käytä m-8 marginaalille ja p-4 täytteelle.
  2. Toiselle div:lle käytä mt-4 mb-8 marginaalille ja p-2 täytteelle.
  3. Kolmannelle div:lle käytä mr-6 ml-3 marginaalille ja p-6 täytteelle.
index.html

index.html

copy

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 2

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Suggested prompts:

Can you show me the complete HTML structure with the Tailwind classes applied?

Do you need an explanation of how these Tailwind classes correspond to the spacing requirements?

Would you like a brief overview of how Tailwind spacing utilities work?

Awesome!

Completion rate improved to 3.57

bookHaaste: Hallitse Väliapuohjelmat

Pyyhkäise näyttääksesi valikon

Tehtävä

Täydennä annettu HTML-rakenne lisäämällä puuttuvat Tailwind CSS -luokat annettujen välistysvaatimusten mukaisesti.

  • Ensimmäinen div: Lisää 2rem (32px) marginaali kaikille sivuille ja 1rem (16px) täyte kaikille sivuille;
  • Toinen div: Lisää 1rem (16px) yläreunan marginaali ja 2rem (32px) alareunan marginaali. Lisää 0,5rem (8px) täyte kaikille sivuille;
  • Kolmas div: Lisää 1,5rem (24px) oikean reunan marginaali ja 0,75rem (12px) vasemman reunan marginaali. Lisää 1,5rem (24px) täyte kaikille sivuille.
index.html

index.html

copy
  1. Ensimmäiselle div:lle käytä m-8 marginaalille ja p-4 täytteelle.
  2. Toiselle div:lle käytä mt-4 mb-8 marginaalille ja p-2 täytteelle.
  3. Kolmannelle div:lle käytä mr-6 ml-3 marginaalille ja p-6 täytteelle.
index.html

index.html

copy

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 2
some-alt