My First Webpage Created with HTML/CSS: Struggling While Having Fun

Hi everyone! I just finished my first webpage development with HTML and CSS. You can check it here (Please use Google Chrome to load the page).

Actually it was not an easy thing to do, at least for me as a first timer, and I have encountered numerous problems in this process. But fortunately, with the aid of what we have learned in class as well as the informative online resources, I drafted a skeleton of my webpage eventually!

Basically, my webpage is inspired by most of the luxury brands worldwide, whose official websites are both simple, easy and graceful, with less texts but more images and videos. I personally love this style very much, as it kind of represents a sense of nobleness and uniqueness. Thus, in the following part, I would like to explain my webpage more clearly from function part and aesthetics part.

For the function part, I basically consider this webpage as an official portal for art or creativity related companies when designing the structure and content. So for the navigator, I also included a “Homepage” section apart from the other 5 required ones for listing all the assignments. Then you may find a narrative and two buttons. These are to direct the user to see more of my personal sites to help them have a better understanding of my portfolio. The next one is the footer, which introduced four more aspects that I think are necessary for people to not only know about me, but also proactively interact with me in the future. Besides, since I’ve said that this is supposed to be a corporate official website, I’ve also given a section for newsletter, which I believe is quite a common but useful one.

For the design and aesthetics part, I tried my best to keep this webpage simple, short but visually impressive. First, I placed the banner, which includes the headline and the navigator, on the top of the webpage, to make it as clear as possible. Also, I adopted the black and white color to further highlight the text. You may also notice that when the mouse hovers on the text, there will be a blue line (Tiffany blue!) underneathe. Second, the main body of the page consists of an autoplayed seaside video, white texts and two transparent buttons. All the texts in this part are in white, because I think it perfectly matches the look and feel of the background video, and the two-sentence narrative was set 80% transparent to show its affiliation to the title. Lastly, the footer was designed with both texts and mini-icons to add more graphic elements to the webpage and make it more rigorous.

Overall, this webpage is created in minimalist and elegant style with holistically designed elements. Despite all the struggle, I personally enjoy the excitement and the “WOW” moment after you finished the webpage. I believe this would somehow be a proof of my web development ability (maybe not that solid but valuable), and I’ll probably further refine it into a web design portfolio in the future.

That’s all for my journal on the first assignment. Thanks for reading!