Table of contents
Users should be able to:
- View the optimal layout for the page depending on their device’s screen size
- See hover states for all interactive elements on the page
- Build the HTML with semantic markup.
- Add CSS for styling and responsiveness.
- Test the layout for browser inconsistencies.
- Semantic HTML5 markup
- Reset CSS
- CSS custom properties
What I learned
- Applying rules to
that prevent the display of scrollbars, since all elements had to fit in the viewport.
- Using SVG as a background image, resizing and stretching it to match the design.
background-size: 92vw 100vh;
background-position: left top;
-apple-background-size: 100% auto;
- Get a better understanding of SVG.