Skip to content
Submitted about 2 years ago

3-column preview card component solution with HTML and CSS only

accessibility
Mikhail•440
@MikeBeloborodov
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Not sure if I have any questions, but if you have any comments about my code, I am open to any suggestions, thanks!

Code

Please log in to post a comment

Log in

Community feedback

  • Fer•3,970
    @fernandolapaz

    Hi 👋, just a few tips in case you want to take a look:

    • The icons are decorative images and therefore need an empty alt attribute to be ignored by a screen reader.
    • It is better to use min-height: 100vh; for the body, as using height causes the page to be cut off in viewports with small height (such as mobile landscape orientation).
    • And keep in mind that it would be good if each page had an <h1> to improve user experience and because it is an important element when it comes to SEO. Could be a good idea to add an <h1> at the beginning of the page and hide it with CSS for example...

    I hope it’s useful 🙂

    Regards,

    Marked as helpful

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