Challenge Overview
Topcoder is in the process of creating an updated version of its marketing site. We are happy to bring challenges to our community to help us build this component based website.
Most of the components that are part of the pages are already built. For this challenge, we’re looking forward to create clean and easily maintainable frontend code of the pages outlined below using the provided frontend files.
The goal of this challenge is to build the templates of different pages that are outlined below. The final HTML/JS/SCSS is going to be used for the Wordpress development, so we want really high quality and clean codes.
Resources:
1. Base files of different components.
2. Storyboard in Zeplin
3. TC GUI Kit
- Source code and design text must be written in US-English.
- Page width is responsive, the minimum size of a screen is 768px (NOT mobile), max width of content section should be 1280px
- Use the base-unit, corner-radius, and color names variables instead of pixels and hex (ex. #fff) colors.
- Create high quality SCSS, look at https://github.com/appirio-tech/tc-ui/blob/feature/connectv2/src/styles/_checkboxes.scss, the Slider is a good example of well abstaqracted code.
- Don't overly nest your code; we'll need to abstract the final DOM into multiple components; try to stay into smaller logical pieces.
- Use flexbox instead floats.
- Define spacing with multiples of $base-unit, and corner radius through $corner-radius.
- We want to minimize the use of third party plugins, please ask in the forums if you need to use one that is not in the provided base files.
- DO NOT redeclare hex colors as variables - use the ones we have in the provided _variables.scss files.
- Do not redeclare/style that exist in the provided SCSS files and the library as whole. If you need to define a button style (or extend an existing one) - think how this could happen in the relevant SCSS file.
- Icons, rounded images, typography styles are already built from the provided base files, you should reuse them.
- See the provided TC GUI Kit for reference on Buttons, Colors, and Typography.
- Do not style elements based on body class or page specific, the goal is to make all style elements component based.
- Do not create new components that are not asked or outlined below.
- Always ask in the forum for clarifications.
0. Global Feature
a. Header Search
- https://zpl.io/aN4g9XN and https://zpl.io/bzYg1r7
- by default the search form is hidden (see https://zpl.io/brkrxAr) and when user clicks on the search icon, the form will animate/slide down to reveal itself.
- clicking the search icon again will hide (animate/slide up) the form.
b. Section Content
- the body content of each page will composed mostly of sections
- these sections should allow us to define how many columns to use based on the 12 column grid
- each section’s column can be the container of different components.
- there should be a class helper that we can set the top & bottom margins to 0, 60px, or 100px
1. Home
- https://zpl.io/V1ZB6NQ
a. Content Box - Full Width Image
- create this Content Box component similar to what’s in the provided content-box.html
- image background should be image tag and not from CSS background
- update also the provided content-box.html to demo this specific component.
b. Tap Into a Global Community section
- the section title should use generic/global section header/title H tag
- use “Content with Icon” content box component
c. Meet our Community section
- use “Full Width - Wide Image” content box component
d. How it Works section
- the component that is on the 4 column grid based is not yet existing
- create this new component based on the existing “Content with Icon” content box component
- update the provided content-box.html to demo this new component.
- ignore the wide white space after this section
2. Search Result
- https://zpl.io/2jl6PDx
- the body content of this page is NOT component base
- the left sidebar links will function as a filter to dynamically show/hide result item on the main content via JS
- the “Load More Results” button functionality should be working
- when that button is clicked, it will load HTML part via AJAX
3. Solutions Introduction
- https://zpl.io/b6l4XRg
- the body content this page will be component based layout
a. Sub Navigation
- make an update to the existing navigation component to include this sub navigation
- the sub navigation should be shown when user hover on its parent nav item or when the parent nav item has active state
- hide the current page sub navigation if user hover on the other nav item that has sub nav list
b. Hero section
- this will be a variation or an update to the “Content Box - Full Width Image” component where the content will be aligned center.
c. “Topcoder solutions allow you to quickly realize...” section
- create a new component based on this style
- create sets of predefined color gradients based on the existing “Stories - Featured” components
- create a separate banner.html to demo this component together with the different sets of pre-defined gradient colors.
d. “With Topcoder, you don’t pay for the process…” section
- left top part of this section is just a regular large body text
- the other are components that are already existing from the provided base files
e. “Use Cases” section
- the components on this section are already existing from the provided base files
f. “Make Your Digital Dreams a Digital Reality” section
- this will be a variety of the “banner” component with option to make it rounded and with the gradient overlayed on the image, the image should NOT be a CSS background
- update banner.html to demo this component
g. “How it Works” section
- this will be a component similar to the component mentioned in “b. Hero section” above
4. Solutions - App Design
- https://zpl.io/aN4mOMe
a. Hero section
- this will be a shorter version of the component in the hero section mention in #3b above
b. “Technology is moving faster than ever...” section
- left top part of this section is just a regular large body text
- the other are components that are already existing from the provided base files
c. “Application Design Solutions” section
- the components on this section are already existing from the provided base files
- “Start a Project” button will be dead link
- “View Product PDF” is also dead link
- “Watch Video” link when click should launch a modal
- the video modal functionality will be similar to the one in https://www.topcoder.com/what-can-you-do/mobile-applications/ (scroll down below to “Application Design & Development Packages” and see the details of each item and look for one with video link)
d. Results section
- the components here are based on “Content Box - 6 column” component
e. “How It Works” section
- create a new component called “Content Box - Steps” based on the existing “Content Box - Content with Icon” component
- update also content-box.html to demo this functionality
f. “Ready to Get Your App Design...” section
- this is a component similar to the one mentioned in #3f above
5. Enterprise - Introduction
- https://zpl.io/VOBQ4yQ
- most of the sections on this page are similar to the previous page with the following exceptions:
a. “Ready to Accelerate Digital with Crowdsourcing?” banner
- this will be a variation of the banner component
- update banner.html to demo this component
b. “113% ROI on Large Enterprise Crowdsourcing Programs” section
- background should be an image tag and NOT in CSS background
6. About - Introduction
- https://zpl.io/a3zvq5y
- most of the sections here are similar to the previous page
- each section should have the ability or have an helper class that can expand the bottom padding and/or make an offset margin
7. About - Clients
- https://zpl.io/Vq6wBDG
- the section above the square tiles don’t need a special class, it will only utilize regular heading/text in a column layout
- the square tiles are image placeholders
- quote is an existing component
- the banner is similar to the previous page
8. About - Community
- https://zpl.io/2yByYKy
- the video is an embedded video with source from Youtube
- use Youtube’s API to embed a video instead of the regular embed code, the provided base files has this functionality
- use different helper class for the analytics number colors
- the “Topcoder Is More Than A Company” section is an existing component, see “Content Box - Full Width - Wide Image” component
- quote carousel is also an existing component, see “Quotes - Carousel” component
9. About - Crowdsourcing
- https://zpl.io/bzYn0P3
- the circle below the hero section is an image placeholder, this style is already existing in the provided base files
10. About - Customer Stories
- https://zpl.io/a3z1ygQ
- the tab component is already existing from the provided base files
- create the actual functionality to show/hide tab content
- the tiles (or stories) are already existing from the provided base files
- “All Customer Stories” tab will use the “Stories - Gradient Background” component
- other tabs will use the “Stories - Gradient Color Bar” component
- the “Load More Customer Stories” button will request a JSON object via AJAX (create a dummy JSON file)
- add those JSON result to “All” tab and also to their respective categories
- link each story to the customer story page
11. Customer Story
- create all the 3 different version of this page
- see V1, V2, and V3
- carousel on V1 should be working
- embed a real Youtube video in V3
12. About - In the News
- https://zpl.io/begvA3B
- see the existing “Stories - Solid Color Bar” component for the tile styles
- clicking the button on the right part will show its corresponding tab content (e.g. “View All Press Releases” will show the “Press Releases” tab content
13. How It Works - FAQs
- https://zpl.io/VDDeRPr
- by default all items are collapsed
- create the functionality of showing/hiding the answer content
- one or many can be kept expanded at the same time
14. Blog - Home
- https://zpl.io/V0Zyd3O
- top left part is an existing component, see “Stories - Featured” component
- Bottom card, read more should link to "Blog - Post" page
15. Blog - Post
- https://zpl.io/b6lM8rR
- kindly prototype as shown in the storyboard
16. Blog - Profile
- https://zpl.io/aRNYyOv
- kindly prototype as shown in the storyboard
- Latest Chrome on Mac and Windows
- Latest Safari on Mac and Windows
- Latest Firefox on Mac and Windows
Most of the components that are part of the pages are already built. For this challenge, we’re looking forward to create clean and easily maintainable frontend code of the pages outlined below using the provided frontend files.
Final Submission Guidelines
The goal of this new version is to make a component based website that are reusable, clean, and easy to maintain.The goal of this challenge is to build the templates of different pages that are outlined below. The final HTML/JS/SCSS is going to be used for the Wordpress development, so we want really high quality and clean codes.
Resources:
1. Base files of different components.
2. Storyboard in Zeplin
3. TC GUI Kit
Overall Requirements
- HTML and CSS code must be W3C validated.- Source code and design text must be written in US-English.
- Page width is responsive, the minimum size of a screen is 768px (NOT mobile), max width of content section should be 1280px
- Use the base-unit, corner-radius, and color names variables instead of pixels and hex (ex. #fff) colors.
- Create high quality SCSS, look at https://github.com/appirio-tech/tc-ui/blob/feature/connectv2/src/styles/_checkboxes.scss, the Slider is a good example of well abstaqracted code.
- Don't overly nest your code; we'll need to abstract the final DOM into multiple components; try to stay into smaller logical pieces.
- Use flexbox instead floats.
- Define spacing with multiples of $base-unit, and corner radius through $corner-radius.
- We want to minimize the use of third party plugins, please ask in the forums if you need to use one that is not in the provided base files.
- DO NOT redeclare hex colors as variables - use the ones we have in the provided _variables.scss files.
- Do not redeclare/style that exist in the provided SCSS files and the library as whole. If you need to define a button style (or extend an existing one) - think how this could happen in the relevant SCSS file.
- Icons, rounded images, typography styles are already built from the provided base files, you should reuse them.
- See the provided TC GUI Kit for reference on Buttons, Colors, and Typography.
- Do not style elements based on body class or page specific, the goal is to make all style elements component based.
- Do not create new components that are not asked or outlined below.
- Always ask in the forum for clarifications.
Page Requirements
Build the following pages outlined below, taking any existing codes from the provided base files.0. Global Feature
a. Header Search
- https://zpl.io/aN4g9XN and https://zpl.io/bzYg1r7
- by default the search form is hidden (see https://zpl.io/brkrxAr) and when user clicks on the search icon, the form will animate/slide down to reveal itself.
- clicking the search icon again will hide (animate/slide up) the form.
b. Section Content
- the body content of each page will composed mostly of sections
- these sections should allow us to define how many columns to use based on the 12 column grid
- each section’s column can be the container of different components.
- there should be a class helper that we can set the top & bottom margins to 0, 60px, or 100px
1. Home
- https://zpl.io/V1ZB6NQ
a. Content Box - Full Width Image
- create this Content Box component similar to what’s in the provided content-box.html
- image background should be image tag and not from CSS background
- update also the provided content-box.html to demo this specific component.
b. Tap Into a Global Community section
- the section title should use generic/global section header/title H tag
- use “Content with Icon” content box component
c. Meet our Community section
- use “Full Width - Wide Image” content box component
d. How it Works section
- the component that is on the 4 column grid based is not yet existing
- create this new component based on the existing “Content with Icon” content box component
- update the provided content-box.html to demo this new component.
- ignore the wide white space after this section
2. Search Result
- https://zpl.io/2jl6PDx
- the body content of this page is NOT component base
- the left sidebar links will function as a filter to dynamically show/hide result item on the main content via JS
- the “Load More Results” button functionality should be working
- when that button is clicked, it will load HTML part via AJAX
3. Solutions Introduction
- https://zpl.io/b6l4XRg
- the body content this page will be component based layout
a. Sub Navigation
- make an update to the existing navigation component to include this sub navigation
- the sub navigation should be shown when user hover on its parent nav item or when the parent nav item has active state
- hide the current page sub navigation if user hover on the other nav item that has sub nav list
b. Hero section
- this will be a variation or an update to the “Content Box - Full Width Image” component where the content will be aligned center.
c. “Topcoder solutions allow you to quickly realize...” section
- create a new component based on this style
- create sets of predefined color gradients based on the existing “Stories - Featured” components
- create a separate banner.html to demo this component together with the different sets of pre-defined gradient colors.
d. “With Topcoder, you don’t pay for the process…” section
- left top part of this section is just a regular large body text
- the other are components that are already existing from the provided base files
e. “Use Cases” section
- the components on this section are already existing from the provided base files
f. “Make Your Digital Dreams a Digital Reality” section
- this will be a variety of the “banner” component with option to make it rounded and with the gradient overlayed on the image, the image should NOT be a CSS background
- update banner.html to demo this component
g. “How it Works” section
- this will be a component similar to the component mentioned in “b. Hero section” above
4. Solutions - App Design
- https://zpl.io/aN4mOMe
a. Hero section
- this will be a shorter version of the component in the hero section mention in #3b above
b. “Technology is moving faster than ever...” section
- left top part of this section is just a regular large body text
- the other are components that are already existing from the provided base files
c. “Application Design Solutions” section
- the components on this section are already existing from the provided base files
- “Start a Project” button will be dead link
- “View Product PDF” is also dead link
- “Watch Video” link when click should launch a modal
- the video modal functionality will be similar to the one in https://www.topcoder.com/what-can-you-do/mobile-applications/ (scroll down below to “Application Design & Development Packages” and see the details of each item and look for one with video link)
d. Results section
- the components here are based on “Content Box - 6 column” component
e. “How It Works” section
- create a new component called “Content Box - Steps” based on the existing “Content Box - Content with Icon” component
- update also content-box.html to demo this functionality
f. “Ready to Get Your App Design...” section
- this is a component similar to the one mentioned in #3f above
5. Enterprise - Introduction
- https://zpl.io/VOBQ4yQ
- most of the sections on this page are similar to the previous page with the following exceptions:
a. “Ready to Accelerate Digital with Crowdsourcing?” banner
- this will be a variation of the banner component
- update banner.html to demo this component
b. “113% ROI on Large Enterprise Crowdsourcing Programs” section
- background should be an image tag and NOT in CSS background
6. About - Introduction
- https://zpl.io/a3zvq5y
- most of the sections here are similar to the previous page
- each section should have the ability or have an helper class that can expand the bottom padding and/or make an offset margin
7. About - Clients
- https://zpl.io/Vq6wBDG
- the section above the square tiles don’t need a special class, it will only utilize regular heading/text in a column layout
- the square tiles are image placeholders
- quote is an existing component
- the banner is similar to the previous page
8. About - Community
- https://zpl.io/2yByYKy
- the video is an embedded video with source from Youtube
- use Youtube’s API to embed a video instead of the regular embed code, the provided base files has this functionality
- use different helper class for the analytics number colors
- the “Topcoder Is More Than A Company” section is an existing component, see “Content Box - Full Width - Wide Image” component
- quote carousel is also an existing component, see “Quotes - Carousel” component
9. About - Crowdsourcing
- https://zpl.io/bzYn0P3
- the circle below the hero section is an image placeholder, this style is already existing in the provided base files
10. About - Customer Stories
- https://zpl.io/a3z1ygQ
- the tab component is already existing from the provided base files
- create the actual functionality to show/hide tab content
- the tiles (or stories) are already existing from the provided base files
- “All Customer Stories” tab will use the “Stories - Gradient Background” component
- other tabs will use the “Stories - Gradient Color Bar” component
- the “Load More Customer Stories” button will request a JSON object via AJAX (create a dummy JSON file)
- add those JSON result to “All” tab and also to their respective categories
- link each story to the customer story page
11. Customer Story
- create all the 3 different version of this page
- see V1, V2, and V3
- carousel on V1 should be working
- embed a real Youtube video in V3
12. About - In the News
- https://zpl.io/begvA3B
- see the existing “Stories - Solid Color Bar” component for the tile styles
- clicking the button on the right part will show its corresponding tab content (e.g. “View All Press Releases” will show the “Press Releases” tab content
13. How It Works - FAQs
- https://zpl.io/VDDeRPr
- by default all items are collapsed
- create the functionality of showing/hiding the answer content
- one or many can be kept expanded at the same time
14. Blog - Home
- https://zpl.io/V0Zyd3O
- top left part is an existing component, see “Stories - Featured” component
- Bottom card, read more should link to "Blog - Post" page
15. Blog - Post
- https://zpl.io/b6lM8rR
- kindly prototype as shown in the storyboard
16. Blog - Profile
- https://zpl.io/aRNYyOv
- kindly prototype as shown in the storyboard
Browser Requirements
- IE 11+- Latest Chrome on Mac and Windows
- Latest Safari on Mac and Windows
- Latest Firefox on Mac and Windows