Challenge Overview
Welcome to the Dinnaco Car Tax Responsive Design Concepts Challenge! The goal of this Car Tax Guide is to provide a quick reference to the current tax regulations for drivers of company cars and employers.
For this challenge, you are going to create the Responsive HTML Prototype based on the provided storyboards with features and details outlined below.
As part of this challenge you will need to document all HTML/CSS/JavaScript code. We need clear explanation of the code to help us figure all the HTML/CSS/JS code functions and make it easier for future developers and the client to understand what you have built.
Final Submission Guidelines
The objective of this challenge is to build the Responsive HTML prototype by using industry standard best practices.
Branding (important)
These pages must allow ease of for customisation of all displayed text, so do not hardcode them in the html pages. Use the provided JSON files for relevant table data, navigation and displayed texts. You can then reference them to populate the html template using JavaScript, prefer use of framework like Aurelia or AngularJS and avoid using jQuery.
You are allowed to update the data/value in those JSON files to fit in the file structure of your prototype.
Overall Requirements:
1. Header section
- Logo should be an image background with link to home page.
2. Sidebar/Navigation section
- Create a new JSON file that will hold the navigation structure.
- Each nav item should have a structure that will hold the text label, icon path, page url path (viewContentUrl), and its JSON file path to use.
- Set Help, Profile, and Logout navs to dead links and blank JSON file path.
- Active state in the storyboard will serve as hover state as well.
3. Footer section
- Create a new JSON file that will hold the footer navigation structure.
- Each nav item should have a structure that will hold the text label and the page url path.
- Set Help, Profile, and Logout navs to dead links.
- “Dinnaco” is a link (dead link) and should be an image background logo.
4. Desktop version
- Minimum width as per storyboard.
- Sidebars (left and right) are fixed width.
- Main content is fluid width.
- Tiles on home page on desktop view should not increase in size, they can have fixed width.
5. Tablet version
- The provided storyboard width are in retina version.
- Navigation by default is hidden and will be shown when the user taps on the “hamburger” icon. See 02a-1_Home_Tablet.png and 02a-2_Home_Tablet.png for reference.
- When the navigation shows up, it will push (with smooth animation) the content off the screen as per reference in the storyboard.
- Clicking the “x” icon will push back the sidebar navigation.
- The “chevron down” icon on each content section indicates that the section should toggle from expanded to collapse and vice-versa.
- These icon state should be set in the JSON file. Please add configuration if it is not included.
6. Mobile version
- The provided storyboard width are in retina version.
- Navigation by default is hidden and will be shown when the user taps on the “hamburger” icon. See 03a-1_Home_Mobile.png and 03a-2_Home_Mobile.png for reference.
- When the navigation shows up, it will push (with smooth animation) the content off the screen as per reference in the storyboard.
- Clicking the “x” icon will push back the sidebar navigation.
- The “chevron down” icon on each content section indicates that the section should toggle from expanded to collapse and vice-versa.
Page Requirements:
The following are the page and functionalities required for this challenge. All pages are straight forward, please prototype them as per referenced storyboards.
Please remember that we are looking for a single markup code of a particular page for all the required devices and do not do separate HTML markup code on each devices.
1. Home
- Storyboard reference (01b_Home_alt_Desktop.png, 02b_Home_alt_Tablet.png, and 03b_Home_alt_Mobile.png)
- The “VIEW CONTENT” on the “Explorer Contents” tiles are link to their respective pages.
- Update the provided homepage.json to include the “I Got It” and “Learn More” buttons. Their structure should only contain the label and link.
- Link the “I Got It” button to Income Tax Rates and Personal Allowances page.
- “Learn More” button link to About Us page.
2. Income Tax Rates and Personal Allowances
- Use income-tax-rates.json for the data of this page
- Storyboards for this page for each device are:
-- 01c_Tile 1_Desktop.png
-- 02c_Tile 1_Tablet.png
-- 03c_Tile 1_Mobile.png
3. National Insurance
- Use national-insurance.json for the data of this page
- Storyboards for this page for each device are:
-- 01d_Tile 2_Desktop.png
-- 02d_Tile 2_Tablet.png
-- 03d_Tile 2_Mobile.png
4. Company Car and Fuel Benefits
- Use company-car-fuel-benefits.json for the data of this page
- Storyboards for this page for each device are:
-- 01e_Tile 3_Desktop.png
-- 02e_Tile 3_Tablet.png
-- 03e_Tile 3_Mobile.png
5. Mileage Allowance Rates
- Use mileage-allowance-rates.json for the data of this page
- Storyboards for this page for each device are:
-- 01f_Tile 4_Desktop.png
-- 02f_Tile 4_Tablet.png
-- 03f_Tile 4_Mobile.png
6. Corporation Tax and VAT
- Use corporation-tax.json for the data of this page
- Storyboards for this page for each device are:
-- 01g_Tile 5_Desktop.png
-- 02g_Tile 5_Tablet.png
-- 03g_Tile 5_Mobile.png
7. Capital Allowances
- Use capital-allowances.json for the data of this page
- Storyboards for this page for each device are:
-- 01h_Tile 6_Desktop.png
-- 02h_Tile 6_Tablet.png
-- 03h_Tile 6_Mobile.png
8. Leasing Disallowance
- Use leasing-disallowance.json for the data of this page
- Storyboards for this page for each device are:
-- 01i_Tile 7_Desktop.png
-- 02i_Tile 7_Tablet.png
-- 03i_Tile 7_Mobile.png
9. Vehicle Exercise Duty
- Use vehicle-exercise-duty.json for the data of this page
- Storyboards for this page for each device are:
-- 01j_Tile 8_Desktop.png
-- 02j_Tile 8_Tablet.png
-- 03j_Tile 8_Mobile.png
10. About Us
- Hard code this page for now.
- Storyboards for this page for each device are:
-- 01k_About us_Desktop.png
-- 02k_About us_Tablet.png
-- 03k_About us_Mobile.png
Browser Compatibility:
- IE11 ( primary browser requirements )
- Latest Google Chrome
- Latest Safari
- Latest Firefox
- iPad browsers
- iPhone browsers
- Note: where HTML 5 / CSS standards are not supported by browser the site should degrade gracefully (Use modernizr - https://modernizr.com/)
HTML
- 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 "-" to separate multiple-word classes (i.e.. "main-content")
- 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
- CSS code should be valid level 3.
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- 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 CSS 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.
- Use variables with well-chosen names. Use some sort of naming convention.
- Consider usage of bootstrap (required)
- Consider usage of SaSS (optional)
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 framework like Aurelia or AngularJS and avoid using jQuery.
- Use modern practices to structure your code, consider using ES 6 with babel.
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.
- Use separate or single images/sprites that will also support retina images/file for retina display.
Submission Guidelines:
A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.