newbie challenge 12 - 3-column-preview-card-component

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 9 months ago

  Hey, good job! A few tips:

  HTML:

  • Remove <header> - it is used for content that repeats on every page, like a navigation bar.

  • Since the icons are decorative, the alt text must be empty:alt="".

  • "Learn More" would navigate to another page, hence it is not a button but a link.

  CSS:

  • max-width on .component should be in rem.

  • Remove max-width on .column.

  • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • Media queries should be in rem. Remove the height on .component, you should always let the content determine the height of a component. I would also change the layout earlier, around 40rem perhaps?

  Marked as helpful

  0

  ---

  

  乌龟爬爬•160

  @turtle-papaPosted 9 months ago

  @Islandstone89 Hello, thanks for your tips, but I have some different perspectives.

  • I see MDN header demo example, header can also used to contain surrounding section's heading even it's not required, but I just want to try.
  • I remember there were some WARNING in the solution's report when I forgot to add img alt text, so I always fill up the alt text.

  For the CSS part,I know what you mean, thank you very much! But I just want to keep things simple at first when I'm a newbie, don’t get hung up on details.

  Anyway, thank you! Happy coding!

  0