Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Bloq preview card

P

@WindowsM16a

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What specific areas of your project would you like help with?

Can someone help with which elements are supposed to be interactive? i think i missed those.

Community feedback

P
Steven Stroud 4,140

@Stroudy

Posted

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% or min-width: 100% is more responsive than just width: 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 helpful

1
P

@WindowsM16a

Posted

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

P
Steven Stroud 4,140

@Stroudy

Posted

@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 helpful

1
P

@WindowsM16a

Posted

@Stroudy , It does, thank you very much! :)

1

Please log in to post a comment

Log in with GitHub
Discord logo

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