1st Assignment: This would be my first personal site!
Dear All,
Welcome to my first HTML page with CSS design. Here I would like to introduce the thinking process while designing this page. You can also check out my website here.
First of all, I consider this website as my first personal website, which could be used to introduce who I am later then. Therefore, I put my name on the top line of the page. Following this idea, the function of “About Me” and “Contact Me” are added as a sidebar next to the heading. As for the “About Me” function, it is linked to my LinkedIn page, so that I do not need to cover all the information once again and people can easily build connections with me via this popular social platform. In order to raise people’s attention, I applied to hover function on the sidebar to highlight these functions as well. Regarding “Contact Me”, I have not included an external link since I do not have other communication accounts that are open to the public besides LinkedIn so far. The second part, the catalog, is essential because it is the required function in our first assignment. In the first HTML draft, the content of the catalog was considered as the main body of the page, and the main body, which is the reflective essay, was missing. However, I felt like it would be a little bit boring and empty if finalising the page as that. Therefore the article reflecting my design thinking process is added to the main body. Going back to the catalog section, only “assignment1” have the hover function and URL because other assignments have not been introduced so far. The last function is the footer. This is included because I think people who are interested in my experience, as well as the skills used to design this page, would like to check out which uni I went to and which courses I have taken.
Apart from functions, the design aesthetic is also worth mentioning. I firstly used a picture taken by myself as the background picture, and then adjusted the background colour, colours of the text, and font family such as “fantasy”. By the way, font-style “fantasy” appears in different ways via google chrome and safari, which is quite interesting. However, this kind of design is a little bit “old school” that does not match trendy website aesthetics nowadays. Keeping with the idea of “less is more”, I deleted that background image and put it in the main body as a supporting image of this article. Meanwhile, it would repeat on the y-axis. I still keep the background colour to avoid being too boring and the colour also matches the color of the image. Besides, I use the flat font family as it is closer to the “modern” aesthetics of website design. Now it looks like a modern newspaper page, I guess.
That’s all about this page, my first HTML/CSS design. Thanks for reading.
