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.
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".
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
- HTML5 ( Semantic, Accessible )
- CSS BEM
- CSS Grid
- Mobile First Styling Approach
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
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
- Frontend Mentor slack community + website
- YT videos
- Stackoverflow
- Frontend Mentor - @vikramvi
- FM community
- YT content creators
- Google + SO community