Skip to content
Submitted about 1 year ago

Social Links Profile using HTML, CSS

srinu-vinay-kumar•240
@srinu-vinay-kumar
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I am most proud of how I managed to create a responsive design that looks good on both mobile and desktop screens. Ensuring that the layout adjusted seamlessly to different screen sizes was a significant achievement for me. Next time, I would focus more on optimizing my code for better performance, including reducing the load time and improving accessibility features. Additionally, I would incorporate more user feedback early in the development process to refine the design and functionality.

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

One of the main challenges I encountered was dealing with cross-browser compatibility issues. Some features that worked perfectly in one browser did not behave the same in another. To overcome this, I used tools like BrowserStack to test my site across different browsers and devices. I also researched and implemented various polyfills and CSS hacks to ensure consistent behavior. Additionally, I had to deepen my understanding of CSS Flexbox and Grid to solve layout issues, which I managed through online tutorials and practice.

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

I would like help with improving the efficiency and cleanliness of my CSS code. While my design is functional, I feel there may be more effective ways to structure my styles to reduce redundancy and improve maintainability. Additionally, I'm seeking advice on enhancing the accessibility of my project. Ensuring that my HTML and CSS are optimized for screen readers and other assistive technologies is important to me, and I would appreciate guidance on best practices. Lastly, feedback on how to better organize my HTML structure for readability and future scalability would be very beneficial.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Daniel 🛸•44,810
    @danielmrz-dev

    Hello there!

    Congrats on completing the challenge! ✅

    Your solution looks great!

    I have one suggestion:

    • When using the tag <img>, make sure to set the correct path, otherwise your code won't be able to find the image. And if your code can't find it, it won't show.

    📌 This is your code:

    <img src="/avatar-jessica.jpeg" alt="avatar">

    📌 And here's the update with the correct path:

    <img src="./avatar-jessica.jpeg" alt="avatar">

    The difference is just a dot but it's enough to prevent your image from showing.

    I hope it helps!

    Other than that, great job!

  • Justin Levy•100
    @justinsane

    Nice work!

    Did you use generative AI for the 'solution retrospective'? I'm confused why you mentioned optimizing code and cross-browser compatibility issues for such a simple web component.

    A few areas to explore:

    • can you create hyperlinks to the social media sites?
    • should the buttons be wider?
  • khannfouad•230
    @khannfouad

    Semantic tags make HTML much more readable whereas Using CSS's in-built properties like inheritance and cascade plus grouping selectors ensures that your CSS is readable and clean. Happy Coding 🌺

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