@Drallas
Posted
He Ebuka Harry
This 'simple' card requires many details in HTML and CSS, good first one to start with. There are many details that are a bit off position card (not y-axes centred) missing dark line (but too dark in the preview up here).
You have used a lot of ID's in your CSS: I think classes would have been a better choice. "The basic rule that you need to keep in mind while using classes and ids in CSS is that, id is used for single elements that appear on the page for only once (e.g. header, footer, menu), whereas class is used for single or multiple elements that appear on the page for once or more than once"
Seems you went for ID's because you already had classname with the same name as you had in mind. But you could also have used BEM https://www.integralist.co.uk/posts/bem/#4
<div class="photos">
<h3>1.4K</h3>
<span class="photos__text-below">Photos</span>
</div>
Like that you could have one class for all three elements, using margin and padding on the surrounding block to move them in place.
@ebukaharry
Posted
@Drallas thank you very much for this feedback. I had already made some corrections to centre the y-axis and also make that line a bit lighter just like in the design. I'll take your corrections on IDs and classes. Thanks so much!
@Drallas
Posted
@ebukaharry Np glad to help.. we are all here to learn and improve. Please remember that it's possible to upvote feedback if it was helpful to give some credit to the mentors. :)