Solution with flex and media

Community feedback

• 

  Cooger•270

  @Cooger17Posted about 2 years ago

  Hi @ConnectionMG. Great solution on this challenge

  Here some tips to improve your code.

  The img tag must have alt attribute. But in This Their Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

  The headings are used incorrectly. Each heading is equally as important. So best option, is to use <h2> Heading instead <h1>, because it will give each card the same level of importance and it's reusable.

  Use a vscode extension like prettier. It will help you to format your code and make it clean for other developers who want to help you.

  Use <main> tag to wrap your code, and <article> tag for semantic

  Marked as helpful

  1
• 

  Yiwen Chen•190

  @CHEN-YiWenPosted about 2 years ago

  Hi @ConnectionMG! Congrats on finishing the challenge😄

  As a beginner just like you, I often struggle with whether to use section or article in my code...

  I believe that you can replace your <div class="sedans"> with <section class="sedans"> and so on. These three options are closely related to the main function of the page (deciding which type of car to rent) but they won't make sense on their own (if they do, you will probably put them in article). I recommend you to read these two articles, which I find helpful and often refer back to when I am confused with these two tags

  • <article> vs. <section>: How To Choose The Right One
  • 7 Alternatives to the <div> HTML Tag

  I am not sure if my thought is 100% correct. But I hope the articles will point you in the right direction! Happy coding!🤗(I realize that I need to update my code for this challenge as well🤣)

  Marked as helpful

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello , Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  • The html structure entirely with div blocks but these div doesn't any semantic meaning, for this reason is better you use a better html markup improving your code, for example for each vehicle card you use <article> instead of the <div>.
  • The icon doesn’t have an important role when you think about semantics and the html structure. So you can add aria-hidden=“true” to avoid it being found and read in the accessibility mode/screen readers. These are only decorative items.
  • Use max-width: 100% for the cards in the mobile version to allow the cards grow 100% of the width considering the paddings and avoid to have a lateral gap (limited by a fixed width).
  • To make your CSS code easier to work you can create a single class to manage the content that is mostly the same for the 3 cards (paddings, colors, margins and etc) and another class to manage the characteristics that are different (colors and icon), this way you'll have more control over then and if you need to change something you modify only one class.
  • Think about using relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. Anyhow, if we want a more accessible website, then we should use rem instead of px. REM does not just apply to font size, but to all sizes as well.

  ✌️ I hope this helps you and happy coding!

  0