www-2324

Opis

Na dzisiejszym laboratorium naszym celem będzie wystylizowanie strony internetowej z poprzedniego zadania za pomocą Tailwind CSS.

Wymagania

Zadania podstawowe, każde z nich jest dość proste:

  1. Zainstaluj Tailwind CSS w projekcie. To nie jest proste zadanie. Zainstaluj npm oraz npx, a następnie postępuj zgodnie z instrukcjami na stronie Tailwind CSS (sekcja “Tailwind CLI”).
    • podpunkt ten może wydawać się niepotrzebny, ale jest to ważne ćwiczenie, które pozwoli Ci nauczyć się korzystać z narzędzi, które są niezbędne w pracy z technologiami webowymi.
  2. Użyj klas typu text-sky-500 do zmiany koloru tekstu. Dodaj na stronie przynajmniej 3 różne kolory tekstu, niech kolory linków będą różne od kolorów tekstu zwykłego. Możesz skorzystać z https://tailwindcss.com/docs/text-color.
  3. Użyj klas typu bg-sky-500 do zmiany koloru tła. Dodaj na stronie przynajmniej 3 różne kolory tła. Możesz skorzystać z https://tailwindcss.com/docs/background-color.
  4. Zademonstruj użycie efektu tła (shadow): https://tailwindcss.com/docs/box-shadow
  5. Użyj efektu table-auto do stylizacji tabeli. Możesz skorzystać z https://tailwindcss.com/docs/table-layout.
  6. Dodaj animate-ping do jednego z elementów na stronie. Możesz skorzystać z https://tailwindcss.com/docs/animation.

Zadania średnio zaawansowane:

  1. (opcjonalne, ale polecane) skonfiguruj Visual Studio Code do pracy z Tailwind CSS. Możesz skorzystać z https://tailwindcss.com/docs/editor-setup.
  2. Zademonstruj różnicę pomiędzy flex-row a flex-col. Możesz skorzystać z https://tailwindcss.com/docs/flex-direction.
  3. Zademonstruj użycie flex-auto do stylizacji elementów. Możesz skorzystać z https://tailwindcss.com/docs/flex#auto.
  4. Podobnie zademonstruj użycie flex-none. Możesz skorzystać z https://tailwindcss.com/docs/flex#none.

Zadanie zaawansowane:

  1. Użyj PostCSS do minifikacji plików CSS. Możesz skorzystać z https://tailwindcss.com/docs/optimizing-for-production.
  2. (opcjonalne, da się ale nie sprawdzamy) narysuj gwiazdkę z nieba, taką pięcioramienną, za pomocą SVG. Poniżej przykładowa gwiazdka.
    • lab3-gwiazdka
    • (hint) https://play.tailwindcss.com

Przydatne linki