Design comparison
Solution retrospective
First trial ever. How'd I do? π
Community feedback
- @DrallasPosted over 3 years ago
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.
1@ebukaharryPosted over 3 years ago@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!
0@DrallasPosted over 3 years ago@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. :)
1 - @keith-pricePosted over 3 years ago
Looks like you did well. The first thing I notice is that the font color and weight are different to the original design and the border between the mid and final section is too dark. Apart from that you got all the elements in place. Maybe centre the card on the page as it looks to be higher than centre.
1@ebukaharryPosted over 3 years ago@keith-price thanks Keith! Will make those adjustments as soon as I can!
0
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