Skip to content
Submitted over 1 year ago

Solution Social links profile

bootstrap
Stefan Bojkovski•720
@xStephx
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)
Code

Please log in to post a comment

Log in

Community feedback

  • Petrit Nuredini•2,860
    @petritnuredini

    Congratulations on completing the Social Links Profile project! It's fantastic to see your progress in front-end development. Here are some recommendations and best practices to enhance your work further:

    HTML Best Practices:

    • Semantic HTML: Good use of semantic elements like <main>. To further improve, consider using more descriptive tags for sections of your content, like <article> for the profile card.
    • Alt Attributes: Ensure all images have descriptive alt attributes. This is not only good for SEO but also essential for accessibility.
    • Link href Attributes: Add actual URLs to your anchor tags, or use # if the links are placeholders. This makes your HTML more realistic and functional.

    CSS Best Practices:

    • Consistent Naming Conventions: Maintain consistent naming conventions in CSS. For example, if you're using BEM (Block Element Modifier), keep it consistent throughout your CSS.
    • Responsive Design: Continue working on responsive design. Ensure that your layout looks good on all screen sizes. Use media queries to adjust styles as necessary.
    • Use of Variables: Great job using CSS variables for colors. This makes maintaining and changing styles much simpler.

    General Recommendations:

    • Profile Card Design: Consider adding subtle hover effects to the social links for a more interactive user experience.
    • Performance Optimization: Optimize images and minify CSS files to improve loading times.
    • Accessibility: Ensure your site is accessible. This includes keyboard navigability and proper contrast ratios.
    • Cross-Browser Testing: Test your site on different browsers to ensure a consistent look and feel.

    Motivation for Future Projects:

    • Each project you complete brings you closer to becoming an expert in front-end development. Keep experimenting with different layouts and styles.
    • Stay updated with the latest web design trends. This could inspire your next project.
    • Collaborate with others or share your work with the community for feedback. Learning from peers is a great way to improve.

    You're doing an amazing job. Keep up the great work and continue pushing the boundaries of your creativity and coding skills! 💻🌟

    Marked as helpful
  • Justin Connell•720
    @justinconnell

    Great job Steph!

    I noticed you making good use of bootsrap and hope you will find my feedback helpful.

    I like that you are using 'self hosted' fonts instead of linking to google fonts - this improves privacy.

    Your project structure makes sense and is easy to navigate, the code is readable and you make use of good naming.

    In terms of improvement, you can start employing more semantic HTML where possible. Also I hope you don't mind me suggesting that you take a look at using TailwindCSS for your next challenge - seems like utility classes are your thing and I think you'll enjoy using TailwindCSS.

    Keep going, all the best in your next challenge!

    Marked as helpful
  • jabnakar•20
    @jabnakar

    gg. xD this is wayyy simpler than mine

  • Manny Verma•240
    @mverma45

    looks awesome good job.

  • Kishore Kumar Mahto•500
    @iamkishoremahto

    good work

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