<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
  "translation_date": "2025-10-03T09:41:33+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "pl"
}
-->
# Zadanie z Refaktoryzacji CSS

## Cel

Przeprojektuj projekt terrarium, aby używał **Flexboxa** lub **CSS Grid** do układu. Zaktualizuj HTML i CSS w razie potrzeby, aby osiągnąć nowoczesny, responsywny design. Nie musisz implementować elementów przeciąganych — skup się wyłącznie na układzie i stylizacji.

## Instrukcje

1. **Utwórz nową wersję** aplikacji terrarium. Zaktualizuj kod HTML i CSS, aby używać Flexboxa lub CSS Grid do układu.
2. **Upewnij się, że grafika i elementy są na miejscu**, tak jak w oryginalnej wersji.
3. **Przetestuj swój projekt** w co najmniej dwóch różnych przeglądarkach (np. Chrome, Firefox, Edge).
4. **Zrób zrzuty ekranu** swojego terrarium w każdej przeglądarce, aby pokazać kompatybilność między przeglądarkami.
5. **Prześlij** zaktualizowany kod i zrzuty ekranu.

## Kryteria oceny

| Kryterium       | Wzorowe                                                                  | Wystarczające                        | Wymaga poprawy                         |
|------------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
| Układ           | W pełni przeprojektowany za pomocą Flexboxa lub CSS Grid; estetyczny i responsywny | Częściowo przeprojektowany; częściowe użycie Flexboxa lub Grid | Minimalne lub brak użycia Flexboxa lub Grid; układ niezmieniony |
| Kompatybilność   | Zrzuty ekranu z wielu przeglądarek; spójny wygląd                       | Zrzuty ekranu z jednej przeglądarki; drobne niespójności | Brak zrzutów ekranu lub poważne niespójności |
| Jakość kodu      | Czysty, dobrze zorganizowany HTML/CSS; jasne komentarze                 | Częściowa organizacja; niewiele komentarzy | Nieuporządkowany kod; brak komentarzy  |

## Wskazówki

- Przejrzyj przewodniki dotyczące [Flexboxa](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) i [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/).
- Użyj narzędzi deweloperskich przeglądarki, aby przetestować responsywność.
- Komentuj swój kod dla przejrzystości.

---

**Zastrzeżenie**:  
Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Chociaż staramy się zapewnić dokładność, prosimy pamiętać, ż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 autorytatywne źródło. W przypadku informacji krytycznych zaleca się skorzystanie z profesjonalnego tłumaczenia przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z użycia tego tłumaczenia.