This assignment was split into two halves, design and then develop, this will become a recurring theme as I write more assignment showcases. The brief for this assignment was to create a modern responsive layout and incorporate some JavaScript as well as using PHP to send a booking request via email through a booking form.

The brief was to be applied to Allegria which is a real restaurant based in Lytham-St Annes which is just south of Blackpool, this came about as the module tutor is friends with the restaurant owner and felt their website needed updating and would allow the class to work from a real world example rather than something entirely made up. Once the assignments were handed in it was intended that the owner of the restaurant would judge the various websites and pick the best one with the chosen website winning a prize, however this never happened as the pandemic hit early in the assignment and all teaching moved online as well as restaurants closing for the period. 

The screenshot below will highlight the current state of the Allegria website, by modern standards it is fairly shocking and this is an improvement from 2020, the restaurants menu is available unlike an earlier version, however it is in the form of a PDF which is not presented in a way that is easily read on a mobile device.

While I would never consider myself a designer or use that title I feel like the design I came up with better reflects what a restaurant website should look like, in my design the menu is presented to the user without any additional steps as well as being laid out in rows and columns like a traditional restaurant menu, with two columns being displayed on larger screens while on smaller screens the menu collapses down into a single column that fills the screen. I will give way to some feedback I received from my tutor after the assignment had been marked as the tutor believed the layout would be better presented if each subsection of the menu had been collapsible to reduce the amount of scrolling required to read the menu fully.

The working version of the site I created is available here, the layout of the website was created using CSS Grids, this was my first real attempt at using Grids and I instantly fell in love with them as they make creating layouts incredibly easy. Grids coupled with Media Queries are even better as mobile layouts become almost trivial to create, I prefer this way over using a CSS framework like Bootstrap any day of the week.

Additionally this was my first time using a CSS pre-processor in this instance I used SCSS, for a few years I avoided looking into SCSS/SASS as it seemed to be too much of a hassle to get set up but thankfully there is a simple application on Windows called Koala that will compile SCSS without much fuss. Despite my initial hesitation I found SCSS to be very helpful as I declared the colours that I was going to use ahead of their actual use in the CSS allowing me to cut down on repetition of writing out hex codes.

Aside from the visual side of the website the restaurant food menu is dynamically generated using JavaScript and a JSON file containing the subsections and each menu item, the time it took to transcribe the food menu was longer than it took to write and test the script that reads the JSON file and generate the appropriate HTML

If I was to do something like this again I would probably make use of a JavaScript library like React at the time I was more concerned with keeping the project simple and easily transferable for marking purposes.

The source code for this project is available on my GitHub if you wish to look at it further.