Create an ESP32 Web Server

Understand the target result

Serve a responsive local web page and control an output from a browser. The expected result is: A browser can load the ESP32 page and switch the output.

Prepare the board and parts

Disconnect the ESP32 from USB. Put the ESP32, breadboard, jumper wires, and the listed lesson parts in front of you. Straighten bent pins gently and never force a module into the breadboard.

Make each connection with power off

1. LED anode → 220Ω resistor → GPIO 23.
2. LED cathode → GND.
3. Connect the ESP32 to USB and place it within range of the 2.4 GHz Wi-Fi network.

Install any library and upload the code

No additional Arduino library is required for this starter sketch. Select your ESP32 board and serial port before clicking Upload.

#include <WiFi.h>
#include <WebServer.h>
const char* ssid = "YOUR_WIFI_NAME";
const char* password = "YOUR_WIFI_PASSWORD";
WebServer server(80); const int LED = 23;
void setup() {
  Serial.begin(115200); pinMode(LED, OUTPUT); WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) delay(500);
  server.on("/", [](){ server.send(200, "text/html", "<a href='/on'>LED ON</a><br><a href='/off'>LED OFF</a>"); });
  server.on("/on", [](){ digitalWrite(LED, HIGH); server.sendHeader("Location", "/"); server.send(303); });
  server.on("/off", [](){ digitalWrite(LED, LOW); server.sendHeader("Location", "/"); server.send(303); });
  server.begin(); Serial.println(WiFi.localIP());
}
void loop() { server.handleClient(); }

Power the circuit and observe

Connect USB power only after the wiring check. Open Serial Monitor at 115200 baud when the sketch prints data. Watch the circuit for at least 20 seconds and compare it with this expected behavior: A browser can load the ESP32 page and switch the output.

Change one value and test again

Make one small change—such as a delay, threshold, brightness, or displayed message—then upload again. This confirms that you understand which part of the program controls the result.