Zadanie końcowe – Moduł 4 – Estetyka i animacje

Zadanie praktyczne – Moduł 4: Estetyka i animacje

🧑‍💻 Twoim zadaniem jest stworzenie estetycznego, nowoczesnego komponentu, który połączy wszystkie najważniejsze rzeczy, których nauczyłeś się w tym module.

Co ma się znaleźć w Twoim układzie?

• ✅ Karta (blok) z tekstem i tłem,
• ✅ Nagłówek z wyraźnym stylem,
• ✅ Przycisk z animacją,
• ✅ Responsywny układ – dobrze wygląda zarówno na telefonie, jak i desktopie.

🛠️ Krok po kroku – jak wykonać to zadanie?

1.  Stwórz strukturę HTML: <div class="card">, wewnątrz niej <h2>, <p> i <button>.
2.  W CSS:
   • Dodaj box-shadow i border-radius do karty,
   • Dodaj transition do przycisku (np. zmiana koloru lub powiększenie przy :hover),
   • Zastosuj @keyframes – np. do animacji wejścia karty (fade in lub slide in).
3.  Dodaj Media Queries, np. @media (min-width: 768px), aby:
   • Zmienić padding/marginesy,
   • Zwiększyć czcionki,
   • Wycentrować element na większych ekranach.

🔁 Co możesz powtórzyć z lekcji?

Jeśli utkniesz – wróć do:

• ➡️ Lekcji o transition i @keyframes (punkt 4.1),
• ➡️ Stylizacji kart i przycisków z box-shadow i border-radius (punkt 4.2),
• ➡️ Tworzenia layoutu mobilnego z Media Queries (punkt 4.3).

💡 Dodatkowe wskazówki:

• Nie komplikuj – postaw na czytelność i lekkość.
• Użyj klas – nie styluj elementów „na sztywno”.
• Skorzystaj z JSFiddle lub CodePen, by łatwo podejrzeć efekty działania.

🎯 Cel zadania

✅ Pokaż, że potrafisz połączyć animacje, estetykę i responsywność w jednym komponencie.
✅ Udowodnij, że rozumiesz nie tylko składnię CSS, ale też jego praktyczne zastosowanie.
✅ Przygotuj się do tworzenia nowoczesnych interfejsów, które będą wyglądały dobrze na każdym urządzeniu.

Powodzenia! 💪 To zadanie to Twój ostatni krok przed quizem końcowym!