Single Price Card component

Community feedback

• 

  

  Matt Studdert•13,611

  @mattstuddert

  Posted over 4 years ago

  Hey Sibasish, great to see you working on your CSS skills. The more you practice the better you'll get! Nice work on this challenge. Here are some pointers after taking a look at your code:

  • Avoid using inline styles in your HTML. Instead, put all of your styles in your CSS file and target the elements you'd like to style.
  • Always be sure to have one h1 heading. For this design, I'd say it would be the "Join our community" heading.
  • If a piece of content isn't a heading for another piece of content, don't use a heading element. The "30-day, hassle free..." and "Gain access to our..." blocks aren't headings, so I'd recommend using paragraph tags. Likewise for "$29 per month" and "Full access for less than...".
  • You don't need to use position: absolute; to position the card. You could use Flexbox or Grid to centre it instead. Avoid using position: absolute; except for very specific circumstances when you have a clear reason. It's a declaration that can easily cause problems with your styles.
  • You've done well with the overall layout of the component. I'd recommend having a go at refining your styles to try getting your project to match up closer to the design. Training your eye for detail is definitely worth the time investment!

  I hope this helps. Keep up the great work!

  16