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 Three Column Card

P

@John-Davidson-8

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


Another project submitted. Happy days 😀. Enjoyed this one with its minimalist layout. I used Flexbox flex-column property for the mobile setup and changed to flex row with a media query for desktop view.

Learned a lot, funnily enough, it was creating the README that I realised the simple answer to attaching screenshots of completed projects. Simply, create a README folder for screenshots and link to that. Not sure if this is best practice but works a treat for me.

All in all, it is not pixel perfect but I am generally pleased with it and feel more confident going on to the next one. Becoming more familiar with the whole git/github process is invaluable too. I try to commit often and I am adding more detail and becoming more specific in my commit details.

Any feedback warmly welcomed. Thanks. I also created global variables in the :root of stylesheet for primary and secondary colours and fonts. This I believe is good practice for moving on to larger more complex projects with more colours and fonts than is used in the newbie projects.

Community feedback

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