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

Responsive 3 column preview card with CSS flex box

Kobinamd 110

@Kobinamd

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


All feed back for improvements are welcome. Any idea to help keep my code simple will be much appreciated.

Community feedback

P
Ken 4,915

@kens-visuals

Posted

Hey @Kobinamd 👋🏻

I have couple of quick tips

  • First, the car icons, should have aria-hidden="true”, because they're for decoration. You can read more about aria-hidden here.
  • Next, I'd suggest putting this piece of code in the CSS file, to keep everything in one place
.attribution {
   font-size: 11px;
   text-align: center;
 }
        
.attribution a {
   color: hsl(228, 45%, 44%);
}
  • Perhaps, I'd reduce the amount of nested <div>s. But, since I don't have much control and I don't want to introduce bugs in your code, the only small suggestion would be to get rid of class container and give its styles to .main. Like the following:
.main {
    margin: 0 auto;
    width: 100vw;
    height: 100vh;
}

I'm pretty sure the code will still function properly 🙃

I hope this was helpful 👨🏻‍💻 overall, you did a great job for the second project, keep it up. Cheers 👾

Marked as helpful

1

Kobinamd 110

@Kobinamd

Posted

@kens-visuals Thanks for your feedback. Will put that to work.

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