3-Column-Preview-Card-Component

Community feedback

• 

  Karol Binkowski•1,640

  @GrzywNPosted over 2 years ago

  Great job on the challenge @HeavyMetalCoffee !

  I think you should use margin-top instead and push whole container down, instead of using paddings. You can also improve your solution at least a little, by adding another breakpoint / media query for medium sized/tablet devices and making it responsive. To achieve this you can use display: grid and span the last tile to be 2 columns. Now it's not working properly for the width of 769px.

  HTML / Accessibility / SEO issues:

  • You should always use <main> tag instead of <div> tag for a container. If you don't have a container, you can wrap all of your other tags into <main> tag.
  • Same thing for footer, use <footer> instead of <div>. It's important to use semantic tags e.g: <header>, <nav>, <aside>, <main>, <footer>. It's a good practice for accessibility, screen readers and web crawlers.
  • Make sure that your webpage contains at least one <h1> tag. You can hide it using some of the methods presented here

  Hope this helps! Have a nice day and happy coding 😁!

  Marked as helpful

  0

  ---

  

  P

  John•20

  @HeavyMetalCoffeePosted over 2 years ago

  @GrzywN Thank you for your feedback!! Great suggestion for the margin-top, I didn't think about that. My thought process was as you see, using padding to push things down. I got caught up in trying to make this a flexbox layout that I didn't think to try to incorporate grid in any way. I managed to use grid with the footer, which didn't go well as I didn't do the semantics properly. I am also finding that I must be allergic to <h1> because the last challenge I did, this was pointed out. Think that is a big hint...lol. Thank you again!!

  1

  

  Karol Binkowski•1,640

  @GrzywNPosted over 2 years ago

  @HeavyMetalCoffee It's hard to think about everything. As they say practice makes perfect!

  0