3 column preview card with Pure HTML & CSS

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted over 3 years ago

  Hello there! 👋

  Congratulations on completing this challenge! 🎉

  I have some feedback on this solution:

  • Accessibility
    • Good job on using landmarks correctly! 👍
    • There's no need to have role attribute for the link element. If you think that it is a button element then use button element instead. But if it is a button instead of a link, what is going to happen if the user clicks the button?
    • Use CSS to uppercase the text. The uppercased word in the HTML will be spelled by the screen reader (spelled letter by letter).
    • Swap all the h1 with h2. Every page should only contain one h1 as an identifier. In this case, it's not necessary to have h1 but, if you want to remove the issue that gets generated, you can have visually hidden h1 with sr-only styling.
    • There's an awesome article by A11y about heading, I would recommend reading it to understand how to use headings correctly.
    • 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.
  • Styling
    • You have used rem and em units instead of px except for the border-radius. I would recommend using em unit for it. That way, when the font-size of it gets increased, the border-radius can adjust automatically.
    • Import the font families at once. It will boost the loading speed of your site.

  I hope this helps! Happy coding! 😁

  10

  Marked as helpful