Blog Preview using CSS/HTML

Community feedback

• 

  P

  Theo Harris•360

  @Theosaurus-Rex

  Posted over 1 year ago

  Hey @Madeline0421, great work! Looks very close to the design!

  A couple of suggestions for your HTML that will make it more accessible:

  • The image on this card is purely decorative, so you can actually leave the alt text empty to avoid additional noise for screen reader users! Using alt="" is perfectly acceptable here.
  • In your markup, you're using a lot of divs that could be replaced with more meaningful elements
    • The tag holding the date could be changed to a <time> tag - this tag can be provided a datetime attribute, which takes in the publishing date in a machine-readable format. In a real-world scenario, this will help search engines to rank your website content! You can read more about this tag on W3Schools if you'd like to learn more.
    • For text content such as the body text of this card, a <p> tag is preferable, and denotes hierarchy within the markup content
    • The alt text on your author image isn't very descriptive - if you'd like to provide alt text here, try describing the picture like you would to someone who cannot see it, e.g. "a headshot of a man standing against a plain white wall"

  Otherwise, awesome work! I hope this helps!

  11

  Marked as helpful
• 

  Mohammed Fakih•1,590

  @javascriptor1

  Posted over 1 year ago

  Hello @Madeline0421,

  Great job. Your solution looks identical to the design. Amazing. Here are some notes which I hope will help you in your next challenge ;

  • The font used in this challenge is provided to you with resources files. While it is okay to get the font from Google Fonts or any other provider, try to use locally hosted fonts. use the @font-face declaration for this purpose. Here is a great resource for best practices related to fonts web.dev. Also, the requirement is to use 600,800 weight only but you include all from 300 up to 800.

  • To reset the margin, it's better to do it on the root element thus you don't need to write margin: 0; under html, body,h1, and p tags. The reset usually looks like this :

  * {
  margin:0;
  }
  

  This will reset the margin for all elements on the page which is what we want usually.

  • Use the footer semantic tag for attribution instead of div and don't include it under the main tag as it is not part of the main content.

  • You have aligned .card div items in the center despite the content of the page being on the left !!!!!. Think about alignment always before you align everything in the center. Remove this line from your CSS and everything will be aligned correctly to the left😀:

  align-items: center;

  There is no need to do align-self: start; for 3 or 4 elements to get them back to left

  • Avoid setting fixed width and height for main contents like .card. View your solution on mobile and you will find it is not responsive. I did not see any line in your CSS for media queries. Never mind if you are still learning - just get into it and you will love it at the end once you understand it.

  • flex direction is row by default. No need to include flex-direction: row; when you want flex row.

  • For the date inside the card , its better to wrap it like this :

   <p>
            Published
            <time datetime="2023-12-21"> 21 Dec 2023</time>
   </p>
  

  Make only the date/time part of the time tag

  • You forgot to apply the hover state on the h1 element.

  • border: 3px white; this line has no effect at all and it's not valid. To be valid, you should add a border style for the shorthand to work like 3px white solid

  Best of luck and keep going.

  Regards,

  Mohammed

  00