Feels Like Riding On A Roller Coaster

Hi everyone! I would like to my share my design process and some encountered difficulties when I was developing my first website in my life. Welcome to visit my website here!

Before starting to create the website, I tried to think of the overall layout and style of it first. I enjoy simplistic style very much, so I would like to keep the website clean, clear and visually pleasing. I first created the navigation bar with a basic design at the top of the website as it is an important element in the website directing visitors to their target pages. I then added an image which I had downloaded from pixabay as a background to the website instead of using a plain color background. However, the image could not cover the whole page when I had specified 100% for the height property, I then watched the self-learning videos and found that the value should be 100vh. While the original image had been a bit dark so I wanted to increase its brightness by adding a transparent white overlay on it. I then had my second challenge in which the overlay had been kept larger than the background image making additional white space at the bottom of the page. In this way, I reviewed the code and realized that the position property had been missing in the both .container and .overlay selectors. While the overlay also affected the navigation bar when I had specified the top property as 0. I tried to debug it by searching for answers online and learned a new property, z-index, which allows us to specify the stack order of an element. After that, I added text to briefly introduce my assignment. In order to make it easier to read, I decided to add a transparent black background for it. I had specified the background-color property as black and the opacity property as .6, but it also affected the text to make it become transparent and hard to read. Therefore, I watched videos to find out the solution again in which I could use rgba property and specify its value to rgba(0, 0, 0, .5). In this regard, only the background became transparent and there was no effect to the text. when I thought that the website had been already finished, I suddenly found that the shown text could not be selected. I tried to look at the code again and realized that the .overlay selector seemed to overlap the .box selector, so I added the position property as absolute and the problem was solved. The whole process of developing the website was like riding on a roller coaster, I was so excited when seeing the website to be gradually developed, but suddenly feeling down when what it was showing had been out of my expectation and then gaining double satisfaction upon solving it!