Frontend Mentor - Equalizer landing page solution

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

Table of contents

• Overview
  • The challenge
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

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

Screenshots

Mobile view

Tablet view

Desktop view

Links

• Solution URL: Solution URL
• Live Site URL: Live site URL

My process

Built with

• React - JS library
• SASS - For styles
• Vite JS - Frontend Tooling

What I learned

I'm working on improving my skills with responsiveness, so this challenge was great!

Continued development

I'm definitely going to do more exploration on when to use REM vs. EM vs. Pixels. I used pixels for the majority of styling on this challenge, so I may have been missing out on some advantages of the other units.

Useful resources

• MDN CSS Documentation - The GOAT CSS reference
• W3Schools CSS Documentation - Another amazing CSS reference
• CSS Tricks Guide to Flexbox - I use this anytime flexbox in involved

Author

• Website - ant-shell.me
• Frontend Mentor - @Ant-Shell
• LinkedIn - in/anthonyshellman

Acknowledgments

Shoutouts to @AnaBennett11 for working with me and keeping me accountable