Zadanie końcowe – Moduł 3 – Nowoczesny CSS

Zadanie praktyczne – Moduł 3 – Nowoczesny CSS

Gratulacje! Dotarłeś do końca trzeciego modułu, w którym poznałeś najważniejsze narzędzia nowoczesnego CSS – od Flexboxa i Grida, przez zmienne, po responsywne skalowanie i podejście mobile first.

Teraz czas sprawdzić swoją wiedzę w praktyce. Nie chodzi o stworzenie czegoś ogromnego – to będzie prosta, ale funkcjonalna i nowocześnie zakodowana sekcja, dzięki której zobaczysz, jak łączą się wszystkie elementy poznane w tym module.

📌 Cel zadania:

Zaprojektuj responsywną sekcję z trzema kartami, które będą dopasowywać się do różnych szerokości ekranu. Karty powinny być czytelne, elastyczne i atrakcyjne wizualnie – bez użycia żadnych zewnętrznych bibliotek.

🛠️ Co dokładnie masz zrobić:

1. Stwórz sekcję zawierającą 3 karty. Każda karta powinna zawierać:
   • nagłówek (np. tytuł oferty lub sekcji),
   • krótki tekst opisu,
   • przycisk z działaniem (może to być np. „Dowiedz się więcej”).
2. Użyj Flexboxa lub CSS Grida do ułożenia kart:
   • Na ekranach mobilnych (poniżej 768px): karty wyświetlaj jedna pod drugą.
   • Na tabletach (768px–1023px): wyświetl dwie obok siebie, jedną pod spodem.
   • Na dużych ekranach (1024px i więcej): karty powinny być obok siebie w jednym rzędzie.
3. Zdefiniuj zmienne CSS w :root i użyj ich do określenia:
   • kolorów tła,
   • kolorów tekstu,
   • paddingu wewnętrznego lub zaokrąglenia narożników.
4. Dodaj pseudo-klasę :hover do przycisku – np. niech zmienia się kolor tła lub cień po najechaniu.
5. Zastosuj clamp() przy ustalaniu rozmiaru nagłówka lub paddingów – tak, aby te wartości dopasowywały się płynnie do szerokości przeglądarki.

💡 Wskazówki:

• Nie musisz budować całej strony – wystarczy tylko sekcja z trzema kartami.
• Wybierz Flexbox, jeśli chcesz prostszą strukturę – np. dla rzędów. Wybierz Grid, jeśli wolisz podział na kolumny i chcesz lepiej kontrolować układ.
• Skorzystaj z clamp() np. przy font-size lub padding, żeby zobaczyć, jak te wartości reagują na szerokość okna.
• Użyj zmiennych CSS nie tylko dla kolorów – możesz spróbować też z odstępami (np. --space-md).

🧠 Nie pamiętasz, jak coś zrobić?

Nie szkodzi! To naturalne. Ten projekt ma pomóc Ci utrwalić materiał – nie testować Cię z pamięci.
Jeśli czegoś nie pamiętasz, po prostu cofnij się do konkretnej lekcji w tym module:

• Flexbox i Grid – układy responsywne,
• Zmienne CSS – organizacja i ich użycie,
• Media queries i podejście mobile first – skalowanie layoutów,
• Funkcja clamp() – dynamiczne rozmiary bez media queries,
• Pseudo-klasy – efekty interakcji (np. hover).

🔍 Jak przetestować projekt?

Najlepiej użyj JSFiddle, CodePen lub własnego edytora. Przetestuj swój projekt, zmniejszając i zwiększając szerokość okna przeglądarki. Sprawdź, czy wszystko działa tak, jak powinno:

• czy układ się zmienia zgodnie z wymaganiami,
• czy kolory, odstępy i fonty są czytelne,
• czy efekt hover działa na przycisku,
• czy zastosowane są zmienne i funkcje responsywne.

✅ Gotowe?

Jeśli wszystko działa – świetnie! Jeśli nie – popraw, przetestuj i dopracuj.
To doskonała okazja, by poćwiczyć świadome projektowanie kodu i utrwalić nowoczesne podejście do stylowania.
Gdy będziesz zadowolony z efektu, przejdź do quizu końcowego, który pomoże Ci powtórzyć i sprawdzić wiedzę z całego modułu.

Powodzenia! 💪