Challenge Overview
Competition Task Overview
The purpose of this challenge is to develop HTML/CSS UI prototypes based on the designs we provide. For this challenge, you can assume the app will primarily be used on a desktop browser with a minimum width of 1280px - this should be your primary focus for this challenge, but please do not use code that will make it hard to change this to a responsive web in the future, that probably means you should use responsive components such as bootstrap's fluid grid system etc. Also, your prototype must work properly in all the required browsers.
If any requirements are unclear in the screens please ask on the forum and we’ll be happy to help clarify!
Good luck! We look forward to seeing your submissions!
General
- Source code and design text must be written in US-English
- The prototype must be built using HTML5 / CSS3
- Please use d3.js to implement the map and interactions
- The 08 screens are out of scope, the other screens are all in scope.
- Test in all the required browsers
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure your submission is free of HTML and CSS validation errors and warnings
- 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 stylesheet.
- 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.
- No data should be hardcoded, instead you the prototype must work with a JSON data file based on the data model we provided in the forum. All interactions including changing filters, adding counties, etc... should be based on the json data.
Design
- The design should be 1280px wide.
- Grid: The design is not pixel perfect towards its grid/gutters; you should choose so it approaches the design. We prefer a consistent design with well defined grid/font/gutter sizing over pixel perfect styling.
- Use Bootstrap’s included responsive fluid grid system where appropriate. You are not required to use Bootstrap and you can use other fluid grid system. For example: Foundation (http://foundation.zurb.com) is another framework that is similarly fully featured (lots of pre-configured styles). There are also some responsive CSS frameworks that are lighter weight by leaving out the styling elements. Skeleton (http://getskeleton.com) and Toast (http://daneden.github.io/Toast/) are examples.
- Image file sizes should be reasonable to allow for quick transfer while still maintaining an appropriate level of quality.
Licenses & Attribution
- Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok, but if a library is not commercial friendly you need to get our approval first.
- Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.
Browser Requirements
- IE11+
- Chrome latest
- Safari latest (Mac only)
- Firefox latest
Technologies
- Bootstrap (or other similiar CSS frameworks)
- CSS3
- HTML5
- JavaScript
- D3.js
- Avoid Angular.js unless there's a really good reason to use it (you need to get our approval first)
Documentation Provided
Please register to download the PSD files from challenge forum.
We have also provided the json file and explanation on it in the forum.
Final Submission Guidelines
Submission Deliverables
Submit an archive file contains all HTML/CSS/JS/images and other required files via the challenge detail page on topcoder.com.