Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

FLEX||GRID

i_d_s_lβ€’ 270

@ilvdrskn

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


hello everyone! In my solution, I used flexbox to center the block with the cards. The cards themselves are made using grid.

Community feedback

Nelsonβ€’ 2,380

@nelsonleone

Posted

HELLO......congrats on completing this challenge .....well done 🎊 🎊

i just have one thing to say , It's based on the little car images. Visually , they don't send much message(for design purposes).

It would be nice to set aria-hidden="true" on them so screen-readers(AT) won't stress on what they are. Thereby increasing your solution accessibility rate.

Hope this comment was helpful, have fun coding

Marked as helpful

1

@VCarames

Posted

@nelsonleone

Thank you for contributing to the FEM community.

As a friendly reminder, please avoid repeating what already has been mentioned. To better improve the effectiveness of the feedbacks.

Happy Coding! πŸŽ†πŸŽŠπŸͺ…

0

@VCarames

Posted

Hey there! πŸ‘‹ 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 and have an aria-hidden=β€œtrue” to hide them from assistive technology.

More Info:πŸ“š

MDN Aria-Hidden

  • 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

1

@VCarames

Posted

  • The web development process can be made easier and expedite the process πŸš€ by implementing a CSS Reset.

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.
  • 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

Marked as helpful

1
Nelsonβ€’ 2,380

@nelsonleone

Posted

@vcarames what did i do ?

0
Nelsonβ€’ 2,380

@nelsonleone

Posted

@vcarames i meant personally , did i offend you ?

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord