Challenge Summary
Lending Tree is a leader in consumer home loan products. In offering these products, Lending Tree utilizes various web form questionnaire's to gather information about a consumer. The existing .NET application does not have a prototype and has many shortcomings with the CSS and the code overriding the CSS with inline styles.
In this contest, you are tasked with creating an HTML Prototype with structurally and semantically correct CSS/HTML.
The client is looking for clean and well-structured code that can be reused and re-skinned for multiple brands.
Contest Overview The goal of this project is to produce the HTML and CSS based on the provided screenshots (see samples.zip). The client is looking for clean and well structured code. The current system has many shortcomings consisting of invalid CSS as well as incorrect HTML formatting (missing end tags). The focus of this contest is to remedy these issues. Prototype Considerations The application was developed to be easily duplicated for multiple brands based on the external CSS and dynamic content. For this contest, you will only be developing the following four (4) pages: - QuickMatch_page1.png - QuickMatch_page2.png - QuickMatch_page3.png - QuickMatch_page4.png We are also providing you the same four (4) screens with another skinned branding of "GetSmart" (Branding_Samples.zip). These files are NOT required for the contest. These are being provided to show the various page elements that will be changed with the site is re-skinned. If you examine the files closely, you can see how the layout and overall structure are the same for each brand but they differ in the CSS skinning and dynamic content such as header, left nav, and footer. Please keep this in mind as you code your HTML and CSS. If anything is unclear PLEASE ASK QUESTIONS IN THE FORUM! We are happy to help clarify any points that are not clear. Required Pages You must create the HTML and CSS based on the following pages and link them up based on the flow: - QuickMatch_page1.png (This page links to page 2) - QuickMatch_page2.png (This page links to page 3) - QuickMatch_page3.png (This page links to page 4) - QuickMatch_page4.png Client CSS Guidelines The client has provided additional guidelines (CSS_Guidelines.doc). You should follow these guidelines to the best of your ability or provide a text file describing what guideline could not be met and why. HTML/CSS Your HTML should be structured so that there is a common structure for each page with common headers and footers. The content specific to each page will be inserted into a common section of the page template. - Your HTML code must be XHTML 1.0 Strict compliant - Validate your code - we will accept minor validation errors, but please comment your reasons for any validation errors in a text file you provide. - Your code must render properly in Internet Explorer 6, Internet Explorer 7, Firefox 2 and 3, Google Chrome and Safari in both Mac and PC environments. - Use CSS to space out objects, not clear/transparent images (GIFs or PNGs). - Proper use of structural CSS to lay out your page is strongly encouraged. - No inline CSS styles - all styles must be placed in an external stylesheet. - Provide as much semantic code as possible. Elements such as ABBR, ACRONYM, ADDRESS, CITE and CODE enhance the semantics of content when used appropriately. - Use strong and em tags instead of bold and italic tags - Only use table tags for tables of data/information and not for page layout. Images We have provided all of the images already sliced up that you will need to create your prototype (Site_Images.zip). 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. You are encouraged to use the jQuery javascript library for this competition. Judging Criteria Your submission will be judged on the following: - How closely the prototype matches the provided screenshots (Prototype_Screens.zip) - Cleanliness and organization of source code and external CSS style sheets - How well you meet and/or exceed the contest requirements and guidelines Preview Image Your preview image should be a screenshot of one page of your choice with no added effects or skewing.
Contest Overview The goal of this project is to produce the HTML and CSS based on the provided screenshots (see samples.zip). The client is looking for clean and well structured code. The current system has many shortcomings consisting of invalid CSS as well as incorrect HTML formatting (missing end tags). The focus of this contest is to remedy these issues. Prototype Considerations The application was developed to be easily duplicated for multiple brands based on the external CSS and dynamic content. For this contest, you will only be developing the following four (4) pages: - QuickMatch_page1.png - QuickMatch_page2.png - QuickMatch_page3.png - QuickMatch_page4.png We are also providing you the same four (4) screens with another skinned branding of "GetSmart" (Branding_Samples.zip). These files are NOT required for the contest. These are being provided to show the various page elements that will be changed with the site is re-skinned. If you examine the files closely, you can see how the layout and overall structure are the same for each brand but they differ in the CSS skinning and dynamic content such as header, left nav, and footer. Please keep this in mind as you code your HTML and CSS. If anything is unclear PLEASE ASK QUESTIONS IN THE FORUM! We are happy to help clarify any points that are not clear. Required Pages You must create the HTML and CSS based on the following pages and link them up based on the flow: - QuickMatch_page1.png (This page links to page 2) - QuickMatch_page2.png (This page links to page 3) - QuickMatch_page3.png (This page links to page 4) - QuickMatch_page4.png Client CSS Guidelines The client has provided additional guidelines (CSS_Guidelines.doc). You should follow these guidelines to the best of your ability or provide a text file describing what guideline could not be met and why. HTML/CSS Your HTML should be structured so that there is a common structure for each page with common headers and footers. The content specific to each page will be inserted into a common section of the page template. - Your HTML code must be XHTML 1.0 Strict compliant - Validate your code - we will accept minor validation errors, but please comment your reasons for any validation errors in a text file you provide. - Your code must render properly in Internet Explorer 6, Internet Explorer 7, Firefox 2 and 3, Google Chrome and Safari in both Mac and PC environments. - Use CSS to space out objects, not clear/transparent images (GIFs or PNGs). - Proper use of structural CSS to lay out your page is strongly encouraged. - No inline CSS styles - all styles must be placed in an external stylesheet. - Provide as much semantic code as possible. Elements such as ABBR, ACRONYM, ADDRESS, CITE and CODE enhance the semantics of content when used appropriately. - Use strong and em tags instead of bold and italic tags - Only use table tags for tables of data/information and not for page layout. Images We have provided all of the images already sliced up that you will need to create your prototype (Site_Images.zip). 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. You are encouraged to use the jQuery javascript library for this competition. Judging Criteria Your submission will be judged on the following: - How closely the prototype matches the provided screenshots (Prototype_Screens.zip) - Cleanliness and organization of source code and external CSS style sheets - How well you meet and/or exceed the contest requirements and guidelines Preview Image Your preview image should be a screenshot of one page of your choice with no added effects or skewing.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.