Challenge Overview
Welcome to Living Progress - Impact Entrepreneurship UI Prototype Challenge
This UI Prototype is part of the Living Progress Blitz Challenge Series. Make sure to check it out!
The main task of this challenge is to create Responsive UI Prototype of the Living Progress - Impact Entrepreneurship application based on the provided Storyboard design and specification below
At the end of this challenge, we need a solid UI prototype using best coding practice/solutions. Good luck and we’re looking forward to your submissions!
https://drive.google.com/folderview?id=0B31nrwic_6z0cmFjX2NtNGlZR3M&usp=sharing
Storyboard.zip - Use this storyboard design when build UI Prototype
Wireframe.zip - Living Progres - Impact Entrepreneurship Wireframe Reference
Important!
- Suggest best practice Responsive Web Design Breakpoints.
- Use Bower for Library Package Manager. DO NOT just put raw javascript library inside your prototype
- If you use custom styling/function based on existing library. Put them in separated files.
- Use SASS for CSS Pre-Processor
- Put original sass folder also the output on your prototype
- You can use Bootstrap to build the layout
- Use separated JSON to store data.
- Your prototype submission need build for Desktop Size only
- Provided storyboard using 1280px and height up to page content
- For Desktop version, you need make the fluid version based on tablat starting from 1025px and upper
- Please do your best adjust the layout for desktop layout for 1025px and 1280px, we’ll ask more edits later on Final Fixes
- As possible all buttons and links need linked each other. If the page not exists on storyboard, put dead links.
- Bring consistency placement/styling in your UI Prototype submission
- Let discuss any of your questions and let us know if need clarification.
UI Prototype Page Requirements
0). Index page
- Create index page that will link user to these 2 following roles:
A). Entrepreneur Flow
1). Login
Screenshot: 01_1_login.png
- Background image need covered browser screen
- Endeavour logo placed centered
- Login form need use transparent styling
- Match style for default and typed value on text inputs
- For Password field there’s show/hide to display password value. Build this function on your prototype.
- Create error validation function, match styling like storyboard (Screenshot: 01_2_login_error.png)
- Then, Login button need take user Dashboard (blank page), more details below
2). Walkthrough
Screenshot: 02_2_walk_through.png
- This modal window need show up at first time user landed on Dashboard page
- Transparent background need covered whole browser screen
- Build slideshow function
- Dots pagination need able to navigate to different slide
- Click on the overlay need hide the modal window
- Get Started button take user to Dashboard (default) page, more details below.
3). Dashboard (blank)
Screenshot: 02_1_dashboard_blank.png
- This is dashboard look at first time user landed on Dashboard page that still display blank content on each section
- Dashboard page layout divided by these following sections below. Each sections need re-use consistent implementation on every pages
Header
- Header need use fluid width
- Endeavor logo placed on the left side area, this logo can be dead link
- Logo always placed on the left side of browser screen
- Main navigation placed on the right side area
- Match active/inactive state
- User thumbnail need wrapped with css properties, username place on the right side
- Notification button placed on the right side
- Display number indicator on top of the icon, make sure when filled with more characters rounded corner shape not auto expand the width
- Header area need use fixed placement when user scrolling down/up the page
Content
- Content area need use fluid width and use 2 columns format
- Follow empty message for each section like storyboard look
- Click Get Started button need take user to Dashboard (default) page, more details below.
Footer
- Footer need use fluid width
- Endeavor logo and copyright text placed on the left side
- Footer links placed on the right side
- Footer area need stick with the bottom of browser viewport screen if there are less content. If there are more content you need make the footer area scrollable
4). Dashboard (default)
Screenshot: 03_1_dashboard.png
- For this dashboard default page, you need add new user area below the header bar
- Top banner is display user profile information
- Match columns layout design
- No need build the “+” button function
- Website and Email need trigger correct link format
My Application Profile
- Overall scoring on the right side of title
- Create quick animation effect for number and progress bar on page load
- Match each row content
- Display number indicator for with different red and grey color
- Update Profile button placed on the bottom right, click this take user to “5). My Application - Details”
Recent Activities
- There are dot timelines on the left side
- User thumbnails need wrapped from css circle
- Match content layout
Events
- Event icon and date placed on the left side
- Event information display as 2 lines, there’s more link
- Action buttons placed on the right side
Top Banner Function
Screenshot: 03_2_banner_hover.png
- Hover on banner need display 2 action buttons on the bottom right side
- Click camera icon need load modal window
- After close the modal, user need able to drag the background image by drag the button (Screenshot: 03_3_change_bg_image.png)
- After click Save or Cancel, background image applied (Screenshot: 03_4_dashboard.png)
Notification
Screenshot: 03_5_notifications.png
- Click notification icon need load the right sidebar, possible use quick slide effect?
- Black transparent overlay need covered whole browser screen
- User need able to scroll down/up the notification area
- Click on the overlay area need hide the sidebar
5). My Application - Details
Screenshot: 04_1_application.png
- User landed to this page from Update Profile button on Dashboard or from Main Application on top navigation menu.
- Below header bar, there’s another bar for My Application
- Back arrow take user back to Dashboard page
- Edit and Review menu, set Edit as active state
- Next and Save buttons placed on the right side
- On main content area, page divided by 2 area
- Left sidebar for My Application steps
- And right side for step content
- Match active/inactive state for steps
- Use quick animation effect for progress steps
- Match form styling like storyboard look
- Click Profile Pic area need load flyout to upload via drag and drop or from another app (Screenshot: 04_2_upload_profile_pic.png)
- No need build the upload function
- When user focus on text input need automatically load the tooltips below the text input
- Sample flyout look for Name (Screenshot: 04_3_enter_name.png)
- Sample flyout look for Company (Screenshot: 04_4_company_name.png)
- For Team field, you need load the multiple select (Screenshot: 04_5_add_team_member.png)
- For Custom Section (Screenshot: 04_6_add_custom_section.png)
- Need load the flyout to let user Drag & Drop or upload via another application (Screenshot: 04_7_add_items.png)
6). My Application Details - The Entrepreneur & The Idea
Screenshot: 05_1_application_the_enterpreneur.png
- This is 2nd step from My Application
- Match buttons below the header bar for Prev, Next and Save buttons
- Click “?” button need load help tooltips (Screenshot: 05_2_help.png)
- When user focus on Description field, text editor show up (Screenshot: 05_3_add_desc.png)
- You can use free/open source text editor library
- Page look after description added (Screenshot: 05_4_desc_added.png)
- Hover the description area need show up the action buttons (Screenshot: 05_5_hover_desc.png)
- You can put dead link for the action buttons
- Public is using radio button
- Click Custom Section need load additional Section Title and Description (Screenshot: 05_6_add_custom_section.png)
- User focus on Section title (Screenshot: 05_7_add_section_title.png)
- Click “+” button on the right side need load flyout (Screenshot: 05_8_add_section_items.png)
- Click chart button need load some chart options (Screenshot: 05_9_add_chart.png)
- Click table button need let user drag and select number of rows and columns (Screenshot: 05_10_add_table.png & Screenshot: 05_11_add_table.png).
- Sample complete content after user add some various data (Screenshot: 05_12_table_and_files_added.png)
- User can see action buttons when do right click via mouse to modify the table (Screenshot: 05_13_table_right_click.png)
7). My Application Review
Screenshot: 06_1_application_review.png
- Click Review button below the header bar need load review of my Application page
- On the right side, there’s a PDF button
- Page using 3 columns layout
- On the left sidebar there are number indicator for comments
- Also put checkmark icon for completed step
- Overall feedback take user to Feedback page explained below
- Provide button placed on the bottom of left sidebar
- User still need able to click each steps
- On the content area, comments indicated by grey background text.
- Comments boxes placed on the right side
- Match styling for each comment box
- Invite to Review link placed on the bottom of Comment area
- Click grey box on content area, need change updated to yellow background and move indentation to the left side (Screenshot: 06_2_application_review_comment.png)
- After user click and type on the input area, Reply and Cancel link show up Screenshot: 06_4_application_review.png)
- Display sample after user add new comment (Screenshot: 06_4_application_review.png)
- Click Hide comments link on the right side of Star area need hide the comments area and expand the main content width (Screenshot: 06_5_application_review_hide_comments.png)
8). My Application - Execution
Screenshot: 07_1_application_execution.png
- This is Execution step look and feel
- Put checkmark graphic on the right side of completed step of My Application
- On the main content area, there are tab for Business Plan and Revenue Model
- On the left side is for sidebar navigator
- Match active/inactive state
- Click another step need allow user input another data (Screenshot: 07_2_application_execution.png)
- This is sample table look for Revenue tab (Screenshot: 07_3_application_execution.png)
- Click + Row should add another new row
9). Event
Screenshot: 08_1_events.png
- This is Event page look
- Put banner image below the header bar
- On the content area use 2 columns layout, Upcoming and Past
- For Past column, match grey button color, and there’s no action button for Past
- Click the action buttons need load the flyout (Screenshot: 08_2_events_details.png)
- Match content like storyboard look
- Click Confirm and the overlay background need hide the
10). FAQ
Screenshot: 09_FAQs.png
- This FAQ page, page divided by 2 section left sidebar and right sidebar
- On the left sidebar, there’s search questions input on top
- User can change from one to another category
- Ask Us button placed on the the bottom
- On the right side, each FAQ need use collapsible function
- Was this helpful link placed on the bottom of each question
- Display collapsed state for each state on page load
11). Feedback
Screenshot: 10_1_rating_and_survey.png
- Feedback page using 2 columns layout
- On the left side, user can navigate to different feedback steps
- There’s feedback progress on top of left sidebar
- User can navigate to different feedback steps
- Checkmark icon displayed for completed feedback
- On the right side user can select boxes (Screenshot: 10_2_rating_and_survey.png)
- Match selected box style
- There are prev and right arrow to navigate each feedback
B). Mentor Flow
12). Dashboard Mentor
Screenshot: 11_mentor_dashboard.png
- This is different Dashboard page for Mentor
- This can be separated/stand alone page
- Match header/main navigations differences like storyboard look
- Notice, Review menu show up on main navigation screen
- Use 2 columns layout
Application to Review
- Dropdown placed on the right side
- Match content differences like storyboard look
- Scoresheet and Review button placed on the bottom of each row
- Click each button take user to separated page explained below
- Use quick animation effect for progress bar
- there’s number indicator for the comment
Mentor Profile
- Use quick animation progress for Mentor Profile
- Update button placed on the right side
Recent Activities
- Re-use completed Recent Activities styling from another page
Events
- Re-use completed Events styling from another page
13). Mentor Application - Review
Screenshot: 12_1_mentor_application_review.png
- Re-use completed review screen
- On the left side of arrow button there’s Review and Scoresheet button
- Action button on the right is PDF button
- Prev and Next button show up on the bottom of Email link
- Match banner area below the header bar
- Website and links need use blue colored
- User can drag text, notice + button show up (Screenshot: 12_2_highlight.png)
- Click + button need load the box on the right side (Screenshot:12_3_add_comment.png)
- User can type on comment area
- After saved comments added. (Screenshot:12_4_comment_added.png)
- Click Write Overall Feedback, need load big flyout (Screenshot:12_5_add_overall_feedback.png)
- User can type on textarea
- Save and Cancel button placed on the bottom
14). Mentor Application - ISP Scoresheet
Screenshot:13_1_ISP_scoresheet.png
- This is Scoresheet tab
- On the left side, display quick animated for scoresheet profile
- Section 1, user only need able to select one radio at a time
- Section 2, user only need able to select one selection at a time.
- Section 3, Selected circle use green colored border.
CODE REQUIREMENTS:
HTML/HTML5
- 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.
SASS/CSS
- Use SASS as CSS Pre-Processor.
- Use Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the SASS code. We need SASS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- All SASS naming should not have any conflicts.
- As possible use SASS style when create all styling, avoid image usage.
- 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
- 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.
- Use Bower for Library Package Manager
- Create separate files if you plan to create custom functions
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
This UI Prototype is part of the Living Progress Blitz Challenge Series. Make sure to check it out!
The main task of this challenge is to create Responsive UI Prototype of the Living Progress - Impact Entrepreneurship application based on the provided Storyboard design and specification below
At the end of this challenge, we need a solid UI prototype using best coding practice/solutions. Good luck and we’re looking forward to your submissions!
Final Submission Guidelines
Downloadable Files:https://drive.google.com/folderview?id=0B31nrwic_6z0cmFjX2NtNGlZR3M&usp=sharing
Storyboard.zip - Use this storyboard design when build UI Prototype
Wireframe.zip - Living Progres - Impact Entrepreneurship Wireframe Reference
Important!
- Suggest best practice Responsive Web Design Breakpoints.
- Use Bower for Library Package Manager. DO NOT just put raw javascript library inside your prototype
- If you use custom styling/function based on existing library. Put them in separated files.
- Use SASS for CSS Pre-Processor
- Put original sass folder also the output on your prototype
- You can use Bootstrap to build the layout
- Use separated JSON to store data.
- Your prototype submission need build for Desktop Size only
- Provided storyboard using 1280px and height up to page content
- For Desktop version, you need make the fluid version based on tablat starting from 1025px and upper
- Please do your best adjust the layout for desktop layout for 1025px and 1280px, we’ll ask more edits later on Final Fixes
- As possible all buttons and links need linked each other. If the page not exists on storyboard, put dead links.
- Bring consistency placement/styling in your UI Prototype submission
- Let discuss any of your questions and let us know if need clarification.
UI Prototype Page Requirements
0). Index page
- Create index page that will link user to these 2 following roles:
A). Entrepreneur Flow
1). Login
Screenshot: 01_1_login.png
- Background image need covered browser screen
- Endeavour logo placed centered
- Login form need use transparent styling
- Match style for default and typed value on text inputs
- For Password field there’s show/hide to display password value. Build this function on your prototype.
- Create error validation function, match styling like storyboard (Screenshot: 01_2_login_error.png)
- Then, Login button need take user Dashboard (blank page), more details below
2). Walkthrough
Screenshot: 02_2_walk_through.png
- This modal window need show up at first time user landed on Dashboard page
- Transparent background need covered whole browser screen
- Build slideshow function
- Dots pagination need able to navigate to different slide
- Click on the overlay need hide the modal window
- Get Started button take user to Dashboard (default) page, more details below.
3). Dashboard (blank)
Screenshot: 02_1_dashboard_blank.png
- This is dashboard look at first time user landed on Dashboard page that still display blank content on each section
- Dashboard page layout divided by these following sections below. Each sections need re-use consistent implementation on every pages
Header
- Header need use fluid width
- Endeavor logo placed on the left side area, this logo can be dead link
- Logo always placed on the left side of browser screen
- Main navigation placed on the right side area
- Match active/inactive state
- User thumbnail need wrapped with css properties, username place on the right side
- Notification button placed on the right side
- Display number indicator on top of the icon, make sure when filled with more characters rounded corner shape not auto expand the width
- Header area need use fixed placement when user scrolling down/up the page
Content
- Content area need use fluid width and use 2 columns format
- Follow empty message for each section like storyboard look
- Click Get Started button need take user to Dashboard (default) page, more details below.
Footer
- Footer need use fluid width
- Endeavor logo and copyright text placed on the left side
- Footer links placed on the right side
- Footer area need stick with the bottom of browser viewport screen if there are less content. If there are more content you need make the footer area scrollable
4). Dashboard (default)
Screenshot: 03_1_dashboard.png
- For this dashboard default page, you need add new user area below the header bar
- Top banner is display user profile information
- Match columns layout design
- No need build the “+” button function
- Website and Email need trigger correct link format
My Application Profile
- Overall scoring on the right side of title
- Create quick animation effect for number and progress bar on page load
- Match each row content
- Display number indicator for with different red and grey color
- Update Profile button placed on the bottom right, click this take user to “5). My Application - Details”
Recent Activities
- There are dot timelines on the left side
- User thumbnails need wrapped from css circle
- Match content layout
Events
- Event icon and date placed on the left side
- Event information display as 2 lines, there’s more link
- Action buttons placed on the right side
Top Banner Function
Screenshot: 03_2_banner_hover.png
- Hover on banner need display 2 action buttons on the bottom right side
- Click camera icon need load modal window
- After close the modal, user need able to drag the background image by drag the button (Screenshot: 03_3_change_bg_image.png)
- After click Save or Cancel, background image applied (Screenshot: 03_4_dashboard.png)
Notification
Screenshot: 03_5_notifications.png
- Click notification icon need load the right sidebar, possible use quick slide effect?
- Black transparent overlay need covered whole browser screen
- User need able to scroll down/up the notification area
- Click on the overlay area need hide the sidebar
5). My Application - Details
Screenshot: 04_1_application.png
- User landed to this page from Update Profile button on Dashboard or from Main Application on top navigation menu.
- Below header bar, there’s another bar for My Application
- Back arrow take user back to Dashboard page
- Edit and Review menu, set Edit as active state
- Next and Save buttons placed on the right side
- On main content area, page divided by 2 area
- Left sidebar for My Application steps
- And right side for step content
- Match active/inactive state for steps
- Use quick animation effect for progress steps
- Match form styling like storyboard look
- Click Profile Pic area need load flyout to upload via drag and drop or from another app (Screenshot: 04_2_upload_profile_pic.png)
- No need build the upload function
- When user focus on text input need automatically load the tooltips below the text input
- Sample flyout look for Name (Screenshot: 04_3_enter_name.png)
- Sample flyout look for Company (Screenshot: 04_4_company_name.png)
- For Team field, you need load the multiple select (Screenshot: 04_5_add_team_member.png)
- For Custom Section (Screenshot: 04_6_add_custom_section.png)
- Need load the flyout to let user Drag & Drop or upload via another application (Screenshot: 04_7_add_items.png)
6). My Application Details - The Entrepreneur & The Idea
Screenshot: 05_1_application_the_enterpreneur.png
- This is 2nd step from My Application
- Match buttons below the header bar for Prev, Next and Save buttons
- Click “?” button need load help tooltips (Screenshot: 05_2_help.png)
- When user focus on Description field, text editor show up (Screenshot: 05_3_add_desc.png)
- You can use free/open source text editor library
- Page look after description added (Screenshot: 05_4_desc_added.png)
- Hover the description area need show up the action buttons (Screenshot: 05_5_hover_desc.png)
- You can put dead link for the action buttons
- Public is using radio button
- Click Custom Section need load additional Section Title and Description (Screenshot: 05_6_add_custom_section.png)
- User focus on Section title (Screenshot: 05_7_add_section_title.png)
- Click “+” button on the right side need load flyout (Screenshot: 05_8_add_section_items.png)
- Click chart button need load some chart options (Screenshot: 05_9_add_chart.png)
- Click table button need let user drag and select number of rows and columns (Screenshot: 05_10_add_table.png & Screenshot: 05_11_add_table.png).
- Sample complete content after user add some various data (Screenshot: 05_12_table_and_files_added.png)
- User can see action buttons when do right click via mouse to modify the table (Screenshot: 05_13_table_right_click.png)
7). My Application Review
Screenshot: 06_1_application_review.png
- Click Review button below the header bar need load review of my Application page
- On the right side, there’s a PDF button
- Page using 3 columns layout
- On the left sidebar there are number indicator for comments
- Also put checkmark icon for completed step
- Overall feedback take user to Feedback page explained below
- Provide button placed on the bottom of left sidebar
- User still need able to click each steps
- On the content area, comments indicated by grey background text.
- Comments boxes placed on the right side
- Match styling for each comment box
- Invite to Review link placed on the bottom of Comment area
- Click grey box on content area, need change updated to yellow background and move indentation to the left side (Screenshot: 06_2_application_review_comment.png)
- After user click and type on the input area, Reply and Cancel link show up Screenshot: 06_4_application_review.png)
- Display sample after user add new comment (Screenshot: 06_4_application_review.png)
- Click Hide comments link on the right side of Star area need hide the comments area and expand the main content width (Screenshot: 06_5_application_review_hide_comments.png)
8). My Application - Execution
Screenshot: 07_1_application_execution.png
- This is Execution step look and feel
- Put checkmark graphic on the right side of completed step of My Application
- On the main content area, there are tab for Business Plan and Revenue Model
- On the left side is for sidebar navigator
- Match active/inactive state
- Click another step need allow user input another data (Screenshot: 07_2_application_execution.png)
- This is sample table look for Revenue tab (Screenshot: 07_3_application_execution.png)
- Click + Row should add another new row
9). Event
Screenshot: 08_1_events.png
- This is Event page look
- Put banner image below the header bar
- On the content area use 2 columns layout, Upcoming and Past
- For Past column, match grey button color, and there’s no action button for Past
- Click the action buttons need load the flyout (Screenshot: 08_2_events_details.png)
- Match content like storyboard look
- Click Confirm and the overlay background need hide the
10). FAQ
Screenshot: 09_FAQs.png
- This FAQ page, page divided by 2 section left sidebar and right sidebar
- On the left sidebar, there’s search questions input on top
- User can change from one to another category
- Ask Us button placed on the the bottom
- On the right side, each FAQ need use collapsible function
- Was this helpful link placed on the bottom of each question
- Display collapsed state for each state on page load
11). Feedback
Screenshot: 10_1_rating_and_survey.png
- Feedback page using 2 columns layout
- On the left side, user can navigate to different feedback steps
- There’s feedback progress on top of left sidebar
- User can navigate to different feedback steps
- Checkmark icon displayed for completed feedback
- On the right side user can select boxes (Screenshot: 10_2_rating_and_survey.png)
- Match selected box style
- There are prev and right arrow to navigate each feedback
B). Mentor Flow
12). Dashboard Mentor
Screenshot: 11_mentor_dashboard.png
- This is different Dashboard page for Mentor
- This can be separated/stand alone page
- Match header/main navigations differences like storyboard look
- Notice, Review menu show up on main navigation screen
- Use 2 columns layout
Application to Review
- Dropdown placed on the right side
- Match content differences like storyboard look
- Scoresheet and Review button placed on the bottom of each row
- Click each button take user to separated page explained below
- Use quick animation effect for progress bar
- there’s number indicator for the comment
Mentor Profile
- Use quick animation progress for Mentor Profile
- Update button placed on the right side
Recent Activities
- Re-use completed Recent Activities styling from another page
Events
- Re-use completed Events styling from another page
13). Mentor Application - Review
Screenshot: 12_1_mentor_application_review.png
- Re-use completed review screen
- On the left side of arrow button there’s Review and Scoresheet button
- Action button on the right is PDF button
- Prev and Next button show up on the bottom of Email link
- Match banner area below the header bar
- Website and links need use blue colored
- User can drag text, notice + button show up (Screenshot: 12_2_highlight.png)
- Click + button need load the box on the right side (Screenshot:12_3_add_comment.png)
- User can type on comment area
- After saved comments added. (Screenshot:12_4_comment_added.png)
- Click Write Overall Feedback, need load big flyout (Screenshot:12_5_add_overall_feedback.png)
- User can type on textarea
- Save and Cancel button placed on the bottom
14). Mentor Application - ISP Scoresheet
Screenshot:13_1_ISP_scoresheet.png
- This is Scoresheet tab
- On the left side, display quick animated for scoresheet profile
- Section 1, user only need able to select one radio at a time
- Section 2, user only need able to select one selection at a time.
- Section 3, Selected circle use green colored border.
CODE REQUIREMENTS:
HTML/HTML5
- 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.
SASS/CSS
- Use SASS as CSS Pre-Processor.
- Use Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the SASS code. We need SASS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- All SASS naming should not have any conflicts.
- As possible use SASS style when create all styling, avoid image usage.
- 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
- 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.
- Use Bower for Library Package Manager
- Create separate files if you plan to create custom functions
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser