About the Project: Tom & Jerry: Classic Chaos

Inspiration

I’ve always loved the classic Tom & Jerry cartoons — the clever antics, slapstick humor, and iconic characters. I wanted to create a fan tribute that highlights the characters and brings a small piece of that chaos to life in a web page format. The goal was to make it fun, colorful, and visually appealing without using any JavaScript.

What I Built

This is a single-page fan website featuring the main and recurring characters:

• Tom Cat – the determined housecat
  
• Jerry Mouse – the clever, quick-witted mouse
  
• Spike & Tyke – the bulldog and his puppy son
  
• Butch – Tom’s rival alley cat
  
• Nibbles (Tuffy) – Jerry’s mischievous nephew
  

The page includes:

• A header with a simple CSS animation of Tom chasing Jerry
  
• Character cards with hover effects
  
• A responsive layout using CSS Grid
  
• Bright, cartoon-inspired colors and fonts (Luckiest Guy and Poppins)

How I Built It

• HTML for structure
  
• CSS for styling, animations, and responsive design
  
• CSS Grid to create a flexible, mobile-friendly layout
  
• Google Fonts to match the cartoonish style
  
• PNG images for each character
  

No JavaScript was used; all interactivity comes from hover effects and CSS animations.

Challenges & Lessons Learned

• Responsive design: Making the chase animation and header scale on smaller screens was tricky. I used clamp() and relative units to make it work across devices.
  
• Animation timing: Synchronizing Tom and Jerry’s movements to feel like a chase without JavaScript required careful keyframe percentages.
  
• Visual balance: Ensuring the bright colors and large images didn’t overwhelm the text took multiple iterations.
  

Takeaways

Through this project, I learned how to:

• Use CSS Grid and clamp() for responsive design
  
• Create simple, looping animations with keyframes
  
• Combine typography, color, and layout to produce a visually engaging fan page
  

Overall, it was a fun way to practice HTML and CSS while paying tribute to one of my favorite classic cartoons.

Built With

• css
• html