Challenge Overview
Project Overview:
Welcome to the FAST!! 96Hrs - Hermes Partners Admin Module HTML5 Prototype Challenge! The goal of this challenge is to create a Responsive HTML5 Prototype application using jQuery and Bootstrap development frameworks.
As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JavaScript code functions and make it easier for future developers and the client to understand what you have built.
NOTE: This application will use Bootstrap 3 (http://getbootstrap.com/getting-started). Please follow coding standards and write clean code.
IMPORTART: As per the project schedules and FAST challenge the review timelines are very close. Reviewers please note the review timelines for further reference.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Competition Task Overview:
The main task of this competition is to develop a Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all required browsers - (use HTML5shiv to support IE9 version).
Required Pages:
Below are the required pages for this prototype.
1. Main Page:
- User opens the application and will see the main page (01_How_Filter_Works2).
- Make sure the page is fluid layout using Bootstrap styles.
- In the main navigation, "People" is the active menu item, make sure this is implemented correctly.
- Add pagination at bottom of the table - (design is not available for this).
- Click on 'Grade' section [+] icon on screen (01_How_Filter_Works1), show user grade content as on screen (01_How_Filter_Works2).
- Auto populate location names while user types on location textbox (01_How_Filter_Works3).
- Allow user to add more locations as shown on screen (01_How_Filter_Works4).
- Use range control to select Grade and choose from extra grade from dropdown list (01_How_Filter_Works5, 01_How_Filter_Works6, 01_How_Filter_Works7).
- Allow user to add new administrator from dropdown as shown on screen (02_Hover_7_Assign_To_Admin_Combo) - create dummy names and append increamental numbers.
2. Hover States:
- Follow the hover states of each control as per storyboard designs (02_Hover_* files).
3. Bulk Upload:
- Once user selects bulk actions from the first dropdown, navigate user to bulk upload page (03_Bulk).
- Click on "Upload" button on main page, show user the bulk upload modal popup (03_Bulk_Upload) to choose the csv file.
- Click on "Upload" button on popup (not shown on screen), close the modal popup.
4. Person Page:
- Once user clicks on user name, navigate user to person page (04_Person_Page).
- Allow user to edit full profile details with editable textbox in place of text label and save button in place of edit button at header - (no screens are avialable).
- Allow user to edit the manager and age fields on profile details with editable textbox in place of text label and save button in place of edit button - (no screens are avialable).
- My People - click on any user name load the person page.
- My People - click on Add button, show modal popup with Add, Cancel buttons and similar people table with ckeckbox to select and add new people - (no screens are available).
- Allow user to delete people from the my people table.
- All other buttons and links are dead links for now.
Specific HTML/CSS/JavaScript Requirements:
- HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- 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.
- 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.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- 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")
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
Font Requirements:
Use font - OpenSans.
JavaScript Requirements:
All JavaScript must not have a copyright by a third party. 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. We would like to use following JavaScript libraries:
Browsers Requirements:
- IE 9+ Browsers on PC - (use HTML5shiv to support IE9 version)
- Latest Safari Browser on iPad, MAC and PC
- Latest Chrome Browser on MAC and PC
- Latest Firefox Browser on MAC and PC
Documentation Provided:
Storyboard screens and PSD files: Storyboard.zip
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.