ws-201302–Restaurant Web Page Styling

Media Files

📦 Media File Download (12.1 MB)

Project Submission

+ Submit Assignment

Your submissions


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.


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.

The home page displays the entry point of the website.

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.

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

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 ( 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.


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.


❓ 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.


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

Marking scheme