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.
Note: Delete this note and update the table of contents based on what sections you keep.
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: https://github.com/jeeheezy/FEM-Single-Price-Grid-Component-Master
- Live Site URL: https://jeeheezy.github.io/FEM-Single-Price-Grid-Component-Master/
- Semantic HTML5 markup
- CSS Grid
- Flexbox
- Mobile-first workflow
I was reminded that for mobile-first workflow, it's not enough to just keep in mind the mobile and write a media query, but to start with mobile as the default.
I also got to try CSS grid for the first time instead of relying on only Flexbox. For setting columns for the grid, I avoided using pixels, instead opting ofr fr, and also rem for any max-width/font-size.
Additionally, I learned there were performance concerns in using css @imports over linking fonts in html head. Another helpful tip was setting a border radius on the container with overflow: hidden instead of defining the radius for the individual children.
I'd like to get further use of CSS grid, especially since many websites seem to recommend using grid for setting the layout and using Flexbox for adjusting the content within the layout.
Big thanks to Sachin and Grace-Snow on Front End Mentor discord that recommended many tips and tricks and pointed out some bad habits I was forming!