You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
3.0 KiB
41 lines
3.0 KiB
<!--
|
|
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. |