Skip to content
Submitted 2 months ago

Social Links Profile

Dark•30
@popcorn150
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?

Well, one thing I'm proud of is that I have been doing this since the first challenge so I already know where I was headed, that way it wasn't hard to handle. Also I want to give a quick thanks to the developers that helped me with my last solution on flexbox (@MohammadSoleimanikia and @mahbt) I didn't have an issue using flex-box this time due to your suggestions on my previous project and it saved me a lot of build time :)

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

For my challenges on this project, I had issue making each buttons seat on their own line.. I was using flex but they were all seating close to each other.

How'd I overcame this? Well I opened my chrome developer's tool to mess around with the display positioning a little, I was trying out different options then when I tried 'Grid' it worked perfectly.

So instead of [display: flex] I did [display: grid] and it worked perfectly for me! :)

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

Any is fine, more tips and tricks to make build faster is highly appreciated thank you. :)

Community feedback

  • MikDra1•6,920
    @MikDra1Posted 2 months ago

    If you want your solution to be just like the design shows I encourage you to use Pixal Perfect extension

    Hope you found this comment helpful 💗💗💗

    Good job and keep going 😁😊😉

    Marked as helpful
    1
    Dark•30
    @popcorn150Posted 2 months ago

    @MikDra1 preciate :♥

    0
  • Teodor Jenkler•3,740
    @TedJenklerPosted 2 months ago

    Hi @popcorn150,

    Nice project! Here are a few additional recommendations:

    OG Meta Tags: I strongly recommend using OG (Open Graph) meta tags to improve SEO and the shareability of your site. Proper OG tags can significantly impact how your site appears when shared on social media and can make a difference in search engine ranking, potentially even affecting whether your site appears in search results.

    Footer Positioning and Text Size: Consider positioning your footer absolutely at the bottom of the page using position: absolute and bottom: 0. This will ensure it stays at the bottom regardless of the page content length. Additionally, increasing the text size in the footer can improve readability, especially on desktop screens.

    ARIA Labels: When semantic HTML elements aren't applicable, make sure to add aria-label attributes to your <div> elements. This practice enhances accessibility and contributes positively to SEO by helping screen readers understand the content and purpose of these elements.

    Keep up the great work!

    Best, Teodor

    Marked as helpful
    1
    Dark•30
    @popcorn150Posted 2 months ago

    @TedJenkler Yup, this was definitely helpful. Who wants to build a site that'd be hard to search, I love your advice on SEO and positing. I'll start using these on my projects for better practice. Preciate ❤️

    1
  • Boris•2,870
    @mkborisPosted 2 months ago

    Nice work @popcorn150, here are a few things to review

    • Use a separate file for your CSS as it improves maintainability.
    • All content should be wrapped within landmarks. Wrap a main tag around the .main-container and a footer for the attribution.
    • To improve the semantic meaning of these social media links, you should use the a (anchor) tag instead of the button tag. The a tag is used for navigation to other pages, while the button tag is designed for interactive actions like submitting forms or for events like toggling content. Also, using an unordered list ul to group the social media links is a better approach for both semantics and accessibility.
    • Font-size should be written in rem not px. This article explains it better Why font-size must NEVER be in pixels.
    • Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.

    Good luck!

    Marked as helpful
    1
    Dark•30
    @popcorn150Posted 2 months ago

    @mkboris awesome, thanks for the feedback.. I've always wondered why I was getting those warning signs but now I know why, preciate ❤️. Also I was just focusing on designers view which is wrong, that was why I wasn't using the anchor tag and ul or li tags.. if it was an actual project I'm sure I'd have been scolded 😅 thanks for correcting me beforehand. Also I love helpful links, like articles and solutions, they help for a faster build time preciate you sharing some.. 🙏🏽

    0
    Boris•2,870
    @mkborisPosted 2 months ago

    @popcorn150 I'm glad the feedback was helpful! Keep going 🙌

    1
  • Lorena Castillo Goche•170
    @cas1092Posted 2 months ago

    overall the design is correct, aparently we both had issues with the sizing (your's too small, mine too big), maybe add some padding to your card i fell it's a little 'skynny'.

    Sorry for the slim feddback but i'm very junior on this

    Marked as helpful
    1
    Dark•30
    @popcorn150Posted 2 months ago

    @cas1092 yup you're correct, if you've checked all my designs they're always so "skynny" let me use your term 🌚. Idk why but I really don't like making them bigger than I'm expecting but I his is a part I should really explore so it doesn't become a bother later on.. junior or not your feedback was very well appreciated ❤️🙏🏽

    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