Responsive 3-Column Preview Card using Flexbox
Design comparison
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 GitHubJoin 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