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: https://github.com/kevinx9000/single-price-grid-component
- Live Site URL: https://kevinx9000.github.io/single-price-grid-component
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- Flexbox
- Mobile-first workflow
I started with a mobile-first workflow. As I moved into the responsive design, that's when I added the CSS Grid (for the first time while working on these FrontEnd Mentor projects). Additionally, I tried to stay exclusively with rem units, but that caused some grief as I went into responsive design. Everything looked too small on larger screens; then when I tried to adjust the rem units for the breakpoints, then everything seemed too big!
I need more hands-on practice with CSS Grid, and determining when to implement it in the creation process. I also need more practice with rem and em units, so that they adjust automatically for responsive design, as opposed to me having to make multiple manual adjustments while creating breakpoints.
- Frontend Mentor - @kevinx9000
- My portfolio site - kevinherrmann.quest
- 10.22.23 -- revised and refactored; minor edits