Project Brief: Use a piece of text and design it for the web.

Languages used: HTML & CSS

For this, I chose a design text instead of any book. It is called “Type On Screen” by Brian Pelosh, Jinhwan Kim, Nicki Dlugash, & Cameron Zotter.

I am a bookworm, so it was a tough decision to not work with text from a favorite book of mine, but I was inspired by a section of this textbook I remember looking over during my undergraduate studies: Animation & Code.

There is valuable information about animated typography and the different ways to use it. There were examples printed in the book. This is where I felt having a dynamic webpage dedicated to this text would be fun to try to do.

This was very early on in the course and I was inexperienced with all forms of web design, especially animation. When I brought this idea to my professor, she recommended I use CSS animation and encouraged me to follow this idea.

I made animations using the @keyframes element and used filters like opacity and color. To honor one of my favorite books, I used the names of characters from “Daisy Jones & The Six” by Taylor Jenkins Reid.

This page later became an educational tool for my class, as looking at the code was clear and easy to understand. I still reference it when I want to add flair to a webpage.

If I redid this today, I would make the page more responsive and pick a typeface/font that wasn’t so thin.