Solution for a challenge from frontendmentor.io
In this challenge, you will build out the pricing component to the designs provided. This is perfect for beginners and people who want to complete a smaller challenge. The main challenge is to build out this pricing component and get it looking as close to the design as possible. You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
Your users should be able to:
- View the optimal layout depending on their device's screen size
- See a hover state on desktop for the Sign Up call-to-action
I do not have access to the Figma sketch so the design is not pixel perfect.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Desktop-first workflow
The project was fun to build and did not require a lot of experience. I improved my grid skills a bit more but definitely still a lot to learn about it. I tried to make grid responsive but instead ended up using flex for smaller screens. I am not sure whether that's a correct way. For the first time, I used a media query for hover effects to avoid sticky background color on mobile devices and it's really a nice feature!
- Figma - Paste your design image to check the size of containers, width, etc.
- Perfect Pixel - Awesome Chrome extension that helps you to match the pixels of the provided design.
A big thank you to anyone providing feedback on my solution. It definitely helps to find new ways to code and find easier solutions!