Creating a blog card using Flexbox

Community feedback

• 

  P

  Øystein Håberg•11,010

  @Islandstone89Posted 1 day ago

  HTML:

  • Don't wrap only the text in a <main>, as the <main> represents all of the main content on a page. Instead, wrap the card in a <main>.

  • Change <footer> to a <div>, as <footer> cannot be inside of a <main>.

  • Headings should always be in order, so you would never have a <h3> before a <h2>. Also, "Learning" is a <p>.

  • I would change the alt text on the profile image to "Headshot of Gary Hooper".

  CSS:

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

  • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

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

  • Change line-height: 1.5rem to line-height: 1.5, or line-height: 150%.

  • You don't have to declare flex-direction: row, as that is the default value.

  • Pro tip: Whenever a value is being used several times, it's smart to store it as a Custom Property, aka a variable. Here we have a yellow color that is being used as background for the page and "Learning", as well as heading color when it is hovered. Instead of writing out the hsl value each time, you can declare it once, and reference to it throughout the stylesheet. An added benefit is that if you wanted those values to change, you only need to change it one place, instead of several.

  First, declare the Custom Property on the :root. This means it is available for all elements in the DOM. To store a variable, we use -- followed by a name of our choice:

  
  :root {
    --clr-accent: hsl(47, 88%, 63%);
  }
  

  Now we can update the code using the Custom Property:

  body {
      background-color: var(--clr-accent);
  }
  

  .learning {
      background-color: var(--clr-accent);
  }
  

  a:hover{
      color: var(--clr-accent); 
  }
  

  I hope this made sense. Overall, great work! :)

  Marked as helpful

  0
• 

  Ira-Lis•60

  @Ira-LisPosted 4 days ago

  The page contains semantic code. The code is accessible. It looks good on different screen types.

  1