3 column preview card using HTML & CSS with flexbox.

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, Jared Haynes! 👋

  Congratulations on finishing this challenge! 🎉

  Before fixing the CSS, it is a good thing to make the HTML right first.

  • Use CSS to uppercase the text. The uppercased word in the HTML might be spelled by the screen reader (spelled letter by letter).
  • I would recommend swapping the h1 with h2. I know that it will generate an accessibility issue. But, since it is just a component (not a complete website), you don't need to worry about it.
  • I think those "Learn more" buttons should be link elements. Depending on what you think will happen after the users click it, I think it will navigate the users to another webpage. But, if you think it will be an action (e.g. open a modal) then they would be buttons. Regardless of what you choose, you need to always specify the type of the button whenever you use button element.

  Some suggestions on the responsiveness.

  • I recommend setting the max-width with either px or rem unit. Using vw will always make the container grow. As a result, on very large screens (e.g. 1440px) the cards would get stretched.
  • You only need on media query to make the site responsive. In this case, one media query to make the three-column layout. So, I recommend removing the @media only screen and (min-width: 600px) and setting the max-width on the initial styling.

  That's it! I hope this helps. 😊

  0
• 

  Blakky•310

  @BlakkyWebPosted about 2 years ago

  Nice work Jared, love the way you aligned your elements, but your font is not same to that used in the original design. Try to work on that and don't relent in trying to grow your skills, See You at the Top. Thank you.

  0