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

jamiuTheDevā€¢ 20

@jamiuTheDev

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?

I am most proud of the links aspect where each link leads to my accounts.

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

I encountered challenges while decorating my html pace with Css, some elements worked while some proved stubborn but in the end I was able to overcome all of my errors and learn from my mistakes with the help of my mentor

Community feedback

Dylan de Bruijnā€¢ 3,190

@DylandeBruijn

Posted

@jamiuTheDev

Hiya! šŸ‘‹

Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it.

Things you could improve āœļø

  • I suggest adding a bit of padding to your body element so the card has some space around it on smaller viewports.

  • Try experimenting with CSS variables, they help you make your CSS values more reusable across your code.

  • I suggest using clear descriptive CSS classes like .card, .card-title and .card-description.

  • Try using semantic HTML elements like main, section and article.

I hope you find my feedback valuable, and I would appreciate it greatly if you could mark my comment as helpful if it was! šŸŒŸ

Let me know if you have more questions and I'll do my best to answer them. šŸ™‹ā€ā™‚ļø

Happy coding! šŸ˜Ž

Marked as helpful

0

jamiuTheDevā€¢ 20

@jamiuTheDev

Posted

Thank you for your advice. Would it be okay if I can contact you on my future challenges

0
Dylan de Bruijnā€¢ 3,190

@DylandeBruijn

Posted

@jamiuTheDev

Of course, I would appreciate it if you could mark my comment as helpful!

Marked as helpful

0
Daniel šŸ›øā€¢ 44,230

@danielmrz-dev

Posted

Hey there!

Congrats on finishing the challenge! āœ…

Your solution looks awesome!

šŸ“Œ It's a good idea to use semantic HTML elements like <ul> and <li> for lists. This makes your code more accessible, maintainable, and meaningful.

Here's an example of how you can refactor your code:

After Refactoring

<ul class="list-container">
    <li><a href="#">Github</a></li>
    <li><a href="#">Frontend Mentor</a></li>
    <li><a href="#">LinkedIn</a></li>
    ...
</ul>

Using <ul> and <li> makes your content structure clearer, which is better for screen readers and search engines. Plus, it follows best practices for HTML.

Hope this helps!

Keep up the great work!

0

jamiuTheDevā€¢ 20

@jamiuTheDev

Posted

Thanks alot @danielmrz-dev

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