Webserver: How to make a Webserver with Arduino

How to Create a Webserver with Arduino

You can create a simple web server using the Arduino IDE and the D1 Mini board. If you’re not familiar with the D1 Mini, you can read our guide here: A Guide to IoT Magic with the ESP8266. The ESP8266 is a Wi-Fi board that gives our Arduino projects the ability to connect to the internet. In this guide we will be creating a simple webserver to serve a basic webpage.

Basic Webserver Code Example:

Here is a basic example of how to create a webserver with Arduino.

The most important thing to remember here is to replace "Your_SSID" and "Your_PASSWORD" with your own Wi-Fi network credentials.

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h> const char* ssid = "Your_SSID"; const char* password = "Your_PASSWORD"; ESP8266WebServer server(80); void setup() { Serial.begin(115200); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi..."); } Serial.println("Connected to WiFi"); Serial.print("IP Address: "); Serial.println(WiFi.localIP()); server.on("/", HTTP_GET, []() { server.send(200, "text/html", "Hello, World!"); }); server.begin(); } void loop() { server.handleClient(); }

Using the code above you can test if everything works correctly.

  • Open the Serial Monitor (Tools > Serial Monitor) to view the serial output.
  • Once the NodeMCU is connected to your Wi-Fi network, it will display its IP address.
  • Open a web browser and enter the IP address (e.g., to access the web server. You should see “Hello, World!” displayed in your browser.

Let's Build!

Arduino Webserver

Now we have covered the basics, let’s build a slightly more interesting webpage to give you an idea of what can be achieved with this project.

The Code:

Remember to replace "Your_SSID" and "Your_PASSWORD" with your own Wi-Fi network credentials.

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
#ifndef STASSID
const char *ssid = STASSID;
const char *password = STAPSK;
ESP8266WebServer server(80);

//************ HTML CODE SECTION STARTS HERE ************
const char website[] PROGMEM = R"=====(

<!DOCTYPE html>
    <meta http-equiv='refresh' content='20'/>
    <title>ESP8266 Webserver</title>
      body { 
        background-repeat: no-repeat; 
        background-size: 100%; 
        background-position: absolute;
        Color: black;
  <header>Arduino Webserver</header>
      This is a simple webserver created with Arduino
  <footer>We Love Arduino!</footer>

)=====";//************ HTML CODE SECTION ENDS HERE ************

void handleRoot() {
  char temp[400];
  server.send(200, "text/html", website);

void handleNotFound() {
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET) ? "GET" : "POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i = 0; i < server.args(); i++) {
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  server.send(404, "text/plain", message);

void setup(void) {
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) { // Waiting for connection
  Serial.print("Connected to ");
  Serial.print("IP address: ");
  if (MDNS.begin("esp8266")) {
    Serial.println("MDNS responder started");
  server.on("/", handleRoot);
  Serial.println("HTTP server started");

void loop(void) {

Copy and paste the code above to a new sketch in your IDE and then upload the code to your ESP8266 D1 Mini. If all went well, it will have connected the network and is now serving the webpage that’s shown below.

Arduino webpage image

If you need help finding the network assigned IP address for the D1-mini, you can either log into your router or use a network mapper app like “Fing”. Fing is an app I use on my iPhone; it scans a network and discovers all devices connected to the network and displays their IP.

Once you have discovered the IP address of the D1-mini, enter the IP into an internet browser address bar that is connected to the same network.


Here’s a quick explanation of HTML and CSS:

HTML (Hypertext Markup Language):
  • HTML is a markup language used for creating the structure and content of web pages.
  • It consists of a series of elements or tags that define the different parts of a web page, such as headings, paragraphs, links, images, and forms.
  • HTML elements are enclosed in angle brackets, and most have opening and closing tags (e.g., <p> for paragraphs).
  • HTML provides the basic structure and semantic meaning to web content.
CSS (Cascading Style Sheets):
  • CSS is a stylesheet language used for controlling the presentation and layout of web pages.
  • It allows you to define the visual appearance of HTML elements, such as their colors, fonts, sizes, margins, and positioning.
  • CSS rules consist of selectors (identifying which HTML elements to style) and declarations (specifying the styles to apply).
  • CSS helps separate the content (HTML) from its presentation (styling), making it easier to maintain and style web pages consistently.

In summary, HTML defines the structure and content of a web page, while CSS is used to style and control the appearance of those elements. Together, they enable the creation of visually appealing and well-structured web pages.

If you already know HTML and CSS great, you’re ready to go ahead edit the code within the <html></html> tags, if you’re not familiar with html yet, you should go learn a little before you make any changes.


Creating a web server with Arduino, powered by boards like the D1 Mini, opens up a world of possibilities for building interactive and remotely accessible projects. Whether you’re monitoring sensors, controlling devices, or displaying information over the web, this technology empowers you to bridge the digital and physical worlds effortlessly. With the knowledge gained from this project, you’re well on your way to exploring the exciting realm of IoT and web-based applications. So, get ready to unleash your creativity and embark on a journey of endless innovation with Arduino web servers!


The Elegoo Super Starter Kit

If you don’t already own any Arduino hardware, we highly recommend this kit as it has everything you need to start programming with Arduino. You can find out more about this kit, including a list of its components here: Elegoo Super Starter Kit

You can find this kit on Amazon here: Elegoo Super Starter Kit

The 0.96-inch Mini-OLED Display

We highly recommend this mini-OLED bundle of five 0.96-inch OLED displays. We have bought these before and they all worked perfectly. You can read more about the mini-OLED here: Mini-OLED

You can find this bundle on Amazon here: OLED Displays

Elegoo Nano (Arduino Compatible)

We have bought these Nano boards many times and can highly recommend them. There are three Nano boards in this pack making them a total bargain for everyone.

You can find this pack on Amazon here: Arduino Nano

ESP8266 D1-Mini

D1-Mini is an Arduino compatible Wi-Fi board based on an ESP-8266-12F. This WLAN board has 9 digital I/O pins.

You can find this board on Amazon here: D1-Mini


Luke Barber

Hello, fellow tech enthusiasts! I'm Luke, a passionate learner and explorer in the vast realms of technology. Welcome to my digital space where I share the insights and adventures gained from my journey into the fascinating worlds of Arduino, Python, Linux, Ethical Hacking, and beyond. Armed with qualifications including CompTIA A+, Sec+, Cisco CCNA, Unix/Linux and Bash Shell Scripting, JavaScript Application Programming, Python Programming and Ethical Hacking, I thrive in the ever-evolving landscape of coding, computers, and networks. As a tech enthusiast, I'm on a mission to simplify the complexities of technology through my blogs, offering a glimpse into the marvels of Arduino, Python, Linux, and Ethical Hacking techniques. Whether you're a fellow coder or a curious mind, I invite you to join me on this journey of continuous learning and discovery.

Leave a Reply

Your email address will not be published. Required fields are marked *

Verified by MonsterInsights