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 #12 Difficulty: Junior
This challenge was to build out a landing page and get it looking as close to the design as possible.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
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.
I used Sass to easily implement elements from the style-guide.md provided. I then went through the page section-by-section, styling for mobile widths first before adding media queries for larger widths.
Lastly, I used simple Jquery and CSS classes to implement the responsive navigation.
The end product is hosted on Vercel - https://insure-landing-page-livid.vercel.app/
Cheers! 🍻