Challenge Overview
Welcome to the Topcoder.com 2.0 Mobile Responsive Layout Update WordPress Challenge! All WordPress functionality are already been built. Desktop layout is working and some pages are also built for mobile view. The goal of this challenge is to complete the site's mobile responsive layout of the remaining pages that are outlined below.
All of the task requires for this theme update are focused mainly in updating SCSS file and possible a little tweak in HTML markup to make the remaining pages mobile responsive.
PROVIDED FILES AND DOCUMENTATION
- WP theme, plugins, sample content, and deployment guide.
- Storyboard (PSD & PNG) files.
IMPORTANT RULES:
1. Match the design from the storyboard including the background positions and sizes of seom sections unless otherwise over-ruled below.
2. Desktop version should be retained and should not get broken in doing the mobile version.
3. There are also pages and functionality like the navigations that are already been built for mobile layout, this should be maintained and avoid getting them non-functional or broken.
4. Use only the provided theme's template markup, you can tweak/update it but do not create 2 version of code markup whenever possible.
5. There should be no hardcoded text in the templates.
6. Expect to have some difference in text content from the provided theme and storyboard. When this happens, text content from the provided data and theme should prevail.
7. You are not allowed to change content data.
8. Always ask in the forum for clarifications.
PAGE REQUIREMENTS:
All page in the provided theme and sample data should adopt to the provided mobile storyboard layout. The following pages outlined below have specific requirements.
1. About Topcoder
URL: https://www.topcoder.com/about-topcoder/
Storyboard: 27 to 29
- Existing mobile page has long sectional content, some of these section are converted into a carousel.
- The carousel should not auto cycle.
2. About Community
URL: https://www.topcoder.com/about-topcoder/community/
Storyboard: 32
- The text "This is new. This is bold..." should match the text "Topcoder helps businesses..." from the storyboard including font sizes and spacing.
- User testimonials carousel functionality should be retained.
3. About Team
URL: https://www.topcoder.com/about-topcoder/team/
Storyboard: 34
- Executive and Topcoder team sections are converted into their respective carousel.
- The carousel should not auto cycle.
- Match the style as much as possible.
4. About Customers
URL: https://www.topcoder.com/about-topcoder/customers/
Storyboard: 37
- The position of the button that is below the header from the storyboard should be inside the header just like what's in the existing page.
5. Marketplace
URL: https://www.topcoder.com/marketplace/
Storyboard: 39 to 44
- Sections are converted into a carousel.
- The carousel should not auto cycle.
6. Marketplace - Community
URL: https://www.topcoder.com/marketplace/the-community/
Storyboard: 46
- Sections are converted into their respective carousels.
- The carousel should not auto cycle.
7. Marketplace - Products
URL: https://www.topcoder.com/marketplace/the-products/
Storyboard: 48
- The header background in the storyboard is not correct. The correct header should be like this http://www.topcoder.com/wp-content/media/2016/06/top-banner-the-products-bg.jpg
- Position the background so that it will show and focus the gadget.
8. Contact
URL: https://www.topcoder.com/about-topcoder/contact/
Storyboard: 50
Code Requirements
HTML / HTML5 / PHP Template
- Provide comments on the page elements to give clear explanation of the 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 or errors.
- 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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
SASS/CSS
- Use SASS as CSS Pre-Processor. You can use the existing SASS files.
- Use Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the SASS code. We need SASS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- All SASS naming should not have any conflicts.
- As possible use SASS style when create all styling, avoid image usage.
- 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.
Javascript
- 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.
- Use Bower for Library Package Manager
- Create separate files if you plan to create custom functions
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
Final Submission Guidelines
Although this challenge requires to run in WordPress, all the theme’s functionality are already been created and functions properly.All of the task requires for this theme update are focused mainly in updating SCSS file and possible a little tweak in HTML markup to make the remaining pages mobile responsive.
PROVIDED FILES AND DOCUMENTATION
- WP theme, plugins, sample content, and deployment guide.
- Storyboard (PSD & PNG) files.
IMPORTANT RULES:
1. Match the design from the storyboard including the background positions and sizes of seom sections unless otherwise over-ruled below.
2. Desktop version should be retained and should not get broken in doing the mobile version.
3. There are also pages and functionality like the navigations that are already been built for mobile layout, this should be maintained and avoid getting them non-functional or broken.
4. Use only the provided theme's template markup, you can tweak/update it but do not create 2 version of code markup whenever possible.
5. There should be no hardcoded text in the templates.
6. Expect to have some difference in text content from the provided theme and storyboard. When this happens, text content from the provided data and theme should prevail.
7. You are not allowed to change content data.
8. Always ask in the forum for clarifications.
PAGE REQUIREMENTS:
All page in the provided theme and sample data should adopt to the provided mobile storyboard layout. The following pages outlined below have specific requirements.
1. About Topcoder
URL: https://www.topcoder.com/about-topcoder/
Storyboard: 27 to 29
- Existing mobile page has long sectional content, some of these section are converted into a carousel.
- The carousel should not auto cycle.
2. About Community
URL: https://www.topcoder.com/about-topcoder/community/
Storyboard: 32
- The text "This is new. This is bold..." should match the text "Topcoder helps businesses..." from the storyboard including font sizes and spacing.
- User testimonials carousel functionality should be retained.
3. About Team
URL: https://www.topcoder.com/about-topcoder/team/
Storyboard: 34
- Executive and Topcoder team sections are converted into their respective carousel.
- The carousel should not auto cycle.
- Match the style as much as possible.
4. About Customers
URL: https://www.topcoder.com/about-topcoder/customers/
Storyboard: 37
- The position of the button that is below the header from the storyboard should be inside the header just like what's in the existing page.
5. Marketplace
URL: https://www.topcoder.com/marketplace/
Storyboard: 39 to 44
- Sections are converted into a carousel.
- The carousel should not auto cycle.
6. Marketplace - Community
URL: https://www.topcoder.com/marketplace/the-community/
Storyboard: 46
- Sections are converted into their respective carousels.
- The carousel should not auto cycle.
7. Marketplace - Products
URL: https://www.topcoder.com/marketplace/the-products/
Storyboard: 48
- The header background in the storyboard is not correct. The correct header should be like this http://www.topcoder.com/wp-content/media/2016/06/top-banner-the-products-bg.jpg
- Position the background so that it will show and focus the gadget.
8. Contact
URL: https://www.topcoder.com/about-topcoder/contact/
Storyboard: 50
Code Requirements
HTML / HTML5 / PHP Template
- Provide comments on the page elements to give clear explanation of the 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 or errors.
- 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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
SASS/CSS
- Use SASS as CSS Pre-Processor. You can use the existing SASS files.
- Use Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the SASS code. We need SASS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- All SASS naming should not have any conflicts.
- As possible use SASS style when create all styling, avoid image usage.
- 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.
Javascript
- 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.
- Use Bower for Library Package Manager
- Create separate files if you plan to create custom functions
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser