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 #14 Difficulty: Junior
This challenge was to build out an intro component 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
- Create the background shape using code
I took a mobile-first approach, completing styling and layout for a 375px viewport width first. I then built out media queries to cater to larger widths.
I used Sass to easily implement elements provided in style-guide.md, and created the background shape using CSS pseudo-elements.
The end product is hosted on Vercel - https://project-tracking-intro-component-iota.vercel.app/