ws-201302–Restaurant Web Page Styling

Background

A client has approached you to help on a web design project. The client is a dining company that operates hamburger restaurants in South America. They have a website that provides information of their restaurants and the featured food they provide.
There is sever-side developer already helped on creating the server-side logic. But the developer is not good at CSS design and needs your help. You will get the static HTML files that are generated from the server. These are plain HTML files and your job is to write CSS styles to fulfil the client’s requirements.

Requirement

You are going to design several pages. Here you can find the requirement for each page. There are several views that you need to redesign. The server-side developer has output them into static HTML files. The following describes what these files are.

There are several HTML files that you need to redesign:

1. index.html: The home page.
2. contact.html: The page that allows customer to fill and post a contact form to the company.
3. restaurant.html: Describing one restaurant information.
4. photo-view.html: photos present mode.

index.html
The home page displays the entry point of the website.

contact.html
This page shows a contact form. There are 3 types of contact forms. Restaurant review, job applying and others. These types are separated by tabs.

restaurant.html
This page displays information of one restaurant. Customers can find photos and menu of this restaurant.

photo-view.html
There is one main photo in this view and several thumbnails of related photos. There is also a caption and a social network sharing panel.

Motion design

There are some special buttons in the provided HTML files.

• Buttons hovering effects
• Buttons active effects
• Show success label (in contact.html)
• Show error label (in contact.html)
• Tab toggling (in contact.html)
• Show menu dialog (in restaurant.html)
• Close menu dialog (in restaurant.html)

The owner of the dining company wants these labels, tabs and menu to have a nice motion design applied.

The server-side developer doesn’t know how these motions should be implemented. Toggle classes have already been developed for you to integrate with. We want you to add nice motion styles to these elements.

These functionalities are trigged via JavaScript which has been provided for you. All visibility toggling is done by using the addClass and removeClass methods. The JavaScript doesn’t actually change any styles. You need to work on the CSS to create your motion design.

Prefix Library

Prefix-free JS library (http://leaverou.github.io/prefixfree/) is provided. So we won’t test for missing vendor prefixs.

Mobile screen resolution

We have limited budget now. The client wants the site to work perfect in narrow screen at the current phrase. We require the site to work in desktop, but we test most of the functionalities in small screen to target mobile user.

Accessibility

You need to alter the HTML elements to add proper ARIA roles. You should not alter other parts of the HTML. For instance, you cannot add your own ID or classes to any elements.

Help

❓ Show help content

Submission guideline

Save your files in your root directory on the server called "XXLayoutModule_B"
where XX is your country code.

You need to submit the CSS file that styles the website according to the requirements. You may submit extra images by putting them inside the “images” folder.

Please note that you should not alter the provided HTML, JavaScript and Images.

Notes

• This is a pre-test project designed for WorldSkills 2015.
• Designed by the layout team.
• You cannot modify the provided HTML files.

Marking scheme

[["Description","Points","Total","Points gain","Total"],["The CSS contains no syntax errors when validated.","1.00",null,"?",null],["Menu dialog showing and closing has been created.","0.50",null,"?",null],["Menu button and close button hover and active states have been created.","0.50",null,"?",null],["Success and alert labels have been created.","0.25",null,"?",null],["Tab active state toggling has been created.","0.25",null,"?",null],["Tab content active state toggling has been created.","1.00",null,"?",null],["Proper ARIA roles are applied to the HTML files.","2.00",null,"?",null],["--","--","","--",""],["The design of the index page looks modern and matches the client’s branding.","1.00",null,"?",null],["The design of the photo gallery view is good.","1.00",null,"?",null],["The design of the restaurant page and menu items looks good.","1.00",null,"?",null],["The design of the restaurant page and menu items looks good.","0.50",null,"?",null],["Success and alert label has a nice motion design.","0.50",null,"?",null],["Menu section has a nice motion design.","0.50",null,"?",null],["The tab toggling in contact form has a nice motion design.","1.00",null,"?",null],["The web site is easy to use on movile devices","1.00",null,"?",null],[null,null,"=SUM(B1:B99)",null,"=SUM(D1:D99)"],[null,null,null,null,null]]