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-main

@preciousoduh

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


Hey everyone, hope you are all having a good day/night. this is my third challenge I'm finally getting the hang of display flex and positioning quite happy with that. I'm still struggling with web accessility so please if you have any resources or suggestions do share them thank you.

Community feedback

@SurajHadage

Posted

This design is the only thing on front-end, so whenever making single component design like this :

  • Always construct/design them inside a <main> tag.
  • You can use three <article> tags for three cards. This way they are more informative or semantic.
  • Don't use <img> tag inside <p> tag. This is not adding any meaning despite taking lines of code.
  • Inside each <article> tag you could use <img>, <h1>, <p> & <button> tags.
  • Use alt attribute for every image because they specifies an alternate text for an image, if the image cannot be displayed. The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
  • Use Paint app to know accurate dimensions of the design.
0

@preciousoduh

Posted

@SurajHadage oh I see thank you so Much I will put into practice all you have suggested

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