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
2.6 KiB
41 lines
2.6 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
|
|
"translation_date": "2025-10-03T08:22:36+00:00",
|
|
"source_file": "3-terrarium/2-intro-to-css/assignment.md",
|
|
"language_code": "en"
|
|
}
|
|
-->
|
|
# CSS Refactoring Assignment
|
|
|
|
## Objective
|
|
|
|
Refactor the terrarium project to use **Flexbox** or **CSS Grid** for layout. Update the HTML and CSS as needed to achieve a modern, responsive design. You do not need to implement draggable elements—focus solely on layout and styling.
|
|
|
|
## Instructions
|
|
|
|
1. **Create a new version** of the terrarium app. Modify the HTML and CSS to utilize Flexbox or CSS Grid for layout.
|
|
2. **Ensure all artwork and elements are properly displayed** as in the original version.
|
|
3. **Test your design** in at least two different browsers (e.g., Chrome, Firefox, Edge).
|
|
4. **Take screenshots** of your terrarium in each browser to showcase cross-browser compatibility.
|
|
5. **Submit** your updated code along with the screenshots.
|
|
|
|
## Rubric
|
|
|
|
| Criteria | Outstanding | Satisfactory | Needs Improvement |
|
|
|------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
|
|
| Layout | Fully refactored using Flexbox or CSS Grid; visually appealing and responsive | Partial refactoring; some use of Flexbox or Grid | Minimal or no use of Flexbox or Grid; layout unchanged |
|
|
| Cross-Browser | Screenshots provided for multiple browsers; consistent appearance | Screenshots for one browser; minor inconsistencies | No screenshots or major inconsistencies |
|
|
| Code Quality | Clean, well-structured HTML/CSS; clear comments | Some structure; few comments | Disorganized code; lacks comments |
|
|
|
|
## Tips
|
|
|
|
- Refer to [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) guides.
|
|
- Use browser developer tools to check responsiveness.
|
|
- Add comments to your code for better clarity.
|
|
|
|
---
|
|
|
|
**Disclaimer**:
|
|
This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation. |