shashreesamuel / single-price-grid-component

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

Frontend Mentor - Single price grid component solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

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

Screenshot

Links

• Solution URL: Check out the code here
• Live Site URL: Visit the live site here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

Note: These are just examples. Delete this note and replace the list above with your own choices

What I learned

This challenge allowed me to have a greater exposure to css grid since I never used it at this point however after watching some youtube tutorials by Kevin Powell and reading articles on CSS Tricks which included "A Complete Guide to CSS Grid" my direction was established while attempting this challenge and I found it easier to achieve the desktop layout.

The approach for coding the desktop version was to firstly establish how many columns were necessary in order to achieve the layout which resulted in a count of 2 columns. Secondly, in order to have the top-level container spanned across two columns, the css declaration grid-column: span 2 would need to be specifically added on the respective class. The last step would be to have the bottom-level container divided into two equal sub-containers which meant that the containers would have to occupy the grid locations of 1, 2 and 2, 2 respectively.

I found it difficult to understand how exactly I am changing the top-level container from the desktop version where it spanned two columns to the mobile version of occupying only one column. This was a frustrating process however it dawned upon me that maybe if grid-column: span 2 would be used to span two columns then what would be the result of grid-column: span 1 which did exactly as I wanted.

Continued development

I plan to try using css grid as much possible in order to become more comfortable with all of its various properties and its use cases in addition to attempt more css grid challenges to level up the complexity.

Useful resources

• CSS Tricks - CSS Grid - This helped me with the flexbox concept and I am really glad to be recommend this article, will use it going forward.

• MDN CSS Reference - This is the guide to all the css properties with an indept explanation. Definitely recommend it.

Author

• Frontend Mentor - @TheCoderGuru
• Twitter - @TheCoderGuru