Challenge Overview
Welcome to “Thompson & Litton UI Prototype Challenge”. On this challenge we are looking to create and develop the front end coding of this responsive website, using desktop and mobile phone as target devices . You will be using Bootstrap as your main and only framework.
1) Landing Page
- Reference: “01-01_landing-page.png”
2) Services
- Reference: “02-01_services.png”
- Services Second level reference: “02-01_services_2nd_level.png”
- Services Third level reference: “02-01_services_3rd_level.png”
3) Project Type
- Reference: “03-01_project_type.png”
- Project Type Second level reference: “03-02_project_type.png”
- Project Type Third level reference: “03-03_project_type.png”
4) Company
- Reference: “04-01_company.png”
- Company 2nd Level: “04-01_company_2nd_level.png”
- Company 2nd Level / Key Personnel: “04-03_company_2nd_level_key_personnel.png”
- History and Key Personnel tabs should work.
- “Award Winning Excellence” (3rd tab) is a deadlink
5) Search
- Consistent on all screens. Clicking on search icon, open/trigger the input field over the main navigation.
- For this UI prototype, provide the styles for the drop down suggestions (05-02_search_active.png).
- Using the same word (Thompson) as shown on the sample PNG is ok. Can be done using a simple Json file.
6) Search Results
- Reference: “05-03_search_result.png”
7) Contact
- Reference: “06-01_contact.png”
8) Careers
- Reference: “07-01_careers.png”
- Career Detail Reference: “07-02_careers-detail.png”
Things to consider
- Main navigation (Top) have a second level navigation as shown on “01-02_landing-page_dropdown.png” & “01-03_landing-page_dropdown.png”. This must be code.
- Top bar (Main navigation) is transparent on landing page, then turns white after scrolling. This top bar is fixed at top.
- 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.
- Pagination are deadlinks.
- Thumbnails on: “Our Projects”, “News”, “Services” (Architecture on sample), “Projects” and “Boards of Directors” are all clickable.
- Arrows besides office area on “Contact” page, are clickable. By clicking on each arrow office must change and tab on top of map must be updated as well. (You can use same office name and picture for all).
- Don’t need to code the back end functionality on “Have a question” form.
Resources
- You can download all assets and resources for this challenge on this drive folder:
https://drive.google.com/open?id=1E644g424OJwkl-4_KpX8ajs4aWTGyXdo
Note: Source files are in Sketch. No PSD file will be provided.
Possible FAQs on this challenge
- You cannot use just simple HTML + CSS3 + Javascript on this challenge. This should be developed using Bootstrap.
- 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.
- Logo in top “Thompson & Litton” is clickable. Deadlink for now.
- Top / Footer and Side menu (Mobile) items should be dead links. You don’t need to connect the pages for a workflow. This will be handled on later.
- Top header is fixed at top.
- Footer is not fixed, is fluent with content at bottom.
- Try to match the storyboards as much as possible. If you don’t see a modal, a dropdown, or 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.
- Single CSS and SASS are allowed on this challenge, any solution is ok.
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 (and encouraged) to use Bootstrap.
- You are allowed to use SCSS in the project.
- 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)
Final Submission Guidelines
Required Screens1) Landing Page
- Reference: “01-01_landing-page.png”
2) Services
- Reference: “02-01_services.png”
- Services Second level reference: “02-01_services_2nd_level.png”
- Services Third level reference: “02-01_services_3rd_level.png”
3) Project Type
- Reference: “03-01_project_type.png”
- Project Type Second level reference: “03-02_project_type.png”
- Project Type Third level reference: “03-03_project_type.png”
4) Company
- Reference: “04-01_company.png”
- Company 2nd Level: “04-01_company_2nd_level.png”
- Company 2nd Level / Key Personnel: “04-03_company_2nd_level_key_personnel.png”
- History and Key Personnel tabs should work.
- “Award Winning Excellence” (3rd tab) is a deadlink
5) Search
- Consistent on all screens. Clicking on search icon, open/trigger the input field over the main navigation.
- For this UI prototype, provide the styles for the drop down suggestions (05-02_search_active.png).
- Using the same word (Thompson) as shown on the sample PNG is ok. Can be done using a simple Json file.
6) Search Results
- Reference: “05-03_search_result.png”
7) Contact
- Reference: “06-01_contact.png”
8) Careers
- Reference: “07-01_careers.png”
- Career Detail Reference: “07-02_careers-detail.png”
Things to consider
- Main navigation (Top) have a second level navigation as shown on “01-02_landing-page_dropdown.png” & “01-03_landing-page_dropdown.png”. This must be code.
- Top bar (Main navigation) is transparent on landing page, then turns white after scrolling. This top bar is fixed at top.
- 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.
- Pagination are deadlinks.
- Thumbnails on: “Our Projects”, “News”, “Services” (Architecture on sample), “Projects” and “Boards of Directors” are all clickable.
- Arrows besides office area on “Contact” page, are clickable. By clicking on each arrow office must change and tab on top of map must be updated as well. (You can use same office name and picture for all).
- Don’t need to code the back end functionality on “Have a question” form.
Resources
- You can download all assets and resources for this challenge on this drive folder:
https://drive.google.com/open?id=1E644g424OJwkl-4_KpX8ajs4aWTGyXdo
Note: Source files are in Sketch. No PSD file will be provided.
Possible FAQs on this challenge
- You cannot use just simple HTML + CSS3 + Javascript on this challenge. This should be developed using Bootstrap.
- 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.
- Logo in top “Thompson & Litton” is clickable. Deadlink for now.
- Top / Footer and Side menu (Mobile) items should be dead links. You don’t need to connect the pages for a workflow. This will be handled on later.
- Top header is fixed at top.
- Footer is not fixed, is fluent with content at bottom.
- Try to match the storyboards as much as possible. If you don’t see a modal, a dropdown, or 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.
- Single CSS and SASS are allowed on this challenge, any solution is ok.
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 (and encouraged) to use Bootstrap.
- You are allowed to use SCSS in the project.
- 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)