Cave of Programming Latest Site Redesign

As you can see, I've redesigned Cave of Programming again.

The site is, admittedly, a bit more salesy. I've turned the top of the home page into one massive ad for my courses. Although I've long got a bit of a kick out of having a site that almost looked like it wasn't trying to sell anything at all, I've started to think that perhaps not really trying to sell videos properly might be a bit rash.

Another factor in my decision to redesign it was that several people commented that the site looked quite old, in contrast to the courses section, which is designed and created by Teachable.com and not me.

I'm more of a software developer than a web designer, and my site did kind of look a bit like that is the case.

Hopefully the latest version of the site is more modern looking. I've drawn tips, information and inspiration from Filip Kordanovski's excellent HTML5 and Bootstrap course, Build a Responsive Website with HTML5, CSS3 and Bootstrap 4

How This Site is Built

Cave of Programming consists of two subdomains. The courses subdomain is provided by teachable.com. They provided a whole system for streaming video courses, managing users and accepting payments. All the videos I've created on programming can be found there.

The www subdomain, which you're looking at now, was created by me and was originally set up in 2011. It consists of articles about programming and pages with embedded YouTube videos from my free courses.

Originally this part of the site was created using Wordpress, but a while ago I decided to move to a pure HTML and Javascript-based system. This was partly because it unsettled me slightly that my site could break if I updated Wordpress and plugins got out of date. And I wondered if a purely HTML-based site might not be slightly faster.

So I laboriously migrated the site to pure HTML using Jekyll. The export took me days and involved a lot of Perl, and I'm not really sure that it was worth it. But I did enjoy the chance to design the site using HTML/CSS only.

To create self-updating pages like the list of all articles I had to write some stuff using Jekyll's Liquid template engine and even do a little bit of Ruby. Comments are provided using Disqus. I've also used Bootstrap heavily so that the site re-arranges itself for smaller displays and to create the navbar at the top. I used Add to Any for the share buttons at the foot of the page.

The latest version also uses Font Awesome for some icons.

One cool thing about Jekyll is that you can write your CSS as Sass, which allows you to use variables and other stuff in your CSS stylesheets. I only discovered that after I'd finished my CSS, but I went through and defined the main colours used in the site as variables, so they are easy to change. I actually designed the site as mainly orange to start with, then switched to green. Maybe I'll switch again!

To create this latest version I used the excellent Brackets text editor. My first reaction on hearing about Brackets was that it's just another Atom, and I was already using Atom. But it turns out that Brackets is specialised for HTML does seem a bit nicer than Atom for that purpose. I installed a few plugins so that I could auto-complete and auto-format HTML, and check my Sass.