W3 Tech
Home
HTML
CSS
JavaScript
Tools
🌙
Web Development Tools
Interactive code editor and validation tools
HTML
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Live Editor</title> </head> <body> <h1>Hello World!</h1> <p>Edit the code and see live preview!</p> <button onclick="alert('Hello!')">Click me</button> </body> </html>
CSS
body { font-family: Arial, sans-serif; margin: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } h1 { color: #ffeb3b; text-align: center; } button { background: #ff5722; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; }
JavaScript
// Add interactivity document.addEventListener('DOMContentLoaded', function() { const button = document.querySelector('button'); const colors = ['#ff5722', '#4caf50', '#2196f3', '#ff9800']; let colorIndex = 0; button.addEventListener('click', function() { colorIndex = (colorIndex + 1) % colors.length; button.style.background = colors[colorIndex]; }); });
Live Preview
Validate HTML
Validate CSS
Format Code
Download