Design comparison
Solution retrospective
Can someone help with which elements are supposed to be interactive? i think i missed those.
Community feedback
- @StroudyPosted 2 months ago
Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…
-
Avoid using
id
selectors for styling in CSS because they are too specific and hard to override, making your styles less flexible and maintainable. Instead, use class selectors (.
), which are reusable and more manageable, allowing for better control over your styles and easier updates. -
This does not matter that much at this stage but something to be mindful of for SEO(Search Engine Optimisation),
<meta>
description tag missing that helps search engine determine what the page is about, Something like this<meta name="description" content="description goes here" />
-
Using
max-width: 100%
ormin-width: 100%
is more responsive than justwidth: 100%
because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning. -
Using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM,
You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟
Marked as helpful1 -
- @WindowsM16aPosted 2 months ago
Thank you so much! I've updated my code to match the feedback you gave, i'm still lost on the hover and focus elements though. I think i missed exactly what element are supposed to be interactive, if you could kinldy help with that, i'd be grateful. Also, with the max and min width, where exactly do i need to put them?
0@StroudyPosted 2 months ago@WindowsM16a, I Figured it out, add this code,
h1:hover { color: hsl(47, 88%, 63%); /* Yellow*/ cursor: pointer; }
Makes the
<h1>
element color change when mouse is hovered over it, I Believe that is the only interactive part of the blog card.Hope this answered your question 😁
Marked as helpful1
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