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.
27 lines
1.9 KiB
27 lines
1.9 KiB
# 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 on layout and styling only.
|
|
|
|
## Instructions
|
|
|
|
1. **Create a new version** of the terrarium app. Update the markup and CSS to use Flexbox or CSS Grid for layout.
|
|
2. **Ensure the art and elements are in place** 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 demonstrate cross-browser compatibility.
|
|
5. **Submit** your updated code and screenshots.
|
|
|
|
## Rubric
|
|
|
|
| Criteria | Exemplary | Adequate | Needs Improvement |
|
|
|------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
|
|
| Layout | Fully refactored using Flexbox or CSS Grid; visually appealing and responsive | Some elements refactored; partial use of Flexbox or Grid | Little 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-organized HTML/CSS; clear comments | Some organization; few comments | Disorganized code; lacks comments |
|
|
|
|
## Tips
|
|
|
|
- Review [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 test responsiveness.
|
|
- Comment your code for clarity. |