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

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!

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.

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.

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 😊

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