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 Page

Divyaā€¢ 50

@Divya4879

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'm most proud of completing this exercise within my estimated time-frame, adding my own color-theme to it, and learning about a new css property.

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

I didn't really encounter a problem as it;s currently very easy & straightforward. But I did learn to add a cursor property as pointer in this one.

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

I would like feedback regarding my code structure, the "markup" and the "label" part.

Community feedback

Dylan de Bruijnā€¢ 3,190

@DylandeBruijn

Posted

@Divya4879

Hiya! šŸ‘‹

Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it. Nice addition to add your own color-theme! Very good that you completed the project within your estimated time-frame.

Things I like about your solution šŸŽ‰

  • Responsive
  • Clear descriptive CSS classes

Things you could improve āœļø

  • Try putting your buttons in a list and changing them into links, this way you get the cursor pointer automatically.

  • Try using a heading tag for the name on the card to make it more semantically correct.

  • Good job on centering your card using position: absolute, maybe next time you can use something like Flexbox to center it?

  • Try using relative units rem and em for your font-sizes.

  • Try using CSS variables to make your values more reusable across your code.

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

Divyaā€¢ 50

@Divya4879

Posted

@DylandeBruijn Thank you so much for your valuable feedback. It's well-thought of and really helpful.

I'll implement the changes soon. Thanks again.

1
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

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