Frontend-Mentor-Blog-Preview

Community feedback

• 

  P

  Øystein Håberg•10,550

  @Islandstone89Posted 9 months ago

  HTML:

  • Remove .bg, it is not needed.

  • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify the "main" section of a page. Change .container to a <main>.

  • "Learning" is not a button, but a <p>.

  • Headings must always go in order, so you cannot start with a <h5>. Besides, this is not a heading, but a paragraph, and you should wrap the date in a <time> element: <p>Published<time datetime="2023-12-21">21 Dec 2023</time></p>.

  • The profile image needs a short and descriptive alt text, without using words like "image" or "photo".

  • "Greg Hooper" is not a heading, as it doesn't introduce new content. Make it a <p>.

  CSS:

  • It's good practice to include a CSS Reset at the top.

  • Do not change the font size to 62.5% - it is bad for accessibility.

  • The properties on .bg should be moved to the body.

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

  • The card should have a max-width in rem, not %.

  • When declaring display: flex, the default value is flex-direction: row, so there is no need to set it explicitly.

  • Instead of adding horizontal padding to each of the elements, add padding on all sides of the card itself.

  • This challenge doesn't require any media queries. When they are needed, they should not be in px, but in rem.

  Marked as helpful

  0

  ---

  

  mr-maddin•40

  @mr-maddinPosted 9 months ago

  Thank you for your advice 🙏I started learning this for about 3 weeks ago, so I be very happy for any advice and tip 😃 @Islandstone89

  1

  

  mr-maddin•40

  @mr-maddinPosted 9 months ago

  i've re-upload the files. These tips really worked, thank you!!! Greets from Austria @Islandstone89

  1

  

  P

  Øystein Håberg•10,550

  @Islandstone89Posted 9 months ago

  @mr-maddin Happy to help :)

  0