Documentation: The Life of a Flower

Documentation: The Life of a Flower

Description

The project aims to explore something that campus residents tend to take for granted - flowers. The abundance of plant life on campus makes it easy to forget about their existence and the complexities of their lives. The purpose of the project, therefore, is to turn background characters into main ones.

Process

1. Wireframe: The first step in this process was to create a wireframe that would ensure the structured approach to the creation of the website. I am providing the example of the wireframe below:

1. Gathering information about the cast: The wireframe included a section called “Cast,” which would feature information about the types of flowers that were included in the video. I used a website called [“Picture This”] (https://www.picturethisai.com/identify) to upload screenshots of the plants and identify them. I then used sources like Wikipedia to gather information about the plants.

2. Creating the front page: I began coding the front page that included the video by uploading all the textual and visual information I wanted to see on the website, such as the images of the flowers, the film, headings, and descriptions.

1. Creating a CSS file: I then began creating the CSS file that effectively split the page into multiple containers that would allow me to style the page. Within that, I included an interactive element that would allow the user to hover over the images of the flowers, unraveling the information about the flowers. The “hover” function was created using CSS rather than JavaScript.

2. Creating the “Author” feature: I then began creating a separate HTML, called “Author” to include information about myself. I linked that HTML to a global CSS, allowing me to effectively stylize the page.

1. Creating the “Contact” page: Finally, I wanted to implement a feature that would allow the users to send feedback to me regarding the film. I used EmailJS, along with multiple tutorial websites and blogs, to implement a JavaScript feature that would link my email account to the code, allowing me to actually receive the feedback.

Evaluation

Overall, I believe that my expectations were met with this project, as I was able to match the overall outline of the wireframe. However, going forward I would like to make the website more interactive by making the stem an organic element that grows as the user engages with the website, in contrast to the stem being an image.

Recent Posts