Web Interfaces

The web is everywhere — and so are web interfaces. Whether it’s a blog, a dashboard, or your favorite meme site, the web relies on a trio of technologies: HTML, CSS, and JavaScript.

In this lesson, we’ll build a simple web-based user interface: a subscription form that takes an email address and responds to a button click.

This is your first step into building interactive, browser-based UIs.

🌐 What Makes a Web UI?

A web UI is made from three core layers:

HTML: Structure — the bones of the page
CSS: Style — colors, layout, and appearance
JavaScript: Behavior — user interaction and logic

Together, these let you create interfaces that run in any modern browser.

🧪 Let’s Build: A Subscription Form

Below is a complete example that:

Uses HTML to create a form with an email input and a subscribe button
Uses CSS to style it
Uses JavaScript to handle the button click and alert the entered email

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Subscribe</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 2em;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .form-container {
      background: #f9f9f9;
      padding: 1em 2em;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    input[type="email"] {
      padding: 0.5em;
      margin-right: 1em;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    button {
      padding: 0.5em 1em;
      background-color: #007BFF;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <div class="form-container">
    <h2>Subscribe to our newsletter</h2>
    <input type="email" id="email" placeholder="Enter your email">
    <button onclick="subscribe()">Subscribe</button>
  </div>

  <script>
    function subscribe() {
      const email = document.getElementById('email').value;
      alert(`Subscribed with: ${email}`);
    }
  </script>
</body>
</html>

You can copy this into a .html file and open it in your browser to see it in action.

🛠️ What About the Backend?

Right now, this form just alert()s the email — but in a real app, you’d want to:

Send the email to a server or API (e.g., using fetch())
Validate the email format
Store it in a database
Maybe send a confirmation email

We’ll explore backend connections in future lessons, but this is a great starting point for wiring up UI to logic.

If you want to see a complete client-side app example, check out our Tic Tac Toe in JavaScript tutorial. It runs entirely in the browser with no backend!

🔗 More Resources

💡 Experiment and Extend

Here are a few ideas you can try on your own:

Add name or topic selection fields
Show a confirmation message below the form
Prevent empty submissions
Validate the email format with regex

Next up: we’ll explore component-based frontends and how frameworks like React help manage complex UI state.