For this project we had to create a website portfolio using HTML and CSS, showcasing our University work and any other projects we have completed outside of University. We had to write an “about me” section with around 250 words, add our contact details and show a minimum of 5 projects.
My starting point for this project was to think about the navigation of the website. I decided I am going to have 4 main pages which will be accessible through a navigation bar. These include a Home Page, Projects page, About page and Contact page.
I also started to think about how I want my Home page to be laid out.
For this project we had to create a website portfolio using HTML and CSS, showcasing our University work and any other projects we have completed outside of University. We had to write an “about me” section with around 250 words, add our contact details and show a minimum of 5 projects.
Using Adobe XD I made prototypes for every page
Through Out this project I want to include as much motion and animation in my website as possible, to convey what I enjoy the most. I also think it makes the website more immersive and will keep people interested, investing more time navigating around. I am already confident with HTML and CSS, therefore, I want to introduce some JavaScript to become familiar with it.
The Hero section is the most important part of a website, as this is the first thing someone will see when they load my website. Therefore, it is important to make a great first impression. I decided it would be a good idea to make a motion graphic as it would be eye catching and more interesting than a still image.
I created a 10 second 3D design inside after effects. Which will be played on loop on the website.
For the Projects Pages I created small animations in after effects which when clicked will lead to a page talking about the project.
I have seen lots of websites which scroll horizontally, I thought the project page would be a great time to try it making a unique layout. I had to learn a bit of JavaScript to create this.
On the About page I wanted typography which would move when you scroll down the webpage. This was an idea I had for a design for the hero page.
Once again this requires some JavaScript.
We got into groups of 4 and tested eachothers websites, which was very useful to get a pair of new eyes to look thoroughly through my website.
We gave eachother feedback for improvements to improve before our hand in date.
From this project I have found a passion for creating websites! I feel I am very confident using HTML and CSS, and have started to understand and introduce JavaScript too. Which is a very powerful tool to add cool animations to websites to make them unique and more immersive.
I really enjoyed using After Effects to create motion designs which can easily be added to websites to elevate designs from a static design. In the future I would love to explore some 3D softwares and creating a website with 3D elements.
After This project, I am going to keep practicing coding and web design to get to grips with JavaScript as I really want to continue web design in the future.
Codegrid (no date) YouTube. YouTube. Available at: https://www.youtube.com/@codegrid (Accessed: March 9, 2023).
Create isometric 3D motion graphics in After effects | tutorial (2022) YouTube. YouTube. Available at: https://www.youtube.com/watch?v=Xn6K3B8X7W8 (Accessed: March 9, 2023).
How to create a responsive 2 column layout using HTML and CSS (2022) YouTube. Available at: https://youtu.be/rYdaiE5virI (Accessed: March 9, 2023).