This is my response to a front-end coding challenge from Frontend Mentor. Frontend Mentor provides great development challenges alongside beautiful designs, enabling you to build your skills using realistic projects.
I plan to take on most, if not all, of the free challenges in order from easiest ('Newbie') to hardest ('Advanced').
Challenge #7
Difficulty: Newbie
This challenge was to build out a price component and get it looking as close to the design as possible.
Users should be able to:
- View the optimal layout for the component depending on their device's screen size
- See a hover state on desktop for the Sign Up call-to-action
I started by building out the basic HTML page structure, making sure the page layout made sense at a fundamental level, particularly for screenreader users.
From there I took a mobile-first approach, completing styling and layout for a 375px viewport width before building out media queries to cater to larger widths.
I used Sass to easily implement elements from the style-guide.md provided, with a mix of CSS grid and flexbox to place the elements.
The end product is hosted on Vercel - https://single-price-grid-component-ruby.vercel.app/
Cheers! 🍻