Flexible blog preview card using HTML and CSS

Community feedback

• 

  P

  Kamran Kiani•2,700

  @kaamiikPosted 30 days ago

  Some notes which may improve your code:

  • If you see this design as a clickable card, It's a very bad practice to wrap all of your elements inside an a tag. It leads to some problems for screen readers and also the a tag is an inline element and You put so many block level elements inside of it. I suggest read this link to learn how to deploy a clickable card: https://inclusive-components.design/cards/

  ---

  • I personally think If you put an a tag inside your h1 is enough for this challenge. And consider that you are writing the code of a card not a page. and If you change the h1 to h2 is better.

  ---

  • Avoid using IDs (#) for CSS styling. IDs should be reserved for:
    • JavaScript functionality (e.g., event listeners, DOM manipulation)
    • Linking HTML elements (e.g., anchor tags, form labels)
  • Use classes (.) instead for CSS styling because:
    • Classes are reusable across multiple elements
    • Classes have lower specificity, making styles easier to override
    • Multiple classes can be applied to one element
    • Classes encourage more maintainable and modular CSS

  ---

  • Profile images do not need alt text. Avoid using words like image, picture, or photo in alt descriptions.

  ---

  • It's recommended to use a proper CSS reset at the beginning of your styles. Both Andy Bell and Josh Comeau provide excellent CSS resets, which you can easily find online.

  ---

  • You do not need min-width: 327px; in your code or width: 50%;. You only need max-width and the unit should be in rem not px.

  ---

  • For centering your card use either flexbox or grid. I suggest flexbox.

  ---

  • This height: 2rem; is wrong. You should not limit your text container.

  ---

  Marked as helpful

  0

  ---

  

  P

  milicaaa175•130

  @milicaaa175Posted 28 days ago

  @kaamiik thank you so much, this is really helpful! One thing that I need to ask is do you need to have an h1 at all? I think that when I submitted the solution there was a message that there is no h1 and that that is not good, so I'm a bit confused.

  0

  

  P

  Kamran Kiani•2,700

  @kaamiikPosted 28 days ago

  @milicaaa175 Each page should have only one h1 tag because you only have one title in your page. But here in this challenge you have a card and in a real scenario this card is part of a page. So It's better to use a h2 here or you can use h1 but remember this point.

  Marked as helpful

  0
• 

  yoyoTan•30

  @VickTanPosted about 1 month ago

  nice!！

  0