Challenge Overview
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.For this challenge, we’re looking forward to create clean and easily maintainable frontend code of the components of the site using the provided frontend files.
Project Overview
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 continue building the frontend UI HTML markups and SCSS styles. The final HTML/SCSS is going to be used for the Wordpress development, so we want really high quality and stand alone HTML/SCSS.
Resources:
1. Zeplin access for the storyboards but NOT all the screens are in scope.2. Base HTML and SCSS files (build your submission over this provided prototype files)
Overall Requirements
- HTML and CSS code must be W3C validated.- Source code and design text must be written in US-English.
- The minimum size of a screen is 768px. NOT mobile.
- 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.
- Do not include third-party libraries; we want to stay as vanilla as possible at this stage.
- 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 frontend file, you should reuse them.
- See the provided TC GUI Kit for reference on Buttons, Colors, and Typography.
Page and Components Requirements
Build the following component requirements outlined below over the provided frontend files (base.zip). You will be asked to create different pages to demo the components.- these pages should have header and footer (use the existing codes from the provided files).
- each display of component should have headings, some notes (optional), and the html markup code.
1. Quotes
- create a new page called quotes.html to demo the quotes components outlined below
a. Carousel
- see https://zpl.io/2jl41Gp and https://zpl.io/25gynzW for reference
- carousel functionality should be working
b. Full
- see https://zpl.io/2podDRE for reference
- the size should be responsive and takes 100% of the screen width
- you should take also considerations of the margins, this can be rounded to the divisible value of base unit
2. Feature
- create feature.html page to demo the following components
a. Full Width
- see https://zpl.io/bokx5dZ for reference
- demo this component in feature.html page
b. Full Width with Carousel
- see https://zpl.io/2poOD9o for reference
- the blue box is not part of an slide item, only the text on the left and the video/image
- make sure to demo a slide with a video and another with image (with no play button)
- for videos, we are going to use Youtube service. Use their API to embed a video and get a sample videos here
3. Stories
- create stories.html to demo the following components
- the 3 version (a-c) below should work with or without an image (kindly demo this purpose)
- all the components’ width should fill its container width.
a. Gradient Background
- see https://zpl.io/anrKGDQ for reference
- create all predefined background gradients found in https://zpl.io/a3z1ygQ
b.Gradient Color Bar
- see https://zpl.io/a8WKOM4 for reference
- create a set of predefined gradient color bars based on the gradient backgrounds from https://zpl.io/a3z1ygQ
c. Solid Color Bar
- see https://zpl.io/VxBYMPR for reference
- create a set of predefined color bars based on all possible colors (only start and end colors) in each gradient background in https://zpl.io/a3z1ygQ
d. Featured
- see https://zpl.io/VOBkJOQ for reference
- the image should NOT be set as CSS background but as an image content
- create a set of predefined gradient overlay based on the gradient backgrounds from https://zpl.io/a3z1ygQ
4. Content Box
- create content-box.html to demo the following components
- all components below should take 100% width of its container
- images should be treated as content and not as a background style
a. Full Width - Wide Image
- see https://zpl.io/2vBYm47 for reference
b. Full Width - Half Image
- see https://zpl.io/Vq6E9oJ for reference
c. 6 column
- see https://zpl.io/bW1YAOM for reference
- we should be able to optionally remove description (see https://zpl.io/bP4YlkD )
- we should be able to put in link list in the description (see https://zpl.io/2yBmLno )
d. 4 column
- see https://zpl.io/aBO5gML for reference
e. 4 column with photo
- see https://zpl.io/brkNxw3 for reference
f. Content with Icon
- see https://zpl.io/bP4j54x for reference
- create 2 set/version of this content component, 1 with icon that is image based and another 1 with icon that is set in CSS (use the icon component in the provided HTML files)
5. Solutions
- create solutions.html page to demo the following components
a. Large
- see https://zpl.io/2EwADMg for reference
b. Small
- see https://zpl.io/VKNqmM6 for reference
Browser Requirements
- IE 11+- Latest Chrome on Mac and Windows
- Latest Safari on Mac and Windows
- Latest Firefox on Mac and Windows