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

3-column preview card component

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

Community feedback

@VCarames

Posted

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

  • Unless your company requires you to use a library , I strongly suggest you stay away from using libraries until you fully grasp the fundamentals of HTML, CSS and JS. By using a library, you are robbing yourself from actually learning how to code.
  • The “car images/icons” in this component are purely decorative; They add no value. So their Alt Tag should be left blank and have an aria-hidden=“true” to hide them from assistive technology.

More Info:📚

https://www.w3.org/WAI/tutorials/images/

  • The attribution should be wrapped in a footer element.

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

Happy Coding!🎄🎁

Marked as helpful

1

@m-rokon

Posted

@vcarames Thanks for the feedback! I chose the library cause I know how raw CSS works. So I moved on and want to adopt new technology.

  • Thanks again for mentioning the "car images". It was in shape, so I didn't focus on it. Next time, I won't skip.
1

@VCarames

Posted

@m-rokon

Glad I could help!

If you are comfortable with the fundamentals, learning a library is the next best thing.They can help, when time is of the essence.

Unfortunately, a lot people will skip and jump straight to a library since it does all the heavy lifting.

Keep it up!

0

@catherineisonline

Posted

Nice solution 🤩

To improve the code you can add alt attribute to the images and there are several tips you need to follow. If the image is just for decoration you can still write alt attribute but leave it empty, such images don’t need any alt tag but you will need to also add aria-hidden=“true”.

According to MDN “The alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility — screen readers read this description out to their users so they know what the image means. Alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot.“

IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩

Marked as helpful

0

@m-rokon

Posted

@catherineisonline Thanks for your feedback!! I will follow these suggestions next time. <3

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