kablamoau / kbfetest-1 Goto Github PK

###Front end test

###Instructions Please build the page so it matches the Photoshop PSD file using the guidelines below.

We want to see how you build the page, so please do not use any page template libraries (such as the HTML5 Boilerplate).

You are allowed to use a single JavaScript library such as jQuery or Mootools if you wish, but you must not use any other plugins or libraries (such as jQuery Validate).

To assist you in your development, you are also allowed to install extension and developer tools such as Firebug and the Chrome Web Developer Toolbar.

When submitting your test, please specify any tools you have used, including the editor you used to write your code.

###General requirements and considerations Generally, you should build the web page in the way that you feel it should be built, however the following should be taken into consideration:

• Accessibility: Ensure that your mark-up takes into account basic accessibility standards. For example, ensure form fields are accessible; that the page can be viewed and used without the need for JavaScript to be enabled and any alt attributes and similar are set. Please also consider page weight when saving images.

• Standards compliance: Ensure that your mark-up is W3C compliant. For example, all tags are correctly closed, tags are nested correctly and that all necessary attributes for a tag are set. Your page should validate against the online W3C checker.

• Semantics: Ensure that your mark-up is semantic. For example, header tags are used where relevant, information follows a logical flow throughout the document and that information is displayed using the most appropriate tag.

• JavaScript: Ensure you write neat, tidy JavaScript that you would consider suitable for a live web site.

• Browsers: The page should function and resemble the creative in the following web browsers: ** FireFox 3.6 and latest ** Internet Explorer 6, 7, 8 and 9 ** Safari (latest) ** Google Chrome (latest)

###‘More Information’ form The ‘More Information’ form should include client-side validation.

The creative identifies what fields in the form are required, but there are also some additional levels of validation that should be implemented. The complete set of requirements regarding validation is as follows:

• The field ‘Contact name’ is required and needs to be populated to allow submission
• The field ‘Contact email address’ is required and needs to be populated to allow submission
• The field ‘Contact email address’ needs to conform to the format of an email address to allow submission.
• The field ‘Contact phone number’ is NOT required, although, if this field is populated, it must contain only digits and be a maximum of 11 characters long upon submission.