A simple web social link-sharing profile page using HTML and CSS.

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  USING ALT EFFECTIVELY :

  • The alt text "Giovanna's photo" is somewhat vague and not descriptive enough.

  ---

  • It fails to adequately convey the content or purpose of the image, which is essential for accessibility and user experience. Because the screen readers will read out the image's alt like ''A picture of Giovanna's photo". So you don't want to add words like "photo", "picture" because accessibility devices will automatically add the word "picture" or "photo" by default.

  ---

  • A more appropriate alt text could describe the specific content or function of the avatar, such as "Giovanna's for social media". This would provide clearer information to users who rely on screen readers or encounter image loading issues.

  ---

  • The alt attribute should explain the purpose of the image, in our case the image is a portrait of yourself right ? then alt would be your name itself.

  ---

  • E.g. alt="Giovanna"

  ---

  <img src="assets/images/avatar-giovanna.jpg" alt="Giovanna">
  

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1

  ---

  

  Giovanna Lago•20

  @LagoGiovannaPosted 7 months ago

  @0xabdulkhalid Wow! This was really helpfull. I can see now how "alt" works. Thanks!!

  0
• 

  P

  Rafael Dias•910

  @rafaeldgeoPosted 7 months ago

  Hi Giovanna! Congratulation for you solution! My suggestion. You could consult web site "web.dev" responsive design. It explains everything very very simple, I think it can help you.

  Marked as helpful

  1

  ---

  

  Giovanna Lago•20

  @LagoGiovannaPosted 7 months ago

  @rafaeldgeo Thank you! It's already on my list to read.

  1
• 

  Sivaprasath•2,520

  @sivaprasath2004Posted 7 months ago

  Hello I`m wishing for your completion project.

  • I will see your solution you trying to center the #main-content use with margin:5rem auto this is not proper alignment.
  • To easily center the #main-content, I suggest using body{min-height:100vh;display:flex;justify-content:center;align-items:center;}. This method is simpler and more effective, especially for mobile and tablet modes.
  • Additionally, adjusting the #main-content width to 350px ensures proper display across different devices.

  Marked as helpful

  1

  ---

  

  Giovanna Lago•20

  @LagoGiovannaPosted 7 months ago

  @sivaprasath2004 Thank you so much! I surelly will try theses tips to see how it works. Thanks again!

  0
• 

  Tharun Raj•1,330

  @Code-BeakerPosted 7 months ago

  Hi there, congratulations on successfully completing this challenge. You've done a great work with this one!

  The desktop design looks good. But, you need to add a media query to make your website responsive.

  • to make it easier, don't use % for the width and height of the container(#main-content). Instead use rem. This is better for responsive design.

  #main-content {
  width: 30rem; /* change this to an appropriate value */
  height: auto;
  

  • To make the website responsive, you need to add a media query to your code.

  @media (width < 50rem) {
  #main-content {
  max-width: 20rem; /* or an appropriate value */
  }
  

  Hope this helps you 😊

  Marked as helpful

  1

  ---

  

  Giovanna Lago•20

  @LagoGiovannaPosted 7 months ago

  @Code-Beaker thank you so much for you comment! I'll study more about rem!!

  0

  

  Tharun Raj•1,330

  @Code-BeakerPosted 7 months ago

  You're welcome @LagoGiovanna

  If you want to learn more about responsive design, check out this article.

  1

  

  Giovanna Lago•20

  @LagoGiovannaPosted 7 months ago

  @Code-Beaker I added to my reading list! Thanks.

  0
• 

  KdJesta•360

  @jestaputraPosted 7 months ago

  you must to be style to using @media screen. You font and image is to big and You can make the div smaller, I hope this can help you

  2

  ---

  

  Giovanna Lago•20

  @LagoGiovannaPosted 7 months ago

  @jestaputra I'll search more about these topics. Thanks

  0