# CSS Refactoring Assignment ## Cel Przekształć swój projekt terrarium, aby używał nowoczesnych technik układu CSS! Zrefaktoryzuj obecne podejście z pozycjonowaniem absolutnym, wprowadzając **Flexbox** lub **CSS Grid** dla bardziej utrzymywalnego, responsywnego projektu. To zadanie stanowi wyzwanie, aby zastosować nowoczesne standardy CSS, jednocześnie zachowując atrakcyjny wygląd Twojego terrarium. Zrozumienie kiedy i jak używać różnych metod układu to kluczowa umiejętność współczesnego tworzenia stron internetowych. To ćwiczenie łączy tradycyjne techniki pozycjonowania z nowoczesnymi systemami układów CSS. ## Instrukcje zadania ### Faza 1: Analiza i planowanie 1. **Przejrzyj obecny kod terrarium** - Zidentyfikuj elementy, które obecnie używają pozycjonowania absolutnego 2. **Wybierz metodę układu** - Zdecyduj, czy Flexbox czy CSS Grid lepiej odpowiada Twoim celom projektowym 3. **Szkicuj nową strukturę układu** - Zaplanuj, jak będą zorganizowane kontenery i elementy roślin ### Faza 2: Implementacja 1. **Stwórz nową wersję** swojego projektu terrarium w osobnym folderze 2. **Zaktualizuj strukturę HTML** w razie potrzeby, aby wspierała wybraną metodę układu 3. **Refaktoryzuj CSS**, używając Flexbox lub CSS Grid zamiast pozycjonowania absolutnego 4. **Zachowaj spójność wizualną** – upewnij się, że rośliny i słoik terrarium znajdują się w tych samych miejscach 5. **Zaakceptuj responsywne zachowanie** – układ powinien płynnie dostosowywać się do różnych rozmiarów ekranów ### Faza 3: Testowanie i dokumentacja 1. **Testowanie na różnych przeglądarkach** – sprawdź, czy projekt działa w Chrome, Firefox, Edge i Safari 2. **Testowanie responsywności** – sprawdź układ na ekranach mobilnych, tabletach i desktopach 3. **Dokumentacja** – dodaj komentarze do CSS wyjaśniające wybory dotyczące układu 4. **Zrzuty ekranu** – zrób zdjęcia swojego terrarium w różnych przeglądarkach i rozmiarach ekranów ## Wymagania techniczne ### Implementacja układu - **Wybierz JEDNĄ metodę**: zastosuj Flexbox LUB CSS Grid (nie obie na tych samych elementach) - **Projekt responsywny**: używaj jednostek względnych (`rem`, `em`, `%`, `vw`, `vh`), zamiast stałych pikseli - **Dostępność**: zachowaj właściwą semantykę HTML i tekst alternatywny - **Jakość kodu**: stosuj spójne konwencje nazewnictwa i logiczną organizację CSS ### Nowoczesne cechy CSS do uwzględnienia ```css /* Example Flexbox approach */ .terrarium-container { display: flex; flex-direction: column; min-height: 100vh; align-items: center; justify-content: center; } .plant-containers { display: flex; justify-content: space-between; width: 100%; max-width: 1200px; } /* Example Grid approach */ .terrarium-layout { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: auto 1fr; min-height: 100vh; gap: 1rem; } ``` ### Wymagania dotyczące wsparcia przeglądarek - **Chrome/Edge**: 2 najnowsze wersje - **Firefox**: 2 najnowsze wersje - **Safari**: 2 najnowsze wersje - **Przeglądarki mobilne**: iOS Safari, Chrome Mobile ## Produkty końcowe 1. **Zaktualizowany plik HTML** z ulepszoną strukturą semantyczną 2. **Zrefaktoryzowany plik CSS** używający nowoczesnych technik układu 3. **Zbiór zrzutów ekranu** pokazujących kompatybilność międzyprzeglądarkową: - Widok desktopowy (1920x1080) - Widok tabletowy (768x1024) - Widok mobilny (375x667) - Co najmniej 2 różne przeglądarki 4. **Plik README.md** dokumentujący: - Wybór układu (Flexbox vs Grid) oraz uzasadnienie - Trudności napotkane podczas refaktoryzacji - Notatki o kompatybilności przeglądarek - Instrukcje uruchomienia Twojego kodu ## Kryteria oceny | Kryteria | Wzorcowa (4) | Zaawansowana (3) | Średnia (2) | Początkowa (1) | |----------|--------------|------------------|-------------|----------------| | **Implementacja układu** | Mistrzowskie użycie Flexbox/Grid z zaawansowanymi funkcjami; w pełni responsywne | Poprawna implementacja z dobrą responsywnością | Podstawowa implementacja z drobnymi problemami responsywności | Niekompletna lub błędna implementacja układu | | **Jakość kodu** | Czysty, dobrze zorganizowany CSS z znaczącymi komentarzami i spójnym nazewnictwem | Dobra organizacja z kilkoma komentarzami | Wystarczająca organizacja z minimalnymi komentarzami | Słaba organizacja; trudna do zrozumienia | | **Kompatybilność międzyprzeglądarkowa** | Perfekcyjna spójność we wszystkich wymaganych przeglądarkach z zrzutami ekranu | Dobra kompatybilność z udokumentowanymi drobnymi różnicami | Niektóre problemy z kompatybilnością, które nie psują funkcjonalności | Poważne problemy lub brak testów kompatybilności | | **Projekt responsywny** | Wyjątkowe podejście mobile-first z płynnymi punktami przerwania | Dobre zachowanie responsywne z odpowiednimi punktami przerwania | Podstawowe funkcje responsywne z pewnymi problemami układu | Ograniczone lub wadliwe zachowanie responsywne | | **Dokumentacja** | Kompleksowy README z szczegółowymi wyjaśnieniami i wglądem | Dobra dokumentacja obejmująca wszystkie wymagane elementy | Podstawowa dokumentacja z minimalnymi wyjaśnieniami | Niepełna lub brak dokumentacji | ## Przydatne zasoby ### Przewodniki po metodach układu - 📖 [Kompletny przewodnik po Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - 📖 [Kompletny przewodnik po CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) - 📖 [Flexbox vs Grid - wybierz odpowiednie narzędzie](https://blog.webdevsimplified.com/2022-11/flexbox-vs-grid/) ### Narzędzia do testowania przeglądarek - 🛠️ [Tryb responsywny w narzędziach deweloperskich przeglądarki](https://developer.chrome.com/docs/devtools/device-mode/) - 🛠️ [Can I Use - wsparcie funkcji](https://caniuse.com/) - 🛠️ [BrowserStack - testowanie międzyprzeglądarkowe](https://www.browserstack.com/) ### Narzędzia jakości kodu - ✅ [Weryfikator CSS](https://jigsaw.w3.org/css-validator/) - ✅ [Weryfikator HTML](https://validator.w3.org/) - ✅ [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) ## Dodatkowe wyzwania 🌟 **Zaawansowane układy**: Zaimplementuj zarówno Flexbox, JAK i Grid w różnych częściach projektu 🌟 **Integracja animacji**: Dodaj przejścia lub animacje CSS kompatybilne z nowym układem 🌟 **Tryb ciemny**: Zaimplementuj przełącznik motywu bazujący na właściwościach niestandardowych CSS 🌟 **Zapytania kontenerowe**: Użyj nowoczesnych technik zapytań kontenerowych do responsywności na poziomie komponentów > 💡 **Pamiętaj**: Celem nie jest tylko sprawienie, by działało, ale zrozumienie, DLACZEGO wybrana metoda układu jest najlepszym rozwiązaniem dla tego wyzwania projektowego! --- **Zastrzeżenie**: Ten dokument został przetłumaczony za pomocą serwisu tłumaczeń AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mimo że dokładamy starań, aby tłumaczenie było jak najbardziej precyzyjne, prosimy mieć na uwadze, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w jego języku źródłowym powinien być uznawany za źródło wiarygodne. W przypadku informacji krytycznych zalecane jest skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z wykorzystania tego tłumaczenia.