recipe-page-main

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 10 months ago

  HTML:

  • 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 into a <main>.

  • Do not use words like "photo" or "image" in alt text. Screen readers would announce your current alt text as "image, omelette photo", which we don't want.

  • Headings must always be in order, so you cannot jump directly from a <h1> to a <h3>. Remember, headings are all about structure and not about how they look. You could always style a heading if needed. I would change the <h3> to a <h2>.

  CSS:

  • On body, add min-height: 100vh.

  • Remove the percentage width on the card. Instead, add a max-width in rem, so it doesn't get too wide on big screens.

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

  • Media queries should be in rem, and you usually want to do the mobile styling as the default.

  Marked as helpful

  1