Looking for a hilarious coding project? This Skibidi Prank Meme Page is built with HTML, CSS, and JavaScript — and it’s guaranteed to make your friends laugh.
Here’s what happens:
-
🚽 Click the big button and 50 Skibidi Toilets fall from the sky
-
🎶 The Skibidi Anthem starts playing instantly
-
😂 A chaotic but funny meme experience right in your browser
-
📱 Works on desktop & mobile for easy trolling
Why this project?
It’s not just a meme — it’s also a fun way to practice JavaScript DOM manipulation, event handling, and animations. Plus, meme projects like this are always a hit with friends and on social media.
Do check out the video tutorial of this project on my YouTube channel and do subscribe to support me! Thanks!
Here’s the HTML/CSS code for the project 👇
<!-- Created by CodingPorium, 2025. Visit https://youtube.com/c/CodingPorium for more tutorials --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Skibidi Toilet Suprise Page | CodingPorium</title> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #00d2ff, #3a47d5); font-family: Poppins, sans-serif; overflow: hidden; } #enterBtn { font-family:poppins,sans-serif; padding: 20px 40px; font-weight: bold; font-size: 24px; border: none; border-radius: 12px; background: #fff; cursor: pointer; transition: transform 0.2s; } #enterBtn:hover { transform: scale(1.1); } /* Toilet image style */ .toilet { position: absolute; width: 120px; animation: bounce 3s infinite alternate; } /* Bounce animation */ @keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-300px) rotate(10deg); } } </style> </head> <body> <!-- Start button --> <button id="enterBtn">Click if you dare</button> <!-- Audio (replace with Skibidi audio URL) --> <audio id="song" src="https://static.wikia.nocookie.net/skibidi-toilet-official/images/b/b8/SkibidiToiletAnthem.mp3/revision/latest?cb=20230808070428" loop></audio> <script> const btn = document.getElementById('enterBtn'); const song = document.getElementById('song'); btn.addEventListener('click', () => { // Remove button after click btn.style.display = 'none'; // Play music song.play(); // Spawn multiple toilets const toiletCount = 50; // number of toilets to show for (let i = 0; i < toiletCount; i++) { const toilet = document.createElement('img'); toilet.src = 'https://static.wikia.nocookie.net/skibidi-toilet-official/images/a/a5/30-MediumToilet.png/revision/latest?cb=20240313064922'; // free toilet PNG toilet.classList.add('toilet'); // Random position toilet.style.left = Math.random() * (window.innerWidth - 150) + 'px'; toilet.style.top = Math.random() * (window.innerHeight - 200) + 'px'; // Random animation speed toilet.style.animationDuration = (2 + Math.random() * 2) + 's'; document.body.appendChild(toilet); } }); </script> </body> </html>
✨ With just a few lines of code, you’ve built your own funny skibidi meme prank page! Keep practicing and soon you’ll be building bigger and more powerful projects.
Thanks for reading, do subscribe our YouTube channel to support us in providing more awesome projects with free source code!
Post a Comment