News Homepage

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
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@AydanKara
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
,main
content, andarticles
improve readability.✅ Your use of
aria-expanded
and 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 helpful
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