3-column-card

Community feedback

• 

  バレンタイン 😈•64,190

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  Congrats on completing your first challenge!🎊🎆

  Best practice, before moving on to the next challenge, always check your FEM report, to see what is incorrect and update your code with it so that you would not make the same mistake over again. This something that should be done right after submitting your challenge.

  • The "icons" are not headings and the h1 element is only allowed to be once per page.

  • The “car images/icons” in this component are purely decorative; They add no value. So their alt tag should be left blank and have an aria-hidden=“true” to hide them from assistive technology.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • Your "buttons" were created with the incorrect element ❌. When the user clicks on the button they should be directed to a different part of you site. The anchor tag will achieve this.

  More Info:📚

  MDN The Anchor element

  • Your CSS Reset is extremely bare and being underutilized. To fully maximize your CSS reset, you want to add more to it.

  Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.

  https://www.joshwcomeau.com/css/custom-css-reset/

  https://meyerweb.com/eric/tools/css/reset/

  http://html5doctor.com/html-5-reset-stylesheet/

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  Marked as helpful

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="card_preview"> with the main tag and <div class="attribution"> with the footer tag to fix the accessibility issues. for more on semantic html visit https://web.dev/learn/html/semantic-html/

  To center .card_preview on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units watch this https://youtu.be/N5wpD9Ov_To

  For a responsive content replace the width in .card_preview with max-width and the hieght value with auto. reduce the width value for .card_preview in the desktop design. You forgot to give the body a background-color.

  Hope am helpful HAPPY CODING

  Marked as helpful

  0

  ---

  

  James E•30

  @styles2009Posted almost 2 years ago

  @Hassiai Thanks for the feedback, I have updated the codes as instructed,i would be grateful, if you could take a look at it and give me a new feedback.

  Cheers

  0