My site uses a simple structure of three buttons in sequential rows. Three is a good number for remembering and choosing things. It works well for both mobile and desktop applications.
I began forging ahead on this, by accident, after I saw that Adobe Dreamweaver supports bootstrap.
So I started the one hour course on bootstrap, but didn't finish it BECAUSE:
While I was watching scrimba (which is fantastic by the way, because you can stop the video and edit the code they are showing you in real time on the screen) I thought, "What if bootstrap isn't the best way to do this?"
So then I googled some reviews and found the scrimba course on CSS Grid, which is even more fantastic - for my purposes it was cleaner than bootstrap. Thank you Per Harald Borgen Co-founder of Scrimba! He is very clear.
In the meantime, I asked some computer experts, who are also my kids, whether I was headed in the right direction.
By the time they got back to me that same evening, I had already learned CSS Grid on Scrimba and was immediately starting to code up a prototype. I took the course in the listed 62 minutes, but was already producing useable code in 20 minutes. This of course blew my mind.
As the complexity of my new site escalated I needed to generate more HTML automatically. The CSS didn't need to be changed at all. To generate said HTML I used Python running in a Jupyter Notebook. This decision was really an important one because I could have written a 'C', Java, or JavaScript program, or I could have written a Unix shell script, or a sed/awk job and so forth. Python in Jupyter was the right decision.
I was able to build a little hack previewer into Jupyter because the libraries for Python are so rich.
So in short the project went a little faster than I expected. My new site, https://wdv.com, is up and running if you want to try it. You can stop reading now unless you like details and statistics.
By way of complexity here are the word, line and character counts:
Old site html file: 134 words 878 lines 14468 characters
New site html file: 237 words 465 lines 8244 characters
New site CSS file: 120 words 276 lines 2533 characters
Thus the new site is quite a bit simpler if we're counting lines and characters. It loads faster too.
The Python Jupyter Notebook "make-web-site" generates the site from scratch using simple rules:
make-web-site does an external ls, and enumerates a list of directories that contain content.
It prints them in triples, and these can be compared to the current version of the site.
The enumerated list is used to build the index.html for that directory using a couple of Python functions:
These functions are then called to generate each row of buttons for the site:
The resulting html can be copied straight out of the notebook and dumped into Dreamweaver or any other tool. Then the HTML and CSS files are uploaded to the server.
The look and feel of the website uses CSS Grid and is contained in the file index.css.
Watch the scrimba to figure that out.
Assumptions:
1) That each folder is the location of content and contains and index file
2) That there is an images directory that contains an image file for each folder
3) We will assume that each content directory starts with an uppercase letter
4) We will assume that the images directory starts with a lowercase letter and is named, "images".
These assumptions can be violated by giving different arguments to the functions:
That's it!
Now this was just the index file of a thousand page website, so obviously there is more to do, but I was happy with this approach.
