Blog preview card | CSS | HTML

Community feedback

• 

  P

  Kamran Kiani•2,700

  @kaamiikPosted 2 months ago

  Some few notes:

  1. Put all your card content inside a main element and after main you need a footer that you have it already in your code. channge the footer inside your article to a div because It's completely pointless.

  ---

  2. Use a p tag instead of span. And there is no need for aria-label.

  ---

  3. Consider this card is part of a page and in a real scenario we should not use h1 here. h2 may be more proper.

  ---

  4. Your top image is decorative so the alt should be empty. Also the profile pictures does not need alt text and you can put empty for that.

  ---

  5. Your font-size is 16px in the root and no need to define it again and never change the font-size in root. The standard is 16px that means 1rem.

  ---

  6. Use min-height: 100vh; instead of height:100vh;. height: 100vh strictly limits the height to the viewport size, potentially causing overflow issues if the content is larger than the viewport. On the other hand, min-height: 100vh allows your element to grow in height if the content exceeds the viewport size.

  ---

  7. No need for width: 100%;.

  ---

  8. Never limit your width and height in a container or element or tag that contains text inside. When you limit the width and height of elements containing text, you risk the text being cut off, overflowing, or becoming unreadable, especially on smaller screens or when the text dynamically changes. It's generally better to allow the container to adjust its size based on its content or set a flexible size that can adapt to different screen sizes and text lengths. You only need max-width here in your .card because it prevents elements from stretching beyond a certain point, keeping them visually appealing across different screen sizes. It ensures your design remains adaptive and doesn't get too wide on larger screens.

  ---

  9. Also your max-width should be in rem unit.

  ---

  10. I've never used @layer and some other stuff in your code but I'm sure you can write your css without them and they are just overcomplicate your code. make your code easy to read and clean.

  Marked as helpful

  1

  ---

  

  Bvandyke•40

  @ridge-runnerPosted 2 months ago

  @kaamiik wow, thank you for such a detailed critique!

  I've made note of your advice and will use it in future challenges! The points you set out were all blind spots that I've been unsure about for a long time.

  0

  

  P

  Kamran Kiani•2,700

  @kaamiikPosted 2 months ago

  @ridge-runner You have to first refactor this challenge and then go for next challenge. This is really important.

  Marked as helpful

  1

  

  Bvandyke•40

  @ridge-runnerPosted 2 months ago

  @kaamiik ok, I'll refactor it before moving on to further challenges. Thanks again for your time and concern!

  1
• 

  Giovanni Emilio Ramirez Berrocal•30

  @GERB-DEVELOPERPosted 2 months ago

  Se aprecia un buen conocimiento de semántica así como el uso del diseño responsivo. Su código Html simple pero efectivo, cumplo con lo solicitado así como la practicidad del código css.

  1

  ---

  

  Bvandyke•40

  @ridge-runnerPosted 2 months ago

  @raymar73 Gracias! Estoy intentando tomar las cosas paso a paso.

  0