Challenge Overview
For this challenge, we’re looking forward to create clean and responsive HTML/CSS code for the website which later will be used for a salesforce community implementation (chatter and others). You’ll be using Photoshop and PNG files as design source.
Best of lucks!
Final Submission Guidelines
Project Overview
As one of the largest full-service dining companies in the world, DineEquity aims to build a community site that offers tools to restaurant owners (part of the DineEquity family) allowing them to engage in a community experience (social and fun) and manage their franchise assets.
The goal of this challenge is to develop the front-end UI HTML/CSS for the website using the provided design.
Pages
1. Login
Desktop screens: 00_1_login.png, 00_2_login.png.
Mobile screens: 03_login_mobile.png.
- Implement the “show” functionality to display the typed password.
- Switch to hamburger menu on mobile view for navigation.
2. Home
Desktop screens: 01_1_home.png, 01_2_home.png, 01_3_home_menu_hover.png
Mobile screens: 04_1_home_mobile.png, 04_2_home_nav_mobile.png.
- Hovering the left bar opens the menu.
- Provide functionality for the top slider/carousel. Automatically transitioning each 5 seconds. Can be selected clicking the dots.
- Ignore the notifications item in the navigation. Don’t implement it.
- In mobile, clicking the "my feed" link below the slider should display the feed view from the right column in desktop. Make it fit in there.
3. Assessments
Desktop screens: 02_1_assessments.png, 02_2_assessments.png, 02_3_assessments.png, 02_4_assessments.png, 02_5_assessments.png.
Mobile screens: 05_1_assessments_mobile.png, 05_2_assessments_mobile.png, 05_3_assessments_mobile.png.
Responsive Guidelines
- In the design you can find a desktop resolution (1280px wide) and a mobile small (480px wide).
- Consider creating custom breakpoints for the responsive change, not just make custom device assumptions. A good read with guidelines to follow.
- The provided mobile version is 480px wide, however it’s designed to expand until a point considerably pleasant (up to you - custom breakpoint).
- The site has a dashboard feeling as you can see. Considering adapting the height of the view at the bottom of the screen.
- You can use bootstrap to speed things up (optional).
HTML/CSS
- HTML and CSS code must be W3C validated.
- Source code and comments must be written in US-English.
- 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.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Use Media Queries to load different styles for each page and don't build different page for different device/layout.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- 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 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
- If you need to boost your JS you’re allowed to use jQuery.
- 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. Consult in the forums to confirm.
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.
Browser Requirements
- IE 11+
- Latest Chrome on Mac and Windows
- Latest Safari on Mac and Windows
- Latest Firefox on Mac and Windows
- Mobile: Android Browser, Mobile Chrome & Firefox, Safari Mobile
Resources
- Design Storyboards (PSD and PNG files)
Deliverables
Provide all your files in a zip container.