Skip to content
Submitted over 1 year ago

Social Links Profile solution with simple HTML and CSS

jabnakar•20
@jabnakar
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey there! 👋 Just finished working on a social links card visual for a Frontend Mentor challenge. I'd really appreciate your feedback on the HTML and CSS code. Specifically looking for thoughts on the overall design, how it renders on different screens, and any ideas on code improvement. If you notice any have tips on best practices, I'm all ears! Thanks a bunch for your time and input!

Code

Please log in to post a comment

Log in

Community feedback

  • Stefan Bojkovski•720
    @xStephx

    Hello,

    Your solution looks great, I have some suggestions for better coding practice and organization.

    The first suggestion is to write your HTML and CSS in separate files for better overview, organization and practice.

    The second suggestion is to use semantic tags for better accessibility, better organization.

    The third suggestion is to use a Grid or Flexbox for centering and alignment system, this method is a quick and easy, time-effective.

    The fourth suggestion is on social media buttons in this project to add hover for a better looking.

    Have a nice coding!

    Marked as helpful
  • Caaspita•170
    @Caaspita

    Congrats for the new solutions, i have some sugestions for you.

    -It would be good to separate the CSS and the HTML into different files to maintain good practice and more organized code.

    -Try to maintain correct indentation in the code so that it is easier to read it for you and other people

    -You could improve good practices by using semantic HTML so that the browser can read your website better. I leave you this page that explains it better. https://www.freecodecamp.org/news/semantic-html5-elements/

    Cheer up and keep programming

    Marked as helpful
  • Ayua Michael•530
    @TorCanHack

    Hello Funtikar, congratulations on finishing the challenge 👏🏽 🎉.

    It's beautifully done.

    Just a little observation however. I noticed the first heading is a h2 element in your webpage. Structure wise, It's a better approach to start with a h1 tag then work your way down. This is for structural and accessibiilty reasons.

    You can always customize your headers element to the font size you prefer.

    someone once gave me this advice on this platform:

    Unlike what most people think, it's not just about the size and weight of the text It is about maintaining a clear and consistent hierarchy through out the document

    Great work!

    I hope you find this helpful.

    Happy coding 🥂

    Marked as helpful

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