i used a flex

Community feedback

• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 8 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 a page's "main" section. Change .container to a <main>.

  • Headings should always be in order, so you never start with a <h3>. Also, "Learning" is not a heading, but a paragraph.

  • Replace <span> with <p>, and use the <time> element for the date:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>.

  • The profile image needs a short, descriptive alt text, like "Headshot of Gary Hooper".

  CSS:

  • .figtree is not a class given to any HTML elements, so those declarations don't do anything. Also, you don't need those font properties, and font-family should be placed on the body, not *.

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

  • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

  • Remove the margin on the card. Do not use % for margins.

  • To center the card horizontally and vertically, use Flexbox on the body:

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  

  • Remove the width and height on the card.

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

  0
• 

  Miguel Angel Barahona•20

  @miguel0920Posted 8 months ago

  • separate the texts from each other
  • use semantic html
  • add border-radius to 'Learning' tag

  0