Design comparison
Solution retrospective
❤Things I've tried
- Made an animation where the hamburger menu changes to X
- Switch to aria-expanded true, false considering accessibility
- Added alt text to img considering accessibility
- Used Boostrap to design layout and implement functionality
- Scored 97% on Google PageSpeed Insights
- Considered web accessibility
- Responsive for Mobile, Tablet, Desktop devices
Please let me know if there are any areas of improvement! Thanks :D
Community feedback
- P@AydanKaraPosted 7 days ago
Hi @zeegu
✅ Your project is well-structured and shows great attention to accessibility and performance. Scoring 97% on Google PageSpeed Insights is impressive!
✅ Clean Code Structure – Well-organized sections for the
navbar,maincontent, andarticlesimprove readability.✅ Your use of
aria-expandedand alt attributes is a nice touch.📌 Suggestions for Improvement:
- Since Bootstrap 5 doesn’t need jQuery, you could replace your jQuery script with vanilla JavaScript for better performance and to remove unnecessary dependencies.
- I noticed an extra
<head>tag inside<body>, which might cause validation issues. This should be removed or replaced with<header> - You have a empty
<article>tags at the end of the document. If not needed, remove them to keep the markup clean.
Your layout and responsiveness are excellent. Just a few tweaks in JavaScript and accessibility, and this will be even stronger! Keep up the great work!
Marked as helpful1@zeeguPosted 7 days ago@AydanKara
Wow, thank you sooooo much for the detailed code review! 🤩
Especially thank you for telling me the parts I missed :D It could be a much cleaner and more organized code!
Have a great great day! And happy coding 💻💪🎉
0
Please log in to post a comment
Log in with GitHub
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