Step 1: Create a web app

First, we will create our app — a simple web page with a list of items to order. Copy the code below and save it as an HTML file.

HTML file
 // tutorial.html
 <!DOCTYPE html>
 <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Food Delivery Example</title>
       <link href="https://storage.googleapis.com/alan-tutorial/web-sdk/styles.css" rel="stylesheet">
    </head>
    <body>
       <h1>Food Delivery</h1>
       <h3>Menu</h3>
       <div class="menu">
          <div class="menu-item" id="pepperoni">
             <img src="https://storage.googleapis.com/alan-tutorial/web-sdk/pepperoni.jpg"/>
             Pepperoni
          </div>
          <div class="menu-item" id="margherita">
             <img src="https://storage.googleapis.com/alan-tutorial/web-sdk/margherita.jpg"/>
             Margherita
          </div>
          <div class="menu-item" id="burrito">
             <img src="https://storage.googleapis.com/alan-tutorial/web-sdk/burrito.jpg"/>
             Burrito
          </div>
          <div class="menu-item" id="burger">
             <img src="https://storage.googleapis.com/alan-tutorial/web-sdk/burger.jpg"/>
             Burger
          </div>
          <div class="menu-item" id="taco">
             <img src="https://storage.googleapis.com/alan-tutorial/web-sdk/taco.jpg"/>
             Taco
          </div>
          <div class="menu-item" id="apple-pie">
             <img src="https://storage.googleapis.com/alan-tutorial/web-sdk/applepie.jpg"/>
             Apple Pie
          </div>
       </div>
       <div id="order-details">
          <div id="order"></div>
          <div id="address"></div>
          <div id="time"></div>
          <div id="comment"></div>
       </div>
    </body>
 </html>

Open the file in the browser. You will see a page like this:

../../../_images/tutorial_webpage_1.png