Table of contents


The challenge

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


Screenshot of the huddle landing page with single introductory section challenge


My process

  • Build the HTML with semantic markup.
  • Add CSS for styling and responsiveness.
  • Test the layout for browser inconsistencies.

Built with

  • Semantic HTML5 markup
  • Reset CSS
  • CSS custom properties
  • Flexbox

What I learned

  • Applying rules to <body> 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.

Continued development

  • Get a better understanding of SVG.


Leave a comment

Your email address will not be published.