Challenge Overview
Welcome to “Onsite Interviews Panel UI Prototype Challenge”. On this challenge we are looking to create and develop the front end coding of this responsive application, using desktop and mobile phone as target devices. Your final deliverable must be HTML files.
1) Login/Register
- Please see "D01_0-Login.gif" and "D01_2-Login.gif" for reference.
- No extra validations or back end functionalities are needed here.
- Treat this two pages as a single page. The transition between Login & Registration must be fluid.
2) Dashboard
- Please see from "D02_0-Dashboard.gif" to "D02_5-Dashboard.gif" for reference.
- Side navigation is closed by default
- Clicking in "Hamburguer" icon open side menu as shwon on "D02_1-Dashboard.gif"
- Grid and List views are required
- Filters controls (slider, dropdown/selects/calendar) as shown on "D02_5-Dashboard.gif" are required. No back end functionalities are needed here.
- Provide a Open Source library for calendar. No back end functionalities are needed here.
3) Interview Form
- Please see from "D03_0-Interview-Form.gif" to "D03_8-Interview-Form.gif" for reference.
- This is a step by step wizard workflow. You can connect the 7 steps using the "next" and "previous" buttons.
- The circles with icons and titles are not clickables.
- These circles have 3 states: "Completed" - "Active" and "Disable". Please refer: take.ms/B1o1t
- For all 7 screens leave the circles like this: take.ms/U2zat Important
- No need to update the circles between each step. We just need to have 3 clases created for back end reference only.
- All 7 steps must be done in a single page.
4) Feedback
- Please see "D04_0-Feedback.gif" for reference.
5) Form
- Please see from "D05_0-Form.gif" to "D05_4-Form.gif" for reference.
- Grid and list views are required
- Clicking on any "Edit" icon takes to "D05_4-Form.gif"
- Make the "delete" icon on circles clickable: take.ms/asXfR No back end functionalities are needed here.
- "Add Section" circle is a deadlink
- These circles with numbers are deadlinks: take.ms/v42FD
- Make the "delete" icon on questions clickable: take.ms/l6qKm No back end functionalities are needed here.
- "Add Question" is a deadlink
- Modal views on "D05_5-Form.gif" and "D05_5-Form.gif" are not in scope.
6) Panelists
- Please see from "D06_0-Panelist.gif" to "D06_4-Panelist.gif" for reference.
- Grid view is not on scope (This view is not designed)
- Clicking on any "Send Form" icon open modal on "D06_3-Panelist.gif". However, for this challenge you only need to code the view on "D06_4-Panelist.gif". Important
Things to consider
- Top bar is fixed at top
- Bottom Copyright and Disclaimer are is fixed at bottom
- "Placeholder" logo is text only. Not clickable.
- Avatar and Notifications icon are clickables but deadlinks
- All hover states should be done by reducing opactity at 90% Important
- For any select field, use this dropdown as reference: take.ms/9AtQW try to match it as much as possible
- For any design inconsistency between Desktop and Mobile versions such like titles, colors, images; please go with the desktop version. Some final fixes were made on desktop but not on Mobile screens.
- Links on footer are deadlinks
- Don’t need to code the back end functionality anywhere.
Target Devices
- Desktop and Phone only
- As tablet is not on scope don't worried on fixing the views for this device.
Resources
- You can download all assets and resources for this challenge on this drive folder:
https://drive.google.com/open?id=1y0rIPvP9j6Kyt4bBwqF_Wx3VCYPlXSuO
Fonts are included there
Note: Source files are in Photoshop. (No sketch files or Zeplin will be provided)
Possible FAQs on this challenge
- Due our proposal, AngularJS or any other JS framework is not allowed on this challenge.
- You can use just simple HTML + CSS3 + Javascript on this challenge.
- You can also use HTML5 Framerworks such like Bootstrap or Foundation, but have in mind that you will need to overwrite several clases to match storyboards.
- You are allowed to use any Open Source Library / Plugin that allows you to match the designs as much as possible. Just remember to declare it on your declaration/readme file.
- All pages must be connected from side navigation and their respectives workflows. Important
- Try to match the storyboards as much as possible. If you any extra interactions, no need to code it.
- Storyboards and sources are not retina ready. So all icons and images can avoid retina behaviors.
- Storyboards use 1280px for content and layout. Please follow this guideline as well.
- Provide clear class names on forms elements. This will help developers in future.
HTML Requirements
- HTML should be valid HTML5 compliant.
- 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.
CSS Requirements
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- You are allowed to use SCSS/SASS for CSS Preprocessor.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- 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 Requirements
- 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.
Browser Requirements
- Desktop: IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows)
- Mobile: Chrome / Safari for mobile browsers
Final Submission Guidelines
Required Screens1) Login/Register
- Please see "D01_0-Login.gif" and "D01_2-Login.gif" for reference.
- No extra validations or back end functionalities are needed here.
- Treat this two pages as a single page. The transition between Login & Registration must be fluid.
2) Dashboard
- Please see from "D02_0-Dashboard.gif" to "D02_5-Dashboard.gif" for reference.
- Side navigation is closed by default
- Clicking in "Hamburguer" icon open side menu as shwon on "D02_1-Dashboard.gif"
- Grid and List views are required
- Filters controls (slider, dropdown/selects/calendar) as shown on "D02_5-Dashboard.gif" are required. No back end functionalities are needed here.
- Provide a Open Source library for calendar. No back end functionalities are needed here.
3) Interview Form
- Please see from "D03_0-Interview-Form.gif" to "D03_8-Interview-Form.gif" for reference.
- This is a step by step wizard workflow. You can connect the 7 steps using the "next" and "previous" buttons.
- The circles with icons and titles are not clickables.
- These circles have 3 states: "Completed" - "Active" and "Disable". Please refer: take.ms/B1o1t
- For all 7 screens leave the circles like this: take.ms/U2zat Important
- No need to update the circles between each step. We just need to have 3 clases created for back end reference only.
- All 7 steps must be done in a single page.
4) Feedback
- Please see "D04_0-Feedback.gif" for reference.
5) Form
- Please see from "D05_0-Form.gif" to "D05_4-Form.gif" for reference.
- Grid and list views are required
- Clicking on any "Edit" icon takes to "D05_4-Form.gif"
- Make the "delete" icon on circles clickable: take.ms/asXfR No back end functionalities are needed here.
- "Add Section" circle is a deadlink
- These circles with numbers are deadlinks: take.ms/v42FD
- Make the "delete" icon on questions clickable: take.ms/l6qKm No back end functionalities are needed here.
- "Add Question" is a deadlink
- Modal views on "D05_5-Form.gif" and "D05_5-Form.gif" are not in scope.
6) Panelists
- Please see from "D06_0-Panelist.gif" to "D06_4-Panelist.gif" for reference.
- Grid view is not on scope (This view is not designed)
- Clicking on any "Send Form" icon open modal on "D06_3-Panelist.gif". However, for this challenge you only need to code the view on "D06_4-Panelist.gif". Important
Things to consider
- Top bar is fixed at top
- Bottom Copyright and Disclaimer are is fixed at bottom
- "Placeholder" logo is text only. Not clickable.
- Avatar and Notifications icon are clickables but deadlinks
- All hover states should be done by reducing opactity at 90% Important
- For any select field, use this dropdown as reference: take.ms/9AtQW try to match it as much as possible
- For any design inconsistency between Desktop and Mobile versions such like titles, colors, images; please go with the desktop version. Some final fixes were made on desktop but not on Mobile screens.
- Links on footer are deadlinks
- Don’t need to code the back end functionality anywhere.
Target Devices
- Desktop and Phone only
- As tablet is not on scope don't worried on fixing the views for this device.
Resources
- You can download all assets and resources for this challenge on this drive folder:
https://drive.google.com/open?id=1y0rIPvP9j6Kyt4bBwqF_Wx3VCYPlXSuO
Fonts are included there
Note: Source files are in Photoshop. (No sketch files or Zeplin will be provided)
Possible FAQs on this challenge
- Due our proposal, AngularJS or any other JS framework is not allowed on this challenge.
- You can use just simple HTML + CSS3 + Javascript on this challenge.
- You can also use HTML5 Framerworks such like Bootstrap or Foundation, but have in mind that you will need to overwrite several clases to match storyboards.
- You are allowed to use any Open Source Library / Plugin that allows you to match the designs as much as possible. Just remember to declare it on your declaration/readme file.
- All pages must be connected from side navigation and their respectives workflows. Important
- Try to match the storyboards as much as possible. If you any extra interactions, no need to code it.
- Storyboards and sources are not retina ready. So all icons and images can avoid retina behaviors.
- Storyboards use 1280px for content and layout. Please follow this guideline as well.
- Provide clear class names on forms elements. This will help developers in future.
HTML Requirements
- HTML should be valid HTML5 compliant.
- 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.
CSS Requirements
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- You are allowed to use SCSS/SASS for CSS Preprocessor.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- 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 Requirements
- 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.
Browser Requirements
- Desktop: IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows)
- Mobile: Chrome / Safari for mobile browsers