Building a website - This website

Once upon a time, a little over a decade ago I used to own this website. It was a simple website that I used to play with things like HTML, CSS and a little bit of PHP. When it expired, I never bothered to renew, and time moved on. More recently I wanted to get back into the web development and it seemed only natural to re-register this site.

The first things I needed to work out is where to buy the domain, and where to host it.

Purchasing the domain was fairly easy to do, there were loads of options, so I thought best to start by working out hosting and if they offer domain purchasing too then great.

For hosting I wanted somewhere that would let me upload HTML files directly without using a website builder or wordpress etc. I knew the few things that I knew I would need from last time including:

• Direct file update
• PHP - Allows use of PHP, did you know this is not always included?
• Email - Again not everywhere offers this or it's an expensive extra.
• Positive reviews.
• Easy enough to use for a novice like me.
• takes payment in GBP, I don't want to pay a conversion fee on payment. It seems silly but it's the sort of thing that annoys me.

The first time I owned this website I hosted it for free though 000Webhosting, however these days I could find nothing but negatives, plus I'm not really over how long they took me to tell me about the data breach in 2015 including plaintext passwords. Anywhere using plaintext passwords is somewhere I can't trust.

After a bit of googling, digging around on reddit I was presented with loads of options and recommendations. There are big names like Microsoft Azure or Cloudflare however Azure is not very user friendly, and both have dynamic or unclear pricing so I didn't know what I would be paying each month.

Eventually I came to looking at Squarespace and GoDaddy which both seemed to offer everything I needed. In the end I purchased the Domain and hosting for a year from GoDaddy. They have a paid email option, but also free email through Cpanel, allow the use of PHP to run scripts and generally have positive reviews from what I had seen. This is where it goes downhill.

Getting started

I expected it to take a little bit of time for the DNS to update so in the meantime I used Bing chat to create an image of a train and updated the website coming page to less boring. Once I did this, I opened the page and got hit by an Ad. It turns out that despite purchasing both the website and hosting from GoDaddy they default to the domain being parked. Although annoying this was not the end of the world and following this link I got this updated fairly quickly.

The next thing I wanted to get working was email. Back when I owned the site before I had emails set up and one of them still worked with the emails being sent and received though my Gmail account. Why this only email still worked I did not know but it does turn out to indicate a new problem. When I created a new email address and a catchall email address (called default email in Cpanel) I could send emails but not receive them. This stumped me for a little while and eventually I contacted GoDaddy support though chat and it turns out I needed to set up DNS for this as well, and they updated this for me really quickly.

Once all my DNS fun was sorted my next issue arose. Any time I opened my site I received a "Your connection is not private" error in chrome. Most domain providers will arrange this for free with no fuss, so I was sorely disappointed to find GoDaddy trying to charge nearly £100 a year for the privilege! Looking at my options through CPanel I did find I could upload my own certificates if I can find somewhere to sign these, but you have to do this every 60 - 90 days. With many hosting providers you can use lets Encrypt to automatically update these but this does not work with GoDaddy. Clearly with the intention to try to get people to pay for their excessively expensive certificate service. In the end I ended up using a tool from PunchSalad to generate the certificates then uploaded this manually. They will expire after 90 days this is a problem solved for now, and I have a reminder set up in my calendar.

For someone aiming for low barrier to entry and an easy to use service I sure hit a few problems along the way. Time to start actually building the website!

Time to start building the site

Where to start was a bit of a challenge. I had an idea of what I wanted. A fairly simple style of webpage, reminiscent of the internet in the late 90's (without the auto playing music), but maybe a little less 90's. I wanted a logo of a train top and centre, a sidebar navigation menu on the left to get around the site, and no website builder.

I started with the easy things, the logo. I wanted the logo/header to be a simplistic train image. Started with an image I made though Bing Chat and modified from there. I really wanted a 4-2-2 train, but this was acting as a placeholder during the initial build, then got modified again for the mouse over train in the sidebar menu so I decided to modify again and keep it. Any editing was done using GIMP in fairly simple ways. Nothing to fancy here as this sort of thing is not really in my skillset. Learning to make websites is enough for now.

Train wheel codes explained - Whyte notation

Challenges faced during development

The sidebar menu position was my first area of development. Initially I gave this an fixed placement (so it remains in place when scrolling down) with the width of the main content set to 100% - 250px (width of the sidebar). This was producing issues when zooming in and out, or different size screens. I realised fix was a separate area or column for the sidebar as these would need separating. This would help avoid an overlap with incorrect zoom levels.

After some googling and using this from W3Schools which showed me how to build a 2 column layout. This also opens up flexibility for future changes such as a third column or similar.

Reviewing my code I was becoming painfully aware that putting my sidebar in every page means updating every page anytime I want it to change. This was going to be come a lot of work without automation. After a dozen pages this would become unmanageable. I looked at some options but felt to the easiest would be to use IFrames to load a single page that was shared across all pages on the site.

The problem with IFrames is links then open within the IFrame rather than in the main webpage. After a quick google I found I can make the link opens on the main page I can use <base target="_parent">. This seemed to work great at first and at the time of writing is still in place in this form.

When looking at my navbar I saw a risk of a large number of projects taking over my navbar, or not including these on the navbar and they become hard to find. I decided the best thing to do was to put the projects list under a dropdown. I later discovered what I actually wanted was an accordion menu.

You can use the navbar on the left to see a accordion menu.

At first I was having problems with the added dropdown menus causing issues with my little train animation as I had multiple things triggering and glitchy behaviour. After a while of trying a few things I came across this from W3Schools again.

This seemed to work well at first, however the way it interacted with mouseover image eventually I gave up with this, instead opting for a central projects page with links to each project. I did still want some sort of extra menu for these, eventually I found this which did exactly what I needed.

Moving content to IFrames

Looking to make updating the website easier I did the same thing for each of the pages of the website (at this point this was Home, Projects, Contact and 404). Naming this IFrame “main” I can then update the base target in the sidebar menu to <base target="main ">. This means rather than a whole page I only need to add the small amounts of code needed to build the content for each page. Remember this is all being done manually in Notepad++ at this point.

For a while I had issues with the height of the IFrame as this needed to be the length of the page it was loading, and if it changes it creates a second scrollbar. Nothing worse than 2 scrollbars next to each other to confuse everyone! A quick train ride to stack overflow I found this page and borrowed some very neat code from mbedzah on Stack Overflow that did the trick.

This let me check the height of the IFrame contact, then update the height of the IFrame to get rid of the second scrollbar. Much Better!

As I first started writing this section I was thinking about what this would do for the usability of the site, and I realized that this mean if someone comes across one of the pages from google they will get a blank page with no title, sidebar or other content. E.g https://www.trainsrule.co.uk/blank.html While this works for the quick answers it does not work well to keep the site looking uniform.

What this means is an hour of messing around with IFrames, moving the (admittedly 4) pages of the site back to proper pages with the content as part of the main page. I did have a look at ways to create pages using PHP as you publish the site, however I am currently manually uploading files to the site so this won’t work for now. Maybe in the future I can look at updating? Time will tell.

Writing my first projects page

As I started writting this page I know it would take some extra work over writing in Word or a website builder but for how I am updating it this is a trade I am happy to make. Eventually I might swap out Notepad++ for something fancier but for now this is fine. As I started writing this there were a few more things I needed to learn

For basic text I am using <p> tags, line spacing with </br> tags, and titles with <h2> but this does not cover everything I needed. As I started writting this page I wanted to include a list of requirements with bullet points. I could add these manunally but this would not be 'neat' code or super acceessible. I found using <ul> and <li> tags to create this worked well. Again I used W3Schools to find this.

The next main update I wanted to find was the new accordion for the train wheel arrangements. Lucky for me W3Schools had the answer so I modified this to fit the design of the website and popped it in. When building this I set it up so I can use this in future any time I want for more hidden information boxes

The last problem I had was the dropdown example so I used this from W3Schools. Although an example already to go I wanted to update it match the colours and how I have updated the site. I am going to pretend this didn't take me nearly an hour and a cup of tea to add.

Reflecting on the project

Now I have built the site and it is mostly it gives me a space to blog / write about / ramble on about my future projects, and the projects I am part way through. This is also a project I can update later from a laptop on the sofa so can be done fairly easily, rather than a project that needs to be at a desk or workbench. As I get time I will look at adding various bits to make the website more functional, or easier to use. I think the first few bits will be:

• Hit counter
• If I can I want this to be per page, so I might end up using something like Google Analytics to do this, but then I will have to add a cookie banner which I don't enjoy.
• Update the home page for new pages
• Information on trains and how steam trains work
• Easter eggs
• I don't know what or when it will be, but I would be fun to have something.
• A Comments section
• I know I won't get a lot of comments, but if people could let me know their thoughts I think this would be really rewarding for me.

Lookings back over this I think if I were to do this again I would take pictures and screenshots as I go along to be included on the project page. Where I remember I will do this for future projects but if I remeber to do this remains to be seen.

Thanks for reading, if you want to get in touch or have any comments you can get in touch please send me a message to Hello@TrainsRule.co.uk and the next mail train will pick up your message.