Challenge Overview
Project Overview:
Welcome to the Community Wine Portal - Responsive HTML5 Prototype Challenge! The goal of this challenge is to create a Responsive HTML5 Prototype for desktop view based on the provided storyboard designs using Bootstrap.
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 for desktop pages based on the provided storyboard designs. We need your help on preparing click through prototype app for desktop browsers. Your prototype must work properly in all the required browsers.
Required Pages:
Below are the required pages for this prototype challenge.
1. Home Page:
- User opens the application and will see the home page (02-Homepage).
- Make sure all pages are fluid layout design.
- Show main navigation tabs at header - "Home", "Products", "Wine World", "Things To Know."
- We don't have pages for "Products," "Wine World" or "Things to Know"...we will be focussing in on the search path and other content detail pages for this challenge.
- Follow the storyboard design for the search panel on left and featured products as main content.
- Make corausels for the "Recent Wines" section and "Recent Conversations" section.
- Click on login link, show user the modal popup with login info as shown on screen (02A-Homepage).
- Click on username, navigate user to profile details page.
2. Profile Page:
- Once user clicks on username from home page, navigate user to profile details page (03-Profile-page).
- Make corausel for the "Recent Conversations" section.
3. Product Search:
- Once user click on search button from left panel, navigate user to product search page (04-Product-search).
- Click on product image or link, show user the product details.
- Click on collaborate item, navigate user to chatter page.
4. Product Details:
- Once user clicks any product image or link from previous pages, navigate user to product details page (05-Product-details).
- Make corausel for the "Recent Conversations" section.
- Show sub tabs for the product detail and other details as shwon on storyboard.
- Click on "Return To Search Results Page" link, navigate user back to product search page.
5. Articles Page:
- Click on "Things To Know" tab item, navigate user to articles page (06-Articles).
- Follow the storyboard design for the page contents and layouts.
6. Chatter Page:
- Click on recent conversatons or chatter group to get to this page.
- Follow the storyboard design for the page contents and layouts.
- Make corausel for the "Recent Conversations" section.
7. Wine Community:
- Once user clicks the communities link at footer, navigate user to wine community page (08-Wine-community).
- Follow the storyboard design for the page contents and layouts.
- Make corausel for the "Recent Conversations" section.
Specific HTML/CSS/JavaScript Requirements:
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.
- 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:
Font family: 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:
Browsers Requirements:
- IE 10+ Browsers on PC
- Latest Google Chrome Browser on MAC and PC
- Latest Safari Browser on MAC and PC
- Latest Firefox Browser on MAC and PC
Documentation Provided:
Attached documents: 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.