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

Made using HTML, CSS basics, Flexbox and mobile-first design

@R0b3rtG

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


Hi, I had very much fun making this web page.

I encourage you to try it too if you didn't already :)

I managed to make it responsive for every single device using the mobile-first method.

Hope you like it!

And please give me some feedback:

  • what you like
  • what you don't
  • and what you would change

All the best! :)

Community feedback

Joseph 770

@Jos02378

Posted

Hey @R0b3rtG, good job on this solution!

Some suggestions for you:

  1. Try to split your CSS styles into a different file so it improves the readability and maintainability of your code.
  2. You can try to give your main tag a max-width to keep the structure and shape of the card.
  3. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
  4. You can try to use relative units like em in the future for padding. Here is a link to an article that explains when to use which unit see the article.

I hope this helps, good luck!

0

@R0b3rtG

Posted

@Jos02378 Thank you for your feedback. I'll follow it as much as I can :)

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