Skip to content
Submitted 5 months ago

Social_Links_Profile : HTML-CSS-SASS Responsive Design Project

Gilbertā€¢360
@juliengDev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I'm proud of using flexbox for responsive design and adding hover animations to links. The project was cool and not too difficult. Next time, I might challenge myself with more advanced techniques, but overall I'm satisfied with how I applied and reinforced my CSS skills in this project.

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

I had to make some research to find that CSS property : white-space: nowrap;

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

No help needed thanks

Community feedback

  • Dylan de Bruijnā€¢3,230
    @DylandeBruijnPosted 5 months ago

    @juliengDev

    Hiya! šŸ‘‹

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

    Things I like about your solution šŸŽ‰

    • Use of semantic HTML elements
    • Clear descriptive CSS classes
    • Use of CSS custom properties

    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.

    • You could add a min-height: 100vh to your body element so it takes up the full height of the viewport while still being able to grow when the content inside it grows.

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

    • The main element should be only used once for the main content of your page.

    • Try wrapping your links in a tags in your list.

    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
    1
    Gilbertā€¢360
    @juliengDevPosted 5 months ago

    @DylandeBruijn

    Thank you so much for your detailed and constructive feedback! I really appreciate the time you took to review my code and provide such helpful insights. Your comments will definitely help me improve and grow as a developer. Your suggestions for improvement are excellent, and I'll be sure to implement them right away. They are all great points that I'll keep in mind for this project and future ones. Your feedback is incredibly valuable, and I'll certainly mark your comment as helpful. It's motivating to receive such thoughtful guidance from fellow developers. I look forward to applying these improvements and continuing to learn. Wishing you all the best, and I hope we have the chance to exchange ideas again in the future! Happy coding to you too! ā˜€ļøšŸ’§šŸŒ±

    1

Please log in to post a comment

Log in with GitHub

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