ESP8266 Community Forum

- Wed Dec 30, 2020 4:27 am #90005 Bootstrap is a layout and will take you a while to get it to work how you want. Also there is a lot of code taking up space you will never need.

You can look on the web for ready made css layouts ( templates are probably not what you want ) that are mobile friendly; most new ones are these days.

You can setup one you like with an online designer like: https://www.thesitewizard.com/wizards/layout.shtml

I initially learnt html with a Dummies book and like you checked how things worked on other peoples sites.

For server based websites I personally prefer using my own as I can do what I want with it and it is not restricted by what for instance Blynk have installed.
I currently have a website where I can upload environmental data and it is saved to a database and displayed in different ways: http://rubblewebs.co.uk/IOT/
I have a rout tracker page where my data is overlaid on a Google map: https://rubblewebs.co.uk/IOT/manchester.html
I also have a webpage where the current outside temperature is saved and my "clock" downloads it every 15 min and another with a binary file that another devices I have checks every night to see if there is new firmware to download.

Good luck with your projects and there are web design forums around that can help you. I use https://www.sitepoint.com/community/
I am not great with JavaScript but will have a look over your html later.

- Wed Dec 30, 2020 4:50 am #90006 Bootstrap worked for me!

Easy to learn, responsive and with a huge ecosystem where you will be able to find components without having to build them from scratch

best resources I use:

Bootstrap docs here https://getbootstrap.com/docs/4.0/getting-started/introduction/
official documentation is updated and reliable, full of working examples and code snippets
stick with them and your web pages will work
(for instance compare the standard template to your index.html, just because the position and the order of "link" and "script" may be the reason the bootstrap theme won't load)

google for specific issues (often pointing to stackoverflow)

https://github.com/quackmore

- Wed Dec 30, 2020 5:34 am #90007 I enjoy the challenge of making webpages myself which I suppose is a good reason not to use a framework.

The main challenge with a framework/CMS etc. is getting it to do what you want! But saying that they can look a lot more professional.

- Wed Dec 30, 2020 7:53 am #90014 @Bonzo

I totally see what you mean (and I'd usually agree)
but you still have to create your HTML pages when using Bootstrap
Bootstrap is not a framework, instead it's a collection of components ready to use (mainly CSS even if some component requires JS to function)
It's something you can really leverage on, you oughta give it a try

@Stevolution2020

tried your html page:
there are some errors in it cause you are using html style comments in JS functions
once I fixed the comments like below, everything is working fine even on mobile

Code: Select allWRONG COMMENT
      function set_theme(theme_url) {  <!--Apply theme-->
        $('link[title="main"]').attr('href', theme_url);
      }

GOOD COMMENT
      function set_theme(theme_url) {
        // <!--Apply theme-->
        $('link[title="main"]').attr('href', theme_url);
      }


the following part will be probably useless to you
but just in case...

use an editor that can show you HTML and JS errors before you test your pages (I'm using Visual Studio Code)

Enable your browser developer tools to catch what's going on while testing

use a web server on localhost to test your pages, so that you can access them from different devices, you can easily do that using docker (docker run -d --name <your_container_name> -p 80:80 -v <your_app_directory>:/usr/share/nginx/html:ro nginx:alpine) or nodejs ("cd <your app directory>" then "npx http-server")

https://github.com/quackmore