Challenge Objectives

• Create the UI Prototype for our new notification component based on the provided designs.

Project Background

We are in the process of creating the new re-designed Navigation components for our platform.

Technology Stack

• HTML5

• SCSS

• JavaScript

Code Access

Repo: https://github.com/topcoder-platform/community-nav-prototype

Branch: feature-notifications

Detailed requirement

As part of this challenge, you need to create the responsive UI Prototype for our new notification component using HTML5/SCSS/JS.

 

You will find the designs on the challenge forum.

The design includes detailed instructions for the different states and interactions related to the notifications component.

 

All links are dead-links.

 

Should you have any questions, feel free to ask on the challenge forum!

Targeted Devices

• Desktop

• Tablet

• Mobile

Important Notes

• Use SCSS variables instead of hardcoding colors/paddings etc.

• Use Vanilla JS. No jQuery or any other library is allowed.

• Your code should be as clean, well-structured and well-documented as possible. The goal is to take your code and convert it into different forms (eg wordpress/react/angular) to be able to use it in our various applications.

• Use fluid layout.

• You need to create both logged in and logged out states.

What to Submit

Submit a git patch for the latest commit in the feature-notifications branch. Make sure to note the exact commit in your submission so we can apply your patch file.

Final Submission Guidelines

Please read above