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.
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.
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
- @MikDra1Posted 3 months ago
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 GitHubJoin 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