Blog preview card

Community feedback

• 

  Bernardo Poggioni•5,280

  @R3ygoskiPosted 6 months ago

  Hello Nikola,

  Firstly, congratulations on completing the project!

  I have some tips for you that I think could help you improve your solution. In your body, add height: 100vh. This way, you ensure that the body's height matches the exact height of the vertical viewport.

  Also, in your card, try using clamp(). This allows you to set a minimum, base, and maximum size. For example: clamp(310px, 100%, 420px). This will prevent your card from growing too large on larger screens.

  Now, a tip more focused on HTML. Try using more semantic tags, as this improves accessibility. Here are four tags you could consider changing:

  • <div class="body">: Instead of this div, you could use a <main> tag because it's the main content of your page.
  • <div class="body-header">: Instead of this div, you could use a <figure> tag because it contains the main image of your page.
  • <div class="body-body">: Instead of this div, you could use a <section> tag because the internal content of this div is related to each other and dependent on the main content.
  • <div class="body-footer">: Instead of this div, you could use a <footer> tag because it marks the end of the content.

  Once again, congratulations on your project! Keep practicing and improving. If anything I said is confusing, please ask below, and I'll try to help in the best way possible.

  0