Activity 1: Setup Your Webserver

Screenshot of GitHub pageThis activity was a simple welcome to the class. All we had to do was set up a web server to be used for the duration of the class. I decided on GitHub Pages because I had downloaded a few programs from GitHub before, but I had never uploaded my own files to it and I wanted to learn how the site worked. Setting up the file structure was actually a rather simple task, but I did struggle at little with finding the website URL. At first, I just submitted the URL to the GitHub page, but later I realized my mistake and resubmitted the correct domain name. Aside from that error, this activity was very easy.

Activity 2: Styling Web Pages

Screenshot of Professor Thompson's Cats pageThis activity was a bit more challenging. In it, we were give the HTML to a website about the teacher's cats, and we had to style it by writing CSS. While this sounded fun, I unfortunately was very busy at the start of the week, giving me minimal time to work on the assignment before the due date. As such, I had to rush through the work, not allowing me to show off my full potential. I still am content with the color scheme and font I chose, but I believe the use of background image and decoration, as well as the amount of empty space, could use improvement. Overall, while there is still good qualities to be found, I believe I could have done a much better job if given more time.

Activity 3: List Based Navigation

Screenshot of Scratch navigation bar remakeThis activity was quite a fun task. The objective was to recreate a navigation bar from one of our favorite websites. Originally I wanted to do the navigation bar from the site Board Game Arena, but I realized it was a bit too complex for my level. Therefore, I decided to stick with something a bit more simple, and chose Scratch, the coding website. At first, I was confused by how to create the search bar and how to style an image into the navigation bar. However, by using the inspect tool on the original site and by looking at W3Schools tutorials, I was able to figure it out. All in all, I'm quite proud of how the finished navigation bar came out, and how it mirrors the original quite similarly.

Activity 4: Embed Audio and Video

Screenshot of Pinocchio-P music pageThis activity was also very enjoyable. For the assignment we had to make a webpage about one of our favorite musicians, embedding video and audio about them. I chose one of my favorite Japanese artists, Pinocchio-P. Because YouTube and Spotify already shared code for embedding their properties into a personal site, adding his songs to my website was rather simple. As such, I got to spend more time decorating the page and showing off my creativity. In the end, I'm happy with how I represented Pinocchio-P with my descriptions and use of audio/video. In fact, if I wanted to I could probably add more!

Activity 5: CSS Transitions

Screenshot of Animals of the Rainbow pageThis activity featured unknown content for me. The goal was to learn about the CSS transition and animation properties, then implement them in a website with a topic of our choice. As I had never heard of these properties before, I wanted to choose a simple idea so I could ease into the CSS. Using the rainbow for a subject was a great choice, as while the concept is simple, multiple details can be added to expand the content. After reading the articles provided, I experiment with transitions and animations and found them to be quite fun to use. Finishing the assignment, I felt like I had done well with the new topic, and was excited to use it in future work.