Chapter 0: How Tentier IDE & Workspace Works

🏗️ You're building a real website. Every chapter grows the same CyberNexus Portal landing page — and your code is carried forward automatically into the next chapter. This chapter: Tour the workspace and meet the page you are about to build.

🖥️ Expected Output

A dark page renders your first real screen: the gold CyberNexus Portal heading, an intro line and a gold Click Me button inside the header.

📘 Conceptual Theory: How Modern Web IDEs & HTML Work

#### 1. Core Concept & Purpose

HTML (HyperText Markup Language) is the universal foundation of the World Wide Web. Every web page you visit—from news portals to decentralized crypto platforms—is structured using HTML.

In this interactive IDE, you have a 3-panel architecture:

1. 1.Interactive Theory & Mission: Guides you through core concepts with realistic coding scenarios.
2. 2.Real-Time Code Editor: Where you write production HTML, CSS, and JavaScript.
3. 3.Live Sandbox Preview: A sandboxed browser engine that parses and renders your markup instantly.

Your work in this course is cumulative: the real webpage you start building here in Chapter 0 carries forward into each subsequent chapter as you grow it into a full decentralized portal!

#### 2. HTML Syntax & Anatomy

<!-- Standard HTML5 Document Boilerplate -->
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <!-- Visible content lives inside body -->
    <h1>Main Title</h1>
    <p>Introductory paragraph.</p>
  </body>
</html>

#### 3. Real-World Practical Example

<!-- Header landmark with title and interactive button -->
<header>
  <h1>CyberNexus Portal</h1>
  <p id="intro">Interactive Tour Completed</p>
  <button id="test-btn">Click Me</button>
</header>

#### 4. Best Practices & Pro-Tips

• •Always balance every opening tag with its corresponding closing tag (e.g., <p> paired with </p>).
• •The <head> section stores metadata, while the <body> contains everything users see.
• •Unique id attributes (like id="intro") can only be assigned to a single element per page.

💻 Coding Challenge

This chapter is your guided tour — the starter file is already written for you.

1. 1.Read the theory above to understand the 3-panel IDE: Theory | Editor | Output.
2. 2.Click Run Code and watch the Output panel render the portal header.
3. 3.Click Submit Solution ✓ to lock in Chapter 0.

✅ Done when

• •h1 contains “CyberNexus Portal”
• •p#intro contains “Interactive Tour Completed”
• •button#test-btn contains “Click Me”