3 Column Preview Card Component using Tailwind CSS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Deepak! 👋

  Congratulations on finishing this challenge! 👏 Nice work on this challenge! 🙌

  Your solution looks good on both landscape and portrait mobile views and on my desktop view! 👍

  I would recommend writing your own styling for the newbie challenges to strengthen your CSS skill.

  I have some feedback on this solution:

  • <img src="images/icon-suvs.svg" width=64 height=40 alt /> I would recommend wrapping the value of the width and height properties with double quotes and making the alt="" look like that. <img src="images/icon-suvs.svg" width="64" height="40" alt="" />.
  • Every page should only contain one h1 as an identifier of each page. So, change all the current h1 to h2, and like @AndyGlz01 has said earlier, if this is a full website, the h1 would exist somewhere else on the page.
  • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (by using Tab key) easily.

  I hope this helps! Keep up the good work! 👍

  Marked as helpful

  1

  ---

  

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  @vanzasetia It is true that every website should have only one h1 per page but in this case, being an isolated component, how could you erase the accessibility problem by not having any h1 in your project?

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @Sdann26 You could have a hidden h1 with sr-only styling. It's visually hidden, but still accessible by the screen reader. In this case, having a h1 is not a necessary thing.

  Marked as helpful

  0

  

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  @vanzasetia I understand, for example, this could be the solution to this problem:

  .sr-only {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    top: auto;
    overflow: hidden;
  }
  

  0
• 

  Deepak Parmar•490

  @deepak-parmarPosted over 2 years ago

  What is the best way to deal with Page should contain a level-one heading warning? I kept my <h1> heading hidden, but it didn't work.

  1

  ---

  

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  @deepak-parmar The problem is that you have set the h1 tag as hidden. Change the h2 of each section to a h1.

  If you want to see this type of errors before uploading your solution download AxeDevTools which is a browser extension to see accessibility problems.

  Marked as helpful

  1

  

  Andres Gonzalez•130

  @AndyGlz01Posted over 2 years ago

  I don't recommend to use <h1> in this exercise, because is only one component of a complete web, where we can find another <h1>. i think

  0

  

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  @AndyGlz01 It is true that it is only one component, in fact it should not even have h2. But that doesn't take away the accessibility problem which I think could be avoided only for this case unless you have a solution.

  Edit: I already saw the interesting solution using .sr-only to not display text but be detected by the screen reader :O

  0
• 

  Andres Gonzalez•130

  @AndyGlz01Posted over 2 years ago

  Is perfect!!! Just add some margin-top, height of the cards!

  0