My First Webpage

Hi there! This is Leo. Thanks for your interest in my website.

In fact, this is not my first time dealing with HTML. I have tried to teach myself about web scraping out of curiosity, in which understanding the structure of a website is one of the most important tasks. So, I knew something about HTML, but my skills were limited to using “inspect” to check the structure of a website and find the information I want. Creating a website on my own is still a challenge. Thanks to this course, I learned more about front-end coding and got a chance to build my first website.

Basically, I followed the tips for HTML & CSS composition shown in the lecture – set up the page skeleton in HTML, then determine the overall layout by displaying it in grid/flex, adjusting widths and box positioning, and finally change the margin and padding of each box, as well as color and size of the font to make the page more aesthetically pleasing.

The layout I designed is traditional. It is divided into three parts: the top is the header, which includes the navigator; in the middle you can find the main contents, and it is further divided into two sections; the footer is on the bottom. I adopted this common layout because it matches our reading habits and is neat and clear.

In the process of beautifying the page with CSS, I found that I needed to constantly return to HTML to adjust the structure. For example, when I adjusted the aside section (the middle left part), I hoped that the two parts of words (in different tags) could be centered as a whole element, so I added a new container as their parent element, and directly change the position of this container. I think this is quite similar to the group function in PowerPoint. In addition, when trying to center elements, I found “flex” very useful. Even if there is only one child element under a parent element, we can still center the child element by using flex and justify-content/vertical-align in the parent element.

Kind of funny to say, even though my website looks simple, I spend a lot of time picking colors and looking for background images, always trying to see if another set of colors and another image might be better. It seems that I need to gain more knowledge about visual design (lol), here are two helpful websites when I considering these visual elements:
(1) Adobe Color
(2) Unsplash

Finally, I also tried to make a responsive layout. I use the units “rem”, “vh” and “vw”. To facilitate the calculation, I set the font size of the entire HTML to 62.5%, so that 1rem is equal to 10px by default. Additionally, when testing, I found that the words in li would be divided into two lines when zooming in. The solution I got after Google is to use this:

li {white-space: nowrap;}

However, though I tried, I still didn’t make it to make a responsive layout that could fully adapt to mobile phones. I wish I will be able to do that when equipped with more front-end coding skills.