Frontend Mentor - Single price grid component

Table of contents

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

Overview

The challenge

The challenge was to build the card component using HTML and CSS.

Users will be able to:

• View the optimal layout depending on their device's screen size

Screenshot

• Desktop view screenshot:

Links

• Live Site URL: single price component

my-process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

Recap over some of my major learnings while working through this project.

• Box-sizing
• use of max-width and max-height
• CSS Flexbox
• use of media queries
• defining and reuse variables in stylesheet to avoid redundancy in the code.

Continued development

Areas that i want to continue focusing on in future projects.

• CSS grid
• Max-height and max width
• Media queries
• CSS Transform and animation properties
• CSS Gradients
• CSS Position

Useful resources

• CSS Documentation - This helped me how to handle div containers and style them. I really liked this pattern and will use it going forward.
• CSS Flexbox - This is an amazing article which helped me finally understand CSS Flexbox. I'd recommend it to anyone still learning this concept.

Author

• Frontend Mentor - @b-l-u-e

Acknowledgments

I would like to give thanks to James Q Quick @jamesqquick for his youtube tutorials. I found inspiration in completing the challenge.