Submitted 22 days ago

Resolução - Social links profile | HTML5 e CSS | #2 Newbie

Ramon-Alvez• 130

@Ramon-Alvez

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Social links profile

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What challenges did you encounter, and how did you overcome them?

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

Teodor Jenkler• 3,720

@TedJenkler

Posted 21 days 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:

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 helpful

Ramon-Alvez• 130

@Ramon-Alvez

Posted 21 days ago

Hi @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!

Salva• 250

@salva-it

Posted 22 days 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 helpful

Ramon-Alvez• 130

@Ramon-Alvez

Posted 21 days 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!

Ramon-Alvez• 130

@Ramon-Alvez

Posted 21 days ago

Hi 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!

Please log in to post a comment

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