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

Overview

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

Screenshots

The desktop design VS My desktop solution

The mobile design VS My mobile solution

Links

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

Author

Github

https://github.com/anoshaahmed/huddle-landing-page