3-column preview card component solution

Community feedback

• 

  Nic•595

  @nicm42Posted over 3 years ago

  This looks great. Your HTML and CSS are really clean and easy to read.

  The easiest way to get the elements side-by-side are by using Flexbox or Grid. They are hard to understand while you're learning them, but once you've got the hang of them, you'll find them so much easier than floats (or at least, I did). I recommend Wes Bos (https://wesbos.com/) - he has free Flexbox and Grid courses.

  You can also fix some of the accessibility issues. These can be really hard to get your head around. Pretty much all of your issues are complaining about the same thing.

  The <header> tag is only used once for your page header. Take the Frontend Mentor website for an example, the header would be the bar at the top with the logo and links.

  It then wants one heading tag per section. Those are h1, h2, h3, h4, h5, h6. If you were to change your divs for each column to a <section> tag, then change the <heading> tag to an <h1>, that should solve a lot of the accessibility issues FEM is complaining about.

  Talking about headings and headers is really confusing and I can understand why you thought the <header> tag was the right one to use for the header for each column. Reading more about semantic HTML should help you, but it's one of those things that can be a little confusing.

  Marked as helpful

  1

  ---

  

  Megat•40

  @MegatHilmiPosted over 3 years ago

  @nicm42 Thank You very much for the sharing.

  0