Challenge Overview
Topcoder is in the process of developing a new version of the Connect platform, which connects customers with project managers, copilots and competitors to run projects through the Topcoder services.
We are happy to bring challenges to our community to help us building one of the main tools our teams and community members will be using soon!
For this challenge, we’re looking forward to create two pages, a 404 error page and a walkthrough/welcome.
Final Submission Guidelines
The new version of Topcoder Connect aims to provide an easy experience for customers and project/challenge managers through a very clean and modern UI.The goal of this challenge is to develop the front-end UI HTML/SCSS for two pages, error and walkthrough. The final HTML/SCSS is going to be used for the React components development, so we want really high quality and stand alone HTML/SCSS.
Required Pages
1. Error Page
- See “Error Page” screen in the HTML Spec (left panel).
- The only image to be used is the robot. The rest must be html generated.
2. Walkthrough Page
- See “Account Empty” screen in the HTML Spec (left panel).
- The only images to be used are the robot and the “build awesome apps with connect”. The rest must be html generated.
- The three soft gray boxes with the plus sign must be clickable elements.
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 #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 abstracted 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.
- We use autoprefixer, so don't worry about all browser-specific rules.
- For color references you can also use our style guide https://app.frontify.com/d/zEXqGHFD1YN2/ui-library#/elements/colors.
- 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 /styles/_colors.scss.. (https://github.com/appirio-tech/tc-ui/tree/feature/connectv2).
- Do not redeclare/style buttons and form elements that exist in the /styles/_forms.scss 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 /styles/_forms.scss (or relevant _*.scss) file. In the end we want to add extrapolate the styles you create int 2 places:
-- Component-specific styles (used only once).
-- Global styles (/styles/*.scss) used from all components.
-- Can you try to work in such a way so we can just copy-paste the SCSS for the appropriate DOM structure for the component?
Browser Requirements
- IE 11+
- Latest Chrome on Mac and Windows
- Latest Safari on Mac and Windows
- Latest Firefox on Mac and Windows
Resources
- Project Template (local running sample, your starting sample/template)
- Team Management Specifications (interactive HTML files with measurements and assets)
- Topcoder UI Kit Guidelines
Deliverables
Provide all your files in a zip container.