Educology Solutions
Login
Sign Up
HTML
Reset
<div class="card"> <h2>Hello Web Dev!</h2> <p>I'm building my first website.</p> <button id="clickMe">Click Me</button> </div>
CSS
Reset
.card { background: #3b82f6; color: white; padding: 25px; border-radius: 16px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.2); max-width: 500px; margin: 0 auto; } .card h2 { font-size: 28px; margin-bottom: 16px; } .card p { margin-bottom: 20px; font-size: 18px; } #clickMe { background: white; color: #3b82f6; border: none; padding: 12px 28px; border-radius: 30px; font-weight: 600; cursor: pointer; transition: all 0.3s; } #clickMe:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
JavaScript
Reset
// Change button text on click document.getElementById('clickMe').addEventListener('click', function() { this.textContent = 'You clicked!'; this.style.background = '#10b981'; // Show alert setTimeout(() => { alert('Great job! You just wrote JavaScript.'); }, 300); });
Run Code
Output
Console
Welcome Back!
Sign in to continue your coding journey
Email Address
Forgot Password?
Password
Sign In
Or continue with
Don't have an account?
Sign Up
Create Account
Join students building real websites
Full Name
Email Address
Password
Create Account
Or sign up with
Already have an account?
Sign In
Educology Solutions
Educology Solutions