ESP8266 Web Server using CSS and JavaScript

A webpage is designed using HTML, CSS, and JavaScript. The webpage is served to the client using ESP8266 controller.

Link to code:

Contents:
0:00 Introduction
0:21 Web Development Basics
1:12 Block Diagram of Implemented System
1:36 C++ Sketch
3:04 HTML, CSS & JavaScript Codes
5:31 Demonstration
6:03 Conclusion

[weeyumzzz]

Anas, I'm very appreciative of your videos because they are extremely well done. Your verbal descriptions of your code are thorough and easy to follow. And your code is broken down into easy-to-digest, logical chunks. The best I've seen! Thanks!!!

[flinkiklug]

Is this also running on a esp8266? I have Problems with my code.

[flavio]

Thanks, that will help while I don't have a raspberry

[azzattar]

Excellent cours, clair et simple...Merci.

[sp]

Watched video without sound. Judging by visuals only I identified you as Indian 😅

[andyandrew]

You can put images without any problems ? I heard that the NodeMCU-12E has some limitations...

[bennguyen]

I'm interested in the ESP device making a hot-spot, and serve up a page to any device that connects to it.

But I'm using the ISP-IDF IDE (eclipse), and if I understand correctly the "station" project template is to connect to an existing network/router.. and that the "access point" project template is if you want to broadcast an SSID and have a device, like your phone, see it and connect to it. Is that correct?

I created a new project from the list of templates available (wifi->getting_started->softAP), but after building/downloading my android does not see any new SSID. The serial output shows
[0;33mW (547) spi_flash: Detected size(4096k) larger than the size in the binary image header(2048k). Using the size in the binary image header.
[0;32mI (560) sleep: Configure to isolate all GPIO pins in sleep state
[0;32mI (567) sleep: Enable automatic switching of GPIO sleep configuration
[0;32mI (574) main_task: Started on CPU0
[0;32mI (574) main_task: Calling app_main()

The only anomalies I can see is that, when it builds there's a 'Low Application Partition Size' warning:
"Less than 30% of application partition size is free (267, 856 of 1, 048, 576), would you like to increase it?

The other strange thing is that the "Debug Configuration" Startup tab, has the 'Load symbols' check-marked.. but the 'Load executable' not checked. I think it's still downloading/debugging.. so maybe the OpenOCD options "Flash every time with application binaries" is responsible?

In any case, any idea why the default AP project template doesn't seem to broadcast it's SSID?

Instead of using the official EspressIF project examples, maybe its better to use a GH example?

MHendricks / (Lua)
Enjoy-Mechatronics / ESP32-Web-Server
CDFER / Captive-Portal-ESP32

[CaioAzevedo-dcdq]

Is there any way I can use more than one html file to run other pages through the tag <a href="index2.html">Home</a>?

[just_all_in]

Hey dude if i carry this with me. The esp 8266 have an own network for acess de site even without a wifi?( I wanna acess the site by my cellphone while out home)

[raihanarrasyidmonadika]

I want to ask, is it possible to display images on the web, thank you

[kurtuluspesen]

Hi Sir, Do you have access ESP8266 webserver over internet? Did you try it? Thanks

[henryprobosantoso]

Hey, i wonder how to create html, css, and the js code before implement them to the arduino file so we could upload it to the spiffs system. I mean it should be any mistake when we develop the code to display what we really want in the browser, how to develop and like compile it? Do you use another software to build the like vs code or atom?

How to do that? Do you have any references for me?

[SRIGHT]

after upload how to view the page, id ont find the ssid of the web server

[fawadtariqq]

When I follow this, I get an error file or directory not found on #include "webpageCode.h";

[nishantsrivastava]

how to send/receive data using nodemcu and web server. bi-directional communication.

[ariel]

Muy buen el video es lo que andaba buscando, lastima que tu lenguaje no es español sino la romperías en YT,
no hay nada en español de lo que haces en tu canal, y se dificulta comprender detalles.
Saludos y sigue así.

[kingofshorts-kikj]

sir attach sd card to use a web storage and local movie server

[cringebunny]

how to insert media/mp3 file in webserver.

[ingenia-tec]

Thanks a lot :D
Its a great video :D !!!

Can HTML + CSS + Javascript files be stored as files on the ESP8266 (with SPIFFS library) and be used with the web server ?

[SevKan]

please give me lirbary of webpageCode. Thanks!