Choice of Framework

For our framework we decided to go with Bootstrap due to its simplicity and easy options of customisation. We initially wanted to go with React but due to time limitations and the fact that the focus of our project was the inner workings of the backend rather than the frontend we went with the option of Bootstrap.

Initial site design

For the longest time the hardest aspect of this site was deciding on a colour scheme that fit, we didn’t want to go with a dark mode fully as we didn’t feel that it fit the style of our project, eventually while showing the project to a friend she suggested the colour grey, and it worked! And that’s what we stuck with. The next issue was, what do we actually have on the front page? We knew we needed some form of button to request a container and some form of way of selecting your linux distro, but what else? We decided on the idea of trying to design some form of call-to-action to grab our potential user’s attention. Then we had the idea of rather than a still image, how about a gif showing off our container running! So we went off, ran the container, recorded a video and turned it into a gif and embedded it on the front page, and it looked good.

Other pages

We needed more than just a home page, so we decided on adding a quick about page with basic information on what hopper is and what you can do on hopper, and an exercises page with some sample basic programming exercises that people could do as a test in the container.