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

Overview

This is 10th project from "Frontend Mentor" to sharpen HTML & CSS skills along with responsive web design and it's build with "BEM" and "Grid layout".

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

• Live Site URL

My process

Built with

• HTML5 ( Semantic, Accessible )
• CSS BEM
• CSS Grid
• Mobile First Styling Approach

What I learned

This is my 10th project from FM & I learnt most important lesson which is ..

Do you swim like a dog 🐕 or Michael Phelps 🏊‍♂️ and does it really matter 🤷‍♂️ ?

• Yesterday I got lots of review comments on my "working code" from a ( so called ) senior / expert developer 🤓.
• Initially I felt bad about it; as I got things working and still got so many review comments.
• But then I thought, at-least I can build project perfectly ( with some imperfect code )
• Being able to swim like a dog initially and getting rid of fear of water is most important IMHO.
• Once you're confident that you can swim in a swimming pool, lake, river, ocean etc...
• ..then you can learn how to perfect your swimming strokes to cover longer distance with lesser efforts.

In my ~ 2 decades of IT experience working as SDET, I didn't met ( in India, US, EU / Germany ) any developer who said other developer has written good quality code. Developers always use to complain that other person has written Spaghetti code. 🍝

• After working in multiple startups; I learnt that; what business really care is delivering a feature ASAP with "acceptable" code quality. Nobody has time and money for code which followed TDD, all the best practices in the world.
• "acceptable" code quality is decided by your team and manager plus

  how much pain your customers are ready to bear with your code quality.

• Being a customer who paid bomb for MS Vista OS on Dell laptop, ex-MS employee itself, also a 1K+ USD iPhone user; I know limit of patience & quality now a days customers have or used to 🤣
• Thus there is not point getting stressed out about code quality instead build confidence that you can solve any problem ( big or small ) with your coding or googling skills

Continued development

Learn more about below

• min-width, max-width
• min-height, max-height
• minmax function
• grid rows height management
• better debugging skills to find out problem

Useful resources

• Frontend Mentor slack community + website
• YT videos
• Google
• Stackoverflow

Author

• Frontend Mentor - @vikramvi

Acknowledgments

• FM community
• YT content creators
• Google + SO community