Tutorials Build a Real-Time Chat Application with Node.js

Frontend HTML — Login Screen & Chat Layout

Learn Frontend HTML — Login Screen & Chat Layout in our free Build a Real-Time Chat Application with Node.js series. Step-by-step explanations, examples, and interview tips on Toolliyo Academy.

5 min read Updated 7/20/2026

On this page

Course: Build a Real-Time Chat Application with Node.js · Lesson: 4/10 · Read time: ~18 min · Level: Beginner

Frontend HTML — Login Screen & Chat Layout

HTML describes structure — what appears on screen. We build two screens in one page: a login form and a chat area. The chat screen stays hidden until the user joins a room (JavaScript toggles visibility in Lesson 6).

Create public/index.html and paste the full file below.

Full `index.html`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Node.js Chat App</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <!-- LOGIN SCREEN — shown first -->
  <div id="login-screen" class="screen">
    <div class="login-card">
      <h1>💬 Chat App</h1>
      <p class="subtitle">Join a room and start chatting in real time</p>
      <label for="username">Your name</label>
      <input type="text" id="username" placeholder="e.g. Alex" maxlength="20" autocomplete="off" />
      <label for="room">Room name</label>
      <input type="text" id="room" placeholder="e.g. general" maxlength="30" autocomplete="off" />
      <button id="join-btn" type="button">Join Chat</button>
      <p id="login-error" class="error hidden"></p>
    </div>
  </div>

  <!-- CHAT SCREEN — hidden until user joins -->
  <div id="chat-screen" class="screen hidden">
    <header class="chat-header">
      <div>
        <h2 id="room-title">Room</h2>
        <p id="typing-indicator" class="typing hidden"></p>
      </div>
      <aside id="online-users" class="online-users" aria-label="Online users"></aside>
    </header>

    <main id="messages" class="messages" aria-live="polite"></main>

    <footer class="chat-input-bar">
      <input type="text" id="message-input" placeholder="Type a message…" autocomplete="off" />
      <button id="send-btn" type="button">Send</button>
    </footer>
  </div>

  <!-- Socket.IO client library (served automatically by our server) -->
  <script src="/socket.io/socket.io.js"></script>
  <script src="client.js"></script>
</body>
</html>

Section-by-section explanation

<head> — page metadata

viewport meta tag — makes layout work on mobile phones
style.css — linked stylesheet (Lesson 5)

Login screen (`#login-screen`)

Contains:

#username — text input for display name
#room — text input for room name (e.g. general)
#join-btn — button that triggers join logic in client.js
#login-error — hidden by default; shows validation errors

💡 Tip: Use meaningful id attributes — JavaScript will select these elements with document.getElementById(). IDs must be unique on the page.

Chat screen (`#chat-screen`)

Has class hidden initially. JavaScript removes this class after a successful join.

#room-title — shows current room name in header
#typing-indicator — “Alex is typing…” (bonus feature)
#online-users — sidebar list of connected usernames
#messages — scrollable container where chat bubbles appear
#message-input + #send-btn — compose area

Scripts at the bottom

Order matters:

/socket.io/socket.io.js — automatically served by Socket.IO (do not download manually)
client.js — our custom logic (Lesson 6)

⚠️ Common Mistake: Putting <script> tags in <head> before the HTML elements exist. Our scripts are at the bottom of <body> so all elements are loaded first.

Accessibility notes

aria-live="polite" on messages — screen readers announce new messages
aria-label on online users section
autocomplete="off" on chat inputs — prevents browser autofill interfering

👨‍🏫 Teaching note: Ask students to open index.html directly in the browser (file://). It will look unstyled and broken — explain why we need Express to serve it via http://localhost:3000.