Getting Started

Welcome to HTML Mastery

Your complete guide to learning HTML from scratch to advanced level

🎯 What You'll Learn

This comprehensive course will take you from absolute beginner to HTML expert through:

Interactive Lessons with live code editors
Hands-on Projects to build your portfolio
Quizzes & Exercises to test your knowledge
Real-world Examples you can use immediately

Quick Start

📚

HTML Fundamentals

Learn the basics of HTML structure, tags, and elements

Start Learning

🔗

Links & Media

Connect pages and add images, audio, and video

Start Learning

📊

Tables & Forms

Create data tables and interactive forms

Start Learning

Lesson 1

HTML Document Structure

Learn the foundation of every HTML page

basic-structure.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to HTML!</h1>
    <p>This is my first web page. I'm learning HTML structure.</p>
</body>
</html>

Output Preview

Lesson 2

Text Formatting & Headings

Learn how to structure and format text content

headings.html

<!DOCTYPE html>
<html>
<head>
    <title>Text Formatting</title>
</head>
<body>
    <h1>Main Title</h1>
    <h2>Section Heading</h2>
    <p>This is <strong>bold text</strong> and <em>italic text</em>.</p>
    <p>This is <mark>highlighted text</mark> and <small>small text</small>.</p>
</body>
</html>

Output Preview

Lesson 3

Links & Images

Connect web pages and add visual content

links-images.html

<!DOCTYPE html>
<html>
<head>
    <title>Links & Images</title>
</head>
<body>
    <h1>My Portfolio</h1>
    
    <h2>Navigation</h2>
    <nav>
        <a href="#home">Home</a> |
        <a href="#about">About</a> |
        <a href="#contact">Contact</a>
    </nav>
    
    <h2>External Links</h2>
    <p>Visit <a href="https://www.google.com">Google</a></p>
    
    <h2>Images</h2>
    <img src="https://via.placeholder.com/400x200" alt="Sample Image" width="400">
    
    <h2>Image as Link</h2>
    <a href="https://www.example.com">
        <img src="https://via.placeholder.com/200x100" alt="Clickable Image">
    </a>
</body>
</html>

Output Preview

Lesson 4

HTML Tables

Organize data in rows and columns

tables.html

<!DOCTYPE html>
<html>
<head>
    <title>HTML Tables</title>
    <style>
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <h1>Student Grades</h1>
    
    <table>
        <tr>
            <th>Name</th>
            <th>Subject</th>
            <th>Grade</th>
        </tr>
        <tr>
            <td>John Doe</td>
            <td>Mathematics</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>Science</td>
            <td>B+</td>
        </tr>
        <tr>
            <td>Bob Johnson</td>
            <td>History</td>
            <td>A-</td>
        </tr>
    </table>
</body>
</html>

Output Preview

Lesson 5

HTML Forms

Create interactive forms for user input

forms.html

<!DOCTYPE html>
<html>
<head>
    <title>Contact Form</title>
    <style>
        form { max-width: 500px; margin: 20px; padding: 20px; border: 1px solid #ddd; }
        label { display: block; margin: 10px 0 5px; }
        input, textarea, select { width: 100%; padding: 8px; margin-bottom: 10px; }
        button { background: #4CAF50; color: white; padding: 10px 15px; border: none; cursor: pointer; }
    </style>
</head>
<body>
    <h1>Contact Us</h1>
    
    <form>
        <label for="name">Full Name:</label>
        <input type="text" id="name" name="name" required>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        
        <label for="subject">Subject:</label>
        <select id="subject" name="subject">
            <option value="">Select a subject</option>
            <option value="general">General Inquiry</option>
            <option value="support">Technical Support</option>
            <option value="feedback">Feedback</option>
        </select>
        
        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="4" required>

Subscribe to newsletter

Output Preview

Setup

Environment Setup

Get ready to start coding

What You Need

Web Browser: Chrome, Firefox, Safari, or Edge
Text Editor: VS Code, Sublime Text, or Notepad++
Local Server (optional): For testing

Tip: You can use the built-in code editors in this platform to practice without any setup!