<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
  "translation_date": "2025-10-03T10:34:26+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "hu"
}
-->
# CSS Refaktorálási Feladat

## Célkitűzés

Refaktoráld a terrárium projektet úgy, hogy **Flexbox** vagy **CSS Grid** segítségével valósítsd meg a layoutot. Frissítsd az HTML-t és a CSS-t, hogy modern, reszponzív dizájnt érj el. Nem szükséges megvalósítani a húzható elemeket—csak a layoutra és a stílusra koncentrálj.

## Útmutató

1. **Hozz létre egy új verziót** a terrárium alkalmazásból. Frissítsd a markupot és a CSS-t, hogy Flexbox vagy CSS Grid alapú legyen a layout.
2. **Biztosítsd, hogy a művészeti elemek és az összetevők** ugyanúgy jelenjenek meg, mint az eredeti verzióban.
3. **Teszteld a dizájnt** legalább két különböző böngészőben (pl. Chrome, Firefox, Edge).
4. **Készíts képernyőképeket** a terráriumról minden böngészőben, hogy bemutasd a kompatibilitást.
5. **Nyújtsd be** a frissített kódot és a képernyőképeket.

## Értékelési Szempontok

| Kritérium   | Kiemelkedő                                                              | Megfelelő                             | Fejlesztésre Szoruló                   |
|-------------|------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
| Layout      | Teljesen refaktorált Flexbox vagy CSS Grid használatával; esztétikus és reszponzív | Néhány elem refaktorálva; részleges Flexbox vagy Grid használat | Kevés vagy semmilyen Flexbox vagy Grid használat; változatlan layout |
| Böngészőközi kompatibilitás | Képernyőképek több böngészőről; következetes megjelenés | Képernyőképek egy böngészőről; kisebb eltérések | Nincsenek képernyőképek vagy jelentős eltérések |
| Kódminőség  | Tiszta, jól szervezett HTML/CSS; egyértelmű kommentek                  | Néhány szervezettség; kevés komment   | Szétszórt kód; hiányzó kommentek       |

## Tippek

- Nézd át a [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) és a [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) útmutatókat.
- Használd a böngésző fejlesztői eszközeit a reszponzivitás teszteléséhez.
- Kommenteld a kódodat az érthetőség érdekében.

---

**Felelősség kizárása**:  
Ezt a dokumentumot az [Co-op Translator](https://github.com/Azure/co-op-translator) AI fordítási szolgáltatás segítségével fordították le. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy téves értelmezésekért.