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 using Flexbox

P

@cdanderson76

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


Although this is listed as a simple project, the 3-Column Preview Card really tested me on the concepts of the postioning of elements and the spacing between them. I really had to rely on the 'Inspect' tool within the browser in order to get an idea of where, and how, I could get things in the correct place. I also had a hard time creating the button that really wasn't a 'button' (lol). Toward the end of my project, I realized that it was missing a hover effect, but for some reason, I could not get the border visible around my anchor element. After a decent amount of googling, I found that there would actually NEED to be an ORIGINAL border in order to create the appropriate hover effect. Once I understood this, I was able to finish the project.

Hopefully, my HTML and CSS is up to par. If there are any questions or tips on what I could have done better in reference to writing cleaner code (or anything for that matter), please feel free to let me know. Thanks...

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