Submitted 7 days ago

Social links profile I have used many of resources online used google

Mohit kulkarni• 40

@burningbeattle

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Social links profile

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

I’m particularly proud of how well I managed to implement a responsive design across various screen sizes. By using CSS Grid and Flexbox effectively, I was able to create a layout that adjusts smoothly whether viewed on a desktop or a mobile device. Additionally, I’m happy with how I was able to create clean, accessible navigation for the social media links, which enhances user experience and ensures the design is inclusive.

If I were to approach this project again, I would spend more time optimizing the animations and transitions between different states (e.g., hover effects on buttons and links). While the current solution works, I believe I could refine it further to make the interactions feel more fluid and engaging. I would also like to experiment with additional CSS techniques like custom properties (CSS variables) to make the code more maintainable, especially if this project were to scale in the future. Lastly, I’d focus more on improving accessibility by incorporating ARIA attributes and further testing with screen readers to ensure a more inclusive experience.

In terms of areas needing support, feedback on improving performance (particularly with the image assets and overall page load speed) would be invaluable. Also, any advice on making the project more scalable for future additions would be appreciated!

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

One of the main challenges I faced during the "Social Profile Link" project was ensuring that the design remained responsive and visually appealing across all device sizes. Since the layout involved icons, text, and interactive elements, it was tricky to make everything scale appropriately without cluttering the screen or losing the design's integrity on smaller devices.

How I Overcame It: To address this, I relied heavily on CSS Flexbox and Grid to create a flexible structure that could adapt to different screen widths. I also implemented media queries to fine-tune the spacing, icon sizes, and text alignment for mobile devices, ensuring that the layout didn't break or become unusable on smaller screens.

Another challenge was handling the hover states and ensuring proper accessibility for keyboard navigation. Initially, the hover effects looked good on desktop, but they didn’t work as smoothly on mobile, where touch interactions replaced hover states. I overcame this by using CSS transitions for hover effects and ensuring that the buttons and links also had focus styles, making them accessible for keyboard navigation and screen readers.

Lastly, balancing icon resolution and page load time was challenging. I optimized the SVG icons to ensure they loaded quickly while maintaining their visual quality, which improved both performance and user experience.

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

I would really appreciate feedback and guidance on the following areas of my "Social Profile Link" project:

Responsiveness Optimization: While the project is responsive across different screen sizes, I would love advice on how to further refine the layout for better fluidity and visual balance, especially between tablet and desktop breakpoints. Are there any best practices for handling more complex layouts without relying on too many media queries?

Accessibility: I’ve implemented some accessibility features, but I’m not sure if I’ve fully optimized the project for screen readers and keyboard navigation. Could you review my use of ARIA attributes and suggest any improvements? Are there better techniques to ensure the social profile links are accessible for users with disabilities?

Code Efficiency: My current CSS file has several repeated styles, and I feel like the code could be more maintainable and efficient. How could I better organize and reuse styles? Would using CSS variables or a preprocessor (like SASS) improve the structure and reduce redundancy?

Hover and Focus States: I’ve added hover effects for the social icons, but I’m unsure if they are consistent and smooth across all devices and browsers. How can I ensure that hover and focus states look professional and work well on both desktop and mobile?

Performance: I’d love some suggestions for improving overall page performance, especially regarding image optimization and minifying CSS/JavaScript. Are there any tools or techniques I can implement to make the page load faster without sacrificing design quality?

Community feedback

BawerMY• 160

@BawerMY

Posted 7 days ago

bro, you spent more time doing the description than you spent doing the project

Steven Stroud• 4,100

@Stroudy

Posted 7 days ago

Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

Your <ul> <li> text should be wrapped with a <a> so it is accessible with a keyboard using the tab key,

 <ul>
      <li>GitHub</li>
      <li>Frontend Mentor</li>
      <li>LinkedIn</li>
      <li>Twitter</li>
      <li>Instagram</li>
    </ul>

This does not matter that much at this stage but something to be mindful of for SEO(Search Engine Optimisation), <meta> description tag missing that helps search engine determine what the page is about, Something like this <meta name="description" content="" />
Using a <main> tag inside the <body> of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content.
Using max-width: 100% or min-width: 100% is more responsive than just width: 100% because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning.
Developers should avoid using pixels (px) because they are a fixed size and don't scale well on different devices. Instead, use rem or em, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible. For more information check out this, Why font-size must NEVER be in pixels or this video by Kevin Powell CSS em and rem explained.- Another great resource for px to rem converter.
Using font-display: swap in your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.
Having a clear and descriptive alt text for images is important because it helps people who use screen readers understand the content, making your site more accessible. It also improves SEO, as search engines use alt text to understand the image's context, helping your site rank better, Check this out Write helpful Alt Text to describe images,
Using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM,

You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟

Please log in to post a comment

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