Design comparison
Solution retrospective
I found myself having to redo the style.css file, as I was simply reacting to how my card component looked at the time. For example, if I found my "card-footer" div was not aligned with the rest of the card, I would manually add margin until it aligned.
Then I realized once I changed my screen size, that the alignment would be all off yet again. I decided to upload my solution anyway so I could unlock the ability to view other solutions and seek inspiration on how they are able to align their content easily.
I am curious to find out what the best practice is for aligning content. For this project, I used flexbox and set my flex-direction to column, which helped quite a lot but I struggled slightly with some components, such as aligning the image to the center of the card.
Overall, this was a good challenge and I'm hoping that by learning from my peers, I will be able to style future challenges with less issues. On to the next challenge!
Community feedback
- @MachadoAPosted 12 months ago
Hello, congratulations on the project! However, I suggest that:
- Start with the mobile version; you'll find it much easier.
- Add 'cursor: pointer' to all links and buttons consistently.
- Include hover effects in the required places.
Remember that after submission, you have the opportunity to see how others approached the same project. Take the chance to review and clarify any doubts you may have.
See you soon!
Marked as helpful1
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