This is a solution to the Single price grid component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
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
- Solution URL: Github Repository
- Live Site URL: Live site URL
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
With this challenge I learned how to implement flexboxes, learned more about css grids and the advantages of mobile first workflow. It was an amazing way to apply in a more practical approach everything I've been learning so far.
This project helped implementing the things I had already learned from HTML and CSS but it also made me seek knew knowledge and discover different ways of doing what I already knew. It was an experience that made me interested in discovering different features and workflows to better my code. As a beginner I want to also learn more javascrip in order to feel confident enough to implement it in projects like this one.
- Flexbox guide - CSS Tricks - This helped me to implement the flex boxes, being able to display the content of the two bottom columns the way the challenge asked.
- Mobile First workflow - CSS tricks - This explains on a simple way how mobile first workflow is implemented, how you can do it and all the advantages of following this specific workflow.
- Github
- Frontend Mentor - @tamiresataide