Skip to content
Submitted 6 months ago

Personal Social Link Page Solution

Qwerytx_•60
@newbscantdev
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 can visualize stuff better and think about what should i do and tool i need faster like i get more used with it

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

I find it hard to make replica of an original one because i can't measure things but its still looks great!

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

honestly i didn't think any of this so if you have any suggestions please drop it below

Community feedback

  • Jo_WithVision•90
    @Jo-with-visionPosted 6 months ago

    Hi,

    Congrats on completing the challenge. I like how you have customised the design!

    Here are some tips after looking at your code (it is not exhaustive, hopefully you will get more feedback from more experience coders):

    • Consider keeping your styles in an external stylesheet and linking to your stylesheet using the <link> element in the <head> section of your html.
    • Consider if the semantic tags you have used describe the content in the most meaningful way. For example, you could consider making your main container a <main> element. You can definitely cut down on your <div> elements; a lot of them (if not all of them) aren't needed to style the project.
    • Reconsider the use of an <h2> for your location text. It is not a heading, so a <p> element would do just fine.
    • It is usual to put box-sizing: border-box; on the universal selector *, if you intended it to act as a CSS reset
    • Consider min-height: 100vh, instead of height: 100vh
    • Try to use responsive units like rem/em instead of px.

    🔥Happy Coding and great design concept!

    p.s. With regards to measuring - I am in the same boat as I don't currently have a Pro subscription. Taking out a Pro subscription would mean access to the Figma design files that contain the exact measurements. You could also open the images you get with the free account into Figma and draw little boxes between the elements and see what the size of the boxes is to get an idea of the padding/margins etc.

    Marked as helpful
    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