3-column preview card component

Community feedback

• 

  Boots 😺•1,590

  @adityaphasuPosted over 1 year ago

  Hi!

  Nice solution!

  One thing I'd like to point out though is that Learn More is actually an anchor (<a>) tag and not a paragraph. So in your code replace <p> with <a> and just add display: inline-block to the existing class.

  • When setting font size instead of using absolute units like px try using relative units like rem as they are better for scalable layouts. You can read more about it here!
  • Generally it is recommended to only use 1 <h1> per page so instead of using 3 h1s you can change them with h2s. You can also add a h1 to the page but make it only visible for screen readers. You can do something like 3 column card component as a text and just add a sr-only class with the following CSS:

  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
  

  This way the design won't be disrupted with h1 but the code will be much more semantic and accessible!

  Overall nicely done but with a few more improvements it will be better!

  Keep up the hard work and happy coding!🕺🏻

  Marked as helpful

  0