@damigand
Posted
Desktop version
The .card-container element has a margin: 20px that could be removed. Other than that, there's no major differences to highlight.
Mobile version
This one is a little bit more complicated. The design is lost both on the image and the "Learning" button, causing a scroll-bar at the bottom of the card. To fix this weird behaviour, I suggest adding the align-items: flex-start; property to the .card-container div. This will fix the button extending all the way across the card. To fix the image overflowing, you can simply add the following code to the @media query that you have:
#img {
height: 200px;
width: 100%;
object-fit: cover;
}
After that, you can play around to make the margin and padding of the image fit better within the card.
General advice
For this challenge in particular, you're given a Figma design. I recommend using it, because overall this solution lacks most of the dimensions that were given to follow. For the "Learning" button, I suggest using the HTML span element instead. The font that the challenge required is missing, but it was indicated in both the Figma design and the style-guide.md file. I noticed the use of <b> to make the font bolder; while this is not a wrong approach, both design files also establish that four (4) font prefixes had to be used. I recommend looking into the CSS font shortcut and all of the CSS attributes that it includes, as well as recommending the use of :root variables for them. I suggest removing a few files from your github repository, like the style-guide.md, the readme-template.md and the readme.md if you don't plan on using them, as well as the design folder. Last but not least, the use of landmarks is encouraged for further accessibility.
While I did criticize a lot, I do think the design is pretty well done. Fixing these persnickety behaviours is a headache at first, but it's a skill that will develop over time. Keep it up!
