( Link to the code for my website: Google Drive Link )

In those reading, I learnt the differences between different ways of positioning blocks or images, for instance, “relative”, “absolute” and so on. These idea really helped me to further understand how to make “underline animation” for buttons. Besides this, I used to be confused about how to position images and text, without using “position:relative” or other related code. Sometimes, I only used “padding”, “ margin-left/right” or even “top:xxpx;”, to help me position text and images.

Also, from W3school, I learnt how to stylize my link and made them look more delicate. For me, I really hate those underlines of links and the original color that was put on the link. However, when I first discovered the way to stylize the links by creating specific “class”, I actually wrote those stylizing code in the class outside the “<a href = “#”> </a>”, and nothing changed, no matter how I changed my code and other things. Suddenly, I realized I might need to try to embed the class inside the “a href”, like “<a href =”#” class=”blablabla”> </a>”. Then, everything would work well and smooth. This would be the most “significant” takeaways that I acknowledged from stylizing links.

Besides the actually “coding language”, I also learnt how to organize my code in html, which would save me plenty of time while I was doing my CSS. I understood the way to write “div”, “menu”, “section”, “header” and so on. By having all those categories, it would be convenient for me to look for the code that I need to add, delete or modify. I really enjoyed how html code can be organized in a structure that could made the overall “boring” code in a clean and neat way.

Nevertheless, I used to believe that it was impossible to put a “div” or “p” inside a “ul” list, but from this week’s assignment, I realized that everything seemed to be able to put together and organize them in a clean way.

What’s more, I tried to learn some tricks of how to make simple animation from Youtube. I believe it was actually quite easy. The only thing that I needed to recognize is the code “:hover”, and put into the changes I wanted to make inside it. It was relatively easy to create effects.