Try It Editor
← Back to Tutorial
Code Editor
Reset
Run
HTML
CSS
JavaScript
<!DOCTYPE html> <html> <head> <title>My First Page</title> </head> <body> <div class="container"> <h1>Hello World!</h1> <p>Welcome to the Try It Editor!</p> <p>Edit the HTML, CSS, and JavaScript tabs to create your own web page.</p> <button id="myBtn">Click Me</button> <p id="output"></p> </div> </body> </html>
body { font-family: Arial, sans-serif; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; } .container { max-width: 600px; margin: 0 auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); } h1 { color: #333; margin-top: 0; } p { color: #666; line-height: 1.6; } button { padding: 12px 24px; background: #667eea; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; } button:hover { background: #5a6fd6; } #output { margin-top: 15px; padding: 10px; background: #f0f0f0; border-radius: 4px; min-height: 20px; }
// JavaScript code here document.getElementById('myBtn').addEventListener('click', function() { document.getElementById('output').textContent = 'Button clicked at ' + new Date().toLocaleTimeString(); }); console.log('JavaScript loaded!');
Result