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

Social Links Profile

@punitkotian

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 specific areas of your project would you like help with?

I want to know how to improve my CSS skills, particularly in responsiveness

Community feedback

P
Steven Stroud 11,810

@Stroudy

Posted

Hey, fantastic effort on this! You’re really nailing it. Just a few things I noticed that could make it even better…

  • I think the <nav> is used incorrectly here, The use of <nav> for every set of links. If the links are not related to site navigation (e.g., social media links or related articles), a <nav> isn't necessary.

  • These <span> should really have semantic tags like headings (<h1> to <h6>) and paragraphs (<p>) convey structure and meaning to content, improving accessibility, SEO, and readability by helping search engines and screen readers interpret the content. <span class="profile-card__name">Jessica Randall</span>

  • For future project, You could downloading and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts

Great job taking the time to learn! Your efforts are paying off, and I hope these insights guide you to even more success. Keep pushing forward, and remember, you’ve got this! Enjoy your coding adventures! 💪

Marked as helpful

0

@punitkotian

Posted

Thanks so much for the feedback. I really appreciate the tips on improving my use of semantic tags and the proper use of <nav>. I also just learned something new about using @font-face, and I’m definitely going to try that out in my next project. Your insights are super helpful, and I’m excited to keep refining my skills. Thanks again for the encouragement@Stroudy

1
P
Steven Stroud 11,810

@Stroudy

Posted

Hey @punitkotian, You got this bro, This is what this community is about! I encourage you to do code reviews aswell you can compare and see what others have done and how you could of done it differently.

0

@punitkotian

Posted

thanks for the support! I'm not that good at doing code reviews yet, but I'll definitely give it a try. It sounds like a great way to improve and learn from others. @Stroudy

1
P
Steven Stroud 11,810

@Stroudy

Posted

@punitkotian, You will be surprised how much you can help others.

0

@Guilherme-Ferreti

Posted

Hello 😃,

In my experience, flex-box can get you very far when dealing with responsive layouts.

There is also a nice free course from Kevin Powell named "Conquering Responsive Layouts". I learned a lot from it.

There is also a really cool free game called "Flexbox Zombies" that teach you everything you need to know about flexbox.

And take a look at the "Mobile First" concept, it really helps when building responsive layouts.

Marked as helpful

0

@punitkotian

Posted

Yeah, I'll definitely give it a try Thanks a lot for the recommendations@Guilherme-Ferreti

0

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