Single Pricing Grid


Jessica Chan - Coder Coder

I followed the video on YouTube Building a pricing block with HTML & PuRe CSS, using the elements as she selected them. It's nice seeing how others work through this challenge, and I enjoyed learning more about CSS variables. Actually I enjoy almost anything to do with CSS, changing aspects of how the page is displayed.

To ensure that the responsive nature of the page is due only to the Single Pricing Grid CSS, I removed the styling from Bootstrap and used elements from my site styles that aren't affecting the Grid.

The purpose of this exercise is to duplicate the sample provided by Frontend Mentor and this fulfills that purpose. I spent many hours styling this page to have the same styles as my other pages and to display the project as a semi-separate entity. I came close to success many times but ultimately, because the CSS for the project contains a body element, I ran into 'Cascading Contradictions' in the style. I finally reached an acceptable version by adding background and text colors. The CSS for the project is essentially the same.

Join our community

30-day, hassle-free money back guarantee

Gain access to our full library of tutorials along with expert code reviews. Perfect for any developers who are serious about honing their skills.

Monthly Subscription

$29 per month

Full access for less than $1 a day

Sign Up

Why Us

  • Tutorials by industry experts
  • Peer & expert code review
  • Coding exercises
  • Access to our GitHub repos
  • Community forum
  • Flashcard decks
  • New videos every week