MrCode - Master Web Development & Python

Online Code Compiler

Python Compiler
JavaScript Compiler
Python 3.11 Compiler

12 3 4 5 6 7 8 9 10
# Welcome to MrCode Python Compiler</div>
                                <div class="output-container">
                                <div class="output-title"><i class="fas fa-terminal"></i> Output:</div>
                                <div class="output-content" id="python-output"></div>
                                </div>
                                </div>
                                </div>
                                </div>
                    <!-- JavaScript Compiler -->
    <div class="tab-content" id="js-compiler">
        <div class="compiler-section">
            <div class="compiler-header">
                <h3><i class="fab fa-js"></i> JavaScript (ES6) Compiler</h3>
                <div class="compiler-controls">
                    <button class="compiler-btn" id="run-js-btn">
                        <i class="fas fa-play"></i> Run
                    </button>
                    <button class="compiler-btn" id="clear-js-btn">
                        <i class="fas fa-trash"></i> Clear
                    </button>
                    <button class="compiler-btn" id="save-js-btn">
                        <i class="fas fa-save"></i> Save
                    </button>
                </div>
            </div>
            <div class="compiler-body">
                <div class="code-editor-container">
                    <div class="line-numbers" id="js-line-numbers">12
                        3
                        4
                        5
                        6
                        7
                        8
                        9
                        10</div>
                        <textarea class="code-editor" id="js-editor" spellcheck="false">// Welcome to MrCode JavaScript Compiler</div>
                            <div class="output-container">
                            <div class="output-title"><i class="fas fa-terminal"></i> Output:</div>
                            <div class="output-content" id="js-output"></div>
                            </div>
                            </div>
                            </div>
                            </div>
                            </section>
    <!-- Python Modules Section -->
<section class="section" id="modules">
    <h2 class="section-title">Essential Python Modules</h2>
    <div class="modules-grid">
        <div class="module-card">
            <div class="module-icon">
                <i class="fas fa-table"></i>
            </div>
            <h3>NumPy</h3>
            <p>Fundamental package for scientific computing with Python. Provides support for large, multi-dimensional arrays and matrices.</p>
            <a href="#" class="module-link">
                Learn More <i class="fas fa-arrow-right"></i>
            </a>
        </div>
        <div class="module-card">
            <div class="module-icon">
                <i class="fas fa-chart-line"></i>
            </div>
            <h3>Pandas</h3>
            <p>Powerful data manipulation and analysis library. Provides data structures and operations for manipulating numerical tables.</p>
            <a href="#" class="module-link">
                Learn More <i class="fas fa-arrow-right"></i>
            </a>
        </div>
        <div class="module-card">
            <div class="module-icon">
                <i class="fas fa-project-diagram"></i>
            </div>
            <h3>Matplotlib</h3>
            <p>Comprehensive library for creating static, animated, and interactive visualizations in Python.</p>
            <a href="#" class="module-link">
                Learn More <i class="fas fa-arrow-right"></i>
            </a>
        </div>
        <div class="module-card">
            <div class="module-icon">
                <i class="fas fa-robot"></i>
            </div>
            <h3>Scikit-learn</h3>
            <p>Simple and efficient tools for predictive data analysis. Built on NumPy, SciPy, and matplotlib.</p>
            <a href="#" class="module-link">
                Learn More <i class="fas fa-arrow-right"></i>
            </a>
        </div>
        <div class="module-card">
            <div class="module-icon">
                <i class="fas fa-globe"></i>
            </div>
            <h3>Django</h3>
            <p>High-level Python Web framework that encourages rapid development and clean, pragmatic design.</p>
            <a href="#" class="module-link">
                Learn More <i class="fas fa-arrow-right"></i>
            </a>
        </div>
        <div class="module-card">
            <div class="module-icon">
                <i class="fas fa-bolt"></i>
            </div>
            <h3>Flask</h3>
            <p>Micro web framework written in Python. It is classified as a microframework because it doesn't require particular tools.</p>
            <a href="#" class="module-link">
                Learn More <i class="fas fa-arrow-right"></i>
            </a>
        </div>
        <div class="module-card">
            <div class="module-icon">
                <i class="fas fa-database"></i>
            </div>
            <h3>SQLAlchemy</h3>
            <p>Python SQL toolkit and Object Relational Mapper that gives application developers the full power and flexibility of SQL.</p>
            <a href="#" class="module-link">
                Learn More <i class="fas fa-arrow-right"></i>
            </a>
        </div>
        <div class="module-card">
            <div class="module-icon">
                <i class="fas fa-spider"></i>
            </div>
            <h3>Scrapy</h3>
            <p>Fast high-level web crawling and web scraping framework, used to crawl websites and extract structured data.</p>
            <a href="#" class="module-link">
                Learn More <i class="fas fa-arrow-right"></i>
            </a>
        </div>
        <div class="module-card">
            <div class="module-icon">
                <i class="fas fa-tasks"></i>
            </div>
            <h3>Celery</h3>
            <p>Distributed task queue that allows you to run tasks asynchronously across multiple workers.</p>
            <a href="#" class="module-link">
                Learn More <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>
</section>

<!-- Installation Guides Section -->
<section class="section" id="installation">
    <h2 class="section-title">Installation Guides</h2>
    <div class="installation-guides">
        <div class="installation-card">
            <h3><i class="fab fa-python"></i> Python Installation</h3>
            <div class="steps-list">
                <div class="step">
                    <div class="step-number">1</div>
                    <div class="step-content">
                        <h4>Download Python</h4>
                        <p>Visit the official Python website and download the latest version for your operating system.</p>
                        <code>https://www.python.org/downloads/</code>
                    </div>
                </div>
                <div class="step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h4>Run the Installer</h4>
                        <p>Run the downloaded installer and make sure to check "Add Python to PATH" before installing.</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h4>Verify Installation</h4>
                        <p>Open a terminal or command prompt and type:</p>
                        <code>python --version</code>
                        <p>You should see the installed Python version.</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="installation-card">
            <h3><i class="fab fa-node-js"></i> Node.js Installation</h3>
            <div class="steps-list">
                <div class="step">
                    <div class="step-number">1</div>
                    <div class="step-content">
                        <h4>Download Node.js</h4>
                        <p>Visit the official Node.js website and download the LTS version for your operating system.</p>
                        <code>https://nodejs.org/</code>
                    </div>
                </div>
                <div class="step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h4>Run the Installer</h4>
                        <p>Run the downloaded installer with default settings.</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h4>Verify Installation</h4>
                        <p>Open a terminal or command prompt and type:</p>
                        <code>node --version</code>
                        <p>You should see the installed Node.js version.</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="installation-card">
            <h3><i class="fab fa-react"></i> React Installation</h3>
            <div class="steps-list">
                <div class="step">
                    <div class="step-number">1</div>
                    <div class="step-content">
                        <h4>Install Node.js</h4>
                        <p>Make sure you have Node.js installed (see above).</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h4>Install Create React App</h4>
                        <p>Run the following command in your terminal:</p>
                        <code>npm install -g create-react-app</code>
                    </div>
                </div>
                <div class="step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h4>Create a New React App</h4>
                        <p>Run the following command to create a new React application:</p>
                        <code>create-react-app my-app</code>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="installation-card">
            <h3><i class="fab fa-python"></i> Django Installation</h3>
            <div class="steps-list">
                <div class="step">
                    <div class="step-number">1</div>
                    <div class="step-content">
                        <h4>Install Python</h4>
                        <p>Make sure you have Python installed (see above).</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h4>Install Django</h4>
                        <p>Run the following command in your terminal:</p>
                        <code>pip install django</code>
                    </div>
                </div>
                <div class="step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h4>Create a New Django Project</h4>
                        <p>Run the following command to create a new Django project:</p>
                        <code>django-admin startproject myproject</code>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Error Challenge Section -->
<section class="section" id="challenges">
    <h2 class="section-title">Error Finding Challenges</h2>
    <div class="error-challenge">
        <h3><i class="fas fa-bug"></i> Debug This Python Code</h3>
        <p>Find and fix the error in the following Python code snippet. This challenge will test your understanding of Python syntax and common pitfalls.</p>
        
        <div class="challenge-code"><pre>
            def calculate_average(numbers):
total = 0
count = 0
for num in numbers:
total += num
count += 1
average = total / count
return average

numbers = [10, 20, 30, 40, '50']
result = calculate_average(numbers)
print(f"The average is: {result}")
        </pre>
                <div class="error-line">numbers = [10, 20, 30, 40, '50']</div>
</div>                                          
<p>What is the error in this code?</p>
        
<div class="challenge-options">
    <button class="option-btn" data-correct="false">Missing colon after function definition</button>
    <button class="option-btn" data-correct="true">String value in numbers list causing TypeError</button>
    <button class="option-btn" data-correct="false">Incorrect indentation in for loop</button>
    <button class="option-btn" data-correct="false">Missing parentheses in print statement</button>
</div>

<div class="challenge-feedback feedback-correct" id="correct-feedback">
    <i class="fas fa-check-circle feedback-icon"></i> Correct! The list contains a string '50' which can't be added to numbers, causing a TypeError. The fix would be to convert all elements to numbers first.
</div>

<div class="challenge-feedback feedback-incorrect" id="incorrect-feedback">
    <i class="fas fa-times-circle feedback-icon"></i> Not quite right. Try again! Look closely at the data types in the numbers list.
</div>
</div>

<div class="error-challenge" style="margin-top: 3rem;">
<h3><i class="fas fa-bug"></i> Debug This JavaScript Code</h3>
<p>Identify the logical error in this JavaScript function that's supposed to check if a number is even.</p>

<div class="challenge-code">
    <pre>function isEven(number) {
        if (number % 2 = 0) {
        return true;
        } else {
        return false;
        }
        }
        
        console.log(isEven(4)); // Should return true
        console.log(isEven(5)); // Should return false
        console.log(isEven(0)); // Should return true</pre>
        <div class="error-line">if (number % 2 = 0) {</div>
        </div>
        <p>What's wrong with this implementation?</p>
        
        <div class="challenge-options">
            <button class="option-btn" data-correct="false">Missing semicolons</button>
            <button class="option-btn" data-correct="true">Using assignment (=) instead of equality (== or ===)</button>
            <button class="option-btn" data-correct="false">Incorrect else statement</button>
            <button class="option-btn" data-correct="false">Missing return statement</button>
        </div>
        
        <div class="challenge-feedback feedback-correct" id="correct-feedback2">
            <i class="fas fa-check-circle feedback-icon"></i> Exactly right! The condition is using an assignment operator (=) instead of a comparison operator (===). The fix would be to change it to <code>if (number % 2 === 0)</code>.
        </div>
        
        <div class="challenge-feedback feedback-incorrect" id="incorrect-feedback2">
            <i class="fas fa-times-circle feedback-icon"></i> Not the main issue. Think about the difference between assignment and comparison operators in JavaScript.
        </div>
    </div>
</section>

<!-- UI/UX Design Section -->
<section class="section" id="design">
    <h2 class="section-title">UI/UX Design Principles</h2>
    <div class="design-showcase">
        <div class="design-card">
            <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Color Theory" class="design-image">
            <div class="design-content">
                <h3>Color Theory</h3>
                <p>Learn how to choose and combine colors effectively to create visually appealing interfaces that communicate your brand and improve user experience.</p>
                <div class="design-tags">
                    <span class="design-tag">UI Design</span>
                    <span class="design-tag">Visual Design</span>
                </div>
            </div>
        </div>
        
        <div class="design-card">
            <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Typography" class="design-image">
            <div class="design-content">
                <h3>Typography</h3>
                <p>Master the art of typography to create readable, accessible, and aesthetically pleasing text in your interfaces.</p>
                <div class="design-tags">
                    <span class="design-tag">UI Design</span>
                    <span class="design-tag">Visual Design</span>
                </div>
            </div>
        </div>
        
        <div class="design-card">
            <img src="https://images.unsplash.com/photo-1541462608143-67571c6738dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Layout" class="design-image">
            <div class="design-content">
                <h3>Layout & Composition</h3>
                <p>Learn how to arrange elements on a page to create clear, logical, and visually appealing interfaces.</p>
                <div class="design-tags">
                    <span class="design-tag">UI Design</span>
                    <span class="design-tag">Visual Design</span>
                </div>
            </div>
        </div>
        
        <div class="design-card">
            <img src="https://images.unsplash.com/photo-1555421689-3f034debb7a6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="User Research" class   design-image">
            <div class="design-content">
            <h3>User Research</h3>
            <p>Discover techniques for understanding user needs, behaviors, and motivations to inform your design decisions.</p>
            <div class="design-tags">
            <span class="design-tag">UX Design</span>
            <span class="design-tag">Research</span>
            </div>
            </div>
            </div>
            <div class="design-card">
                <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Wireframing" class="design-image">
                <div class="design-content">
                    <h3>Wireframing & Prototyping</h3>
                    <p>Learn how to create low-fidelity and high-fidelity prototypes to test and refine your designs before development.</p>
                    <div class="design-tags">
                        <span class="design-tag">UX Design</span>
                        <span class="design-tag">Prototyping</span>
                    </div>
                </div>
            </div>
            
            <div class="design-card">
                <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Accessibility" class="design-image">
                <div class="design-content">
                    <h3>Accessibility</h3>
                    <p>Design interfaces that are usable by people with a wide range of abilities, ensuring inclusivity for all users.</p>
                    <div class="design-tags">
                        <span class="design-tag">UX Design</span>
                        <span class="design-tag">Inclusivity</span>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Contact Section -->
    <section class="section" id="contact">
        <h2 class="section-title">Contact Us</h2>
        <div class="contact-section">
            <h2>Have Questions? Get In Touch!</h2>
            <p>Whether you're having trouble with a concept, found a bug in our platform, or just want to say hello, we'd love to hear from you. Our team is dedicated to helping you succeed in your coding journey.</p>
            
            <div class="contact-info">
                <div class="contact-card">
                    <div class="contact-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <h3>Email</h3>
                    <a href="mailto:support@mrcode.com">support@mrcode.com</a>
                </div>
                <div class="contact-card">
                    <div class="contact-icon">
                        <i class="fas fa-phone"></i>
                    </div>
                    <h3>Phone</h3>
                    <a href="tel:+1234567890">+1 (234) 567-890</a>
                </div>
                <div class="contact-card">
                    <div class="contact-icon">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <h3>Address</h3>
                    <a href="#">123 Code Street, Developer City</a>
                </div>
                <div class="contact-card">
                    <div class="contact-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <h3>Hours</h3>
                    <a href="#">Mon-Fri: 9AM - 6PM</a>
                </div>
            </div>
            
            <form class="contact-form">
                <div class="form-grid">
                    <div class="form-group">
                        <label for="name">Your Name</label>
                        <input type="text" id="name" placeholder="John Doe" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Your Email</label>
                        <input type="email" id="email" placeholder="john@example.com" required>
                    </div>
                    <div class="form-group full-width">
                        <label for="subject">Subject</label>
                        <input type="text" id="subject" placeholder="How can we help you?">
                    </div>
                    <div class="form-group full-width">
                        <label for="message">Your Message</label>
                        <textarea id="message" placeholder="Type your message here..." required>
Master Coding with MrCode

Why Choose MrCode?

Interactive Coding

Structured Learning Paths

Debugging Challenges

Real Projects

Certification

Community Support

Choose Your Language

Python Basics

Control Flow

Functions & Modules

Data Structures

Object-Oriented Programming

Advanced Python

JavaScript Basics

DOM Manipulation

ES6+ Features

Asynchronous JavaScript

HTML Fundamentals

CSS Fundamentals

React Fundamentals

Django Fundamentals

Online Code Compiler

Python 3.11 Compiler
