blog-preview-card-main using CSS

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 2 months ago

  Hi, well done finishing this challenge!

  I have taken a thorough look at your code, and there are a few issues - look at it as learning experiences :)

  HTML:

  • Do not include words like "image", "avatar" or "photo" in the alt text. Screen readers start announcing images with "image", so including such words is redundant.

  • "Learning" is a <p>.

  • For the date, I would consider using the <time> HTML element:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>.

  • Remove the <strong> tags, it is used for information that is urgent. Remember that HTML is all about meaning, not styling.

  • I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.

  • As this is a blog card, the heading would have a link inside.

  CSS:

  • Including a CSS Reset at the top is good practice.

  • I would recommend adding 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.

  • Remove font-family: 'Figtree', sans-serif on the author paragraph - since you have set the font on the body, all descendants will inherit that value.

  • On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

  • You can remove margin: 0 on body, as that is already set on all elements using the universal selector *.

  • Except for the profile image, remove all widths and heights in px and %. Also, remove the max-width in px.

  • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

  • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • On the top image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.

  • You can remove the styles on .image-section.

  • To create the space between the image and the edge of the card, set padding on all 4 sides of the card:padding: 16px;.

  • Hence, you can remove margin-left on the text elements.

  • Add a little margin-bottom on the top image.

  • You don't need to make the card a Flex container unless you want to use gap to create consistent spacing between the elements. Since you're using margin to create the space between elements, you can remove the Flex properties on the parent, as elements stack on top of each other by default.

  • This design doesn't change, so I don't think there is a need for any media queries. When you do need them, they should be in rem or em, not px. Also, it is common practice to do mobile styles first and use media queries for larger screens. For future use, if you want to change the font-size based on the viewport, I recommend using the clamp() function. To find the right values, I use this Fluid Typography Calculator, which I find very effective.

  • Remove overflow: hidden, it is not needed.

  Marked as helpful

  1

  ---

  

  AuryDev•100

  @Auly-hubPosted 2 months ago

  @Islandstone89 thanks it's very helpful

  1
• 

  MikDra1•6,980

  @MikDra1Posted 2 months ago

  If you want to make your card responsive with ease you can use this technique:

  .card {
  width: 90%;
  max-width: 37.5rem;
  }
  

  On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.

  Also to put the card in the center I advise you to use this code snippet:

  .container {
  display: grid;
  place-items: center;
  }
  

  Hope you found this comment helpful 💗💗💗

  Good job and keep going 😁😊😉

  Marked as helpful

  1

  ---

  

  AuryDev•100

  @Auly-hubPosted 2 months ago

  @MikDra1 thanks I'm going to work again

  0
• 

  Mohammad Razim•60

  @yours-truly68Posted 2 months ago

  size is small,

  Marked as helpful

  1

  ---

  

  AuryDev•100

  @Auly-hubPosted 2 months ago

  @yours-truly68 I think I have problems with the sizes

  0