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:45:51+00:00",
|
|
"source_file": "3-terrarium/2-intro-to-css/assignment.md",
|
|
"language_code": "ro"
|
|
}
|
|
-->
|
|
# Tema de Refactorizare CSS
|
|
|
|
## Obiectiv
|
|
|
|
Refactorizează proiectul terrarium pentru a utiliza **Flexbox** sau **CSS Grid** pentru layout. Actualizează HTML-ul și CSS-ul după cum este necesar pentru a obține un design modern și responsiv. Nu este nevoie să implementezi elemente drag-and-drop—concentrează-te doar pe layout și stilizare.
|
|
|
|
## Instrucțiuni
|
|
|
|
1. **Creează o versiune nouă** a aplicației terrarium. Actualizează marcajul și CSS-ul pentru a utiliza Flexbox sau CSS Grid pentru layout.
|
|
2. **Asigură-te că arta și elementele sunt prezente** la fel ca în versiunea originală.
|
|
3. **Testează designul** în cel puțin două browsere diferite (de exemplu, Chrome, Firefox, Edge).
|
|
4. **Fă capturi de ecran** ale terrarium-ului în fiecare browser pentru a demonstra compatibilitatea între browsere.
|
|
5. **Trimite** codul actualizat și capturile de ecran.
|
|
|
|
## Criterii de Evaluare
|
|
|
|
| Criteriu | Exemplară | Adecvat | Necesită Îmbunătățiri |
|
|
|------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
|
|
| Layout | Refactorizat complet folosind Flexbox sau CSS Grid; aspect vizual plăcut și responsiv | Unele elemente refactorizate; utilizare parțială a Flexbox sau Grid | Utilizare redusă sau inexistentă a Flexbox sau Grid; layout neschimbat |
|
|
| Compatibilitate între Browsere | Capturi de ecran furnizate pentru mai multe browsere; aspect consistent | Capturi de ecran pentru un singur browser; mici inconsistențe | Fără capturi de ecran sau inconsistențe majore |
|
|
| Calitatea Codului | HTML/CSS curat, bine organizat; comentarii clare | Organizare parțială; puține comentarii | Cod dezorganizat; lipsa comentariilor |
|
|
|
|
## Sfaturi
|
|
|
|
- Consultă ghidurile [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) și [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/).
|
|
- Folosește instrumentele de dezvoltare ale browserului pentru a testa responsivitatea.
|
|
- Comentează codul pentru claritate.
|
|
|
|
---
|
|
|
|
**Declinare de responsabilitate**:
|
|
Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa maternă ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri. |