Every member of the team must read the documentation about GIT available here.

Definition of Done

You have understood how to use the proposed GIT workflow.

Every member of the team must read the documentation about Jekyll available here.

Definition of Done

You have read and understood the documentation.

Teams will design a layout for the site. We will use Jekyll, a static Content Management System, that will allow us to split the layout files among various HTML files. This feature will allow team members to work in individual layout components (header, footer, nav, content) without having to work in the same files at the same time. In addition to this, team members will not have to copy the same HTML in all the site pages.

• Teams will design the visual appearance of the website using CSS3.
• Visual design must be homogeneous (all the pages in the website must have the same "look and feel") and personalized. Teams are encouraged to design their own logos and choose colors, font faces and icons.
• You must use external style sheets.
• Use of CSS classes is encouraged.
• In order to avoid conflicts, each team member should work in a different CSS file.
• You can follow some CSS naming conventions to minimize conflicts: i.e., BEM.

Definition of Done

The website uses CSS classes for its visual design. The website looks homogeneous and personalized. The appearance looks professional. All CSS has been tested and validated. All team members are satisfied with the design of the website.

• It must show the name, logo and main info of the site.
• It must include three videos that will be displayed through HTML5.
  • Chosen videos must be related to the website theme.
  • You will have to check the compatible formats supported for all browsers. If you have to make conversions, you can use:
    • Miro Video Converter
    • HandBrake
  • Teams will have to look for videos with the appropriate license in order to use them.
  • Teams are free to choose the place to show the videos.

Definition of Done

The page is deployed in GitHub pages. The page meets the proposed requirements. All members are satisfied with the result. The page is displayed correctly on the three kinds of devices. You can play the videos in all the available browsers (Internet Explorer, Firefox, Chrome, Safari, Opera).

• It must show info related with the menus that are served in the restaurant.
• Teams can choose among menus, food, dishes, specials,…

Definition of Done

The page is deployed in GitHub pages. The page meets the proposed requirements. All members are satisfied with the result. The page is displayed correctly on the three kinds of devices.

• You must use different types of fields (the more, the better): select, radio, checkbox, textarea,…
• Additionally, you can use HTML5 input fields: date, email, number,…
• Form fields must be aligned.
• You must use:
  • label tags
  • fieldset tags
  • placeholder attribute
• You can use whatever technique you want (display: table, float, flexbox,…) to align forms and labels, although it is recommended the use of display: inline-block. You cannot use HTML tables.
• You should honor the semantic structure of HTML: e.g., you must not put labels and inputs in different layers.
• The form must be responsive:
  • Mobile devices
    • All labels must NOT be shown. Exception: radio and checkbox labels must be visible.
    • Input fields must occupy the entire screen width.
    • Forms must be centered.
  • Tablets
    • labels must be shown above fields.
    • select, text and textarea labels must be visible.
    • radio and checkbox labels must be visible.
    • Input fields must occupy 70% of the screen width.
    • Forms must be centered.
  • Rest of screens
    • labels must be shown left side of the fields.
    • All labels must be visible.

Definition of Done

The page is deployed in GitHub pages. The reservation form meets the design requirements. Labels and controls are aligned. All team members are satisfied with the design. The design looks professional.

• This page must show information about the restaurant location and contact information (address, telephone number,…).
• It should provide a map.

Definition of Done

The page is deployed in GitHub pages. The page meets the proposed requirements. All members are satisfied with the result. The page is displayed correctly on the three kinds of devices.

• It will have a grid of thumbnails. When an image is clicked, it will be shown in full resolution.
• Optional: show the image in a pop-up layer (such as lightbox; it requires JavaScript).
  • Chosen images must be related to the website theme.
  • You will have to check the compatible formats supported for all browsers.
  • Teams will have to look for images with the appropriate license in order to use them.
  • Teams are free to choose the place to show the photo gallery.

Definition of Done

The page is deployed in GitHub pages. You can display the photos in all the available browsers (Internet Explorer, Firefox, Chrome, Safari, Opera). The images meet the license requirements.

• This page must show information about the team members (the restaurant managers).
• Every team member must appear with his/her name, photo and text description.

Definition of Done

The page is deployed in GitHub pages. The page meets the proposed requirements. All members are satisfied with the result. The page is displayed correctly on the three kinds of devices.