https://imanas.shanghai.nyu.edu/~zc1151/commLab/week2/css/index.html
This is the Portfolio page I built for the in-class CSS exercise.
I followed the instruction and firstly set different background colors for each div so that I can get a better sense of the different components of the web page. Then I started to work on formatting the positions for each component. I set the positions of the heading and the bottom components to be fixed, respectively at the top and bottom of the page, and align the items to center. I then created a container div enclosing the navigation and content div, and set its position to be absolute. I used this container div as a parent element of the navigation and content parts. Once I set its absolute position, the block moved to the left top and covered the other contents. I adjusted it by setting its width and heights as well as its distances to left and top. The position of the navigation and content divs are also set to absolute, and I adjusted their layout in relation to the container element.
The next step is to set the flex object of the photo in the contents. I set the content and content-box to flex in row direction, and set its feature to be wrap. I also adjust their sizes accordingly.
This is how the page looks like before I hid the colors.
Finally, I removed the background color of each part and this is how the web page looks.
