Brush up on theory and practice with real HTML interview questions on markup, semantics, forms, web APIs, and more.

Ace the Front End Interview

Ace the HTML

## Project scenario

You work for the _Tourism Vancouver_ Tech department, and you've been asked to design a web page that helps provide tourists information on what kinds of food top restaurants in Vancouver offer.

There are 3 main categories of restaurants for this exercise:
- Canadian 
- French
- Italian

The final output will look like the following:



<html>
   <head>
   </head>
   <body>
      <h2>Restaurants in Vancouver</h2>
      <div class="hint"><span class="can"></span><span>Canadian</span></div>
      <div class="hint"><span class="french"></span><span>French</span></div>
      <div class="hint"><span class="italian"></span><span>Italian</span></div>
      <ul>
         <li data-type="can" data-distance="2miles" data-identifier="10318">Marketplace on 3rd</li>
         <li data-type="french" data-distance="3miles" data-identifier="10318">Absinthe Bistro</li>
         <li data-type="can" data-distance="1mile" data-identifier="10318">Salmon n' Bannock Bistro</li>
         <li data-type="can" data-distance="4miles" data-identifier="10548">Blue Water Cafe</li>
         <li data-type="italian" data-distance="3miles" data-identifier="10318">Marcello Pizzeria</li>
         <li data-type="french" data-distance="1mile" data-identifier="10318">Five Sails Restaurant</li>
         <li data-type="can" data-distance="2miles" data-identifier="12315">Bacchus Restaurant & Lounge</li>
         <li data-type="italian" data-distance="1mile" data-identifier="10318">Rocky Mountain Flatbread Main Street</li>
         <li data-type="italian" data-distance="2miles" data-identifier="12315">Giardino Restaurant</li>
      </ul>
   </body>
</html>

html {
  font-family: 'Lato';
  margin: 20px auto;
  max-width: 600px;
  font-size: 1.25em;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 5px 10px;
  margin: 5px 0;
  color: white;
  border-radius: 5px;
}

.hint {
  margin-right: 30px;
  display: inline-block;
}

span.french, span.can, span.italian {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-block;
  float: left;
  margin-top: 5px;
  margin-right: 5px;
}

span.french {
  background: tomato;
}

span.can {
  background: #392cf1;;
}

span.italian {
  background: #b332c4;
}

li[data-type='can'] {
  background: #392cf1;
}

li[data-type='french'] {
  background: tomato;
}

li[data-type='italian'] {
  background: #b332c4;
}




codemirror

### Project tasks
1. Define custom data attributes for the three categories of restaurants listed above. The class names given in the code below give an idea of what the names of data attributes could be. The choice of naming, however, is up to you.

# Project scenario

You work for the _Tourism Vancouver_ Tech department, and you've been asked to design a web page that helps provide tourists information on what kinds of food top restaurants in Vancouver offer.

There are 3 main categories of restaurants for this exercise:
- Canadian 
- French
- Italian

The final output will look like the following:



## Project tasks
1. Define custom data attributes for the three categories of restaurants listed above. The class names given in the code below give an idea of what the names of data attributes could be. The choice of naming, however, is up to you.

In this lesson, we will work on a project that makes use of custom data attributes to design a web page containing restaurant info for tourists visiting Vancouver.
Let's begin!

Modern HTML5 Markup

HTML5 Semantics

Forms

Powerful Web APIs

Browsers

🖥️ PROJECT: Restaurants in Vancouver

Project scenario

Project tasks