Challenge Overview
Challenge Overview:
Welcome to the TC Legacy Site Home Page Reskin Prototype! The goal of this challenge is to create the prototype for reskinning *homepage* of www.topcoder.com/tc to have the same look & feel of the brand new www.topcoder.com.
There will be several following First2Finish challenges to reksin more pages like forum pages, my topcoder pages, so it's a good start to get your hands dirty.
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:
Below are the required pages.
1. Homepage
- The header should be the same as current www.topcoder.com, make sure the dropdown is implemented
- The footer should be the same as current www.topcoder.com
- The new font to use is "Source Sans Pro"
- The left panel have collapsable / expandable section, please notice on the hover style.
- The Top 10 Widget in the right corner can be switched between Development and Data Science.
- For the new buttons in the page, make sure it has the same hover style as www.topcoder.com
-
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 1.4.1
- 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: TCLegacyBase.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.