Four Elements: Links


Natural Forces


Natural Forces Presentation


Four Elements: Future Developments

One of the main things I would like to improve is to completely finish the site, and make it 100% responsive. I checked the website on different screen sizes, and noticed there are a few elements making this site none responsive, such as the map at the bottom of the page, and the ‘learn more’ button. And also make more of the website CMS instead of just one element of the website.

Also the research and design stage I believe I could improve on that, managing my time better and spending more time researching and creating the design, as you can see my website has a different colour scheme and a slightly different design, which is something I feel I had disappointed myself when it comes to the design process because its another aspect I really enjoy.

Overall I enjoyed the module, and again feel as though I have learned a lot not only about the work but also myself, and has highlighted key areas with me that need improvements. Even though the website was not 100% completed, and my final design wasn’t the same, I also believe this project was highly beneficial for me and have come away with a greater understanding of the development of a website.

Four Elements: Evaluation

Throughout the process of developing my final website for this project, has been a great learning curve for me. I created my website without using a framework, and I have learned a lot from using pieces of code that I have never used before, such as CSS media queries and also using a bolt on CMS ‘Couch’ to allow some of the content on my website to be editable, and also creating a video background for my website which I believe I took myself a step further when It comes to creating my website, this is something I have never done before and it has taught me a lot.

Overall I believe my understanding of code, and the development process has improved on a whole. I felt constantly challenged throughout this process, and has further interested me in the coding side of this industry. I feel as though I have learned a lot about the marketing aspect also, but is something I feel I could improve on in relation to the research of marketing, and developing a final marketing plan, but that’s not to say I don’t understand it.

This project has thought me a lot of valuable things when it comes to my future in this industry, and I feel as though I could improve in certain areas but also feel like I am slowly getting there with both the coding aspects and the design.

Four Elements: Gallery

A very important aspect of this website is the gallery, because it can show off to the user of the website what they are instore for, but then again not giving away too much about the exhibition.

This gallery had to be responsive, and also use JavaScript to allow for the images to become large across and fill the screen to allow the user to get a better look at the images. I looked into a few different responsive galleries’ I could use and came across one which does exactly what I want it to do.

I downloaded the java-script and placed it into a folder called ‘JQuery-Gallery’, this java script file will allow for the animation on the gallery, and allow the images to enlarge across the screen.

I then created a link to the folder containing my ‘java-script’ file within my ‘index’ file, to allow for the java-script to work on my gallery.

gallery1Here is the code that I implemented into the ‘index’ file of my website, that allowed me to link my images into my gallery.


Here is screenshot taken from my website, showing the gallery and how it looks before selecting any of the images. The good thing about this gallery I have used in particular is that you don’t have to use two separate images, one for the thumb nails and the other for the larger images.


This gallery allows you to only use the large images, and then they are resized for the thumb nail images.

Here is a screenshot of the image enlarged, once selected via the thumbnail.


Elements Project: Implementing Video Background

One of the main things I noticed during my research into science museum, exhibition websites is that they all use some form of video, or imagery at the top of the website to give off the feel of the exhibition.

I decided to implement this but by using a video background, but I also had to make this responsive so it was accessible across different devices, and still holds its structure no matter what screen size the website is being viewed on, I came across some code that allowed me to do this, but that doesn’t use JavaScript.

My first step was to find a video that that fit the exhibition and gave off the feel and the emotion of my exhibition. Once I had done this I created a folder within my file tree named ‘Vids’.

Once I had my video up in the correct folder onto the remote server, I implemented the code into the index file that allowed me to add the video


Once I had added the video, I created a container using a class for the video, so I could set the width of the video to ‘100%’ within the style sheet.

Then within the ‘CSS’ style sheet I added media queries, to change the width and height of the video when it is resized down onto different screen sized. So the video could adapt and change its size, dependent on the size of the device it is viewed on.


This image bellow shows of the video background, it is fully responsive and can be viewed on the website I created. (Link on blog)