Practical H.T.M.L. Document File (Most Elements)

You can copy this into a file named index.html, open it in your browser, and use Right Click > Inspect to see how the browser treats each one.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The Complete HTML Element Sandbox</title>
    <style>
        /* Base styles to make the sandbox readable */
        body { font-family: sans-serif; line-height: 1.6; padding: 20px; color: #333; }
        section { border: 2px solid #ccc; margin-bottom: 30px; padding: 20px; border-radius: 8px; }
        h2 { border-bottom: 2px solid #eee; padding-bottom: 10px; color: #2c3e50; }
        .label { font-weight: bold; color: #e67e22; font-size: 0.8em; text-transform: uppercase; }
        code { background: #f4f4f4; padding: 2px 4px; border-radius: 4px; }
    </style>
</head>
<body>

    <h1>HTML Element Categorization Sandbox</h1>

    <section>
        <h2>1. Block-Level Elements (display: block)</h2>
        <p>These elements take up the full width and start on a new line.</p>
        
        <header><code>&lt;header&gt;</code>: Page/Section Header</header>
        <nav><code>&lt;nav&gt;</code>: Navigation Block</nav>
        <main>
            <article>
                <code>&lt;article&gt;</code>: Independent Content
                <section><code>&lt;section&gt;</code>: Document Section</section>
            </article>
            <aside><code>&lt;aside&gt;</code>: Sidebar/Tangent</aside>
        </main>

        <hr>

        <div><code>&lt;div&gt;</code>: Generic Block Container</div>
        <p><code>&lt;p&gt;</code>: This is a paragraph block.</p>
        
        <h1>H1 Heading</h1>
        <h2>H2 Heading</h2>
        <h3>H3 Heading</h3>
        <h4>H4 Heading</h4>
        <h5>H5 Heading</h5>
        <h6>H6 Heading</h6>

        <blockquote><code>&lt;blockquote&gt;</code>: A block quotation.</blockquote>

        <pre><code>&lt;pre&gt;</code>: Preformatted text
           space and line 
           breaks are kept.</pre>

        <ul>
            <li><code>&lt;ul&gt;</code> & <code>&lt;li&gt;</code>: Unordered List Item</li>
        </ul>

        <dl>
            <dt><code>&lt;dt&gt;</code>: Description Term</dt>
            <dd><code>&lt;dd&gt;</code>: Description Detail</dd>
        </dl>

        <figure>
            <div style="background:#ddd;height:50px;width:100px;"></div>
            <figcaption><code>&lt;figcaption&gt;</code>: Figure Caption</figcaption>
        </figure>

        <address><code>&lt;address&gt;</code>: Contact Info Block</address>
        
        <footer><code>&lt;footer&gt;</code>: Page/Section Footer</footer>
    </section>

    <section>
        <h2>2. Inline Elements (display: inline)</h2>
        <p>These stay in line with the text. Notice how they don't break the flow.</p>

        <p>
            <a href="#"><code>&lt;a&gt;</code>: Hyperlink</a> |
            <span><code>&lt;span&gt;</code>: Generic Inline</span> |
            <strong><code>&lt;strong&gt;</code>: Strong/Bold</strong> |
            <em><code>&lt;em&gt;</code>: Emphasis/Italic</em> |
            <small><code>&lt;small&gt;</code>: Fine print</small> |
            <mark><code>&lt;mark&gt;</code>: Highlighted</mark> |
            <del><code>&lt;del&gt;</code>: Deleted</del> |
            <ins><code>&lt;ins&gt;</code>: Inserted</ins> |
            <s><code>&lt;s&gt;</code>: Strikethrough</s> |
            <u><code>&lt;u&gt;</code>: Underline</u> |
            <code>&lt;code&gt;</code>: Inline Code |
            <kbd><code>&lt;kbd&gt;</code>: Key</kbd> |
            <abbr title="Abbreviation"><code>&lt;abbr&gt;</code></abbr> |
            <cite><code>&lt;cite&gt;</code>: Citation</cite> |
            <sub><code>&lt;sub&gt;</code></sub> & <sup><code>&lt;sup&gt;</code></sup> |
            <time datetime="2026-02-13"><code>&lt;time&gt;</code></time> |
            <br><code>&lt;br&gt;</code> (Line break above)
        </p>
    </section>

    <section>
        <h2>3. Replaced Elements (Native Inline-Block behavior)</h2>
        <p>Inline flow, but you can set width/height.</p>

        <button><code>&lt;button&gt;</code></button>
        <input type="text" placeholder="<input>">
        <select><option><code>&lt;select&gt;</code></option></select>
        <textarea placeholder="<textarea>"></textarea>
        
        <progress value="70" max="100"></progress> <code>&lt;progress&gt;</code>
        <meter value="0.6"></meter> <code>&lt;meter&gt;</code>

        <br><br>

        <img src="https://via.placeholder.com/100x50" alt="<img>">
        <canvas style="border:1px solid #000;width:100px;height:50px;"></canvas> <code>&lt;canvas&gt;</code>
    </section>

    <section>
        <h2>4. Table Elements (display: table-*)</h2>
        <table>
            <caption><code>&lt;caption&gt;</code></caption>
            <thead>
                <tr><th><code>&lt;th&gt;</code></th><th>Header</th></tr>
            </thead>
            <tbody>
                <tr><td><code>&lt;td&gt;</code></td><td>Data Cell</td></tr>
            </tbody>
        </table>
    </section>

    <section>
        <h2>5. Interactive Blocks</h2>
        <details>
            <summary><code>&lt;summary&gt;</code>: Click to expand <code>&lt;details&gt;</code></summary>
            <p>Hidden content inside details block.</p>
        </details>
    </section>

</body>
</html>

How to use this for learning:

  1. Visual Proof: Notice how all "Inline" elements are huddled together on the same lines, while "Block" elements create a vertical stack.

  2. Width Check: Resize your browser window. See how the Block elements shrink their width while the Inline elements simply wrap to the next line like words in a book.

  3. The Replaced Difference: Look at the button and input. Even though they are side-by-side (inline), they have a distinct physical "shape" that text elements like span don't have.

To turn those vertical "blocks" into a sophisticated horizontal layout, we use Flexbox. By applying display: flex to a parent container, you essentially override the "block" or "inline" nature of all children, turning them into Flex Items.

Here is the code and the logic to transform that sandbox into a modern layout.

1. The Flexbox Transformation

In this example, we take a standard <ul> (Block) and its <li> children (List-items) and force them into a horizontal navigation bar.

/* The Parent Container */
.nav-container {
  display: flex;            /* 1. Activate Flexbox */
  justify-content: space-between; /* 2. Spread items across the width */
  align-items: center;      /* 3. Center items vertically */
  background-color: #2c3e50;
  padding: 1rem;
  list-style: none;         /* Remove default bullets */
}

/* The Children (automatically become Flex Items) */
.nav-item {
  color: white;
  padding: 0.5rem 1rem;
  background: #34495e;
  border-radius: 4px;
}

2. Why Flexbox is the "Block/Inline Killer"

Before Flexbox, you had to manually change elements to display: inline-block and worry about white-space gaps. Flexbox ignores those old rules:

  1. Alignment: You can align an inline <span> and a block <div> perfectly on the same horizontal line using align-items: center.

  2. Order: You can use the order property to move an element visually without changing the HTML.

  3. Growth: You can use flex-grow: 1 to make one specific element (like a search bar) fill all remaining space, while buttons stay small.

3. The "Holy Grail" Layout (Flexbox vs. Grid)

While Flexbox is perfect for rows (1D), CSS Grid is designed for the entire page (2D). Here is a quick comparison of when to use which:

Layout Tool Best Use Case Logic
Flexbox Navbars, Button groups, Sidebars. Content-first: Items grow/shrink based on their size.
Grid Full page structure, Photo galleries. Layout-first: You define the "map" and place items in it.

4. Try it yourself

Add this "Quick Flex" class to your Sandbox HTML to see it in action:

<div style="display: flex; gap: 20px; background: #eee; padding: 10px;">
  <div style="background: coral; padding: 10px;">Block 1</div>
  <div style="background: lightblue; padding: 10px;">Block 2</div>
  <div style="background: palegreen; padding: 10px;">Block 3</div>
</div>

Building a full page layout with CSS Grid is the ultimate way to manage those 140+ elements. While Flexbox handles things in one direction (rows OR columns), Grid handles both at once (rows AND columns).

Think of CSS Grid as the "Skeleton" of your page, and the HTML elements as the "Muscles" you fit into it.

1. Defining the Grid "Map"

Instead of letting elements stack naturally as blocks, we define a layout grid on a parent container (usually <main> or <body>).

.page-layout {
  display: grid;
  /* Define 3 columns: sidebars are 200px, middle takes the rest */
  grid-template-columns: 200px 1fr 200px;
  /* Define rows: header/footer auto-size, content is at least 500px */
  grid-template-rows: auto minmax(500px, auto) auto;
  gap: 15px;
  grid-template-areas: 
    "header header header"
    "nav    content sidebar"
    "footer footer footer";
}

2. Placing Your Elements

Now, you can take any of your 140+ elements and tell them exactly which "Area" to live in. It doesn't matter if they are naturally inline or block; once they are grid items, you have total control.

header { grid-area: header; background: #34495e; color: white; }
nav    { grid-area: nav; background: #ecf0f1; }
main   { grid-area: content; background: #fff; }
aside  { grid-area: sidebar; background: #f9f9f9; }
footer { grid-area: footer; background: #2c3e50; color: white; }

3. Responsive Design: The "Magic" Part

The reason developers love Grid is that you can completely rearrange the page for mobile without touching your HTML. You just redefine the "map."

@media (max-width: 768px) {
  .page-layout {
    /* On mobile, stack everything in 1 column */
    grid-template-columns: 1fr;
    grid-template-areas: 
      "header"
      "nav"
      "content"
      "sidebar"
      "footer";
  }
}

4. Summary of Layout Roles

Property Layout Strategy
Default Block/Inline The natural flow of text and simple documents.
Flexbox (display: flex) Great for small components (navbars, card internal layouts).
Grid (display: grid) The gold standard for the overall page structure.

The "Golden Rule" of 2026 Web Design:

  1. Use Grid for the Macro-layout (The big sections of the page).

  2. Use Flexbox for the Micro-layout (Items inside those sections).

  3. Use Inline/Block defaults for Typography (How text flows inside the content).

This boilerplate is the "Industry Standard" way to organize a project in 2026. It combines a CSS Reset, a CSS Grid skeleton for the page layout, and Flexbox for the navigation and component logic.

By using this, you effectively master the behavior of all 140+ elements by putting them into a controlled environment.

The Ultimate 2026 Web Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Professional Grid & Flex Boilerplate</title>
    <style>
        /* 1. THE RESET - Leveling the 140+ elements */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f4f7f6;
        }

        /* 2. THE GRID SKELETON - Defining the Macro Layout */
        .site-container {
            display: grid;
            grid-template-columns: 250px 1fr; /* Sidebar and Content */
            grid-template-rows: auto 1fr auto; /* Header, Main, Footer */
            grid-template-areas: 
                "header header"
                "sidebar main"
                "footer footer";
            min-height: 100vh;
        }

        /* 3. GRID AREA ASSIGNMENTS */
        .main-header  { grid-area: header; background: #2c3e50; color: white; padding: 1rem; }
        .main-nav     { grid-area: sidebar; background: #fff; border-right: 1px solid #ddd; padding: 2rem; }
        .main-content { grid-area: main; padding: 2rem; }
        .main-footer  { grid-area: footer; background: #2c3e50; color: white; text-align: center; padding: 1rem; }

        /* 4. FLEXBOX LOGIC - Component level */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .nav-links {
            display: flex;
            gap: 20px;
            list-style: none;
        }

        .card-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 20px;
        }

        .card {
            flex: 1 1 calc(33.333% - 20px); /* Responsive sizing */
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        /* 5. RESPONSIVENESS - Re-mapping the Grid */
        @media (max-width: 768px) {
            .site-container {
                grid-template-columns: 1fr;
                grid-template-areas: 
                    "header"
                    "main"
                    "sidebar"
                    "footer";
            }
            .nav-links { display: none; } /* Hide menu on mobile */
        }
    </style>
</head>
<body class="site-container">

    <header class="main-header">
        <div class="navbar">
            <h1>LOGO</h1>
            <ul class="nav-links">
                <li><a href="#" style="color:white; text-decoration:none;">Home</a></li>
                <li><a href="#" style="color:white; text-decoration:none;">Dashboard</a></li>
                <li><a href="#" style="color:white; text-decoration:none;">Settings</a></li>
            </ul>
        </div>
    </header>

    <nav class="main-nav">
        <h3>Sidebar</h3>
        <p>This block stays on the left on desktop and moves below content on mobile.</p>
    </nav>

    <main class="main-content">
        <h2>Dashboard Overview</h2>
        <p>Using Flexbox for the cards below:</p>
        
        <div class="card-grid">
            <div class="card"><h3>Stat 1</h3><p>Data visualization here.</p></div>
            <div class="card"><h3>Stat 2</h3><p>Data visualization here.</p></div>
            <div class="card"><h3>Stat 3</h3><p>Data visualization here.</p></div>
        </div>
    </main>

    <footer class="main-footer">
        <p>&copy; 2026 Professional Web Systems</p>
    </footer>

</body>
</html>

Key Takeaways for your Workflow:

  • The Container is King: You no longer style elements based on whether they are inline or block. You style the Parent and let the parent decide how the children sit.

  • Grid for the "Shell": Use Grid to define the big areas (header, main, footer).

  • Flex for the "Guts": Use Flexbox for things inside those areas (like the navbar or the card-grid).

  • The 140+ Elements: Now, whether you use a <div>, a <section>, or a <span>, they all fall into the "Grid" or "Flex" rules you've defined, giving you 100% pixel-perfect control.

Using CSS Variables (also known as Custom Properties) is the ultimate way to manage the styling of all those HTML elements. Instead of hunting through 500 lines of CSS to change a hex code, you define your "Source of Truth" at the top.

When you combine this with the Grid and Flexbox boilerplate we just built, you create a Theming System.

1. Defining the "Global Variables"

We use the :root selector because it represents the highest level of the document (the <html> tag). Any variable defined here is inherited by all 140+ elements.

:root {
  /* Color Palette */
  --primary-color: #2c3e50;
  --secondary-color: #3498db;
  --accent-color: #e67e22;
  --bg-color: #f4f7f6;
  --text-color: #333;
  --white: #ffffff;

  /* Spacing & Sizing */
  --gap-main: 20px;
  --padding-std: 1rem;
  --border-radius: 8px;

  /* Typography */
  --font-main: 'Segoe UI', system-ui, sans-serif;
}

2. Implementing the Variables

Now, instead of hard-coding colors, you use the var() function. This makes your code incredibly "DRY" (Don't Repeat Yourself).

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-main);
}

.main-header {
  background-color: var(--primary-color);
  padding: var(--padding-std);
}

.card {
  background: var(--white);
  border-radius: var(--border-radius);
  padding: var(--gap-main);
  border-left: 5px solid var(--secondary-color);
}

3. The "Magic Trick": Dark Mode in 5 Lines

Because all your elements are now listening to these variables, you can swap the entire look of the site by simply redefining those variables under a specific class or media query.

/* Dark Mode Toggle */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #f4f4f4;
    --primary-color: #000000;
    --white: #2d2d2d;
  }
}

4. Why this rounds out your HTML Knowledge

You started by asking about Block and Inline elements. By the end of this journey, you’ve learned that:

  1. HTML Tags provide the meaning (Semantics).

  2. CSS Grid/Flexbox provides the structure (Layout).

  3. CSS Variables provides the logic (Theming).

By combining all three, you aren't just placing elements on a page; you are building a design system.

Your Final Progress Checklist:

  • Identified 140+ elements and their default behaviors.

  • Mastered the difference between Block, Inline, and Replaced.

  • Built a "Macro" skeleton with CSS Grid.

  • Built "Micro" components with Flexbox.

  • Automated the styling with CSS Variables.

To make your theme system interactive, we use a tiny bit of JavaScript to manipulate the :root variables we just created. This allows the user to switch between "Light" and "Dark" modes instantly.

Since all 140+ elements are already "listening" to those CSS variables, JavaScript only needs to change a single attribute on the <body> or <html> tag to trigger a total visual transformation.

1. The "Theme Switcher" Logic

We will add a "Data Attribute" to the HTML. This is a modern way to tell CSS: "Hey, the user just clicked the dark mode button, change all the variable values now."

The HTML Button

Place this inside your <header> or <nav>:

HTML

<button id="theme-toggle" class="theme-btn">Switch Theme</button>

The CSS Logic

We create a second "bucket" of variables that overrides the first when data-theme="dark" is present.

CSS

/* Standard Variables */
:root {
  --bg-color: #f4f7f6;
  --text-color: #333;
  --primary-color: #2c3e50;
}

/* Dark Theme Variables */
[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #f4f4f4;
  --primary-color: #000000;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background 0.3s ease; /* Smooth fade effect */
}

2. The JavaScript (The "Brain")

This script does three things:

  1. Listens for a click on the button.

  2. Checks what the current theme is.

  3. Toggles the data-theme attribute on the <html> tag.

JavaScript

const toggleBtn = document.getElementById('theme-toggle');
const htmlElement = document.documentElement; // This is the <html> tag

toggleBtn.addEventListener('click', () => {
    // Check if the current theme is dark
    const currentTheme = htmlElement.getAttribute('data-theme');
    
    if (currentTheme === 'dark') {
        htmlElement.removeAttribute('data-theme');
        toggleBtn.innerText = "Switch to Dark Mode";
    } else {
        htmlElement.setAttribute('data-theme', 'dark');
        toggleBtn.innerText = "Switch to Light Mode";
    }
});

3. Why this is the "Professional" way to do it

In the old days of web development, you would have to write 100 lines of JavaScript to find every div, p, and span and change their individual colors.

By using CSS Variables + JavaScript:

  • Performance: The browser handles the color swap natively; it's lightning-fast.

  • Scalability: If you add a new HTML element tomorrow (like a <section> or <article>), it will automatically support Dark Mode without you writing a single extra line of JavaScript.

Your Final Project Structure

  1. HTML: Provides the 140+ semantic tags.

  2. CSS Grid: Sets the 2D layout skeleton.

  3. CSS Flexbox: Aligns components like buttons and navbars.

  4. CSS Variables: Defines the "Source of Truth" for styles.

  5. JavaScript: Adds the interactive logic to swap those styles.

This final package is your 2026 Developer Blueprint. It combines every concept we've covered: the full list of HTML elements, the CSS Grid skeleton, Flexbox component logic, and the JavaScript-powered theme engine.

Copy this entire block into a single file named index.html. It is a self-contained, professional-grade starter kit.

The Master Developer Blueprint

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Master HTML5/CSS3 Framework</title>
    <style>
        /* =========================================
           1. CSS VARIABLES (The Theme Engine)
           ========================================= */
        :root {
            --bg-color: #f8f9fa;
            --surface-color: #ffffff;
            --text-main: #2d3436;
            --text-muted: #636e72;
            --primary: #0984e3;
            --accent: #e17055;
            --border: #dfe6e9;
            --shadow: 0 4px 6px rgba(0,0,0,0.05);
            --transition: 0.3s ease;
        }

        [data-theme="dark"] {
            --bg-color: #121212;
            --surface-color: #1e1e1e;
            --text-main: #f5f6fa;
            --text-muted: #b2bec3;
            --primary: #74b9ff;
            --border: #2d3436;
            --shadow: 0 4px 10px rgba(0,0,0,0.3);
        }

        /* =========================================
           2. RESET & BASE (Handling the 140 Elements)
           ========================================= */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: system-ui, -apple-system, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-main);
            transition: background var(--transition), color var(--transition);
        }

        /* =========================================
           3. MACRO LAYOUT (CSS Grid)
           ========================================= */
        .site-wrapper {
            display: grid;
            grid-template-columns: 260px 1fr;
            grid-template-rows: auto 1fr auto;
            grid-template-areas: 
                "header header"
                "sidebar content"
                "footer footer";
            min-height: 100vh;
        }

        .header  { grid-area: header; background: var(--surface-color); border-bottom: 1px solid var(--border); padding: 1rem 2rem; position: sticky; top: 0; z-index: 100; }
        .sidebar { grid-area: sidebar; background: var(--surface-color); border-right: 1px solid var(--border); padding: 2rem; }
        .content { grid-area: content; padding: 2rem; max-width: 1200px; }
        .footer  { grid-area: footer; background: var(--surface-color); border-top: 1px solid var(--border); padding: 1.5rem; text-align: center; }

        /* =========================================
           4. MICRO LAYOUT (Flexbox)
           ========================================= */
        .flex-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .theme-toggle {
            padding: 8px 16px;
            cursor: pointer;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 20px;
            font-weight: 600;
        }

        .card-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 2rem;
        }

        .card {
            flex: 1 1 300px;
            background: var(--surface-color);
            padding: 2rem;
            border-radius: 12px;
            box-shadow: var(--shadow);
            border: 1px solid var(--border);
        }

        /* =========================================
           5. RESPONSIVE RE-GRIDDING
           ========================================= */
        @media (max-width: 850px) {
            .site-wrapper {
                grid-template-columns: 1fr;
                grid-template-areas: "header" "content" "sidebar" "footer";
            }
            .sidebar { border-right: none; border-top: 1px solid var(--border); }
        }
    </style>
</head>
<body class="site-wrapper">

    <header class="header">
        <div class="flex-header">
            <h2>Framework.v1</h2>
            <button id="theme-btn" class="theme-toggle">Toggle Dark Mode</button>
        </div>
    </header>

    <aside class="sidebar">
        <nav>
            <p><strong>Navigation</strong></p><br>
            <ul style="list-style: none;">
                <li><a href="#" style="color: var(--primary); text-decoration: none;">Dashboard</a></li>
                <li><a href="#" style="color: var(--text-muted); text-decoration: none;">Elements List</a></li>
                <li><a href="#" style="color: var(--text-muted); text-decoration: none;">Settings</a></li>
            </ul>
        </nav>
    </aside>

    <main class="content">
        <section>
            <h1>Mastering HTML & CSS</h1>
            <p>You have successfully categorized the block, inline, and replaced elements of HTML and unified them into a high-performance CSS Grid/Flexbox system.</p>
        </section>

        <div class="card-container">
            <article class="card">
                <h3>Grid Control</h3>
                <p>This section is managed by CSS Grid, handling the 2D layout of the entire page.</p>
            </article>
            <article class="card">
                <h3>Flexbox Flow</h3>
                <p>These cards are Flex Items, automatically wrapping and aligning based on screen width.</p>
            </article>
            <article class="card">
                <h3>Variable Logic</h3>
                <p>All colors here are inherited from CSS variables. Change one, and the whole system updates.</p>
            </article>
        </div>
    </main>

    <footer class="footer">
        <p>&copy; 2026 Interactive Development Guide</p>
    </footer>

    <script>
        const btn = document.getElementById('theme-btn');
        const root = document.documentElement;

        btn.addEventListener('click', () => {
            const isDark = root.getAttribute('data-theme') === 'dark';
            root.setAttribute('data-theme', isDark ? 'light' : 'dark');
            btn.innerText = isDark ? "Toggle Dark Mode" : "Toggle Light Mode";
        });
    </script>
</body>
</html>

Final Summary of the Journey

  1. HTML Basics: We cataloged the ~140 elements into Block and Inline.

  2. The Bridge: We identified "Replaced Elements" that behave like inline-block.

  3. The Skeleton: We used CSS Grid to build a responsive structure.

  4. The Component: We used Flexbox to organize items within that structure.

  5. The Brain: We used CSS Variables and JavaScript to create a dynamic, themable environment.

You now have a production-ready system for any web project you start.