Link: https://imanas.shanghai.nyu.edu/~ys3041/project1/SusiePages.html
In the first project, I am trying to combine my Aboutme page with my portfolio page. So I keep the navigation part and replace the photo box with the content of my self-introduction. The whole layout looks quite like the personal portfolio. And I manage to do the adjustment about the boxes. I use the new code like {clear: both} to make the footer stick at the bottom of the website.
When I make the website, I meet a lot of difficulties. Firstly, I want to use a picture as my background. So I use body {background-image: url(â3.jpgâ)} to set the background (â3.jpgâ is my background image). Then, I find that the image cannot appear on the website. I try to change the order of the code, the background size, the website size and even the place of the images. They all cannot work in the CSS file. However, when I write <body background = 3.jpg> in the HTML file, it works. And then I adjust the size of the picture in the CSS file. Now I am still confused about why the CSS file cannot work. Secondly, the position and display of the boxes also confused me a lot of time. In the end, I still use float left on the navigation box. And I use a general div in my self-introduction, my selfie, my idol, and my hobby. Then, the self-introduction box uses one div, and my idol box and my hobby box use the same div. Last but not least, I use opacity for the boxes. What I want is to make the background color have 50% opacity but the words are in the normal. So I use opacity: 50% after the background color. However, it makes the whole things in the boxes have 50% opacity. Then I try filter: alpha(opacity) and rgba. I find that rgba work well in chrome.
After completing my whole work, I find that it is really important to read the HTML attribute carefully. If there is any question, the attribute website is the easiest way to find out the answers and solutions. I find there are a lot of problems to be solved. As what I mentioned above, the first problem is the background image. I think there is still some space for me to improve the basic part of the website. And this is still a very basic HTML website. I have no idea to make it more complex. And I also want to try to make a website with several pages.