A simple web social link-sharing profile page using HTML and CSS.
Design comparison
Solution retrospective
I would like to understand more about making a responsive web page. I feel like his is hard for me.
Community feedback
- @0xabdulkhaliqPosted 6 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 theimage
, 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 helpful1@LagoGiovannaPosted 6 months ago@0xabdulkhalid Wow! This was really helpfull. I can see now how "alt" works. Thanks!!
0 - @rafaeldgeoPosted 6 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 helpful1@LagoGiovannaPosted 6 months ago@rafaeldgeo Thank you! It's already on my list to read.
1 - @sivaprasath2004Posted 6 months ago
Hello I`m wishing for your completion project.
- I will see your solution you trying to center the
#main-content
use withmargin:5rem auto
this is not proper alignment. - To easily center the
#main-content
, I suggest usingbody{min-height:100vh;display:flex;justify-content:center;align-items:center;}
. This method is simpler and more effective, especially formobile
andtablet
modes. - Additionally, adjusting the
#main-content
width to350px
ensures proper display across different devices.
Marked as helpful1@LagoGiovannaPosted 6 months ago@sivaprasath2004 Thank you so much! I surelly will try theses tips to see how it works. Thanks again!
0 - I will see your solution you trying to center the
- @Code-BeakerPosted 6 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 userem
. 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 helpful1@LagoGiovannaPosted 6 months ago@Code-Beaker thank you so much for you comment! I'll study more about rem!!
0@Code-BeakerPosted 6 months agoYou're welcome @LagoGiovanna
If you want to learn more about responsive design, check out this article.
1 - to make it easier, don't use
- @jestaputraPosted 6 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@LagoGiovannaPosted 6 months ago@jestaputra I'll search more about these topics. Thanks
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord