msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
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.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'eede56ed13'
${ noResults }
Web-Dev-For-Beginners/translations/en/3-terrarium/2-intro-to-css/assignment.md

2.6 KiB
Raw Blame History

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 and CSS 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. 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.