Challenge Overview
Welcome to the "Product Status Indicator HTML Conversion" challenge. The goal of this challenge is to create a quick HTML5 prototype based on the attached design image.
As part of this challenge you will need to document all HTML5/CSS3 code. We need clear explanation of the code to help us figure all the HTML5/CSS3 code functions and make it easier for future developers and the client to understand what you have built.
Required Page
One page solution, with fluid structure, which we will be inserting this into a Visualforce page in Salesforce, so that Product status is automatically displayed based on the status information in fields on the Account object
Specific HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- Fluid structure, not fixed-width
- 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.
- 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.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- 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")
- Label all CSS, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
Browsers Requirements:
- IE 9+
- Chrome
- Firefox
- Safari
Documentation Provided:
Attached storyboard screen
Final Submission Guidelines
- Use logical naming in CSS and comments in (code and CSS) so that client can view CSS & code and understand how it operates
- No images should be required, use straight CSS