C
T
Courses
Python
HTML
CSS
JavaScript
Java
C++
C Language
C#
TypeScript
Go
Rust
Kotlin
Swift
PHP
SQL
R
Bash
Dart
Ruby
MATLAB
Visual Basic
Shell
Ethical Hacking
Courses
Home
Multi-Lang Compiler
Web Development Compiler
HTML · CSS · JavaScript
Clear
HTML eg.
CSS eg.
JS eg.
▶ Run
HTML
CSS
JavaScript
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Web Page</title> </head> <body> <h1>Welcome to Web Development!</h1> <p>This is a simple HTML page.</p> <button id="myButton">Click Me!</button> </body> </html>
body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } h1 { font-size: 2.5rem; margin-bottom: 1rem; text-align: center; } p { font-size: 1.2rem; margin-bottom: 2rem; text-align: center; } button { background: #4ade80; color: #000; border: none; padding: 1rem 2rem; font-size: 1rem; font-weight: 600; border-radius: 8px; cursor: pointer; transition: all 0.2s; } button:hover { background: #22c55e; transform: translateY(-2px); }
// JavaScript code document.addEventListener('DOMContentLoaded', function() { const button = document.getElementById('myButton'); let clickCount = 0; if (button) { button.addEventListener('click', function() { clickCount++; alert('Button clicked ' + clickCount + ' time(s)!'); this.textContent = 'Clicked ' + clickCount + ' times'; this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = 'scale(1)'; }, 100); }); } console.log('Page loaded successfully!'); });
👁️ Preview
📟 Console
📟
Console output will appear here
Ready to run
Last run: Never