Challenge Overview
Challenge Overview:
Welcome to the TC Legacy Site My TopCoder Reskin Prototype Challenge
The goal of this challenge is to create the prototype for reskinning *My TopCoder* pages of www.topcoder.com/tc to have the same look & feel of the brand new www.topcoder.com.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
General Rules
- 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.
Required Pages:
There are 8 pages which matches to the 10 preview images in the provided storyboard file. These pages should be updated according to the storyboard. You can go to http://community.topcoder.com/tc?module=MyHome to find what it looks like now and dump the corresponding HTML pages from the browser or using wget tool etc. Organize the structure of the HTML pages by using /i to put images, /css to put CSS files and /js to put javascript files. Please clean up all the unused static files after reskin.
- We prefer not touch the HTML (except the header, footer and left navigation panel), only update the CSS properties to rekin. If you find you have to change HTML main content, please bring up in the challenge forum.
- Important ! - In the storyboard, the dropdown, radio button and checkboxes (i.e. inputs) are stylished. We decided to use native browser input instead to make it as simple as possible. So you don't need to style them.
- We provide the prototype of the reskinned TC Legacy Site Homepage, you can reuse the header, footer and left panel if possible. Please note the header, footer and left panel in JSP are included like the following. So when you update the HTML page, you should put the HTML of header, footer and left panel in the exactly same place as these JSPs are included.
Left Navigation
���<!-- Left Column Begins-->
<td width="180">
<jsp:include page="/includes/global_left.jsp">
<jsp:param name="node" value="my_topcoder"/>
</jsp:include>
</td>
<!-- Left Column Ends -->
Header
<body>
<jsp:include page="top.jsp">
<jsp:param name="level1" value="forums"/>
</jsp:include>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
Footer
</table>
<jsp:include page="foot.jsp"/>
</body>
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- - Your HTML code must be valid and follow best practices
- - Make sure all the CSS class name and Javascript variable / function name have no typo and easy to understand.
- - 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:
- jQuery as the provided prototype TCLegacyBase_Prototype.zip
- All custom javascript (written by the competitors) must pass jslint checks
Browsers Requirements:
- IE8
- IE9
- IE10
- Safari 5*
- Firefox 18.*
- Chrome 24
Supporting Documents:
- Storyboard Screens and PSD files: TCLegacy_MyTopCoder_v1.zip
- Prototype which has the header, footer and left panel you can refer to: TCLegacyBase_Prototype.zip
Final Submission Guidelines
Submission Deliverable
- Complete prototype with all the listed pages updated to match the new design.
Submission Guidlines
Submit an archive file contains all HTML/CSS/JS/images and other required files into Online Review.