Skip to content
Submitted 7 months ago

Link Hub using HTML and CSS

Bhuvan•40
@bhuvandev16
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 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.

Community feedback

  • John Mirage•1,590
    @john-miragePosted 7 months ago

    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) {}
    0

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