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 solution with HTML and CSS only

Mikhailβ€’ 440

@MikeBeloborodov

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


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

Community feedback

Ferβ€’ 3,970

@fernandolapaz

Posted

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

1

Mikhailβ€’ 440

@MikeBeloborodov

Posted

@fernandolapaz Thanks a lot! Good advice about h1 and hiding it, I saw that technique somewhere already.

In regards to height, I check landscape phone and it's cut indeed, thanks for the tip, appreciate it a lot!

Also didn't know about icons and decorative images, will remember in the future.

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