https://apollo-11-1cb34d.webflow.io

For this project we have two different options, making an ebook or a website, and I chose to make a website using the free website-making tool Webflow.

Note: During the making of the website I realised that I did not have access to Helvetica, so I changed it out to Open Sans, instead.

Just like building any website, I used logic and the knowledge I have from writing HTML and CSS.

It began with the basics, making sections for each part using the prototype I made in Figma as a reference.

During my time creating the website I ran into several problems, which is expected when creating a website with little knowledge about it. But I saw it as a learning point, and I later on overcame the obstacles that came my way and were taught a lot on how to make a website, that would also be considered to be stable.

At the start, when I was piecing together the pieces for the Saturn V section of the website, I ran into my first problem. The problem was that the pieces didn’t want to stick together, after trying several times I decided to get in touch with someone that knew how to solve the issue. After receiving the help I could finally move on and was also able to apply the same technique to other parts which helped and saved me a lot of time.

During the time making the website, I also practised animations on each section to experiment and learn, but I realised quite early into making the website that it slowed me down. I made the decision to then add all the content and place it and worry about the animations afterwards.

After adding all the content I then moved on to animating almost every image and making it flow seamlessly. This caused many issues, not that it broke the website entirely but it was tricky because sometimes it wouldn’t work on the published website, or interactions wouldn’t work since elements would overlap at one stage during the animation which would break the interaction.

Whenever I had sorted out all the animation and interaction issues I moved on to making the NAV bar. The NAV I had in mind, in this case, is very different to other NAV bars that I’ve seen. I tried to look up how I would tackle the issue and make it, but couldn’t find a way online how to do it the easiest way.

I then had to experiment with what I could do, and what I would do if I made it myself with CSS. I then had to duplicate the icons that I had made and change the DIV size according to the scroll position. With that, I had a NAV bar that was reacting and indicating to where the user is on the page, which would also change the colour of the icons.