A Battle Against Myself

When I started to build my own web pages, I found that it was in fact a self-battle game. I never knew when was the time to stop as I always wanted to add more elements to my content and beautify the page.

I mainly made two versions of my homepage, moving it from a basic and simple design to a relatively more mature one.

This was the first structure I developed at the beginning – only the basic requirements of the assignment were satisfied. It was a navigation bar but I tried to make it more attractive by adding a hover effect and harmonizing the colors. But I still thought it looked quite dull and stiff, so I searched online to see the navigation bars from other websites. Fortunately, I got a clue. The secret may lie in the box shadow effect they had. So I imitated it, and this effect really enhanced the texture of the navigation bar by highlighting its depth.

However, I was still unsatisfied with this project. It looked quite static! I did want to have some more dynamic elements, like the typing animation, to welcome the visitors or keep them interested in reading further. Then, I searched online on how to achieve it and I did realize it by using the typewriter effects. However, one problem was that this effect would also influence the navigation bar and I had no idea how to solve this even though I tried many times.🥲🥲 Thus I decided to drop this version and designed a new one instead.

So it came to the second version of my homepage. Firstly, I draw the basic layout of the website and picked a picture online. I had to say that the decision of the photo was quite important as the layout and colors usually have to go with it – a lesson I learned from the design of the first version. In this version, I followed the traditional layout of a website with the header and navigation bar at the top of the webpage and content occupied at the center-right. Apart from the five basic bottoms that would target the assignment pages, I also added a bottom to track my reflection journals. This could make the homepage as a “learning garden” more integrated. After the overall layout has come out, I also did some fine-tuning to beautify the homepage.