CodePlay Online Compiler

Write, Preview & Publish HTML/CSS/JS with Real Hosting

Username

Your project URL: https://code.innovativecodetech.in/username

Project Name

HTML Editor

Auto-save

<!DOCTYPE html>
                            <html lang="en">
                            <head>
                                <meta charset="UTF-8">
                                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                                
                                <link rel="stylesheet" href="style.css">
                                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
                                <title>Free Online HTML CSS JavaScript Compiler – Live Preview | CodePlay</title>

                                <!-- SEO Schema -->
                                <script type="application/ld+json">
                                {
                                "@context": "https://schema.org",
                                "@type": "SoftwareApplication",
                                "name": "CodePlay Online HTML CSS JavaScript Compiler",
                                "operatingSystem": "Web",
                                "applicationCategory": "DeveloperApplication",
                                "aggregateRating": {
                                    "@type": "AggregateRating",
                                    "ratingValue": "4.8",
                                    "bestRating": "5",
                                    "worstRating": "1",
                                    "ratingCount": "128",
                                    "reviewCount": "96"
                                },
                                "offers": {
                                    "@type": "Offer",
                                    "price": "0",
                                    "priceCurrency": "INR",
                                    "availability": "https://schema.org/InStock"
                                }
                                }
                                </script>
                                <script type="application/ld+json">
                                {
                                "@context": "https://schema.org",
                                "@type": "FAQPage",
                                "mainEntity": [
                                    {
                                    "@type": "Question",
                                    "name": "Is CodePlay online HTML CSS JavaScript compiler free?",
                                    "acceptedAnswer": {
                                        "@type": "Answer",
                                        "text": "Yes. CodePlay is a completely free online HTML, CSS and JavaScript compiler with live preview and no registration required."
                                    }
                                    },
                                    {
                                    "@type": "Question",
                                    "name": "Can beginners use this online compiler?",
                                    "acceptedAnswer": {
                                        "@type": "Answer",
                                        "text": "Yes. This online compiler is designed for beginners, students and frontend developers to practice HTML, CSS and JavaScript easily."
                                    }
                                    },
                                    {
                                    "@type": "Question",
                                    "name": "Does CodePlay support live preview?",
                                    "acceptedAnswer": {
                                        "@type": "Answer",
                                        "text": "Yes. CodePlay provides instant live preview for HTML, CSS and JavaScript code on both desktop and mobile devices."
                                    }
                                    },
                                    {
                                    "@type": "Question",
                                    "name": "Can I download my project?",
                                    "acceptedAnswer": {
                                        "@type": "Answer",
                                        "text": "Yes. You can download your HTML, CSS and JavaScript project as a ZIP file for offline use."
                                    }
                                    }
                                ]
                                }
                                </script>
                                <script type="application/ld+json">
                                {
                                "@context": "https://schema.org",
                                "@type": "BreadcrumbList",
                                "itemListElement": [
                                    {
                                    "@type": "ListItem",
                                    "position": 1,
                                    "name": "Home",
                                    "item": "https://innovativecodetech.in/"
                                    },
                                    {
                                    "@type": "ListItem",
                                    "position": 2,
                                    "name": "Developer Tools",
                                    "item": "https://innovativecodetech.in/tools/"
                                    },
                                    {
                                    "@type": "ListItem",
                                    "position": 3,
                                    "name": "Online HTML CSS JavaScript Compiler",
                                    "item": "https://innovativecodetech.in/online-html-css-javascript-compiler/"
                                    }
                                ]
                                }
                                </script>
                            </head>
                            <body>
                                <div class="container">
                                    <header class="hero">
                                        <h1><i class="fas fa-rocket"></i> Welcome to My Project</h1>
                                        <p>Created with CodePlay Online Compiler</p>
                                    </header>
                                    
                                    <main>
                                        <section class="features">
                                            <div class="feature-card">
                                                <i class="fas fa-bolt"></i>
                                                <h3>Fast & Simple</h3>
                                                <p>Write code and publish instantly</p>
                                            </div>
                                            <div class="feature-card">
                                                <i class="fas fa-mobile-alt"></i>
                                                <h3>Mobile Friendly</h3>
                                                <p>Works on all devices</p>
                                            </div>
                                            <div class="feature-card">
                                                <i class="fas fa-share-alt"></i>
                                                <h3>Easy to Share</h3>
                                                <p>Share with anyone</p>
                                            </div>
                                        </section>
                                        
                                        <section class="demo-section">
                                            <h2><i class="fas fa-code"></i> Interactive Demo</h2>
                                            <button id="demo-button" class="demo-btn">
                                                <i class="fas fa-magic"></i> Click Me!
                                            </button>
                                            <div id="demo-output" class="demo-output"></div>
                                        </section>
                                    </main>
                                    
                                    <footer>
                                        <p>Published with ❤️ by <a href="https://innovativecodetech.in" target="_blank">Innovative Code Tech</a></p>
                                    </footer>
                                </div>
                                
                                <script src="script.js"></script>
                                

                            </body>
                            </html>

CSS Editor

Auto-save

/* CodePlay Default Theme */
                            :root {
                                --navy: #001f3f;
                                --navy-light: #003366;
                                --gold: #FFD700;
                                --gold-dark: #B8860B;
                                --light: #f8f9fa;
                                --dark: #212529;
                            }

                            * {
                                margin: 0;
                                padding: 0;
                                box-sizing: border-box;
                                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                            }

                            body {
                                background: linear-gradient(135deg, #0a192f 0%, #1a365d 100%);
                                color: var(--light);
                                min-height: 100vh;
                                line-height: 1.6;
                            }

                            .container {
                                max-width: 1200px;
                                margin: 0 auto;
                                padding: 20px;
                            }

                            .hero {
                                text-align: center;
                                padding: 60px 20px;
                                background: linear-gradient(90deg, var(--navy) 0%, var(--navy-light) 100%);
                                border-radius: 15px;
                                margin-bottom: 40px;
                                border-bottom: 5px solid var(--gold);
                            }

                            .hero h1 {
                                font-size: 2.8rem;
                                color: var(--gold);
                                margin-bottom: 15px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                gap: 15px;
                            }

                            .hero p {
                                font-size: 1.2rem;
                                opacity: 0.9;
                            }

                            .features {
                                display: grid;
                                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                                gap: 25px;
                                margin: 40px 0;
                            }

                            .feature-card {
                                background: rgba(255, 255, 255, 0.05);
                                backdrop-filter: blur(10px);
                                border: 1px solid rgba(255, 215, 0, 0.2);
                                border-radius: 12px;
                                padding: 30px;
                                text-align: center;
                                transition: all 0.3s ease;
                            }

                            .feature-card:hover {
                                transform: translateY(-5px);
                                border-color: var(--gold);
                                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
                            }

                            .feature-card i {
                                font-size: 2.5rem;
                                color: var(--gold);
                                margin-bottom: 20px;
                            }

                            .feature-card h3 {
                                color: var(--gold);
                                margin-bottom: 10px;
                                font-size: 1.4rem;
                            }

                            .demo-section {
                                background: rgba(0, 31, 63, 0.5);
                                border-radius: 15px;
                                padding: 40px;
                                margin: 40px 0;
                                text-align: center;
                                border: 1px solid rgba(255, 215, 0, 0.1);
                            }

                            .demo-section h2 {
                                color: var(--gold);
                                margin-bottom: 30px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                gap: 15px;
                            }

                            .demo-btn {
                                background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
                                color: var(--navy);
                                border: none;
                                padding: 15px 40px;
                                font-size: 1.1rem;
                                font-weight: bold;
                                border-radius: 50px;
                                cursor: pointer;
                                display: inline-flex;
                                align-items: center;
                                gap: 12px;
                                transition: all 0.3s ease;
                            }

                            .demo-btn:hover {
                                transform: translateY(-3px);
                                box-shadow: 0 10px 25px rgba(255, 215, 0, 0.3);
                            }

                            .demo-output {
                                margin-top: 30px;
                                padding: 20px;
                                background: rgba(255, 255, 255, 0.05);
                                border-radius: 10px;
                                min-height: 60px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            }

                            footer {
                                text-align: center;
                                padding: 40px 20px;
                                margin-top: 60px;
                                border-top: 1px solid rgba(255, 215, 0, 0.2);
                                color: #cbd5e0;
                            }

                            footer a {
                                color: var(--gold);
                                text-decoration: none;
                                font-weight: bold;
                            }

                            footer a:hover {
                                text-decoration: underline;
                            }

                            /* Responsive Design */
                            @media (max-width: 768px) {
                                .container {
                                    padding: 15px;
                                }
                                
                                .hero {
                                    padding: 40px 20px;
                                }
                                
                                .hero h1 {
                                    font-size: 2rem;
                                    flex-direction: column;
                                    gap: 10px;
                                }
                                
                                .features {
                                    grid-template-columns: 1fr;
                                    gap: 20px;
                                }
                                
                                .demo-section {
                                    padding: 30px 20px;
                                }
                            }

                            @media (max-width: 480px) {
                                .hero h1 {
                                    font-size: 1.8rem;
                                }
                                
                                .feature-card {
                                    padding: 25px 20px;
                                }
                                
                                .demo-btn {
                                    padding: 12px 30px;
                                    font-size: 1rem;
                                }
                            }

JavaScript Editor

Auto-save

// CodePlay Interactive Features
                            console.log('🚀 Project loaded successfully!');
                            console.log('🌐 Published with CodePlay by Innovative Code Tech');

                            // Initialize when DOM is loaded
                            document.addEventListener('DOMContentLoaded', function() {
                                // Demo button functionality
                                const demoButton = document.getElementById('demo-button');
                                const demoOutput = document.getElementById('demo-output');
                                
                                if (demoButton && demoOutput) {
                                    let clickCount = 0;
                                    
                                    demoButton.addEventListener('click', function() {
                                        clickCount++;
                                        
                                        // Create fun messages
                                        const messages = [
                                            "Awesome! You clicked me!",
                                            "Great job! Click again!",
                                            "You're on fire!",
                                            "Incredible! Keep going!",
                                            "Legendary clicking skills!"
                                        ];
                                        
                                        const message = messages[clickCount % messages.length];
                                        
                                        // Update button text with animation
                                        const originalHTML = this.innerHTML;
                                        this.innerHTML = '<i class="fas fa-check"></i> ' + message;
                                        this.style.background = 'linear-gradient(135deg, #00C853 0%, #00E676 100%)';
                                        
                                        // Update output
                                        demoOutput.innerHTML = '<div style="text-align: center;"><h3 style="color: #FFD700; margin-bottom: 10px;"><i class="fas fa-star"></i> Button Clicked!</h3><p style="font-size: 1.1rem;">You\'ve clicked <strong style="color: #FFD700;">' + clickCount + '</strong> times</p><p style="margin-top: 10px; opacity: 0.8;">' + message + '</p></div>';
                                        
                                        // Add confetti effect
                                        createConfetti();
                                        
                                        // Reset button after 1.5 seconds
                                        setTimeout(() => {
                                            this.innerHTML = originalHTML;
                                            this.style.background = '';
                                        }, 1500);
                                    });
                                }
                                
                                // Animate feature cards on scroll
                                const featureCards = document.querySelectorAll('.feature-card');
                                
                                const observer = new IntersectionObserver((entries) => {
                                    entries.forEach((entry, index) => {
                                        if (entry.isIntersecting) {
                                            setTimeout(() => {
                                                entry.target.style.opacity = '1';
                                                entry.target.style.transform = 'translateY(0)';
                                            }, index * 100);
                                        }
                                    });
                                }, {
                                    threshold: 0.1,
                                    rootMargin: '50px'
                                });
                                
                                featureCards.forEach(card => {
                                    card.style.opacity = '0';
                                    card.style.transform = 'translateY(30px)';
                                    card.style.transition = 'all 0.5s ease';
                                    observer.observe(card);
                                });
                            });

                            // Confetti effect function
                            function createConfetti() {
                                const colors = ['#FFD700', '#FFA500', '#FF6B6B', '#4ECDC4', '#45B7D1'];
                                
                                for (let i = 0; i < 30; i++) {
                                    const confetti = document.createElement('div');
                                    const size = Math.random() * 10 + 5;
                                    const color = colors[Math.floor(Math.random() * colors.length)];
                                    
                                    confetti.style.cssText = 'position: fixed;' +
                                                            'width: ' + size + 'px;' +
                                                            'height: ' + size + 'px;' +
                                                            'background: ' + color + ';' +
                                                            'border-radius: ' + (size > 8 ? '50%' : '2px') + ';' +
                                                            'top: -20px;' +
                                                            'left: ' + (Math.random() * 100) + 'vw;' +
                                                            'animation: confettiFall ' + (Math.random() * 2 + 1) + 's linear forwards;' +
                                                            'z-index: 9999;' +
                                                            'pointer-events: none;';
                                    
                                    document.body.appendChild(confetti);
                                    
                                    // Remove after animation
                                    setTimeout(() => {
                                        if (confetti.parentNode) {
                                            confetti.remove();
                                        }
                                    }, 3000);
                                }
                                
                                // Add animation keyframes if not present
                                if (!document.querySelector('#confetti-styles')) {
                                    const style = document.createElement('style');
                                    style.id = 'confetti-styles';
                                    style.textContent = '@keyframes confettiFall { to { transform: translateY(100vh) rotate(' + (Math.random() * 360) + 'deg); opacity: 0; } }';
                                    document.head.appendChild(style);
                                }
                            }

                            // Notification system
                            function showNotification(message, type = 'info') {
                                // Create notification element
                                const notification = document.createElement('div');
                                notification.className = 'ict-notification ' + type;
                                
                                const icons = {
                                    success: 'check-circle',
                                    error: 'exclamation-circle',
                                    info: 'info-circle',
                                    warning: 'exclamation-triangle'
                                };
                                
                                const icon = icons[type] || 'info-circle';
                                
                                notification.innerHTML = '<i class="fas fa-' + icon + '"></i><span>' + message + '</span><button class="ict-notification-close">×</button>';
                                
                                // Style notification
                                notification.style.cssText = 'position: fixed;' +
                                                        'top: 20px;' +
                                                        'right: 20px;' +
                                                        'background: ' + (type === 'success' ? '#4CAF50' : 
                                                                            type === 'error' ? '#F44336' : 
                                                                            type === 'warning' ? '#FF9800' : '#2196F3') + ';' +
                                                        'color: white;' +
                                                        'padding: 16px 24px;' +
                                                        'border-radius: 8px;' +
                                                        'display: flex;' +
                                                        'align-items: center;' +
                                                        'gap: 12px;' +
                                                        'box-shadow: 0 4px 12px rgba(0,0,0,0.15);' +
                                                        'z-index: 10000;' +
                                                        'animation: slideInRight 0.3s ease;' +
                                                        'max-width: 400px;';
                                
                                document.body.appendChild(notification);
                                
                                // Close button functionality
                                notification.querySelector('.ict-notification-close').addEventListener('click', () => {
                                    notification.style.animation = 'slideOutRight 0.3s ease';
                                    setTimeout(() => notification.remove(), 300);
                                });
                                
                                // Auto remove after 5 seconds
                                setTimeout(() => {
                                    if (notification.parentNode) {
                                        notification.style.animation = 'slideOutRight 0.3s ease';
                                        setTimeout(() => notification.remove(), 300);
                                    }
                                }, 5000);
                                
                                // Add animation styles if not present
                                if (!document.querySelector('#notification-styles')) {
                                    const style = document.createElement('style');
                                    style.id = 'notification-styles';
                                    style.textContent = '@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }';
                                    document.head.appendChild(style);
                                }
                            }

                            // Welcome message
                            setTimeout(() => {
                                console.log('%c🎉 Welcome to CodePlay Online Compiler!', 'color: #FFD700; font-size: 16px; font-weight: bold;');
                                console.log('%c💡 Edit the code and click "Publish" to get your own project URL!', 'color: #00C853;');
                                console.log('%c🚀 Your project will be live at: https://code.innovativecodetech.in/your-username', 'color: #2196F3;');
                            }, 1000);

Starter Templates

Choose a template to start quickly

Portfolio Website

Professional portfolio with projects gallery

Landing Page

High-converting landing page

E-commerce Store

Online store with product showcase

Blog Theme

Clean blog layout with articles

Live Preview

Console Output

Console ready. Click "Run Code" to see output.

🎉 Project Published Successfully!

Your website is now live on:

Visit

Publishing Your Project...

Creating directory and uploading files to server

Frequently Asked Questions

Yes. CodePlay is a completely free online HTML, CSS and JavaScript compiler with live preview and no registration required.

Yes. This compiler is specially designed for beginners, students and frontend developers.

Yes. CodePlay provides instant live preview for HTML, CSS and JavaScript code on all devices.

Yes. You can download your HTML, CSS and JavaScript project as a ZIP file.

Looking for Tech & Work From Home Jobs?

If you are learning HTML, CSS and JavaScript, explore our latest work from home jobs, IT fresher jobs and developer job openings in India.

Explore Work From Home Jobs →

HTML Editor

CSS Editor

JavaScript Editor

Starter Templates

Portfolio Website

Landing Page

E-commerce Store

Blog Theme

Live Preview

Console Output

🎉 Project Published Successfully!

Publishing Your Project...

Frequently Asked Questions

Looking for Tech & Work From Home Jobs?

Land Your Dream Job Faster!