First, the link to all of my files for this website here.
PROCESS:
For this project, I decided to create a website based on my favorite traditional-inspired Chinese song 《泪蛋蛋掉在酒杯杯里》, or “Tear Drops in the Wine Glass”. The website contains a total of 3 pages. The first page is a cover page that has the song title and a few menu options: an About page and a Lyrics page. In each of the pages, Google Fonts were imported to create visual interest. A screenshot is shown below.
The code for linking to both the About page and Lyrics page is shown below:
The About page contains information such as the song artist, english name, lyricist producer, release date, origins & covers, and meaning:
Next, the Lyrics page contains the Chinese lyrics of the song. I played around with different font sizes, font types, and text alignments to add emphasis to certain lyrics of the song:
Both pages have a back button, which is essentially a link to the original index.html page.
REFLECTIONS:
– When changing properties of the text such as color, font, and font size, its helpful to use classes when a certain set of style attributes will be used repeatedly throughout the page. For example, in the Lyrics page, I utilized a class called “verse,” which had specified properties for only the verses of the song. On the other hand, id’s are helpful when you want to have a set of properties that are used only once, or with a specific purpose. For example, properties of the back button use an id in both the About page and Lyrics page called “back.”
– For certain lines of the chorus, I wanted each word of the line to be a different color/size, however I felt it was too tedious to make id’s for every word, hence I did not include this in the end product. Another difficulty was the fact that I was mostly writing in Chinese, and Google Font’s options for Chinese Simplified is very limited.
– By storing different files with detailed names and organizing code into these files, individual files are much shorter; hence, they are easier for the programmer and other people to read and understand the code. Additionally, debugging becomes easier when you know exactly which file the error could be coming from. Seeing all the files involved in one project in Atom also visually makes a lot of sense, meaning that when you import a file or image, you can actually see where it’s coming from in the left-most tab. Conversely, importing a file on a platform like Spyder is visually confusing; you import a file from a seemingly “arbitrary space” that you can’t actually see.
– Writing and editing text in a platform such as Microsoft Word or Google Docs is vastly different from writing in HTML, mainly due to the purposes of each method. When using Microsoft Word or Google Docs, the goal of writing text isn’t so much the design, interactive, and formatting aspect; writing in these platforms is more focused on the actual ideas of the words being written. In HTML however, there is much less focus on the text’s content, and more focus on its style and functionality. In addition, all styling and design aspects in HTML must be coded manually by the programmer, however using Microsoft or Google only requires the user to have a basic understanding of reading labels and pressing buttons in order to design a page of text.