Challenge Overview
Competition Task Overview
The goal of the challenge is to create the HTML prototype based on the provided design and requirements.
Key Requirements
- Create a prorotype based on the provided design.
- The prototype (all pages) must be responsive so each page has layout for PC and smartphone.
- Test in all the required browsers.
- Replicate the design of the approved Storyboards (PSD Files) for all pages.
- 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 you submission clear of HTML and CSS Validation error and warning.
Detailed Requirements
Top page
- pc_1st_en.png / smp_1st_en.png
Video Archives page
- pc_2nd-mov_en.png / smp_2nd-mov_en.png
House Showcases page
- pc_2nd-showcases_en.png / smp_2nd-showcases_en.png
Video page
- pc_3rd-mov_en.png / smp_3nd-mov_en.png
House Showcase page
- pc_3rd-showcases_en.png / smp_3nd-showcases_en.png
Other Requirements
Sitemap
Please see the attached Sitemap.zip. We plan to convert the UI prototype to WordPress theme after this challenge so the sitemap is temporary.
Code Requirements
Please follow the requirements attached. Basically you need to follow BEM and smacss.
We provide the templates for css and html so please use them.
Specific HTML/CSS/JavaScript Requirements
- You MUST use HTML5 and CSS3
- 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.
JavaScript Libraries/Plugins
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.
- You are allowed to use the JQuery JavaScript library for this contest.
- If you need to use any other libraries you must get approval first.
Browser Requirements
Windows
- Internet Explorer 8
- IE8 support could be minimum. That would be ok if the design looks good and isn’t broken and the links work.
- Internet Explorer 9, 10, 11
- Firefox latest version
- Chrome latest version
Mac
- Safari latest version
- Firefox latest version
- Chrome latest version
iOS
- Safari
Android
- Chrome
Even if you can’t access all the platforms, please try to submit your delivarable. We will provide some feedbacks in the review phase and the final fix phase.
Final Submission Guidelines
Submission Deliverables
- A complete UI Prototype containing all HTML / Javascript / CSS / Image files.
Submission Guidelines
Submit an archive file contains all HTML/CSS/JS/images and other required files via the challenge detail page on topcoder.com.