Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Notification_Main_page

@chetanachaudhary

Desktop design screenshot for the Notifications page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

Antonio Aurello• 230

@antonADev

Posted

Hi Chetana... First of all congratulations for finishing the challenge 🎉. The overall work is not bad, but there are some issues:

  • It's important, for accessibility issues, to use landmarks, or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology. Like in the example above with the use of HTML5 Semantic Elements
<body> 
     <header>HEADER CONTENT</header> 
     <main>MAIN BODY CONTENT</main> 
     <footer>FOOTER CONTENT</footer> 
</body> 
  • I've noticed that you've used the same ID for all of your notification images, but IDs must be unique - the same ID should not be used more than once in the same page. Otherwise, they can interfere with the user agent's (e.g. web browser, assistive technology, search engine) ability to properly parse and interpret the page. Depending on how the IDs are used, this could prevent users with disabilities from being able to access and operate the web page properly.

As for the design, like I've already said, the overall work is not bad, but there are some parts that can be perfectioned:

  • You've implemented just a mobile version, and even if it looks ok on mobile, on desktop it looks way different. So I would suggest to implement even a desktop version with the use of media queries, clamp() and flex.

Hope my answer will help you to improve your skills and keep coding 😊

Marked as helpful

0

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