kensparby/fem-huddle-landing-page

A solution to the Huddle Landing Page challenge on FrontendMentor.io

Frontend Mentor - Huddle landing page with alternating feature blocks solution

My solution to the Huddle landing page with alternating feature blocks challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page

Screenshot

Links

• Solution URL: https://github.com/kensparby/fem-huddle-landing-page
• Live Site URL: https://kensparby-huddle-landing.netlify.app/

My process

Built with

• React
• TypeScript
• SCSS
• Modern CSS Reset
• CSS Grid
• Flexbox

What I learned

This was good practice and brushing up on responsiveness, and planning and execution of HTML structure to fit all resolutions. I somewhat botched the mobile version in the process. It looks decent at about 500px and up; I should've started developing for an even lower resolution, as per the spec. Not gonna fix that this time around, but a lot was learned to use in the next project.

Author

• Website - https://ken.sparby.dev/
• Twitter - @kensparby
• Frontend Mentor - @ksparb