Frontend Mentor - Equalizer landing page solution

Table of contents

• Overview
  • The challenge
    • Objectives
    • Solution
      • Revised 11/03/22
      • Old thoughts
  • Screenshot
    • The three provided screensizes
    • Some other screensizes
  • Links
• My process
  • Built with
  • What I learned
    • Revised 11/03/22
    • Old Thoughts
  • Continued development
• Author

Overview

The challenge

Objectives

Users should be able to:

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

Solution

REVISED 11/03/22!

The solution is now responsive. I tested on many different devises using Blisk and ended up with something I am satisfied with.

Old thoughts

When I made the solution I tried focusing on the breakpoints provided with the mockup: 1440px, 768px, 375px.

I have plans to change it in the future to achieve a more responsive website but for now the solution looks like the mockup when at breakpoints 768px and 375px. I spaced out when making the desktop version and therefore ended up working on 1920px instead of 1440px.

Screenshot

The three provided screensizes

Some other screensizes

Links

• Solution URL: (https://www.frontendmentor.io/solutions/equalizer-landing-page-GVb4iQ1bL)
• Live Site URL: (https://jwh-frontendmentor.github.io/equalizer/)

My process

Built with

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

What I learned

Revised - 11/03/22

When I worked on making the solution responsive I used the mobile-first workflow and it made it really easy and simple - using Blisk made a huge difference as well so I could test the site on multiple devices and pretty much accomplish something that looks decent across all screensizes.

Old thoughts

My knowledge towards CSS positioning has been reinforced during this project in terms of when to use relative and when to use absolute positioning.

I learned that I personally don't like the mobile-first workflow. I find it a lot easier to do the desktop version and work my way down. After some research I realise desktop-first can be a lot of work when having to figure out which features is needed for the tablet and especially mobile versions - but with a mockup such as what frontendmentor provided I don't have to decide which features are important it has already been decided.

Continued development

There are many good reasons to go mobile-first one being I can possibly save some time on a lot of redundant code and I will definately give it try with the next solution I make.

I will also try and make the solutions more responsive and not just follow the three breakpoitns provided in the challenges.

Author

• Frontend Mentor - @Jawha3