Challenge Overview
Welcome to GE Brilliant Career - UI Prototype Contest. As part of this contest you will build a UI Prototype for a website using the provided designs. Your submission should match the designs provided.
Project Overview
GE Brilliant Career Labs wants to build a website to help students navigate their way into a STEM career using multiple resources aggregated into one simple, information site. The first phase will build out the initial website, allowing students to register, gather information and fill out modules to help them develop their soft skills.
Contest Overview
Only the following pages are in scope:
- Login Page
- Register Page
- Home Page
- Essential Skills
- Module 1
- Activity 1
Login Page and Register Page
- Straightforward implementation. Logo at the top is an image. GE Foundation is Text.
- Clicking on Register in Register Page should take the user to the Login Page. You are required to also demonstrate the error message to be shown when required fields are missing on clicking the Register button. Use simple Javascript here. jQuery is not needed.
- Clicking on Login in Login Page should take the user to the Home Page
Home Page
- Welcome Melissa Smith - No need to show a dropdown here.
- “Type here to search” will be an input field
- My Activity Feed - Actions. No need to show a dropdown here.
- Clicking anywhere in the Essential Skills section should take the user to the Essential Skills page
Essential Skills
- “30% Progress” - In a README file specify how to change the progress value so that the progress bar extends correspondingly. Use CSS to display the progress bar. Do not use Javascript here. There is no dynamic change involved. It will be added later in a follow up contest.
- Continue Module - this is shown only on hover. You can show this just for the Module 2 section
- Clicking on Module 1 should take the user to Module 1 page
Module 1
- “30% Progress” - In a README file specify how to change the progress value so that the progress bar extends correspondingly. Use CSS to display the progress bar. Do not use Javascript here. There is no dynamic change involved. It will be added later in a follow up contest.
- Clicking anywhere on the Activity 1 section should take the user to Activity 1 page
- Clicking on the "Welcome to Essential Skills" link should take the user to the Essential Skills page
Activity 1
- In a README file specify how to change the progress value so that the progress bar extends correspondingly. Use CSS to display the progress bar. Do not use Javascript here. There is no dynamic change involved. It will be added later in a follow up contest.
- Currently, there is only 1 question in this activity. That question has two parts - one to select the words and the other is just a statement. You can show both in two separate pages.
- Show a random background when the user clicks on a word. You can use up to three backgrounds to show as seen in the design. For the click based behaviour, use simple javascript. No need to use jQuery here.
- Clicking on Reset Selection removes any selected words
- Clicking on Done shows the statement.
- Clicking on Reset Selection takes the user back to the question
- Clicking on Next Activity takes the user to the Module 1 page
Points to Note
- Browsers to support: IE 11, Latest Firefox, Latest Google Chrome and Latest Safari browsers
- Use HTML5 and CSS3. There are no dynamic elements in the pages and thus Javascript use is not expected. If there are instances where you need to use Javascript, please clarify first in the contest forum
- Use texts wherever possible. Only logos and icons are images.
- - Use font shared in the contest forums
Final Submission Guidelines
Before submitting, make sure that your HTML , CSS and Javascript codes have been validated and there are no errors. In case of any exceptions that the reviewer needs to make, specify this in your README file. Verify that it meets all the requirements mentioned earlier.
Upload your code as a .zip file to the Submit and Review tool for this contest.