Leo's Work Showcase

Introduction

During the Summer of 2021 for 8 weeks, Leo JD Ridgwell worked as part of an internship between Coventry University, Santander Universities and Ambitious about Autism as part of the Employ Autism programme. This is a showcase of the work that was done during these 8 weeks. You can check out Leo's personal site and contact him at https://leo.ridgwell.family

The Outdated & Original Website

Displayed on the left is a Video showcasing the original website. The original website was developed by the CEO Richard. The original website didn't seem to follow or have any theme. Each page of the website had a large picture (or a slideshow) as the page title, and each section was split up using borders and smaller images as subheadings. On mobile, the website scaled correctly but a lot of elements looked odd. For instance, there was random green borders on one side on the mobile version. The website felt and looked heavily outdated for a modern website in the year 2021. It looked more like a website from the early 2000s. It also didn't very good clean and search engine optimization (SEO) friendly URLs which can make it much harder for the website to appear at the top of the results in search engines. The website also wasn't secure with HTTPS and SSL. Something needed to change.

The Remake & Transformation of the Website

Reorganizing & Cleaning the Code

A lot needed to change to bring the website up to a modern standard. The first change involved reorganizing the files to be more easily accessible and understandable. Assets were moved into there own folder named assets, scripts and stylesheets were organized into separate folders and all html pages were switched into php files, allowing PHP to be used globally across the site. The original site used JavaScript to inject the header and footer into each page. This causes unnecessary loading on the client side for each page that is visited. This was changed to use PHP to place the header onto each page which means the server loads this rather than the client.

Implementing a Framework & Switching to Locally Hosted Scripts

The website was starting to come together and become a modern website, however, the website needed a framework. This basically would provide the default styling that would be used across the website. The choice was between Bootstrap & Materialize . I decided to use Bootstrap as Bootstrap is an amazing framework and I prefer Bootstrap over Materialize as I don't want every site following the Google Materialize style (which is what Materialize does). After deciding on a framework, I updated all the scripts and libraries to the latest version and downloaded local versions of all the scripts to increase the performance of the website.

Making the URLs Pretty

Another issue with the old website was that the URLs were not very search engine optimization friendly. As explained before, this can impact the search engine results and make it harder for the website to be noticed. To fix this, you can make URLs prettier which involves removing file extensions from URLs (where possible) and moving website pages into categories. The way I have accomplishing prettying the URLs is by using a file called .htaccess which web servers check certain conditions for. I accomplish the categories by using a custom made PHP script that simply injects the page content into the page the user has directed themselves to. This allowed me to add custom error pages as well.

Implementing Dark Mode & Final Touches

The website was nearly complete and I was coming towards the end of my internship. During a meeting, we discussed about how websites and apps are using light mode and dark mode and how cool it would be to implement on the website. I thought it would be quite hard to do and I had never tried to implement dark mode before. But after some coding, trial and error, lots of coffee, I managed to create a script that would toggle the website between light mode and dark mode. It simply adds a dark-mode class onto the body which changes all the styles in a separate dark-mode stylesheet. I improved the code to set the default mode based upon the user's default device option. And I set it to save as a cookie so if the user comes back to the website, it will remember the option they chose. I than added some finishing touches and the website was done. The new website was pushed. I helped the CEO to setup HTTPS on the website using Cloudflare. I helped fix the demo code to work with the new HTTPS change. I worked on the presentation but I ran out of time and never managed to finish it. I also added support to display a page if the user's browser doesn't support JavaScript or is outdated and unsupported. The 8 weeks was over and to the right is a video showcasing the finished and final website.

Overview

This was one of the biggest and most challenging projects I have ever done. There was so many things that I didn't know how to do and although, I had years of coding experience, this was the first ever project that was being done for a client rather than as a fun project in my free time. I managed to implement and learn how to code so many new things, such as:

  • How to Setup dark mode
  • Converting an entire website to use a different framework
  • Prettying up URLs
  • Implementing HTTPS on a website for free
  • Making a mobile compatible website
  • And much more

It has been an amazing, stressful and enjoyable 8 weeks and the information and knowledge I have learnt will be used on future projects for years to come. Thank you Richard for this amazing opportunity.

Written by Leo JD Ridgwell | Updated 13th August 2021 | Archive