Design comparison
Solution retrospective
it took me more time than I thought. getting the image hover effect took time. i learnt I can use the link tag 'a' to manipulate it which became really handy. Another thing I struggled with was naming CSS. I figured it would be good to learn naming in my current beggining steps will benefit me. I found the BEM method while searching for the best method I might have to learn it before learning other challenges.
Community feedback
- @EONRaiderPosted 10 months ago
Hello. Take a look at CUBE CSS if you're interested in methodology. You can still use BEM along with it but it will also help you structure your code.
Marked as helpful1 - @BlackpachamamePosted 10 months ago
Greetings! you have done a great job š
š Some suggestions
- To improve the semantics of your HTML, you can change your
<div class="attribution">to a<footer class="attribution"> - For what purpose have you placed your image in dropbox and then called it from your site? This will only make the image take longer to load. You just needed to import it from its folder like this:
src="./image-equilibrium.jpg" - Same for avatar image:
src="./image-avatar.png" - Add a
paddingto generate interior space on your card. This prevents you from usingmarginorpaddingon child elements to achieve the same result
Marked as helpful1@shalomkerryPosted 10 months ago@Blackpachamame hey, thanks for the advices. I am using stackblitz to do these challenges and it won't access the image folder for reasons I don't get.
1 - To improve the semantics of your HTML, you can change your
Please log in to post a comment
Log in with GitHub
Join 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