Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social Links Profile solution with simple HTML and CSS

jabnakar 20

@jabnakar

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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!

Community feedback

Steph 500

@xStephx

Posted

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

4

jabnakar 20

@jabnakar

Posted

@xStephx Thank you for the feedback I really appreciate it! I do plan to learn Grid and Flexbox later on.

Azmi.

1
Caaspita 170

@Caaspita

Posted

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

1

jabnakar 20

@jabnakar

Posted

@Caaspita thanks for the feedback please not stop giving feedback , I agree I should practice organization skills always haha I will check that fcc resource definitely.

Azmi.

1
P

@TorCanHack

Posted

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

1

jabnakar 20

@jabnakar

Posted

@TorCanHack ahh thats actually a good heads up advice. I will keep that in mind

Azmi.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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