|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
|
|
|
"translation_date": "2025-10-03T11:11:24+00:00",
|
|
|
"source_file": "3-terrarium/2-intro-to-css/assignment.md",
|
|
|
"language_code": "lt"
|
|
|
}
|
|
|
-->
|
|
|
# CSS Refaktorizavimo Užduotis
|
|
|
|
|
|
## Tikslas
|
|
|
|
|
|
Refaktorizuoti terariumo projektą, naudojant **Flexbox** arba **CSS Grid** išdėstymui. Atnaujinkite HTML ir CSS taip, kad būtų pasiektas modernus, prisitaikantis dizainas. Jums nereikia įgyvendinti vilkimo funkcionalumo – sutelkite dėmesį tik į išdėstymą ir stilių.
|
|
|
|
|
|
## Instrukcijos
|
|
|
|
|
|
1. **Sukurkite naują** terariumo programos versiją. Atnaujinkite žymėjimą ir CSS, kad naudotumėte Flexbox arba CSS Grid išdėstymui.
|
|
|
2. **Užtikrinkite, kad menas ir elementai** būtų tokie patys kaip pradiniame variante.
|
|
|
3. **Išbandykite savo dizainą** bent dviejose skirtingose naršyklėse (pvz., Chrome, Firefox, Edge).
|
|
|
4. **Padarykite ekrano nuotraukas** savo terariumo kiekvienoje naršyklėje, kad parodytumėte suderinamumą tarp naršyklių.
|
|
|
5. **Pateikite** atnaujintą kodą ir ekrano nuotraukas.
|
|
|
|
|
|
## Vertinimo kriterijai
|
|
|
|
|
|
| Kriterijai | Puikiai | Pakankamai | Reikia patobulinimų |
|
|
|
|------------|--------------------------------------------------------------------------|--------------------------------------|---------------------------------------|
|
|
|
| Išdėstymas | Visiškai refaktorizuota naudojant Flexbox arba CSS Grid; vizualiai patrauklu ir prisitaikantis | Kai kurie elementai refaktorizuoti; dalinis Flexbox arba Grid naudojimas | Mažai arba visai nenaudojamas Flexbox ar Grid; išdėstymas nepakitęs |
|
|
|
| Suderinamumas tarp naršyklių | Pateiktos ekrano nuotraukos iš kelių naršyklių; išvaizda nuosekli | Ekrano nuotraukos iš vienos naršyklės; nedideli neatitikimai | Nėra ekrano nuotraukų arba dideli neatitikimai |
|
|
|
| Kodo kokybė | Švarus, gerai organizuotas HTML/CSS; aiškūs komentarai | Kai kuri organizacija; mažai komentarų | Neorganizuotas kodas; trūksta komentarų |
|
|
|
|
|
|
## Patarimai
|
|
|
|
|
|
- Peržiūrėkite [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) ir [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) vadovus.
|
|
|
- Naudokite naršyklės kūrimo įrankius, kad patikrintumėte prisitaikomumą.
|
|
|
- Komentuokite savo kodą, kad jis būtų aiškesnis.
|
|
|
|
|
|
---
|
|
|
|
|
|
**Atsakomybės atsisakymas**:
|
|
|
Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors stengiamės užtikrinti tikslumą, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar neteisingus interpretavimus, atsiradusius dėl šio vertimo naudojimo. |
