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

Aish 60

@wajasha02

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


What are you most proud of, and what would you do differently next time?

Finally completed this challenge as well. I would like to optimize the code further by using more semantic HTML elements and organizing the CSS more efficiently

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

One challenge I faced was ensuring consistent styling across different screen sizes while maintaining responsiveness.

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

I would appreciate guidance on how to improve accessibility, further optimize code efficiency, and ensure responsiveness.

Community feedback

YasserAO 330

@YasserAO

Posted

hello @Aish,

here are my segguestions,

-Improving Accessibility:

Ensure all interactive elements can be easily navigated via keyboard and provide descriptive ARIA roles where appropriate. Additionally, use semantic HTML elements such as <nav>, <header>, and <footer> to enhance the structure and meaning of your content for assistive technologies and users alike.

-Enhancing Code Efficiency:

Optimize CSS by employing efficient selectors, such as direct child selection and descendant selectors, to reduce redundancy and improve performance.

-Ensuring Responsiveness:

Utilize relative units like percentages and ems for sizing elements for ex: width:80%, coupled with media queries to create responsive designs that adapt seamlessly to different screen sizes and devices for ex: @media(min-width:320px){ } @media(min-width:768px){ }. Test thoroughly across various devices and browsers to ensure consistent performance and user experience.

Marked as helpful

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