Build a Wi-Fi Sensor Dashboard

Understand the target result

Publish live sensor readings on a simple browser dashboard. The expected result is: A browser displays current readings from the ESP32.

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. DHT11 VCC → 3.3V, GND → GND, and DATA → GPIO 4.
2. Connect the ESP32 to USB.
3. Use the same 2.4 GHz network for the ESP32 and viewing device.

Install any library and upload the code

Install “DHT sensor library” and its Adafruit Unified Sensor dependency. Select your ESP32 board and serial port before clicking Upload.

#include <WiFi.h>
#include <WebServer.h>
#include <DHT.h>
const char* ssid="YOUR_WIFI_NAME"; const char* password="YOUR_WIFI_PASSWORD";
DHT dht(4,DHT11); WebServer server(80);
void setup(){ Serial.begin(115200);dht.begin();WiFi.begin(ssid,password);while(WiFi.status()!=WL_CONNECTED)delay(500);
 server.on("/",[](){float t=dht.readTemperature(),h=dht.readHumidity();String html="<h1>YKR038 Room Dashboard</h1><p>Temperature: "+String(t,1)+" C</p><p>Humidity: "+String(h,1)+" %</p><meta http-equiv='refresh' content='5'>";server.send(200,"text/html",html);});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 displays current readings from the ESP32.

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.