Social Links Profile w/HTML and CSS

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 7 months ago

  Hi, it's me again - good job! :)

  A few suggestions:

  HTML:

  • I would write "Headshot of Jessica Randall" as the alt text.

  • I think "Jessica Randall" should be a heading - since this card would likely be on a page with other components, I would not make it the main heading(<h1>) but have it as a <h2>.

  • Instead of <span>, I see a list of links. Hence, I would use an <ul> with 5 <li> elements, each containing a link:

  <ul>
     <li><a href="#">Text</a></li>
  </ul>
  

  CSS:

  • Remove the default list styling:

  ul {
    list-style: none;
    padding: 0;
  }
  

  • Remove the width.

  • Remove font-weight: 400; on .author-bio - since that is the default font-weight for paragraphs, there is no need to declare it explicitly.

  Marked as helpful

  2

  ---

  

  P

  Mukarram Haq•270

  @MukarramHaqPosted 6 months ago

  @Islandstone89 Initially I went for a link but then I went back to doing something different

  Using an unordered list didn't even cross my mind. I will do that the next time for sure.

  Thank you for the amazing feedback :)

  1
• 

  P

  Koda👹•3,830

  @kodan96Posted 7 months ago

  hi there! 🙌

  Maybe it's a good idea to make your container prevent touching the sides of the screen by adding a max-width to it in percentage.

  The other thing: you used border-radius: 100px; on your image, which is fine now, but when it comes to bigger images, it's better if you use border-radius: 50%;, if you want to make your omg a circle , because on bigger screens 100px might deform your img as it scales up with the screen size.

  But it looks great tho, keep up the grind 👏👏

  Marked as helpful

  2

  ---

  

  P

  Mukarram Haq•270

  @MukarramHaqPosted 7 months ago

  @kodan96 Will definitely try that. Thank you!

  1
• Account deleted

  Hi, congratulations on completing the challenge!

  Looks very good . Try to include the hover effect which is shown in the design files ( design folder - active states image ) .

  I hope it helps you!

  Have a nice coding!

  1

  ---

  

  P

  Mukarram Haq•270

  @MukarramHaqPosted 7 months ago

  @dev-arpitsharma I would but, I currently have a free account so I can't really access those, haha.

  You have any advice for me about the code?

  and can you kindly look at the mobile design and tell me if that's how it should be or did I mess up haha

  0

  Account deleted

  @MukarramHaq I can't give exact advice but i will say that try to look other people's code after you complete the solution.

  For reference , you can somewhat compare your designs with this guy who is just too good .

  Cheosphere

  profile/Cheosphere

  0