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

@liniii31

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


Any feedback and suggestions on how I can improve are very welcome!

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hi, Shalini! 👋

Congratulations on finishing this challenge! 🎉

Some suggestions from me.

  • I recommend removing the empty h1. In this case, it's okay to not have h1 since it is not a full website.
  • For images that are used only as decorations (they do not give users any information and serve only an aesthetic purpose), the alt tag should still exist but should be left empty: alt="". This will tell the screen reader to simply skip over the image.
  • Use CSS to uppercase the text. The uppercased word in the HTML might be spelled by the screen reader (spelled letter by letter).
  • Always specify the type of the button. In this case, set the type of them as type="button". It will prevent the button from behaving unexpectedly.
  • Never use 100vw on the body as it doesn't account for scrollbars when present. It may only ever introduce potential overflow/scroll bugs.
  • Use single class selectors for styling whenever possible instead of id. id has high specificity which can lead to a lot of issues on the larger project. It's best to keep the CSS specificity as low and flat as possible.

For your information, it is possible to make the site responsive without media queries. You can take a look at my solution.

I hope this helps! Happy coding!

Marked as helpful

1

@liniii31

Posted

@vanzasetia Thank you :)

0
Vanza Setia 27,795

@vanzasetia

Posted

@liniii31 You are welcome! 👍

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