Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Social links profile in HTML + CSS

Ralph 190

@RalphPastel972

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Just being consistent. My 3rd challenge in 4 days.

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

I still can't import fonts or use CSS variables without looking at my cheat sheets.

I am not sure the best way to name my CSS variables.

What specific areas of your project would you like help with?

n/a

Community feedback

Account Deleted

Great job! I recommend using the <article> and <nav> tags, along with <ul> and <a> tags. When a user clicks on one of the links, it will take them to the page or site specified in the href attribute of the <a> tag. Don't forget to use aria-label to improve accessibility, and avoid using <div> inside <h1> and the <img> tag. Instead of using <div> for location and bio, use the <q> and <h2> tags. For the CSS code, try to remove unnecessary and duplicate elements like font-weight. Good luck!

Marked as helpful

1

Ralph 190

@RalphPastel972

Posted

@dakirzakaria Hey!

It is a very thorough and useful comment! I really appreciate that! I'll definitely add the <article> and <nav> tags along with <ul> and <a> tags. It's a good idea. I didn't even know about the <q> tag. thank you. I tend to over use div and I need to curb that behavior early one.

I will also refactor the CSS as you advised.

I didn't know about the aria-label at all. I am reading about it now. Thanks!

I will correct that as soon as I finish the recipe page. (I will actually try to use your good advice in the recipe page as well.)

I'll follow you because you're inspirational and full of good practices! Thanks again!

0

Account Deleted

@RalphPastel972 Thank you! I'm glad you found the comment thorough and useful. Adding the <article> and <nav> tags along with <ul> and <a> tags will definitely improve your HTML structure. The <q> tag is great for inline quotations. It's a good practice to minimize the use of <div> for better semantic HTML.

Refactoring your CSS to remove redundant and excessive properties will make it cleaner and more efficient. I'm happy to hear you're looking into aria-label for accessibility—it's an important aspect of web development.

Good luck with your recipe page! I'm sure you'll do great, especially with these new practices in place. Thanks for the follow and your kind words. If you have any more questions or need further advice, feel free to ask!

1

Please log in to post a comment

Log in with GitHub
Discord logo

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