flexbox, custom variables, pseudo-elements, pseudo-classes

Community feedback

• 

  P

  Kamran Kiani•2,780

  @kaamiik

  Posted 5 months ago

  First I strongly suggest get feedback on every challenge and refactor your code before you start a new challenge.

  HTML Structure

  • For decorative and avatar images, use empty alt text: alt=""
  • For the avatar image use the img tag in html. You don't need to use background on CSS.
  • header is for repeatable contents like nav items and page logo on the top of your website that repeats in every page. You need to use p here.
  • Your h1 is an a tag too. So inside the h1 wrap the text inide an a tag too. You don't need tabindex attribute here.

  ---

  CSS Best Practices

  • Start with a proper CSS reset (Andy Bell or Josh Comeau resets are recommended)
  • Use viewport height properly: This ensures content can expand beyond viewport height
  • Avoid fixed widths:
    • Remove width: 350px from .card
    • Use max-width for better text container adaptability
  • Use relative units:
    • rem for font-size and max-width instead of px
    • Learn more about this here

  00
• 

  Moirand•60

  @Moirand

  Posted 5 months ago

  • I don't think put the avatar image in p::before is a best practice, but that's a pretty creative way.

  • Add these lines, so you don't have to define margin-bottom: 0px; in each element. Read about box-sizing: border-box; in this site. Also, these lines are common used in most of projects, so I recommend you to always add them.

  *,
  *::after,
  *::before {
      padding: 0px;
      margin: 0px;
      box-sizing: border-box;
  }
  

  Awesome👍

  00