Order summary component

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @CinArb2 👋🏻

  I have some suggestions to help you fix the accessibility issue and some other things.

  • First, I suggest using <h2> or <p> instead of <h3> for Annual Plan, because headings in HTML have to increase gradually, such as h1, h2, h3…..
  • Next, the music icon, should have aria-hidden="true”, because it's for decoration only. You can read more about aria-hidden here.
  • To answer your question, yes, we do need to reset those two properties and not only those two. I won't go into many details about resetting CSS, but I'll leave this cool article here, which will make more sense than my brief explanation.

  I hope this was helpful 👨🏻‍💻 other than that, you did a great job for your first project. Your code looks semantically correct, and those animations give some life to the project. Cheers 👾

  Marked as helpful

  0

  ---

  

  Cindy Pao•80

  @CinArb2Posted about 3 years ago

  @kens-visuals Thank you so much for taking the time to check the exercise.

  The article is really helpful. Helped me to understand a lil bit more about css resets.

  And I will study aria labels, it looks important if i really want to understand accessibility.

  Thank you so much, :D

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @CinArb2 you're very welcome, glad to be helpful 😇

  0
• 

  _SabijaThor_•355

  @SasaVaticPosted about 3 years ago

  Hi Cindy, your solution is on point 👌. From semantic point of view for this simple layout this is not necessary but I will do something like this:

  <section class="hero"> -----> section is a wrapper for one or more containers
      <div class="container"> -----> container is a wrapper for hero section rows and determines 
              width of row element
          <div class="row"> -----> row is a wrapper for hero section content, on rows we can set 
              display options such as flex, grid; row can be parent for multiple card elements
  
              <div class="card"> -----> this is a content element of hero section and parent/wrapper for 
                  all card elements
                  <div class="card__header">  -----> this is a div for image
                  </div>
  
                  <div class="card__content"> -----> this is a wrapper for card content
                      <h3 class="card__heading"></h3>
                      <p class="card__text"></p>
  
                      <div class="card__order-box"> -----> this is a wrapper for card payment plan content
                         <div class="card__icon"></div>
                         <div class="card__price-box">
                             <h4 class="card__price-heading"></h4>
                             <span class="card__price"></span>
                         </div>
                         <a href="#" class="card__link"></a>
                      </div>
  
                      <a href="#" class="btn btn--order"></a> -----> buttons are reusable elements for whole 
                          site so in btn class put all styles that are mutual for all buttons and in btn--order 
                          and btn--cancel class put all styles that are unique for that particular button
                      <a href="#" class="btn btn--cancel"></a>
                  </div>
              </div>
          </div>
      </div>
  </section>
  

  0

  ---

  

  Cindy Pao•80

  @CinArb2Posted about 3 years ago

  Hi @SasaVatic thank you for your reply. This really look well structured. I will add this article https://a11y-101.com/design/button-vs-link Just to treat "Proceed to Payment" as a button and the rest as links.

  1

  

  _SabijaThor_•355

  @SasaVaticPosted about 3 years ago

  @CinArb2 I didn't think much about it. Thanks for the article!

  0