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-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. |