3-Column Preview Card Component using HTML and SCSS

Community feedback

• 

  Brendan•1,120

  @OneManBannedPosted about 1 year ago

  Hi Ayrton, nice solution. I have a few suggestions.

  HTML

  • I think you should change the <div class="main"> container to a <main>` landmark element. Landmark elements help to give your page structure. They also help with accessibility.

  • It is also not best practice to have more than one <h1> on a page. - although after reading the headings page on mdn - it says - "While using multiple <h1> elements on one page is allowed by the HTML standard (as long as they are not nested), this is not considered a best practice. A page should generally have a single <h1> element that describes the content of the page (similar to the document's <title> element)."

  CSS

  • First thing I noticed in your CSS is that your put * at the start of every selector. * is the universal selector, which means it selects every element on the page. You only need to use it for quite specific use cases.

  • Generally it's a bad idea to have fixed heights and can create a lot of overflowing issues. Instead try using max-height, min-height.

  • I think rem units would be a better choice for declaring font-sizes. vh and vw could cause some strange font behaviour especially on different screen sizes.

  I hope you find something useful there.

  happy coding.

  Marked as helpful

  1

  ---

  

  Ayrton•150

  @ayrttonPosted about 1 year ago

  @OneManBanned

  Hi Brendan. I will take notes of those topics in order to keep learning and improving my knowledge, thank you so much.

  0