Web:Apex Cinemas
Description:
The idea for this website started when I was deciding what type of website I could build to challenge my skills using WordPress while also combining some elements I had learnt while working through a WordPress/PHP course on Udemy. The original website featured within the tutorials was for a fictional university. However, I decided that I would like to build a more original website which would be able to feature pages that would involve a sizeable amount of content management, as well as make use of Custom Post Types.
Once I had decided on the theme and basic structure of the website, I then decided to sketch out some ideas in a sketchbook so that I could flesh out my thoughts and ensure that I was considering the mobile viewport from the outset. I then started working with a new tool called Figma which I hadn't used before which allowed me to digitise my ideas and create a reliable mock-up to work from during the build stage. From here, I could work out a sense of scale of the elements without having to code anything but also experiment with different approaches and reorganise the pages until I was happy with the overall experience that potential users could expect.
After some time rejigging my layouts I decided on a clear set of typography with the Google Font Mitr, a strong and bold colour palette of greens, grey, white and black, and began outlining the necessary parts of the Udemy course I would need to further my learning and then started to build out the basic site structure in HTML, CSS & JavaScript. It was important that I added my own design flair at each stage, while incorporating UX staples such as a clear icon set through the use of Font Awesome.
When I was happy with the layout I then started to incorporate the site around WordPress' default pages and put together the necessary Custom Post Types I would need - one for films and another for cinemas. As this was one of my first major projects using PHP, I enlisted the help of forum members from Reddit to build out the mechanics of the film showtimes and film genre filtering to add more controls to the website, as well as making use of the Advanced Custom Fields plugin to create the necessary fields for each area of the website - general pages, homepage, single film pages, "Now Showing", "Coming Soon", and the individual cinema pages.
Following the full development and deployment of the website I then carried out full usability and visual testing using BrowserStack as well as physical test devices and ran full testing through the Lighthouse tool within Google Chrome to test the website's Performance, Accessibility, Best Practices and SEO capabilities.
