Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I have used Bootstrap to achieve the solution.
Community feedback
- @shaik-zakirPosted 6 months ago
Thank you very much for your time to review my code, I will make sure to incorporate into my next solution.
0 - @CamilleClinchampPosted 7 months ago
Your solution is pretty good, just a few things I have noticed:
- Instead of using div elements, you could have used semantic tags for better accessibility (
<article>
for the card for example) - You didn't have to wrap your card inside
<div class="set-card-center">
. The CSS properties of this class could have been added directly to thebody
. - The image itself didn't have to be a flexbox. Just using a
text-align: center
on the card would have centered all the elements inside of it. - Your
card-body
class doesn't have any CSS attributes, meaning this div probably isn't necessary at all. Just put the text inside the card, along with the image. To keep those texts under the image, add this line on your flexbox (body
if you follow my advice,set-card-center
otherwise):flex-direction: column;
Your result respects the design, which is already excellent! I'm just giving some advice to improve the quality of your code.
0 - Instead of using div elements, you could have used semantic tags for better accessibility (
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