Challenge Overview
Project Overview:
IMPORTANT!! Only 2 days for registration and 3 days for submission phase available in this challenge, Join us NOW!!
Welcome to the "FAST!! 72Hours - UI Prototype Challenge". The goal of this challenge is to create a responsive HTML5 Prototype application based on provided storyboards for client. The prototype must follow best practices for drupal themes/template since we will develop the prototype to as drupal themes. Please see more details below.
The main task of this project is to create the UI Prototype based on the provided Storyboard design by re-use existing best practices look and feel also the functions from drupal CMS.
This UI Prototype will use Responsive Design solution that will works within Desktop and Mobile Platform. You must use responsive framework so prototype can use different layouts when viewed on desktop and mobile. Read more details for UI Prototype Requirements and Flow below.
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/JS code functions and make it easier for future developers and the client to understand what you have built.
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 HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Required Pages:
1) Responsive CCCS_HomeR3 screen.
- References CCCS_HomeR3.png and CCCS_HomeR3_mobile.png
Desktop View:
- CCCS_HomeR3.png
- User opens the application and will see home page.
- Green top notification text needs to have some limitation if text more than one line. it also should working like news ticker with several news/announcement fade in/out.
- Logo text should be image based.
- Main menu needs to have sub menu creation in hover, check web binar screen for the sub menu creation.
- Under main menu we have primary carousel, the three boxes under primary carousel will be links:
-- Take Our Quiz.
-- Take The First Step.
-- Be Part of The Mission.
- Then we will have our secondary carousel, each item inside the carousel is a dead link. Make sure to get the carousel working.
- Events & Articles are dead links. For events and articles highlight, make the closest events with the current date highlight and make the latest articles as the highlight (the one with thumbnails image).
- Videos needs to be working.
- Tools and resources are dead links. provide hover condition for the image icon.
- Social media and footer links are dead links.
Mobile View:
- CCCS_HomeR3_mobile.png
- The secondary carousel will become a list.
- Events and article will only show the highlight.
- Video will be reduce to show only one video.
- Tool and resource will become a slider.
2) Responsive CCCS_ServicesFEWebinars screen.
Desktop View:
- CCCS_ServicesFEWebinars.png
- Notice the hover/active state for main menu (showing sub menus).
- Breadcrumbs are dead links.
- Choose a month is a drop down list. when user click apply, list below the dropdown will change and show all evens in the selected month.
- Start now should be a button.
- Credit, family, housing, money, radio show, and specialty is category for each webinar events.
- In each webinars event category, there will be table listing upcoming events.
- View all & Request Info are dead links.
Mobile View:
- CCCS_ServicesFEWebinars_mobile.png
- Notice the expand/collapse section for webinar category.
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 layout 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.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any 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.
- You are allowed to use JQuery for this contest.
- Responsive framework, confirm first in forum!
- Use "less" format for your css if possible.
Browsers Requirements:
- IE 9+ Browsers on PC - (use HTML5shiv to support IE9 version)
- Latest Firefox, Safari & Chrome browsers on MAC and PC
- Firefox, Safari & Chrome Tablet Browsers
- Firefox, Safari & Chrome Mobile Browsers
Documentation Provided:
- Storyboard and flow documents can be found in forum!
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.