HTML / CSS / JavaScript Interaction Experiments
About the project
Client:
Personal Project
Services:
Web Design
Interactive Login Page
A fully coded login page using HTML, CSS, and JavaScript, focusing on translating a visual design into a functional interface.
The project explores layout, typography, form states, input interactions, and responsive behavior while keeping the experience visually minimal.
Tech: HTML · CSS · JavaScript
3D Circular Hero Carousel
A hero section built entirely with CSS, featuring a circular 3D carousel that responds to scrolling.
The experiment focused on creating depth and movement without relying on JavaScript or external animation libraries. CSS transforms, positioning, and scroll behavior work together to create the illusion of elements moving around a 3D circular path.
Tech: HTML · CSS
Hover-Driven Card Image Scroll
A card interaction where hovering over an image reveals a scrolling image effect, creating movement within a fixed card frame.
The interaction uses CSS to turn a static card into a small visual preview, allowing more of the underlying image to be revealed through hover.
Tech: HTML · CSS
Conclusion
These experiments helped me explore how code can become a design tool, turning static interfaces into interactive experiences through motion, transitions, and responsive visual effects. By building each interaction from scratch with HTML, CSS, and JavaScript, I strengthened my understanding of front-end implementation while learning how small details can make digital experiences feel more engaging and intentional.
Key Takeaways
Small interactions can significantly change how a digital interface feels.
CSS can create surprisingly complex motion and depth without JavaScript.
Building interactions from scratch gives me a better understanding of what is, and isn't, practical to implement.
Prototyping directly in code helps bridge the gap between UI design and front-end development.