Frontend Mentor - Huddle landing page with alternating feature blocks solution

This is a solution to the Huddle landing page with alternating feature blocks challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

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

Mobile Preview

screenshot

Desktop Preview

screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • SASS (SCSS)
  • Flexbox
  • Grid
  • Mobile-first workflow

What I learned

I completed another project that tested my layout skills. This was easier than the previous challenge as I had to clip the image of however with this, the layout seems easier to structure. The only difficulty I had with this aligning the header (navbar and content) which I solved through wrapping it with a div. In this project, I did not learn new concepts but instead, focused more on practicing web layouts to feel more comfortable in that area.

Continued development

For future developments, I want to continue making responsive web layouts and feel more confident with it. Also, I want to implement more JS into my work such as a nav-bar.

Author