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 app

@roberto-rojas-dev

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?

  • The hover effect for the social media links
  • The implementation of CSS classes to handle the color theme. This was a great opportunity to practice adding a dark mode for the page)
  • The accessible toggle button for the dark mode. I'm specially proud of this one because I built it using only documentation for the aria attributes and applying another concepts a previously learned.

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

The transitions for the hover effect and the dark mode toggle button were a bit challenging. It was a little tricky to figure out the mistake I was making when setting the transition for the ::before pseudo-element of the links.

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

I would really appreciate any feedback that could help me improve my use of semantic HTML, accessibility, and CSS best practices for making my styles more scalable.

Thanks for reading, I hope you have a beautiful day/night 💜✨

Community feedback

MikDra1 6,050

@MikDra1

Posted

To improve the HTML and CSS, consider the following:

  • Semantic HTML: Use more descriptive HTML5 elements like <header>, <nav>, <main>, and <footer> to enhance accessibility and structure.
  • CSS Organization: Group related CSS rules (e.g., typography, layout, colors) for better readability. Consider using a preprocessor like SASS for modularity.
  • Responsive Design: Ensure the layout adapts smoothly across various screen sizes, possibly integrating media queries for better control.
  • Accessibility: Improve ARIA roles and labels for screen readers. Ensure high contrast for text and background colors.

Hope you found this comment helpful 💗

Good job and keep going 😁😊😉

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