single price grid component (mobile first)

Community feedback

• 

  Dusan Brankov•860

  @dusan-bPosted about 2 years ago

  Hi Pierre,

  When building a web page, it's important to follow the most essential design guidelines like colors, fonts, sizes and spaces. They are designed a certain way with a specific purpose, be it functional or aesthetic. However, with so many devices and browsers, rendering websites differently, it is actually impossible to create a consistent look and feel. I think it's more reasonable to build a web page wich is fairly close to the original design.

  Joshua Comeau has written an interesting article about it you may find interesting:

  Chasing the Pixel-Perfect Dream

  As far as your code is concerned, you should avoid skipping heading levels and only use them if it really is a heading that indicates a new (sub)section. Otherwise it would cause confusion to screen reader users who are used to navigating through the headings of a page.

  I would consider something like this:

  <section class="community container">
    <hgroup>
      <h1 class="main-heading">Join our community</h1>
      <p class="guarantee">30-day, hassle-free money back guarantee</p>
    </hgroup>
    ...
  </section>
  

  Also, the text right after the "Why us" heading is actually a list of reasons why one should choose the company. Therefore, the paragraph should be transformed into a list using the elements <ul> and <li>.

  I hope I could help. Keep going, and happy coding. :)

  Marked as helpful

  0

  ---

  

  Pierre Fraisse•330

  @PierreFrsPosted about 2 years ago

  @dusan-b Well thanks a lot, I'll read the article for sure !

  0