Mobile-first_3-column-preview-card-component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @kirawesh, 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>.
  • 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.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Kira Weizman Shapira•90

  @kiraweshPosted about 2 years ago

  Hi @correlucas, Thank you for your feedback :)

  1. you're right. I still need to learn the uses of appropriate tags on non-standard elements.
  2. I made a note to myself of what you wrote, I will try to apply this in other projects. It is definitely necessary to learn to produce a more efficient system framework.

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Great Job on this @kirawesh!!

  • How was it using the mobile-first approach?

  • What are you thoughts on the 12 column grid ( I read about it but never implemented it)?

  The only two things I would suggest correcting:

  • Add a max-width to the component container to stop it from expanding indefinitely as the screen size increases.

  • The car images/icons serve no other purpose than to be decorative; They add no value. Their Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

  When it comes to images/illustrations/icons, they should all have an Alt Tag but only those that serve a purpose/add value ( a product image, logos, etc...) should have a description.

  But if they are just there for decorative purposes, then their alt tag should be left blank and have an aria-hidden=“true”

  Hopes this helps.

  Keep up the great work!!

  Marked as helpful

  1

  ---

  

  Kira Weizman Shapira•90

  @kiraweshPosted about 2 years ago

  Hi @vcarames, thank you for your feedback :)

  1. mobile first approach is really different, and I need more experience with :)
  2. about 12 column grid, after testing it on another project, I found that it does not fit on specific elements such as card, modal, etc. This approach more relevant to website pages and blog post structure.
  3. Fixed :)
  4. Thanks for the explanation about it, now I understand better.

  0