First Project

Community feedback

• 

  Boris•2,850

  @mkborisPosted 3 months ago

  Hi @gbaby97 great job completing your first challenge, here are a few things to review

  There are a few things missing from the head section that can improve your webpage:

  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> Defining the viewport helps your webpage render properly on various devices like desktops, mobiles, and tablets.

  • <meta charset="UTF-8"> It's a good practice to specify the character encoding used in your document.

  • The text content in these div elements (Name, location and description) should be semantically wrapped in more appropriate HTML tags like headings h2 or paragraphs p for better accessibility and structure.

  • To properly center the card, add this on your body and remove the all the margin properties from the .container

      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
  

  • Using Flexbox would have been a better choice for this than Grid.
  • Just the a tag is sufficient for the social links, the buttons are not needed for this. Also, using an unordered list ul to group the links is a better approach for both semantics and accessibility. You use a single class for all the links and style them the same rather than creating different classes for every single one.
  • Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.

  Hope this helps, Good luck!

  Marked as helpful

  0

  ---

  

  Gary Guijarro•50

  @gbaby97Posted 3 months ago

  Hey @mkboris I really appreciate you taking the time to provide feedback. thank you ill definitely apply these tips for my next project!

  1