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.
1.9 KiB
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
- Create a new version of the terrarium app. Update the markup and CSS to use Flexbox or CSS Grid for layout.
- Ensure the art and elements are in place as in the original version.
- Test your design in at least two different browsers (e.g., Chrome, Firefox, Edge).
- Take screenshots of your terrarium in each browser to demonstrate cross-browser compatibility.
- 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 |