social-links-profile

Community feedback

• 

  Rebecca Padgett•1,840

  @bccpadgePosted 4 months ago

  Hello @ArjayGithub-dev. Congratulations on completing this challenge!!!🎉

  I have a few tips you might be interested in to improve your solution.

  HTML 📃:

  • Every website should have at least one landmark like a main tag. You can wrap all your content using main tag.
  • Attribution can be contained in a footer tag
  • Images must have alt text for screen readers
    • Example: <img src="assets/images/avatar-jessica.jpeg" alt="headshot of Jessica Randall">

  To make your HTML more accessible

  • Use semantic HTML tags

  For the social media wrap them in ul tag

  <ul>
   <li>
    <a href="wwww.github.com"> Github</a>
  </li>
  </ul>
  

  The code above is showing that a user can link on the Github link and go to the website.

  More info📚:

  • HTML a Tag
  • Links and Buttons on websites

  CSS 🎨:

  • Best practice to remove all the default styles using CSS Reset
    • A Modern CSS Reset by Josh Comeau
    • A 'more' Modern CSS Reset by Andy Bell
  • Font size must be in rem units. Pixels don't scale when users want to change their font size in their preferred web browser.

  The code below is updated with comments explaining my corrections.

  body{
      /* height: 100vh; */ Using height or width gives elements a fixed size so you can change it to min-height
      /* margin: auto; */  You can remove this line of code because it is unnecessary.
      display: grid;
     /* justify-content: center; */ You can use place-content: center which is CSS shortand property for justify-content:center and align-items:center
     /* align-items: center; */
      background-color: hsl(0, 0%, 8%);
      font-family: "Inter", sans-serif;
  }
  
  .container {
      background-color: hsl(0, 0%, 12%);
      border-radius: 10px;
     /* width: 90vw; */ You can remove this line of code because it is unnecessary.
      max-width: 300px; 
      padding: 20px;
      text-align: center; 
  }
  

  Here is my solution to this challenge Social links profile

  I hope you find this useful and don't hesitate to reach out if you have any questions.

  1
• 

  Ridwan Hasan•400

  @Ridwan10000Posted 4 months ago

  @ArjayGithub-dev Good Job. Use <main> land marks. Also use <footer> instead of <div> to include attributions. Instead of using color: white in too many places use it in .container rule. Try to use em instead of px as long as you can avoid using px.

  Nice clean code. Very good job. Keep coding!

  1