{"id":17309,"date":"2018-02-06T00:06:13","date_gmt":"2018-02-06T00:06:13","guid":{"rendered":"http:\/\/randomnerdtutorials.com\/?p=17309"},"modified":"2019-05-04T10:51:49","modified_gmt":"2019-05-04T10:51:49","slug":"esp8266-web-server-with-arduino-ide","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/esp8266-web-server-with-arduino-ide\/","title":{"rendered":"ESP8266 Web Server with Arduino IDE"},"content":{"rendered":"<p>In this project you\u2019ll create a standalone web server with an ESP8266 that can toggle two LEDs using Arduino IDE.\u00a0This ESP8266 Web Server is mobile responsive and it can be accessed with any device that as a browser in your local network.<!--more--><\/p>\n<p><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter size-full wp-image-52755\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/02\/esp8266-web-server-arduino-ide-thumbnail.jpg?resize=1200%2C675&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"1200\" height=\"675\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/02\/esp8266-web-server-arduino-ide-thumbnail.jpg?w=1280&amp;quality=100&amp;strip=all&amp;ssl=1 1280w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/02\/esp8266-web-server-arduino-ide-thumbnail.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/02\/esp8266-web-server-arduino-ide-thumbnail.jpg?resize=768%2C432&amp;quality=100&amp;strip=all&amp;ssl=1 768w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/02\/esp8266-web-server-arduino-ide-thumbnail.jpg?resize=1024%2C576&amp;quality=100&amp;strip=all&amp;ssl=1 1024w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p class=\"rntbox rntclblue\">For a more in-depth tutorial on how to create a web server, and explanation of the code, read this post <a href=\"https:\/\/randomnerdtutorials.com\/esp8266-web-server\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESP8266 Web Server Step-by-step<\/a><\/p>\n<p>If you want to learn more about the ESP8266 module, first read my <a href=\"https:\/\/randomnerdtutorials.com\/esp8266\">Getting Started Guide for the ESP8266 WiFi Module<\/a>.<\/p>\n<p>If you like the ESP and you want to do more projects\u00a0you can read my eBook <a href=\"https:\/\/randomnerdtutorials.com\/password-protected-web-server\/\" target=\"_blank\" rel=\"noopener noreferrer\">Home Automation Using ESP8266.<\/a><\/p>\n<p><strong>Let\u2019s get started!<\/strong><\/p>\n<h2>First, watch the video tutorial<\/h2>\n<p style=\"text-align:center\"><iframe width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/dWM4p_KaTHY?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<h2>Uploading the ESP8266 code<\/h2>\n<p>Having the ESP8266 add-on for the Arduino IDE installed (<a href=\"https:\/\/randomnerdtutorials.com\/how-to-install-esp8266-board-arduino-ide\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to Install the ESP8266 Board in Arduino IDE<\/a>), go to <strong>Tools<\/strong> and select \u201c<strong>Generic ESP8266 Module<\/strong>\u201d.<\/p>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" class=\"aligncenter size-full wp-image-12152\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/09\/Arduino-IDE-select-esp8266.png?resize=600%2C706&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"600\" height=\"706\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/09\/Arduino-IDE-select-esp8266.png?w=600&amp;quality=100&amp;strip=all&amp;ssl=1 600w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/09\/Arduino-IDE-select-esp8266.png?resize=255%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 255w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Copy the sketch below to your Arduino IDE. Replace the SSID and password with your own network credentials.<\/p>\n<pre class=\"language-c\"><code class=\"language-c\">const char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n<p>After modifying the sketch upload it to your ESP8266 (If you can&#8217;t upload code to your ESP8266, <a href=\"https:\/\/randomnerdtutorials.com\/esp8266-troubleshooting-guide\/\" target=\"_blank\" rel=\"noopener noreferrer\">read this troubleshooting guide<\/a>).<\/p>\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*********\n  Rui Santos\n  Complete project details at http:\/\/randomnerdtutorials.com  \n*********\/\n\n\/\/ Load Wi-Fi library\n#include &lt;ESP8266WiFi.h&gt;\n\n\/\/ Replace with your network credentials\nconst char* ssid     = &quot;REPLACE_WITH_YOUR_SSID&quot;;\nconst char* password = &quot;REPLACE_WITH_YOUR_PASSWORD&quot;;\n\n\/\/ Set web server port number to 80\nWiFiServer server(80);\n\n\/\/ Variable to store the HTTP request\nString header;\n\n\/\/ Auxiliar variables to store the current output state\nString output5State = &quot;off&quot;;\nString output4State = &quot;off&quot;;\n\n\/\/ Assign output variables to GPIO pins\nconst int output5 = 5;\nconst int output4 = 4;\n\n\/\/ Current time\nunsigned long currentTime = millis();\n\/\/ Previous time\nunsigned long previousTime = 0; \n\/\/ Define timeout time in milliseconds (example: 2000ms = 2s)\nconst long timeoutTime = 2000;\n\nvoid setup() {\n  Serial.begin(115200);\n  \/\/ Initialize the output variables as outputs\n  pinMode(output5, OUTPUT);\n  pinMode(output4, OUTPUT);\n  \/\/ Set outputs to LOW\n  digitalWrite(output5, LOW);\n  digitalWrite(output4, LOW);\n\n  \/\/ Connect to Wi-Fi network with SSID and password\n  Serial.print(&quot;Connecting to &quot;);\n  Serial.println(ssid);\n  WiFi.begin(ssid, password);\n  while (WiFi.status() != WL_CONNECTED) {\n    delay(500);\n    Serial.print(&quot;.&quot;);\n  }\n  \/\/ Print local IP address and start web server\n  Serial.println(&quot;&quot;);\n  Serial.println(&quot;WiFi connected.&quot;);\n  Serial.println(&quot;IP address: &quot;);\n  Serial.println(WiFi.localIP());\n  server.begin();\n}\n\nvoid loop(){\n  WiFiClient client = server.available();   \/\/ Listen for incoming clients\n\n  if (client) {                             \/\/ If a new client connects,\n    Serial.println(&quot;New Client.&quot;);          \/\/ print a message out in the serial port\n    String currentLine = &quot;&quot;;                \/\/ make a String to hold incoming data from the client\n    currentTime = millis();\n    previousTime = currentTime;\n    while (client.connected() &amp;&amp; currentTime - previousTime &lt;= timeoutTime) { \/\/ loop while the client's connected\n      currentTime = millis();         \n      if (client.available()) {             \/\/ if there's bytes to read from the client,\n        char c = client.read();             \/\/ read a byte, then\n        Serial.write(c);                    \/\/ print it out the serial monitor\n        header += c;\n        if (c == '\\n') {                    \/\/ if the byte is a newline character\n          \/\/ if the current line is blank, you got two newline characters in a row.\n          \/\/ that's the end of the client HTTP request, so send a response:\n          if (currentLine.length() == 0) {\n            \/\/ HTTP headers always start with a response code (e.g. HTTP\/1.1 200 OK)\n            \/\/ and a content-type so the client knows what's coming, then a blank line:\n            client.println(&quot;HTTP\/1.1 200 OK&quot;);\n            client.println(&quot;Content-type:text\/html&quot;);\n            client.println(&quot;Connection: close&quot;);\n            client.println();\n            \n            \/\/ turns the GPIOs on and off\n            if (header.indexOf(&quot;GET \/5\/on&quot;) &gt;= 0) {\n              Serial.println(&quot;GPIO 5 on&quot;);\n              output5State = &quot;on&quot;;\n              digitalWrite(output5, HIGH);\n            } else if (header.indexOf(&quot;GET \/5\/off&quot;) &gt;= 0) {\n              Serial.println(&quot;GPIO 5 off&quot;);\n              output5State = &quot;off&quot;;\n              digitalWrite(output5, LOW);\n            } else if (header.indexOf(&quot;GET \/4\/on&quot;) &gt;= 0) {\n              Serial.println(&quot;GPIO 4 on&quot;);\n              output4State = &quot;on&quot;;\n              digitalWrite(output4, HIGH);\n            } else if (header.indexOf(&quot;GET \/4\/off&quot;) &gt;= 0) {\n              Serial.println(&quot;GPIO 4 off&quot;);\n              output4State = &quot;off&quot;;\n              digitalWrite(output4, LOW);\n            }\n            \n            \/\/ Display the HTML web page\n            client.println(&quot;&lt;!DOCTYPE html&gt;&lt;html&gt;&quot;);\n            client.println(&quot;&lt;head&gt;&lt;meta name=\\&quot;viewport\\&quot; content=\\&quot;width=device-width, initial-scale=1\\&quot;&gt;&quot;);\n            client.println(&quot;&lt;link rel=\\&quot;icon\\&quot; href=\\&quot;data:,\\&quot;&gt;&quot;);\n            \/\/ CSS to style the on\/off buttons \n            \/\/ Feel free to change the background-color and font-size attributes to fit your preferences\n            client.println(&quot;&lt;style&gt;html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}&quot;);\n            client.println(&quot;.button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;&quot;);\n            client.println(&quot;text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}&quot;);\n            client.println(&quot;.button2 {background-color: #77878A;}&lt;\/style&gt;&lt;\/head&gt;&quot;);\n            \n            \/\/ Web Page Heading\n            client.println(&quot;&lt;body&gt;&lt;h1&gt;ESP8266 Web Server&lt;\/h1&gt;&quot;);\n            \n            \/\/ Display current state, and ON\/OFF buttons for GPIO 5  \n            client.println(&quot;&lt;p&gt;GPIO 5 - State &quot; + output5State + &quot;&lt;\/p&gt;&quot;);\n            \/\/ If the output5State is off, it displays the ON button       \n            if (output5State==&quot;off&quot;) {\n              client.println(&quot;&lt;p&gt;&lt;a href=\\&quot;\/5\/on\\&quot;&gt;&lt;button class=\\&quot;button\\&quot;&gt;ON&lt;\/button&gt;&lt;\/a&gt;&lt;\/p&gt;&quot;);\n            } else {\n              client.println(&quot;&lt;p&gt;&lt;a href=\\&quot;\/5\/off\\&quot;&gt;&lt;button class=\\&quot;button button2\\&quot;&gt;OFF&lt;\/button&gt;&lt;\/a&gt;&lt;\/p&gt;&quot;);\n            } \n               \n            \/\/ Display current state, and ON\/OFF buttons for GPIO 4  \n            client.println(&quot;&lt;p&gt;GPIO 4 - State &quot; + output4State + &quot;&lt;\/p&gt;&quot;);\n            \/\/ If the output4State is off, it displays the ON button       \n            if (output4State==&quot;off&quot;) {\n              client.println(&quot;&lt;p&gt;&lt;a href=\\&quot;\/4\/on\\&quot;&gt;&lt;button class=\\&quot;button\\&quot;&gt;ON&lt;\/button&gt;&lt;\/a&gt;&lt;\/p&gt;&quot;);\n            } else {\n              client.println(&quot;&lt;p&gt;&lt;a href=\\&quot;\/4\/off\\&quot;&gt;&lt;button class=\\&quot;button button2\\&quot;&gt;OFF&lt;\/button&gt;&lt;\/a&gt;&lt;\/p&gt;&quot;);\n            }\n            client.println(&quot;&lt;\/body&gt;&lt;\/html&gt;&quot;);\n            \n            \/\/ The HTTP response ends with another blank line\n            client.println();\n            \/\/ Break out of the while loop\n            break;\n          } else { \/\/ if you got a newline, then clear currentLine\n            currentLine = &quot;&quot;;\n          }\n        } else if (c != '\\r') {  \/\/ if you got anything else but a carriage return character,\n          currentLine += c;      \/\/ add it to the end of the currentLine\n        }\n      }\n    }\n    \/\/ Clear the header variable\n    header = &quot;&quot;;\n    \/\/ Close the connection\n    client.stop();\n    Serial.println(&quot;Client disconnected.&quot;);\n    Serial.println(&quot;&quot;);\n  }\n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/ESP8266_Web_Server_Arduino_IDE_updated.ino\" target=\"_blank\">View raw code<\/a><\/p>\n<h3>Upload code to ESP8266-01<\/h3>\n<p>If you&#8217;re using an ESP8266-01, you need an <a href=\"https:\/\/makeradvisor.com\/tools\/ftdi-programmer-board\/\" target=\"_blank\" rel=\"noopener noreferrer\">FTDI programmer<\/a> to upload the code. Wire the ESP8266 to the FTDI programmer as shown in the following schematic diagram.<\/p>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" class=\"aligncenter wp-image-5480\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/05\/Flashing-Firmware-FTDI-Programmer.png?resize=663%2C179&#038;quality=100&#038;strip=all&#038;ssl=1\" sizes=\"(max-width: 700px) 100vw, 700px\" srcset=\"https:\/\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/05\/Flashing-Firmware-FTDI-Programmer.png?resize=300%2C81 300w, https:\/\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/05\/Flashing-Firmware-FTDI-Programmer.png?w=756 756w\" alt=\"Flashing Firmware - FTDI Programmer\" width=\"663\" height=\"179\" \/><\/p>\n<h2>ESP8266 IP Address<\/h2>\n<p>Open the Arduino serial monitor at a baud rate of 115200.<\/p>\n<ul>\n<li>If you&#8217;re using ESP8266-01, connect GPIO 0 to VCC and reset your board.<\/li>\n<li>If you&#8217;re using ESP8266-12E, just press the RESET button.<\/li>\n<\/ul>\n<p>After a few seconds, the ESP8266 IP address should appear.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-52691\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-ip-address.png?resize=513%2C261&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"513\" height=\"261\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-ip-address.png?w=513&amp;quality=100&amp;strip=all&amp;ssl=1 513w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-ip-address.png?resize=300%2C153&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 513px) 100vw, 513px\" \/><\/p>\n<h2>Parts Required<\/h2>\n<p>Here\u2019s the hardware that you need to complete\u00a0this project:<\/p>\n<ul>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/esp8266-esp-12e-nodemcu-wi-fi-development-board\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESP8266<\/a>\u00a0\u2013 read\u00a0<a href=\"https:\/\/makeradvisor.com\/best-esp8266-wi-fi-development-board\/\" target=\"_blank\" rel=\"noopener noreferrer\">Best ESP8266 Wi-Fi Development Boards<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/3mm-5mm-leds-kit-storage-box\/\" target=\"_blank\" rel=\"noopener noreferrer\">2x LED<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/resistors-kits\/\" target=\"_blank\" rel=\"noopener noreferrer\">2x 330 Ohm resistor<\/a>\u00a0(220 Ohm or other values also work)<\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/mb-102-solderless-breadboard-830-points\/\" target=\"_blank\" rel=\"noopener noreferrer\">Breadboard<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/jumper-wires-kit-120-pieces\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jumper wires<\/a><\/li>\n<\/ul>\n<p>If you\u2019re using an\u00a0<a href=\"https:\/\/makeradvisor.com\/tools\/esp-01-wi-fi-board\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESP8266-01<\/a>, you need an\u00a0<a href=\"https:\/\/makeradvisor.com\/tools\/ftdi-programmer-board\/\" target=\"_blank\" rel=\"noopener noreferrer\">FTDI programmer<\/a>\u00a0to upload code.<\/p>\n<p>You can use the preceding links or go directly to <a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\">MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p><p style=\"text-align:center;\"><a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&#038;quality=100&#038;strip=all&#038;ssl=1\"><\/a><\/p>\n<h2>Final Circuit<\/h2>\n<p>Follow the next schematic diagram to build the circuit you&#8217;ll control. One LED connected to <span class=\"rnthl rntcgreen\">GPIO 4<\/span>(D2) and another connected to <span class=\"rnthl rntclblue\">GPIO 5<\/span>(D1).<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-web-server-schematics_bb.png?quality=100&#038;strip=all&#038;ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-52689 size-full\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-web-server-schematics_bb.png?resize=928%2C555&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"928\" height=\"555\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-web-server-schematics_bb.png?w=928&amp;quality=100&amp;strip=all&amp;ssl=1 928w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-web-server-schematics_bb.png?resize=300%2C179&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-web-server-schematics_bb.png?resize=768%2C459&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 928px) 100vw, 928px\" \/><\/a><\/p>\n<p>If you\u2019re using the ESP8266-01, use the following schematic diagram as a reference, but you need change the GPIOs assignment in the code (to <span class=\"rnthl rntcyellow\">GPIO 2<\/span> and <span class=\"rnthl rntcpurple\">GPIO 0<\/span>).<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/ESP-web-server_bb.png?quality=100&#038;strip=all&#038;ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5132\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/ESP-web-server_bb.png?resize=520%2C567&#038;quality=100&#038;strip=all&#038;ssl=1\" sizes=\"(max-width: 520px) 100vw, 520px\" srcset=\"https:\/\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/ESP-web-server_bb.png?resize=275%2C300 275w, https:\/\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/ESP-web-server_bb.png?w=691 691w\" alt=\"ESP-web-server_bb\" width=\"520\" height=\"567\" \/><\/a><\/p>\n<h2>Demonstration<\/h2>\n<p>For the final demonstration open any browser from a device that is connected to the same router that your ESP8266 is. Then, type the ESP8266 IP address and click Enter!<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-52747\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/02\/esp8266-web-server-smartphone.png?resize=298%2C532&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"298\" height=\"532\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/02\/esp8266-web-server-smartphone.png?w=298&amp;quality=100&amp;strip=all&amp;ssl=1 298w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/02\/esp8266-web-server-smartphone.png?resize=168%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 168w\" sizes=\"(max-width: 298px) 100vw, 298px\" \/><\/p>\n<p>Now , press the buttons in your web server to control the ESP8266 GPIOs.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-52748\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/02\/esp8266-gpios.jpg?resize=750%2C447&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"750\" height=\"447\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/02\/esp8266-gpios.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/02\/esp8266-gpios.jpg?resize=300%2C179&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<h2>Wrapping Up<\/h2>\n<p class=\"rntbox rntclblue\">For an in-depth explanation on how the web server code works, please refer to this tutorial: <a href=\"https:\/\/randomnerdtutorials.com\/esp8266-web-server\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESP8266 Web Server Step-by-step<\/a><\/p>\n<p>If you like the ESP8266 make sure you check our most popular projects:<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/randomnerdtutorials.com\/home-automation-using-esp8266\/\" target=\"_blank\" rel=\"noopener noreferrer\">Home Automation Using ESP8266 (eBook)<\/a><\/strong><\/li>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-web-server\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESP8266 Web Server Tutorial Step-by-step<\/a><\/li>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-wi-fi-button-diy-amazon-dash-button-clone\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESP8266 Wi-Fi Button \u2013 DIY Amazon Dash Button Clone<\/a><\/li>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-daily-task-publish-temperature-readings-to-thingspeak\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESP8266 Daily Task \u2013 Publish Temperature Readings to ThingSpeak<\/a><\/li>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-weather-forecaster\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESP8266 Weather Forecaster<\/a><\/li>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/nextion-display-with-esp8266-touchscreen-user-interface-for-node-red\/\" target=\"_blank\" rel=\"noopener noreferrer\">Nextion Display with ESP8266 \u2013 Touchscreen User Interface for Node-RED<\/a><\/li>\n<\/ul>\n<p>Thanks for reading.<\/p>\n<p><b>P.S. If you got stuck throughout\u00a0this tutorial\u00a0make sure you read &#8220;<\/b><a style=\"font-weight: bold;\" href=\"https:\/\/randomnerdtutorials.com\/esp8266-troubleshooting-guide\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESP8266 Troubleshooting Guide<\/a><b>&#8220;<\/b><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this project you\u2019ll create a standalone web server with an ESP8266 that can toggle two LEDs using Arduino IDE.\u00a0This ESP8266 Web Server is mobile responsive and it can be &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"ESP8266 Web Server with Arduino IDE\" class=\"read-more button\" href=\"https:\/\/randomnerdtutorials.com\/esp8266-web-server-with-arduino-ide\/#more-17309\" aria-label=\"Read more about ESP8266 Web Server with Arduino IDE\">CONTINUE READING \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":52755,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[214,265,246,300,240,220,264,218],"tags":[],"class_list":["post-17309","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-esp8266","category-esp8266-project","category-esp8266-arduino-ide","category-0-esp8266","category-esp8266-projects","category-http-client","category-project","category-web-server"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/02\/esp8266-web-server-arduino-ide-thumbnail.jpg?fit=1280%2C720&quality=100&strip=all&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/17309","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/comments?post=17309"}],"version-history":[{"count":0,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/17309\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media\/52755"}],"wp:attachment":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media?parent=17309"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/categories?post=17309"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/tags?post=17309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}