<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
  "translation_date": "2025-10-03T10:38:04+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "cs"
}
-->
# Úkol na refaktorizaci CSS

## Cíl

Refaktorujte projekt terária tak, aby používal **Flexbox** nebo **CSS Grid** pro rozvržení. Aktualizujte HTML a CSS podle potřeby, abyste dosáhli moderního, responzivního designu. Není nutné implementovat prvky, které lze přetahovat – zaměřte se pouze na rozvržení a stylování.

## Pokyny

1. **Vytvořte novou verzi** aplikace terária. Aktualizujte značkování a CSS tak, aby používaly Flexbox nebo CSS Grid pro rozvržení.
2. **Zajistěte, aby umělecké prvky a ostatní komponenty byly na svém místě** stejně jako v původní verzi.
3. **Otestujte svůj design** alespoň ve dvou různých prohlížečích (např. Chrome, Firefox, Edge).
4. **Pořiďte snímky obrazovky** svého terária v každém prohlížeči, abyste prokázali kompatibilitu napříč prohlížeči.
5. **Odevzdejte** svůj aktualizovaný kód a snímky obrazovky.

## Hodnotící kritéria

| Kritérium   | Vynikající                                                              | Přiměřené                            | Vyžaduje zlepšení                      |
|-------------|------------------------------------------------------------------------|--------------------------------------|----------------------------------------|
| Rozvržení   | Plně refaktorováno pomocí Flexboxu nebo CSS Grid; vizuálně atraktivní a responzivní | Některé prvky refaktorovány; částečné použití Flexboxu nebo Gridu | Malé nebo žádné použití Flexboxu nebo Gridu; rozvržení nezměněno |
| Kompatibilita napříč prohlížeči | Poskytnuty snímky obrazovky pro více prohlížečů; konzistentní vzhled | Snímky obrazovky pro jeden prohlížeč; drobné nekonzistence | Žádné snímky obrazovky nebo výrazné nekonzistence |
| Kvalita kódu | Čistý, dobře organizovaný HTML/CSS; jasné komentáře                   | Nějaká organizace; málo komentářů     | Neorganizovaný kód; chybí komentáře    |

## Tipy

- Projděte si průvodce [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) a [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/).
- Použijte nástroje pro vývojáře v prohlížeči k testování responzivity.
- Komentujte svůj kód pro lepší přehlednost.

---

**Prohlášení**:  
Tento dokument byl přeložen pomocí služby AI pro překlady [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.