3 column preview card

Community feedback

• 

  Alamin•2,000

  @CodeWithAlaminPosted almost 2 years ago

  Hi Yassine Boukhla👋 Great job on completing this challenge! 🥳

  I would like to share a few suggestions on this solution if you don't mind.

  HTML Suggestions:

  • Instead of using a div element to wrap the preview cards, you could use a more semantic element such as a section element to represent a section of the page.
  • Consider using the alt attribute for the img elements to provide a text alternative for the images. This is especially important for users with visual impairments who rely on screen readers to access your website.

  CSS Suggestions:

  • You can use the font-weight property in the font-family property value to specify the font weight, instead of using a separate font-weight property. For example: font-family: "Lexend Deca", sans-serif; font-weight: 400; can be written as font-family: "Lexend Deca", sans-serif 400;.
  • Consider using CSS variables (also known as "custom properties") to store values that you use repeatedly throughout your styles. This can make it easier to maintain and update your styles. For example, you could define a variable for your primary color and use it throughout your styles like this:

  :root {
    --primary-color: hsl(31, 77%, 52%);
  }
  .container-sedans {
    background-color: var(--primary-color);
  }
  .container-btn-sedans {
    color: var(--primary-color);
  }
  

  • You can use the :not pseudo-class to specify styles for elements that do not match a particular condition. For example, you could use button:not(:hover) to select all buttons that are not being hovered over. This can be useful for writing more concise and maintainable styles.

  For more information about these topics, you can check out the following resources:

  • HTML section element
  • HTML alt attribute
  • CSS font-family property
  • CSS custom properties
  • CSS :not pseudo-class

  Overall, this is a very well done solution to the challenge. Great job!

  I hope this feedback was helpful. 😊 Keep up the good work!👍

  Marked as helpful

  0

  ---

  

  Yassine Boukhla•180

  @yassineboukhlaPosted almost 2 years ago

  @CodePapa360 Hi, Thank you for your answer, really helpful.

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

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

  Regarding your question,

  Implement a "Mobile First" approach 📱 > 🖥

  Mobile devices are now the dominant 👑 way in which people browse the web, it is critical that your website/content looks perfect on all mobile devices.

  More Info: 📚

  Mobile First

  • 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 rem for your font-size and other property values. While em is best for media-queries. Using these units gives users the ability to scale elements up and down, relative to a set value.

  • Along with the blank alt tag, you also want to include the aria-hidden=“true” ⚠️ to your “car images/icons” to fully remove them from assistive technology.

  More Info:📚

  [MDN Aria-Hidden] (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden#description)

  • The headings in your component are being used incorrectly❌ . Since the h1 heading can only be used once ⚠️, it is always given to the heading with the highest level of importance. This component has three headings of equal importance, so the best option would be to use an h2 heading ✅ since it is reusable and it will give each heading the same level of importance.

  • 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

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

  Happy Coding! 🎆🎊🪅

  Marked as helpful

  0

  ---

  

  Yassine Boukhla•180

  @yassineboukhlaPosted almost 2 years ago

  @vcarames Thank you for the answer, really appreciate your help.

  0