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/artsycoder533/single-price-grid-component.git
- Live Site URL: https://artsycoder533.github.io/single-price-grid-component/
For this challenge I examined the design picture given to thing about the best html structure to use to easily facilite being responsive with as little code as possible. I started with a mobile-first workflow and figured out the spacing to get as close to the design picture as possible. Once I figured out to set a max-height on the the mobile view it was fairly simple to switch the flex direction to row to incorporate the desktop design. In the picture it seemed as if the elements all stayed the same size, so I had to preserve their dimensions as much as possible. Instead of using regular CSS, I practiced using SASS.
- Semantic HTML5 markup
- SASS
- Flexbox
- Mobile-first workflow
I learned that if you properly set up your html structure setting up media queries to switch to a desktop layout can pretty simple. I also learned to use max-height to control an element from stretching along with the screen size.
I want to continue focusing on media queries and responsive design as well as CSS Flexbox and Grid to better understand when to use which technique. II also want to continue to get more comfortable using SASS instead of CSS3.
- Frontend Mentor - @njohnson533
- Twitter - @artsycoder533