ESP8266 Web Server using CSS and JavaScript

Sdílet
Vložit
  • čas přidán 7. 08. 2024
  • A webpage is designed using HTML, CSS, and JavaScript. The webpage is served to the client using ESP8266 controller.
    Link to code:
    akuzechie.blogspot.com/2020/1...
    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

Komentáře • 45

  • @weeyumzzz94
    @weeyumzzz94 Před 3 lety +4

    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!!!

    • @AnasKuzechie
      @AnasKuzechie  Před 3 lety +1

      Thanks for your feedback. I truly appreciate it.

  • @johncypher9092
    @johncypher9092 Před 3 lety

    Thanks, very helpful

  • @azzattar8422
    @azzattar8422 Před 2 lety

    Excellent cours, clair et simple...Merci.

  • @user-co8un6lx3t
    @user-co8un6lx3t Před 2 lety +3

    Доступно объяснил, спасибо!

  • @emrekorkmaz8609
    @emrekorkmaz8609 Před 3 lety

    it's like a lesson. thanks

  • @flavio185
    @flavio185 Před 3 lety

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

  • @CaioAzevedo-dc7dq
    @CaioAzevedo-dc7dq Před rokem

    Is there any way I can use more than one html file to run other pages through the tag Home?

  • @nishantsrivastava9381
    @nishantsrivastava9381 Před 3 lety

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

  • @meddem3373
    @meddem3373 Před 3 lety +1

    thanks

  • @kaluvanhariharan4256
    @kaluvanhariharan4256 Před 3 lety

    nicely explained

  • @just_all_in
    @just_all_in Před 5 měsíci

    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)

  • @raihanarrasyidmonadika6217

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

  • @phil4000n
    @phil4000n Před 2 lety

    Smart, the html include !

  • @flinkiklug6666
    @flinkiklug6666 Před 2 lety +1

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

  • @kurtuluspesen
    @kurtuluspesen Před rokem

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

  • @cringebunny5886
    @cringebunny5886 Před 2 lety

    how to insert media/mp3 file in webserver.

  • @ingenia-tec5194
    @ingenia-tec5194 Před 2 lety

    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 ?

    • @AnasKuzechie
      @AnasKuzechie  Před 2 lety +1

      Thanks for your feedback. I believe so, I’m not absolutely sure. I need to look in to it.

    • @bama2619
      @bama2619 Před 11 měsíci

      @@AnasKuzechie could work, but unstable. I am just realizing it and want to switch to this header method.

  • @henryprobosantoso473
    @henryprobosantoso473 Před 2 lety

    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?

    • @AnasKuzechie
      @AnasKuzechie  Před 2 lety

      I use Visual Studio Code to develop the HTML code, and once satisfied, copy the code into the Arduino IDE sketch. You can watch my tutorial on HTML coding via Studio Code: czcams.com/video/cdzW0gaxoMQ/video.html

  • @openroomxyz
    @openroomxyz Před 3 lety

    How much does the whole systems cost?

  • @ariel18012
    @ariel18012 Před 2 lety

    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í.

  • @shamimaurmi
    @shamimaurmi Před rokem

    sir where i find input data?

  • @fickshokmeme5177
    @fickshokmeme5177 Před rokem

    i am facing Compilation error: expected unqualified-id before '

  • @kingofshorts-ki9kj
    @kingofshorts-ki9kj Před rokem

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

  • @fawadtariqq
    @fawadtariqq Před 2 lety

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

    • @AnasKuzechie
      @AnasKuzechie  Před 2 lety

      You must have the .h file in the same directory as the sketch .ino file

  • @SevKan1007
    @SevKan1007 Před rokem

    please give me lirbary of webpageCode. Thanks!

  • @chung_myung.
    @chung_myung. Před 3 lety

    Sir, is it possible that can I add background image?

    • @AnasKuzechie
      @AnasKuzechie  Před 3 lety

      Yes, check this link of W3 Schools www.w3schools.com/howto/howto_css_full_page.asp

    • @chung_myung.
      @chung_myung. Před 3 lety

      @@AnasKuzechie sir, I searched on google. Some told to convert image to base64 and use. Is it possible to use same example.jpg as shown in above link u gave?

    • @AnasKuzechie
      @AnasKuzechie  Před 3 lety

      I’m not sure. I haven’t tried it yet. Maybe soon.

    • @chung_myung.
      @chung_myung. Před 3 lety

      @@AnasKuzechie ok)

  • @eakanshkhetarpal1010
    @eakanshkhetarpal1010 Před 2 lety

    wheres the download for .h file

    • @AnasKuzechie
      @AnasKuzechie  Před 2 lety

      Do you mean webpageCode.h? If so, you create this header file in the same directory as your .ino file. Then you add the html code to it.

  • @abdelhakimlamnaouar9527

    Can i use esp32?