Solution to a Frontend Mentor challenge: Creating a similar webpage as the design preview provided

  • By Anosha Ahmed
  • Last update: Jan 15, 2022
  • Comments: 0

Frontend Mentor - Huddle landing page with single introductory section solution

This is a solution to the Huddle landing page with single introductory section challenge on Frontend Mentor.

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



The desktop design VS My desktop solution

The mobile design VS My mobile solution


My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow

What I learned

I learned a lesson to give a size to images, paragraphs etc. Because I didn't at first, so everytime I would upload my solutino to Frontend Mentor, it would look messed up.

I also learned that I need to add aria-labels to my social media icon links.

Continued development

In the future, I want to size my elements better & stick to single CSS selectors.

Useful resources