Build a Ghost Kitchen Signup Page: HTML & CSS Tutorial for TUEats

Introduction: The Rise of Ghost Kitchens

Ghost kitchens are transforming the food delivery landscape. With apps like DoorDash, Grubhub, and UberEats dominating, universities like Towson are launching their own ghost kitchen, TUEats, to offer students a seamless dining experience. In this tutorial, you'll build the signup flow for TUEats using HTML and CSS. This is perfect for beginners in web development or anyone taking Cosc484.

What You'll Learn

Create a signup form with required fields: username, email, password, and optional referral code.
Build a menu table with merged cells using colspan and rowspan.
Style the page with external CSS, including hover effects and Towson's gold color (#FFBB00).
Link your pages using relative paths for portability.

Step 1: Setting Up Your HTML File (tueats.html)

Start with a basic HTML5 document. Include a fieldset for the signup form and another for the menu table. Use semantic elements like h2, p, form, and table.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TUEats Sign Up</title>
  <link rel="stylesheet" href="tueats.css">
</head>
<body>
  <h2>Welcome to TUEats</h2>
  <form action="tueats completed.html" method="GET">
    <fieldset>
      <legend>Sign Up</legend>
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required><br>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required><br>
      <label for="referral">Referral Code:</label>
      <input type="text" id="referral" name="referral"><br>
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required><br>
      <label for="verify">Verify Password:</label>
      <input type="password" id="verify" name="verify" required><br>
      <input type="checkbox" id="newsletter" name="newsletter">
      <label for="newsletter">Sign up for our newsletter?</label>
    </fieldset>
    <fieldset>
      <legend>Menu</legend>
      <table>
        <caption>Menu is subject to change, please visit our <a href="https://www.towson.edu">Towson Website</a> for more information.</caption>
        <tr>
          <th></th>
          <th>Name</th>
          <th>Price</th>
          <th>Calories</th>
        </tr>
        <tr>
          <td>item 1</td>
          <td>Burger</td>
          <td>$8</td>
          <td>550</td>
        </tr>
        <tr>
          <td>item 2</td>
          <td>Mozzarella Sticks</td>
          <td>$7</td>
          <td rowspan="2">400</td>
        </tr>
        <tr>
          <td>item 3</td>
          <td>Fries</td>
          <td>$4</td>
        </tr>
      </table>
    </fieldset>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

Step 2: Styling with CSS (tueats.css)

Create an external CSS file. Use Towson gold for the heading and link hover effects. Style the table with a gray background and borders. Add a logo image with a comment.

/* TUEats CSS - Image source: Towson University logo */
body {
  font-family: Arial, sans-serif;
}
h2 {
  color: #FFBB00; /* Towson Gold */
}
table {
  width: 75%;
  border: 1px solid black;
  background-color: #808080;
  text-align: center;
  border-collapse: collapse;
}
th {
  font-weight: bold;
}
td, th {
  border: 1px solid black;
  padding: 5px;
}
a:hover {
  color: #FFBB00;
}
img.logo {
  display: block;
  margin: 0 auto;
}

Step 3: Completion Page (tueats completed.html)

Create a simple page that confirms the signup.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TUEats Completed</title>
</head>
<body>
  <h1>Welcome to TUEats</h1>
</body>
</html>

Testing Your Work

Ensure all files are in the same folder. Open tueats.html in a browser. Fill out the form and click Submit. You should be redirected to tueats completed.html. Hover over the Towson Website link to see it turn gold.

Common Mistakes to Avoid

Using absolute paths for the form action. Use tueats completed.html (relative).
Forgetting to include the required attribute on input fields.
Not linking the CSS file correctly.

Conclusion

You've built a functional signup page for a ghost kitchen app. This project mirrors real-world tasks in web development for startups and delivery services. Keep practicing with forms and tables to master HTML and CSS.