Vanilla CSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in general looks great.

  Some suggestions would be:

  • Always have a main element to wrap the main content of your page. On this one, the .container should be using the main instead of div.
  • On a decorative img if you are using alt="" add an extra aria-hidden="true" so that it will be totally hidden for all screen-reader users.
  • A page must have a single h1 on a page. Since there are no text-content that are visible that could be h1, you will make the h1 screen-reader only text. Meaning this will be hidden for sighted users and only be visible for screen-reader users, search about sr-only stylings and see how it is used. The h1 text should describe what is the main content is all about, this h1 would be placed as the first text-content inside the main element or you could use h1 on the order summary.
  • On the .pricing use max-width: 325px and width: 100% so that it will scale, as of now it is using width: 325 which creates a fixed width.
  • annual plan could use a heading since it gives information on what the section would contain.
  • Same for the button the proceed-to-payment, use max-width: 300px and width: 100%.
  • If you remove the outline property of an element, make sure to add another custom visual indicator on the element's :focus-visible state. Try using tab on your keyboard to navigate the site, you will have a hard time since there is no indication on where you at.

  Aside from those, great job again on this one.

  Marked as helpful

  1

  ---

  

  Kenny Putman•40

  @kennyputmanPosted about 3 years ago

  @pikamart Thanks a lot. That was some really detailed and helpful feedback!

  1