Project Title: Jesus Said Chill
This project aims to create a rough draft of my final project B’s website using HTML, CSS, and JS. I created a website that the audience can feel relaxed through the interactions I created.
Click here to see the result:
https://gwangunkim.github.io/CCFinal/my-second-projectb/
You can also see my codes on the GitHub website:
https://github.com/GwangunKim/CCFinal/tree/main/my-second-projectb
To make this website, I first created several box models like this:
Using box models was highly efficient because I could directly distribute the boxes where I wanted to put them on the website. Also, I use the position: absolute method and hide the boxes to make the user click the face and move to another link which directly connects to the interactions that I created in p5.js.
Reflections
The most efficient approach I found while creating a website was organizing everything into groups. I linked multiple HTML files within the main HTML file and gave unique names to each HTML file, saving them in separate folders to avoid confusion. This organization and grouping made it easy to have a clear overview and prevented any confusion.
As seen above, when using similar box models, using classes allows for easy grouping and control of common elements. On the other hand, when dealing with specific elements like titles, footers, or the gray boxes mentioned above, using IDs proves useful for individual control.
The gray boxes had different positions depending on the location of the eyes, nose, mouth, and ears. I attempted to use position: absolute, relative, and static to achieve a relative positioning for the eye, nose, mouth, and ear while minimizing the use of absolute positioning for a responsive website. However, the div boxes did not move as desired, leading to the limitation of using absolute positioning.
WYSIWYG editors are user-friendly, allowing for easy editing and intuitive styling. However, when converting to web pages, some formatting may be compromised. On the other hand, HTML provides full control over the structure and design of the web page but lacks a visual preview, making it less intuitive.