Build Web Servers with ESP32 and ESP8266 eBook (2nd Edition)
Build Web Server projects with the ESP32 and ESP8266 boards to control outputs and monitor sensors remotely. Learn HTML, CSS, JavaScript and client-server communication protocols.
About the eBook
This eBook covers HTML, CSS, JavaScript and client-server communication protocols so that you’re able to build your own web server projects with the ESP32 and ESP8266 boards from scratch.
The boards will be programmed using the Arduino “programming language” and we’ll use Visual Studio Code + PlatformIO IDE to program the boards. The eBook also provides instructions on how to proceed if you want to use Arduino IDE instead.
The resources in this eBook are compatible with both ESP32 and ESP8266 NodeMCU boards.
If you search the web, you’ll find hundreds of HTML, CSS, and JavaScript tutorials. However, with this eBook we have a unique approach. The goal of this training is to teach you the basics of these technologies applied to web servers that you can build with the ESP32 or ESP8266 boards.
- HTML to define the content of web pages
- CSS to style the web pages
- JavaScript to program the behavior of web pages
- Client-server communication protocols to interact between the browser and the ESP
This eBook walks you through building web pages with practical examples that you can follow along and test in real time.
If you want to control the ESP boards GPIOs or display sensor readings using a web server, this is the perfect chance for you to learn how to do it from scratch.
What’s inside the eBook?
The “Build Web Servers with the ESP32 and ESP8266” is an eBook with 3 Modules and approximately 600 pages long:
- Module 1: Installing and Getting Started with VS Code + PlatformIO
- Module 2: Learn HTML, CSS and JavaScript Basics (includes examples)
- Module 3: Build ESP32 and ESP8266 web servers (17 step-by-step projects)
Here’s what you’ll have access when you get the eBook:
- eBook in PDF format (3 Modules, 600 pages, 17 web server projects)
- Source Code + Project Files + Schematic Diagrams
- Unlimited Free Updates (includes future eBook updates)
- Access to a private Forum to ask questions
- Exclusive access to our Facebook group community
What you’ll learn:
- Install and use VS Code Text Editor to write your HTML, CSS and JavaScript files;
- Use VS Code with PlatformIO IDE extension to program the ESP32 and ESP8266;
- Upload files to the ESP32 and ESP8266 filesystem using VS Code + PlatformIO IDE;
- There are optional instructions on how to proceed if you want to use Arduino IDE;
- Create HTML, CSS and JavaScript files to build web pages to interface with the ESP32 and ESP8266 boards;
- Use different client-server communication protocols: HTTP polling, WebSocket and Server-Sent Events;
- Use different HTML elements to control outputs: buttons, toggle switches and sliders;
- Display sensor readings on the web pages in paragraphs, tables and charts;
- Add user input fields to save parameters;
- Create a WiFi Manager for your web servers;
- Add OTA (over-the-air) capabilities to your projects;
- Serve multiple web pages and create a navigation bar;
- And much more…
Continue reading for the complete Table of Contents…
Module #0: Introduction
eBook introduction: get started with HTML, CSS, JavaScript and web servers with the ESP32 and ESP8266 boards. Read this section to learn how to follow the eBook, download all code and other useful resources.
Module #1: Installing Tools
Install all the tools required throughout the eBook: Visual Studio Code, PlatformIO IDE Extension and Arduino IDE (not mandatory).
- Installing VS Code + PlatformIO IDE
- Installing Arduino IDE
Module #2: Getting Started with HTML, CSS and JavaScript
Learn HTML, CSS and JavaScript basics. HTML to define the content of web pages; CSS to specify the layout and style of web pages; JavaScript to program the behavior of web pages.
- Getting Started with HTML
- Styling HTML Content with CSS
- Getting Started with JavaScript
This is not meant to be a web development course. You’ll learn the basics to build your own web pages and become familiar with most HTML, CSS and JavaScript terms. By the end of the eBook, if you need additional features for your projects, you’ll have an idea on how to search for them.
Module #3: ESP32 and ESP8266 Web Servers
Learn how to build web server projects with the ESP32 and ESP8266 boards to control outputs and monitor sensors remotely. You will create web pages to control outputs (buttons, toggle switches, and slider) and display sensor readings (text, tables and charts).
Add user input fields to save parameters, create a Wi-Fi Manager, add OTA (over-the-air) capabilities to your projects and serve multiple web pages with navigation bar.
You’ll also learn different client-server communication protocols: HTTP requests, WebSocket and Server-Sent Events (SSE).
- Introducing Web Servers
- 1.1 – Hello World Web Server
- 1.2 – Hello World Web Server (Serve Files from Filesystem)
- 1.3 – Hello World Web Server (Arduino IDE Software)
- 2.1 – Web Server – Control Outputs (ON/OFF Buttons)
- 2.2 – Web Server – Control Multiple Outputs (Toggle Switches)
- 2.3 – WebSocket Web Server: Control Outputs (ON/OFF Buttons)
- 2.4 – Web Server with Slider: Control LED Brightness (PWM)
- 2.5 – WebSocket Web Server: Control Multiple Outputs
- 3.1 – Web Server: Display Sensor Readings (SSE)
- 3.2 – Web Server: Display Sensor Readings (Table)
- 3.3 – Web Server: Display Sensor Readings (Charts)
- 3.4 – Web Server: Display Sensor Readings from File (Charts)
- 4.1 – Web Server with Input Fields (HTML Form)
- 4.2 – HTTP Authentication: Password Protected Web Server
- 4.3 – Wi-Fi Manager for Web Server
- 4.4 – Multiple Web Pages (with Navigation Bar)
- 4.5 – Over-the-air (OTA) Updates for Web Server
We provide all the needed files to build the project examples (for the ESP32 and ESP8266 boards).
Extra Units – Useful Resources
- Setting the ESP32 and ESP8266 as an Access Point
- ESP32/ESP8266 Static IP Address
What do you need to follow the eBook?
To follow the projects in the eBook you can either use an ESP32 or ESP8266 board. We usually use the ESP32 DEVKIT DOIT board, but you can use any other ESP32 board.
As for the ESP8266, we use the ESP8266-12E NodeMCU Kit, but once again you are free to use any other ESP8266 board.
The projects throughout this eBook don’t require an extensive list of parts. You just need some LEDs and resistors, jumper wires, a breadboard and a BME280 sensor. Then, you should be able to modify the projects to control other outputs and use any other sensors or inputs.
Programming Environment
The ESP32 and ESP8266 boards are programmed using the Arduino “programming language”. To program the boards we’ll use Visual Studio Code with the PlatformIO IDE extension. Visual Studio Code is free and runs on Windows, Linux and Mac OS X operating systems.
We’ll also use Visual Studio Code to write the HTML, CSS and JavaScript files,.
Why VS Code + PlatformIO IDE?
The Arduino IDE works great for small applications. However, for advanced projects with more than 200 lines of code, multiple files, and other advanced features like auto completion and error checking, VS Code with the PlatformIO IDE extension is the best alternative.
Additionally, it is easier to manage libraries and you won’t have trouble with missing dependencies which happens often when using Arduino IDE.
However, nothing stops you from following the projects using Arduino IDE. We include instructions on how to proceed if you want to use Arduino IDE instead. If you choose this option, you need to have another program, a Text Editor, to write the HTML, CSS and JavaScript files.
Who is this eBook for?
This eBook is for those who want to learn how to build their own web servers with the ESP32 and ESP8266 from scratch. This includes building the web page using HTML, CSS and JavaScript as well as programming the server (ESP board) using the Arduino “programming language”.
Invitation to Join our Private Forum!
This eBook comes with an opportunity to join our private Forum of like-minded people where you can ask questions about the eBook or other related subjects. You’ll get direct help from Rui and Sara or from other active members of the community.
Download the eBook
- Updated July, 2023
- PDF eBook with 600 pages
- Source code and all files: HTML, CSS and JavaScript
- Step-by-step instructions
- Code explanation
- Unlimited Updates
- Exclusive access to a Private Forum
- English language
- Created by Rui Santos and Sara Santos
GET THE EBOOK | $35 $27 USD »
Click here to get the eBook | $35 $27 USD
Note: after your purchase, you receive an email with a username and password that you use to access the members area and download the PDF eBook.
Have questions? Email me at https://randomnerdtutorials.com/support anytime for any reason.
You won’t regret it. My 60 day money back guarantee backs up every word in this message. Proceed with confidence. See you inside,
-Rui Santos
Frequently Asked Questions
Meet the Authors
See what others are saying
Thank you Rui. Anyone wondering whether you bring value can rely on my word. I’ve purchased hundreds of books over a 45 year career as engineer and entrepreneur. NONE of these books have approached your excellent method of teaching a subject. You have a rare gift as a teacher. Glad to have made the purchases.
Paul
Hi, just wanted to pass on my thanks. I have bought 2 of your courses and looked at and use some of your tutorials. What I want to say is THANKS for all your projects. All of your projects I used have actually worked and I have learnt a lot.
Peter Drew, from UK
Your tutorials are easy to read, full of detail, filled with useful tips and an excellent basis and lookup for my own projects. Well done Rui and co. Keep up the good work.
David Williams
Thanks! I would personally like to thank you for the group courses. I find them very educational and entertaining. The courses are well worth the money. Thank you both for all the hard work. Keep it up.
Joe Statzer, from US
Hi, I love your eBooks and courses – everything has worked perfectly. I have lots of new ideas. Thanks!
John Benson
After struggling for days with various other ESP8266 projects, your server worked “right out of the box” to my amazement (and that of my skeptical wife). Great boost of confidence. Thanks for the very clear and thorough, yet easy to follow instructions and illustrations.
Bruce
AS SEEN ON…