Challenge Overview
Project Overview
The goal of this challenge is to incrementally create HTML5 Prototype based on provided storyboards for Topcoder Web Arena using HTML5 and CSS3.
NOTE: This application is using regular HTML5 + Bootstrap 3 (http://getbootstrap.com/getting-started). Please follow coding standards. No AngularJS!
Competition Task Overview
The main task of this competition is to implement all pages in the provided prototype. Your prototype must work properly in all the required browsers.
We can reuse the code arena of Topcoder Web Arena UI.
We have provided normal design and mobile design. Please provide prototype for desktop browser and mobile browser.
Key Requirements
- Test in all the required browsers.
- Watch word typos in every place including source code. Make sure they have correct meaning.
- Use CSS3 for whenever required.
- Your code or HTML layout should be Responsive ready.
- For any popup/modal you code, make it close if you click on x icon or if you click outside the popup/modal.
- Make sure the page rendered properly different screen resolutions.
Detailed Requirements
Homepage
- Follow the storyboard design.
- Two versions: desktop and mobile.
Learn APEX
- You can reuse the code arena of Topcoder Web Arena UI.
- Two versions: desktop and mobile.
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 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 Libraries/Plugins
- jQuery
- All custom javascript (written by the competitors) must pass jslint checks
Browser Requirements
- IE 10
- IE 11
- Latest Chrome
- Latest Firefox
- Latest Safari
- Mobile Safari on iOS
- Mobile Browser on Android
Final Submission Guidelines
PROTOTYPE GOALS:
- We need clean documentation of the code as possible please create detailed comments for the different HTML5, CSS3 and JavaScript code.
- Please note, we are expecting the HTML5 prototype to work on mobiles.
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Remember, all pages should link where possible. Please help us show correct page flow.
- Please use Bootstrap 3 for css.
TECHNOLOGY GUIDELINES:
1. HTML5
- Provide comments on the page elements to give clear explanation of code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts
- Make sure all HTML files pass Validation without Error/Warning.
2. CSS3
- Provide comments on the CSS code, we need CSS comments to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so future developers can follow the code.
- All CSS naming should not have any conflicts
- Make sure all CSS files pass validation without Error/Warning.
3. JAVASCRIPT
- Provide comments on the JavaScript code, JS codes to give clear explanation of the code usage. The goal is to help future developers understand the code and know what needs to be developer further.
- Please use clean INDENTATION for all JavaScript code so future developers can follow the code.
4. IMAGES
- For mobile development, images should be properly compressed while still having good visual quality.
- As possible using background color properties, instead of repetition usage of background based image.
- Use sprites technique for the image slicing. Page reference