Blog preview card with cursor interactability

Community feedback

• 

  P

  Teodor Jenkler•3,740

  @TedJenklerPosted 2 months ago

  Hi @emeraldknytt,

  Nice project! I noticed a couple of things that could be improved:

  Semantic HTML: Instead of using multiple <div> elements, you should consider using semantic HTML. For instance, your card could be wrapped in a <main> tag, and you could purge most of the unnecessary <div>s. Using Flexbox with flex-direction: column inside the card would give you a cleaner design and improve readability, SEO, and accessibility.

  Heading Usage: The <h1> tag is meant for page titles and should be used only once per page. While you’ve correctly used it just once here, in smaller projects or components like this, you can skip using <h1> and go with an <h2> instead. If you had multiple cards on the same page, using several <h1> tags would violate the one <h1> rule.

  Use of <time>: When displaying a time element, consider using the <time> tag to further improve accessibility and readability.

  Keep up the great work!

  Best, Teodor

  Marked as helpful

  1
• 

  Mateusz•390

  @MatPawlukPosted 2 months ago

  Great job! 😊 Here are a few suggestions to improve your code:

  The settings width: auto and height: 960px are generally correct, but it's worth considering responsiveness. You might want to use relative units (e.g., vh for height) or media queries to adjust the height for different screen sizes.

  The styling of the element with an id in CSS (#description) is valid, but it's worth noting that id selectors have higher specificity than classes. This means that if you need to override the style for this element in the future, styling with id may be harder to modify. Instead of using id, consider using a class.

  The HTML structure is correct and well-organized. However, it’s advisable to add alt attributes to all images to enhance accessibility.

  Marked as helpful

  0

  ---

  

  emeraldknytt•90

  @emeraldknyttPosted 2 months ago

  @MatPawluk Thank you very much! I will make sure all changes are made to better improve my code. I appreciate your effort!

  1