Skip to content
Submitted about 2 months ago

Responsive social links profile using mobile first approach

SITRAKA Tsimisaraka Joliot•70
@Joliot-TSIMISARAKA
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 think the most important thing I learned in this project is the way to make use of relative units better and always bearing in mind the layouts of the whole page even when creating a simple component. I will try to integrate my newfound knowledge from this on the upcoming projects

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

Finding the most suitable relative units when setting the max width or the right margin and padding

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

I'm still not too familiar with best practices about accessibility, and so I struggle finding the right semantic html tag to use

Community feedback

  • Steven Stroud•11,890
    @StroudyPosted about 2 months ago

    Hello again, Fantastic effort on this! You’re really nailing it. Just a few things I noticed that could make it even better…

    • I would put these into a <ul> <li>, and the text should be wrapped with a <a> so it is accessible with a keyboard using the tab key, Using an <a> tag for navigation is semantically correct, improves accessibility for screen readers, and ensures consistent behavior across browsers, unlike a <button> or a <div> not intended for links.
                        <div class="links">
                        <p><a href="#">GitHub</a></p>

                        <p><a href="#">Front-end Mentor</a></p>

                        <p><a href="#">LinkedIn</a></p>

                        <p><a href="#">Twitter</a></p>
                        <p><a href="#">Instagram</a></p>
                    </div>

    • Using font-display: swap in your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.

    • I think you can benefit from using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM,

    Great to see you implemented some feedback I gave you, I hope you found this advice helpful! Keep up the great work, You’re doing amazing, and I can’t wait to see what you create next. Happy coding! 🚀

    Marked as helpful
    0
    SITRAKA Tsimisaraka Joliot•70
    @Joliot-TSIMISARAKAPosted about 2 months ago

    @Stroudy Thank you very much, I'm learning more and more things as I progress through the challenges, thanks to all of your helpful feedbacks.

    I'll try to implement all of that, I'm gonna start implementing BEM naming convention, only in upcoming projects though, as I'm still totally unfamiliar with it

    Thanks again 😁

    1
    Steven Stroud•11,890
    @StroudyPosted about 2 months ago

    Hey @Joliot-TSIMISARAKA, I know it is a lot to take in, On top of learning everything else, The hardest part is always the start it is overwhelming. You got this bro! 💪

    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