3column preview card component built using semantic HTML and CSS

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Congrats on completing your first challenge!🎊🍻

  Here are some suggestions to help improve your code:

  • The “car icons” in this component are purely decorative. ⚠️ Their alt tag should be left blank to remove 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 being underutilized. 😢 To fully maximize 💯 it, you will want to add more to it. Here are some examples that you can freely use 😁: Josh Comeau Reset Eric Meyer Reset

  • For improved accessibility 📈 for your content, it is best practice ✅ to use em for media-queries. Using this unit gives users the ability to scale elements up and down, relative to a set value.

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

  Happy Coding! 🎆🎊🪅

  Marked as helpful

  0

  ---

  

  Aaliyah Junaid•40

  @Leeyah-123Posted almost 2 years ago

  @vcarames Thanks a lot! I've made some changes, do feel free to go through it and give feedback if you can.

  0
• 

  Gaurav Singh•440

  @Gaurav4604Posted almost 2 years ago

  Hi! Congratulations on completing the challenge 🥳, It looks amazing

  I would suggest a few HTML edits and one CSS edit:

  • Try adding a h1 tag in your page, to identify and describe the main content of the page.
  • Ensure that you use tags such as main, to describe the main section of your html body, this helps increase the accessibility of your page
  • You should definitely edit your breakpoint for a responsive design to be triggered at a lower width, at the moment, even laptops with 1024px screen width, will be rendering a mobile oriented design

  Marked as helpful

  0

  ---

  

  Aaliyah Junaid•40

  @Leeyah-123Posted almost 2 years ago

  @Gaurav4604 Thanks a lot for your feedback! I've edited the media query breakpoints and it's much better now. I'll make sure to add in a h1 tag in following projects.

  0
• 

  Hassia Issah•50,670

  @HassiaiPosted almost 2 years ago

  Replace<div class="container">with the main tag and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

  In the desktop design give .container a width value. e.g: .container{width:55rem;}

  There is no need to give the body a width value and .card-body a padding-bottom value.

  To center .container 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.

  To center .container on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  To center .container on the page using grid:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0

  ---

  

  Aaliyah Junaid•40

  @Leeyah-123Posted almost 2 years ago

  @Hassiai Thanks a lot! Super helpful! This is my first completed solution on frontend mentor and i have a lot to learn😅

  0