Hello Kitty

About the Project

This project was inspired by my love for cats and humor, specifically the growing trend of meme culture. I wanted to create a fun and engaging web experience that blends quirky cat facts with the excitement of viral internet memes. The goal was to offer users an amusing experience while learning something new about our feline friends.

Inspiration

I’ve always been a fan of funny and educational content on the internet, especially when it involves cats. Their unpredictable and sometimes bizarre behavior provides endless material for humor. After spending countless hours laughing at viral cat memes and videos, I decided to turn that enjoyment into something more interactive. Combining the fun of cat facts with engaging visuals, I wanted to create a site that would make users smile while learning about their favorite animals.

What I Learned

Building this project taught me a lot about web development, especially when it comes to HTML, CSS, and JavaScript. I gained valuable experience in making media like videos and images responsive and adjusting them to different screen sizes. The real challenge was ensuring that the content, like the cat facts, would be engaging without being overwhelming. I also learned how to use JavaScript to make elements interactive, such as the button that moves around the screen, adding to the playful nature of the project.

How I Built It

I started by creating a simple HTML structure, which included a video of a cat as the central element. Then, I added a button that would trigger an action—changing the page's content when clicked. The cat facts were stored in an XML format and dynamically loaded onto the page through JavaScript. To ensure the site looked great on all devices, I focused on making everything responsive using CSS. I also made sure that the background video filled the entire screen, creating a visually immersive experience. For the finishing touch, I added a touch of humor to the text styling and made it fun and easy for users to interact with.

Challenges Faced

The most significant challenge was aligning all the elements, such as the video, text, and interactive buttons, to work seamlessly across different screen sizes. I had to make sure the video would cover the entire screen while not obstructing important content. Additionally, getting the text to overlay on top of the video without being hard to read was tricky. I also encountered a few issues with the JavaScript function that controlled the button’s movement on the screen, but after some debugging, I was able to achieve a smooth animation.

Overall, the project was both fun and educational. It helped me improve my web development skills and gave me a chance to create something lighthearted that I could share with others.

Built With

• css3
• javascript
• languages:-html5