3-Column Preview Card Component with HTML and CSS

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @DummyKen 👋🏻 Ken's here 😅

  I have some suggestions to help you fix the accessibility and HTML issues.

  • In your markup, <section class="card">...</section> should be <main class="">...</main> and <div class="attribution">...</div> should be <footer class="attribution">...</footer>. These will fix the accessibility and HTML issues. Don't forget to generate a new repot once you fix the issues.
  • For the music icon, add aria-hidden="true”, because it's for decoration. You can read more about aria-hidden here. To illustrate:

  <img src="./images/icon-sedans.svg" alt="" aria-hidden="true”>
  

  • Also, I suggest adding transition: all 0.2s; to the button and the links, this will make :hover smoother.
  • I've made a couple of changes in .card, to fix border-radius and some other things, so here it is:

  .card {
      display: flex;
      flex-direction: row;
      width: 700px;
      border-radius: 10px;
      overflow: hidden;
  }
  

  as you can see, I omitted height because fixed height prevents your website from being fully responsive. Also, I omitted margin because I have a different suggestion to help you fix the card in the center.

  • Now let's bring the card to the center of the scree:

  body {
      background: hsl(0, 0%, 95%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
  }
  

  I just used flexbox, which will make sure that on any viewport width, the card is positioned correctly.

  • Lastly, I won't go into details about resetting CSS, but I'll leave this cool article here, which will make more sense than my brief explanation.

  I hope this was helpful 👨🏻‍💻 Other than that, you did a great job for the first project, well done. Cheers 👾

  Marked as helpful

  2

  ---

  

  Dummy_ken•180

  @DummyKenPosted about 3 years ago

  @kens-visuals Hey Ken! Ken here again :). Thank you so much for providing such an insightful feedback on my project. I've fixed the accessibility issues just as you said. Will be taking more challenges from here. Thanks again. Cheers!

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @DummyKen you're welcome, I'm glad to be helpful 😇

  0