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

@NkululekoCyrilCele

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?

I am most proud of how I utilized semantic HTML and the BEM (Block Element Modifier) methodology to structure my code clearly and maintainably. This approach not only improved the accessibility of my project but also made it easier to style and manage.

Next time, I would focus on enhancing the responsive design even further by implementing media queries for specific breakpoints, ensuring that the layout adapts more fluidly across various screen sizes. I would also like to invest more time in creating interactive elements, possibly by using JavaScript to enhance user engagement, such as animations or transitions on hover and focus states.

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

One significant challenge I encountered was achieving the desired layout for the footer. Initially, it appeared beside the main content rather than below it. To resolve this, I thoroughly reviewed my CSS rules, focusing on the Flexbox properties I had applied. I experimented with adjusting the flex-direction and margins until I achieved the correct positioning. This process taught me the importance of thoroughly understanding the properties of the CSS tools I use and how they interact with each other.

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

I would appreciate feedback on the following areas:

Accessibility: While I made efforts to implement semantic HTML, I would love input on whether there are additional best practices or tools I could use to further enhance accessibility.

Responsive Design: I would like suggestions on optimizing my media queries and breakpoints. Are there common practices or tools you recommend for testing responsiveness effectively?

CSS Performance: Any tips on improving CSS performance, especially regarding loading times and reducing render-blocking resources, would be beneficial. Are there specific techniques or methodologies you recommend?

Your feedback on these areas would help me enhance my skills and produce even better work in future projects!

Community feedback

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