Bloq preview card

Community feedback

• 

  P

  Steven Stroud•11,890

  @StroudyPosted about 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% 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

  Shayne Wuver•40

  @WindowsM16aPosted about 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

  ---

  

  P

  Steven Stroud•11,890

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

  1

  

  P

  Shayne Wuver•40

  @WindowsM16aPosted about 2 months ago

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

  1