Create a Web Page with HTML and CSS on ESP32

What is a Web Page on ESP32?

The ESP32 can function as a web server, serving HTML, CSS, and JavaScript files over Wi-Fi. This allows you to build user interfaces to interact with sensors, control devices, and visualize data — all from your browser. Hosting a webpage on the ESP32 makes it a powerful platform for smart IoT dashboards.

Working Principle of ESP32 Web Server

The ESP32 connects to a Wi-Fi network and sets up an HTTP server. When a client (browser) requests a URL, the ESP32 responds by sending HTML and CSS content. The webpage is displayed on the user's device, allowing interactive control or monitoring.

Connect ESP32 to Wi-Fi.
Initialize a web server using ESPAsyncWebServer or WebServer library.
Store HTML and CSS in variables or files.
Serve content via HTTP responses.
Access webpage by visiting ESP32's IP in a browser.

Formula: N/A

Components Required

ESP32 development board
Micro USB cable
Wi-Fi network
Laptop or smartphone

Pin Configuration

N/A: This experiment does not use GPIOs for hardware interfacing.

Ensure that both the ESP32 and your browser device are connected to the same Wi-Fi network to access the web page.

Wi-Fi Setup and Configuration

Wi-Fi SSID -> Enter your network SSID in code
Wi-Fi Password -> Enter your Wi-Fi password in code

Arduino Code to Serve HTML and CSS Web Page

1#include <WiFi.h>
2#include <WebServer.h>
3
4const char* ssid = "YOUR_SSID";
5const char* password = "YOUR_PASSWORD";
6
7WebServer server(80);
8
9const char* htmlPage = R"rawliteral(
10<!DOCTYPE html>
11<html>
12<head>
13  <title>ESP32 Web Page</title>
14  <style>
15    body { background-color: #f0f0f0; font-family: Arial; text-align: center; padding: 50px; }
16    h1 { color: #333; }
17    button { padding: 10px 20px; font-size: 16px; }
18  </style>
19</head>
20<body>
21  <h1>Hello from ESP32!</h1>
22  <p>This web page is hosted on your ESP32</p>
23  <button onclick="alert('Button clicked!')">Click Me</button>
24</body>
25</html>
26)rawliteral";
27
28void setup() {
29  Serial.begin(115200);
30  WiFi.begin(ssid, password);
31  while (WiFi.status() != WL_CONNECTED) {
32    delay(1000);
33    Serial.println("Connecting to WiFi...");
34  }
35  Serial.println("Connected!");
36  Serial.println(WiFi.localIP());
37
38  server.on("/", []() {
39    server.send(200, "text/html", htmlPage);
40  });
41  server.begin();
42  Serial.println("Web server started.");
43}
44
45void loop() {
46  server.handleClient();
47}

Code Explanation (Line-by-Line)

#include <WiFi.h>: Includes the Wi-Fi library to connect ESP32 to a network.
#include <WebServer.h>: Includes the library to create a basic web server.
const char* htmlPage = R"rawliteral(...)";: Stores the HTML and CSS content as a raw string literal.
WiFi.begin(ssid, password);: Connects ESP32 to the specified Wi-Fi network.
server.on("/", []() {...});: Defines a route that serves the webpage on root path '/'.
server.send(200, "text/html", htmlPage);: Sends HTML content with a 200 OK HTTP response.
server.handleClient();: Handles incoming HTTP client requests in the main loop.

Applications

Remote sensor dashboards
Controlling devices from browser
IoT UI development
Smart home control panels
Educational demos and prototypes

Conclusion

Creating a web page using HTML and CSS on ESP32 allows you to build fully functional IoT dashboards. It enables remote interaction with sensors or devices through a browser, making ESP32 a flexible and powerful tool for web-based IoT solutions.

ESP Experiments