Project #3 Handmade Website
Description
Project Description
For project 3, you will create a multi-page website from scratch using
only HTML and CSS. Create a network of pages as a non-linear poem.
Each word or phrase is linked to another page that expands upon this
poem or story. This poem can be purely text-based or include images
like in Olia Liliana's My Boyfriend Came Back from The War. You must
include at least 4 different pages.
If you do not want to create a poem/story, you may instead create an
informational website on the topic of your choice. You must still
include at least 4 different pages.
You could also pick an existing project from project #1 or #2 and add
an alternative interface that would recontextualize the experience
into a web-based experience. It must be a handmade website using html
and css. You will make an intentional choice on whether this interface
will be used on a desktop or on a mobile device. The interface should
take the user to pursue an action in a new and surprising way. You are
expected to interact with the DOM, and use Javascript event handlers
in your interface design.
For those of you making a poem, here are some questions to
consider:
(1) Think of all the paths someone might take through your website.
They may all start at the homepage but from there, depending on what
they click next, they could create different paths. Would there be one
clear path to take, or are there many "forks in the road" ? Would each
path evoke different feelings or a different poetic impression?
(2) Is your link poem made primarily of text, or are you including
images too?
(3) Are you using your own text/images or are you basing your project
off of an existing poem? If you are using an existing poem, what
aspects of the original poem would you want to translate into a
web-based experience and how?
(4) Consider how reading this poem on a page is different from
navigating your website. Does the matter in which one clicks links
change the structure/order of the poem?
Description
This project was inspired by a renowned Chinese poet, Li Bai (李白).
Li Bai's poems are beautifully written, and he had the ability to
write from different perspectives on various subjects. Among his many
poems, I am particularly fond of "Watching The Lu Mountain Falls"
(望廬山瀑布).
In this poem, Li Bai describes waterfalls in a truly fantastic and
vivid manner. The translation I have chosen is a collaborative effort
between two people, and I believe it is the best version available. (I
found the translation in this website)
望廬山瀑布 李白
日照香爐生紫煙，
遙看瀑布挂前川。
飛流直下三千尺，
疑是銀河落九天。
Link to Glich.io
Video of my website
Process
Figma Sketching
I sketch in figma first to see what kind of layout I'm looking for then I seperate the layers to export it.
Video of how I wanted it move on website
Reflection
This is the first time I have ever coded in HTML or CSS from scratch. I don't think this website is well-made yet, but I am particularly proud of figuring out how to display the mouse's X and Y values. This made the placement of stars on Line4 much easier. Although I understand that some of the code I wrote may have a more efficient solution, due to my current lack of knowledge of HTML and CSS, I will try to write more efficient code in the future.