<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
  "translation_date": "2025-10-03T10:41:54+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "sk"
}
-->
# Úloha na refaktoring CSS

## Cieľ

Refaktorovať projekt terária tak, aby používal **Flexbox** alebo **CSS Grid** na rozloženie. Aktualizujte HTML a CSS podľa potreby, aby ste dosiahli moderný, responzívny dizajn. Nie je potrebné implementovať funkciu presúvania prvkov—zamerajte sa iba na rozloženie a štýlovanie.

## Pokyny

1. **Vytvorte novú verziu** aplikácie terária. Aktualizujte značkovanie a CSS tak, aby používali Flexbox alebo CSS Grid na rozloženie.
2. **Zabezpečte, aby umenie a prvky zostali na svojom mieste** ako v pôvodnej verzii.
3. **Otestujte svoj dizajn** aspoň v dvoch rôznych prehliadačoch (napr. Chrome, Firefox, Edge).
4. **Vyhotovte snímky obrazovky** svojho terária v každom prehliadači na preukázanie kompatibility medzi prehliadačmi.
5. **Odošlite** svoj aktualizovaný kód a snímky obrazovky.

## Hodnotiace kritériá

| Kritérium   | Vynikajúce                                                               | Dostatočné                           | Potrebuje zlepšenie                    |
|-------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
| Rozloženie  | Úplne refaktorované pomocou Flexboxu alebo CSS Grid; vizuálne atraktívne a responzívne | Čiastočne refaktorované; čiastočné použitie Flexboxu alebo Gridu | Minimálne alebo žiadne použitie Flexboxu alebo Gridu; rozloženie nezmenené |
| Kompatibilita medzi prehliadačmi | Poskytnuté snímky obrazovky pre viacero prehliadačov; konzistentný vzhľad | Snímky obrazovky pre jeden prehliadač; drobné nekonzistencie | Žiadne snímky obrazovky alebo výrazné nekonzistencie |
| Kvalita kódu | Čistý, dobre organizovaný HTML/CSS; jasné komentáre                     | Čiastočná organizácia; málo komentárov | Neorganizovaný kód; chýbajú komentáre  |

## Tipy

- Prezrite si [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) a [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) návody.
- Použite vývojárske nástroje prehliadača na testovanie responzivity.
- Komentujte svoj kód pre lepšiu prehľadnosť.

---

**Upozornenie**:  
Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, upozorňujeme, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.