Resolução - Social links profile | HTML5 e CSS | #2 Newbie
Design comparison
Solution retrospective
When I thought about the structure of the nav bar I used lists with links, and styled the hover on the list, it worked, but the link only worked when I clicked exactly where it was written, it wasn't what I wanted.
After trying to solve it using this structure, I thought about changing things and replaced the main structure with buttons, in fact it was the same thing, it just had a button inside the link, the styling ended up flowing much easier than before and I was happy with the result
So I looked on YouTube at someone's solution to see how similar it was to mine, it turned out that in the video the person had done it the same way I did it the first time, so I decided to try again, I removed the buttons and tried to style it by list again, after trying a lot I really couldn't get the link to work together with the hover in the list, so I decided to go back to the buttons and it ended up looking like this.
Basically, that's why it took me longer than I thought.
What specific areas of your project would you like help with?Well, the nav buttons.
Personally, I really liked how it turned out, I believe there may be a more professional way of doing this but as I said in the README, this was my solution and I'm grateful to receive feedback on what I could do differently.
Community feedback
- @TedJenklerPosted 3 months ago
Hi @Ramon-Alvez,
Nice project! Here are a few suggestions for improvement:
Simplify HTML: To reduce code, consider using CSS Flexbox for the <ul> element. Setting flex-direction: column can eliminate the need for unnecessary <li> tags.
Accessibility: Adding ARIA labels to your links can greatly enhance accessibility and help screen readers provide better navigation. For example:
<a href="https://example.com" aria-label="Visit our homepage">Homepage</a>
SEO Optimization: Since this project might be shared on social media, adding Open Graph (OG) meta tags in the header will improve SEO and make your links more attractive when shared.
Example:
<meta property="og:title" content="Your Project Title"> <meta property="og:description" content="A brief description of your project."> <meta property="og:image" content="URL to your image"> <meta property="og:url" content="URL to your project">Extra Touch: For a more polished look, consider adding a transition effect to your hover states. For example:
a { transition: background 0.5s ease; } This will animate the background change, making the hover effect smoother and more engaging.
Hope these suggestions are helpful!
Best, Teodor
Marked as helpful1@Ramon-AlvezPosted 3 months agoHi @TedJenkler, thanks for the tips!
After I arrived from college I tried to follow your step by step and it ended up working, so I want to thank you again. And if you are interested, please take another look at my code!
About the SEO Optimization, I did a little research on the subject, I understood what it was for but I didn't see many practical examples, so I ended up copying the meta tags you sent me and doing what I thought to be right.
If there is something wrong or something I can improve, I would be grateful to hear again and come back to code more!
1 - @salva-itPosted 3 months ago
Congratulations Your code is very well written and the structure is clean. I have a few small tips that could help improve further
Using the buttons: The buttons inside the links don't seem necessary. Because the links themselves are clickable on their own. You can skip the buttons and apply the buttons' CSS classes to the links.
Suggest to use rem instead of px
It is better to design the project in a responsive manner so that it can be displayed correctly on all platforms.
good luck
Marked as helpful1@Ramon-AlvezPosted 3 months ago@salva-it Thanks for the reply!
I will now see other people solutions because I really wanna know how to do skipping buttons.
And about rem, I will search about it too.
I'm really, really grateful for the answer!
0@Ramon-AlvezPosted 3 months agoHi again @salva-it!
I came back for that code and made some ajustments in the HTML structure, I removed the lists and buttons and created a div with the links inside, after that it was easy to style and everything ended up working fine.
For rem, I will use it in a further project because I need to study it more, but I really appreciate your tips, they were of great help!
0
Please log in to post a comment
Log in with GitHub
Join 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