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 Media Links | Desktop & Mobile | HTML, CSS, SCSS

Shubham Guptaโ€ข 110

@shubhamgupta0720

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


Hi! :) This is my solution for the Social Media Links Design Challenge, which is built using HTML, CSS and this is the first time that I have tried SASS. Any feedback from you is appreciated!

Thanks!

Community feedback

Petrit Nurediniโ€ข 2,860

@petritnuredini

Posted

Congratulations on completing your Social Links Profile project! It's a great milestone and your design looks clean and user-friendly. Here are some quick best practices recommendations:

  • Alt Text for Images: Always include descriptive alt text for images. For the profile photo, use something like alt="Jessica Randall's Profile Picture" to improve accessibility and SEO. Learn more about alt text here.

  • Consistent Commenting: It's good to see comments in your CSS for clarity. Be consistent with this practice throughout your code for better readability and maintenance. Here's a guide on CSS commenting here.

  • Semantic HTML Elements: Use semantic elements like <header>, <footer>, and <section> to improve the structure and readability of your HTML. More on semantic HTML here.

  • Responsive Design: Good implementation of media queries for responsiveness. Consider testing on various devices to ensure uniformity of user experience. Responsive design principles can be found here.

  • SASS Best Practices: Great use of SASS features like mixins and variables. Ensure to maintain this practice for scalable and maintainable code. More on SASS best practices here.

  • Button Accessibility: For the buttons, consider adding aria-labels for screen readers, especially since they only contain text content. This enhances accessibility for users with screen readers. Learn about aria-labels here.

Keep up the fantastic work! Each project you complete brings new learning and improvement. Your progress is commendable, and I'm excited to see what you'll create next!

0

Shubham Guptaโ€ข 110

@shubhamgupta0720

Posted

@petritnuredini Thankyou for the feedback! Will keep it in mind.

0

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