Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Haaste: Responsiiviset Asettelut Käytännössä | Responsiivisuus ja Mukauttaminen
Tailwind CSS Verkkokehitykseen

bookHaaste: Responsiiviset Asettelut Käytännössä

Tehtävä

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

  • Säiliöllä tulee olla eri taukoarvot eri näyttöleveyksillä;
    • Oletus: p-4;
    • sm-katkaisukohdassa: p-6;
    • md-katkaisukohdassa: p-8;
    • lg-katkaisukohdassa: p-10;
    • xl-katkaisukohdassa: p-12.
  • Tekstillä tulee olla eri värit ja koot eri näyttöleveyksillä.
    • Oletustekstikoko: text-base, väri: text-gray-700;
    • sm-katkaisukohdassa: text-lg, väri: text-gray-600;
    • md-katkaisukohdassa: text-xl, väri: text-gray-500;
    • lg-katkaisukohdassa: text-2xl, väri: text-gray-400;
    • xl-katkaisukohdassa: text-3xl, väri: text-gray-300.
index.html

index.html

copy
  • Säiliölle käytä p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
  • Tekstille käytä 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

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 5. Luku 2

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

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

Awesome!

Completion rate improved to 3.57

bookHaaste: Responsiiviset Asettelut Käytännössä

Pyyhkäise näyttääksesi valikon

Tehtävä

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

  • Säiliöllä tulee olla eri taukoarvot eri näyttöleveyksillä;
    • Oletus: p-4;
    • sm-katkaisukohdassa: p-6;
    • md-katkaisukohdassa: p-8;
    • lg-katkaisukohdassa: p-10;
    • xl-katkaisukohdassa: p-12.
  • Tekstillä tulee olla eri värit ja koot eri näyttöleveyksillä.
    • Oletustekstikoko: text-base, väri: text-gray-700;
    • sm-katkaisukohdassa: text-lg, väri: text-gray-600;
    • md-katkaisukohdassa: text-xl, väri: text-gray-500;
    • lg-katkaisukohdassa: text-2xl, väri: text-gray-400;
    • xl-katkaisukohdassa: text-3xl, väri: text-gray-300.
index.html

index.html

copy
  • Säiliölle käytä p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
  • Tekstille käytä 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

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 5. Luku 2
some-alt