Skip to content
Submitted about 1 year ago

Link Hub using HTML and CSS

Bhuvan•40
@bhuvandev16
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?
  • I'm most proud of the clean and visually appealing design I created for the social link web page
What challenges did you encounter, and how did you overcome them?
  • One challenge I encountered was aligning elements properly across different screen sizes. I overcame this by utilizing CSS Flexbox to ensure responsive design.
What specific areas of your project would you like help with?
  • I would appreciate help in improving the user experience through advanced CSS techniques, such as animations or transitions, to make the page more engaging.
Code

Please log in to post a comment

Log in

Community feedback

  • P
    John Mirage•1,590
    @john-mirage

    Hello, nice work !!

    Here some ways you can improve your project:

    • You can remove the underlines of your links by adding the text-decoration: none; rule.
    • Your card has a fixed width, you can make it responsive by adding a relative width of 100% and a max-width of 350px so the card will shrink when the screen width in under 350px
    • There is no paddings around the card, you can add some horizontal paddings to make the card breathe on mobile device
    • To help you start a project, you can add a css reset file. It defines some rules to ease your workflow.
    • The card has lower paddings on mobile than on desktop, you can add a media querie to reflect this behavior.
    • The social links can be placed in <li> elements surrounded by an <ul> element.
    • You can add meta tags in your <head> element to display informations and an image for the social medias like facebook and twitter.
    • You can define the inter font on the <body> element so the font spread accross all the children elements.
    • The hover effect should only be applied to the devices who have hover feature, you can add a media querie to target those devices with @media screen and (hover: hover) {}

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