My first page using HTML and CSS

This is the first time I have developed my web page, and I have lots of fun with it. You can access my website here.

In the design of the menu page, I feel that the whole page is too empty if it is arranged horizontally, so I arrange it vertically. At the first time I used “ul” and “li” to make it, but later I realized that it was easier to use “div” contains “a” directly than to use “ul” then eliminate the original effect. The background of the page is filled with a picture, making the whole page more beautiful. Also, I add an image to make the page more balanced.

To make the page neater, I choose a two-column layout. Using flex-layout, the items which are packed as a whole and the image are symmetrically positioned and aligned. Five items are evenly distributed inside the packed “div”. I add different color borders to see the distance and distribution between the elements before removing them at the end. Also, I find that the margin size is better to use auto, which is more beautiful than the size I entered. To distinguish the text from the background, I add a translucent background and specified its shortest and narrowest value to prevent the text from overflowing the background box.

Finally, although not required, I try a responsive layout, using the flex-wrap feature, so that the page layout on the phone becomes a single column.