FAST!! 72Hrs - Mediafly NC Mobile Responsive HTML5 Prototype Challenge

Welcome to the FAST!! 72Hrs - Mediafly NC Mobile Responsive HTML5 Prototype Challenge! The goal of this challenge is to create a Responsive HTML5 Prototype application for iPad and iPhone based on provided storyboard design using AngularJS & Bootstrap frameworks.

Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge. 

IMPORTART: As per the project schedules the review timelines are very close, please note the post submission timelines for further reference.

Competition Task Overview:

The main task of this competition is to develop a Responsive HTML5 prototype using provided storyboard designs. You need to use Bootstrap and CSS3 Media Queries to implement responsive page layouts to support both portrait and landscape views on iPad & iPhone devices. Your prototype must work properly in all the required browsers noted below.

Required Pages:

Below are the required pages in both Portrait and Landscape orientations.

0. Login Page:

• -User opens the application and will see the login page (00 Login Page).
• -Click on Login button, navigate user to home page.
• -Click on "30 Days Free Trial" button navigate user to trial page.
• -All pages should support be responsive.
• -Use dead links for all remaining links and button click actions for now.

1. Trial Page:

• -Once user click on 30 days free trial button navigate user to trial page (01 Trial Page).
• -Click on try free trial button navigate user to home page.
• -Click on "Back to Login" button navigate user to login page.

2. Home Page:

• -Once user selects Home link from left nav, show user the home page (02a Homepage).
• -Display 3 sections on this page: "Featured Product", "Featured Author", "Category".
• -Show each section with thumbnails (grid view) in carousel like container - on swpe left load next set of items.
• -Click on list view icon at top bar on each section, show user the list view content as per the screen (02b Homepage List View).
• -Click on featured product items, navigate user to product page.
• -Click on featured author items, navigate user to author page.
• -Click on category items, navigate user to category page.

3. Select Interest:

• -Once user successfuly logged in, show user the home page (loading home page on first time) with select interest popup (03 Select Interest).
• -Once user selects Categories link from levt nav, show user the select interest popup (03 Select Interest).
• -Once user clicks any interest item from the list, toggle the items selection.
• -Click on "Done" button close the popup.

4. Navigation:

• -Once user clicks Hamburger menu icon, show user the flyout menu as per screen (04 Navigation).
• -Click on "Home" link navigate user to home page.
• -Click on "Categories" link show user the select interest popup (03 Select Interest).
• -Show all selected interests as nav links below "Categories" link and click on these links navigate user to category page (05a Category).
• -Click on "Logout" button navigate user to login page.

5. Category Page:

• -Once user selects any category item on home page, show user the category page (05a Category).
• -Show each items with thumbnails (grid view) in carousel like container - on swpe left load next set of items.
• -Click on list view icon at top bar on each section, show user the list view content as per the screen (05b Category List View).
• -Click on "Load More" button, show users all items with vertical scrollbar.

6. Author Page:

• -Once user selects any author item on home page, show user the author page (06a Author Page).
• -Show each items with thumbnails (grid view) in carousel like container - on swpe left load next set of items.
• -Click on list view icon at top bar on each section, show user the list view content as per the screen (06b Author Page List View).
• -Click on "Load More" button, show users all items with vertical scrollbar.

7. Product Page:

• -Once user selects any product item on home page, show user the product page (07a Product Page).
• -Show each items with thumbnails (grid view) in carousel like container - on swpe left load next set of items.
• -Click on list view icon at top bar on each section, show user the list view content as per the screen (07b Product Page List View).
• -Click on "Load More" button, show users all items with vertical scrollbar.
• -The audio and video content can be placeholder for now.

Specific HTML/CSS/JavaScript 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.

Font Requirements:

Use font - Arial.

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:

• jQuery
• AngularJS
• Bootstrap 3

Browsers Requirements:

• Latest Safari Browsers on iPad and iPhone

Documentation Provided:

Storyboard screens and PSD files

Final Submission Guidelines