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

Alan 10

@Vaphu

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


Hello,

As I just recently started learning to code (like a week ago), and this challenge being my first project completed all by myself I would highly appreciate any feedback about my code. Is it well written? Is there anything I should fix/change?

I haven't touched mobile part of the challenge because I wasn't sure how to approach it yet.

Community feedback

Fancy 320

@maciejkrol18

Posted

While your solution looks good and close to the design, your code has lots of bad practices.

Learn flexbox. Really. Right now you're positioning everything with tons of margins and almost everything has a position of absolute and a fixed width, which is like the worst thing you can do. Flexbox is a pretty easy tool for creating layouts - you'll find tons of free resources to learn it online.

Some resources i personally recommend:

  1. Free flexbox course on Scrimba - https://scrimba.com/learn/flexbox (You'll find tons of other amazing frontend courses on Scrimba too - i would highly recommend checking them out)

  2. Flexbox froggy - https://flexboxfroggy.com/

  3. Flexbox guide on csstricks - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

As for touching the mobile part of the challange, hold onto it for now - learn the basics first. Good luck!

Marked as helpful

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