3-Column Preview Card Component with HTML and CSS

Community feedback

• 

  P

  Ken•4,915

  @kens-visuals

  Posted over 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 👾

  22

  Marked as helpful