Challenge Overview
Welcome to eClaim Management system (eCMS) - UI Prototype challenge!
The task of this challenge is to create a responsive prototype based on the provided storyboard that will be later integrated with Apache Tapestry.
Let’s discuss any questions you have on the challenge forum!
Assets Provided on Forum (available on registration)
-
Storyboard
-
Design sources
-
MarvelApp link
Detailed Requirements
All screens from the storyboard are in scope of this challenge.
-
Paginations/sorting in all pages should be functional.
-
All forms should have input validation and should show proper error messages if not filled correctly.
-
Filters/search must be implemented.
-
In all tables that support horizontal scrolling, the first column of the table must be fixed and the rest of the table must scroll horizontally. Use browser default scrollbars.
-
It is critical to keep your code clean to make it easier for us to convert the prototype to an Apache Tapestry template.
HTML/HTML5
-
Provide comments on the page elements to give a clear explanation of the code usage. The goal is to help future developers understand the code.
-
Please use clean INDENTATION for all HTML code so future developers can follow the code.
-
All HTML code naming should not have any conflicts or errors. Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
-
Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
-
No inline CSS styles- all styles must be placed in an external stylesheet.
-
Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS3
-
Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
-
Please use clean INDENTATION for all CSS so developers can follow the code.
-
All CSS naming should not have any conflicts.
-
As possible use CSS3 style when creating all styling.
-
Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Javascript
-
All JavaScript must not have a copyright by a third party.
-
It is fine to use GPL/MIT/Open Source code.
-
You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Web Browsers Requirements
-
IE11
-
Microsoft Edge
-
Firefox, Safari and Chrome latest version