Index - JavaScript Tutorial

HTML
index.html🌐html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>1.1 Introduction to JavaScript</title>
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Oxygen, Ubuntu, sans-serif;
        max-width: 800px;
        margin: 50px auto;
        padding: 20px;
        background-color: #1e1e1e;
        color: #d4d4d4;
      }
      h1 {
        color: #569cd6;
      }
      h2 {
        color: #4ec9b0;
      }
      .instructions {
        background-color: #2d2d2d;
        padding: 20px;
        border-radius: 8px;
        border-left: 4px solid #569cd6;
      }
      code {
        background-color: #3c3c3c;
        padding: 2px 6px;
        border-radius: 4px;
        color: #ce9178;
      }
      .step {
        margin: 15px 0;
        padding: 10px;
        background-color: #252526;
        border-radius: 4px;
      }
      .step-number {
        display: inline-block;
        width: 25px;
        height: 25px;
        background-color: #569cd6;
        color: #1e1e1e;
        text-align: center;
        line-height: 25px;
        border-radius: 50%;
        margin-right: 10px;
        font-weight: bold;
      }
      kbd {
        background-color: #3c3c3c;
        padding: 3px 8px;
        border-radius: 4px;
        border: 1px solid #555;
        font-family: monospace;
      }
    </style>
  </head>
  <body>
    <h1>🚀 1.1 Introduction to JavaScript</h1>

    <div class="instructions">
      <h2>How to Use This Section</h2>

      <div class="step">
        <span class="step-number">1</span>
        <strong>Read the README.md</strong> - Learn the concepts thoroughly
      </div>

      <div class="step">
        <span class="step-number">2</span>
        <strong>Study examples.js</strong> - See the concepts in action
      </div>

      <div class="step">
        <span class="step-number">3</span>
        <strong>Complete exercises.js</strong> - Practice what you learned
      </div>

      <h2>Opening DevTools</h2>
      <p>
        Press <kbd>F12</kbd> or <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>I</kbd>
        (Windows/Linux)
      </p>
      <p>Press <kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>I</kbd> (Mac)</p>

      <h2>Current Page</h2>
      <p>
        This page loads both <code>examples.js</code> and
        <code>exercises.js</code>.
      </p>
      <p>Open the Console tab in DevTools to see the output!</p>
    </div>

    <h2>What You'll Learn</h2>
    <ul>
      <li>What JavaScript is and its key characteristics</li>
      <li>Where JavaScript runs (browser environment)</li>
      <li>JavaScript engines (V8, SpiderMonkey)</li>
      <li>ECMAScript standards and history</li>
      <li>How JavaScript executes in the browser</li>
      <li>Chrome DevTools basics</li>
    </ul>

    <!-- Load example and exercise files -->
    <script src="examples.js"></script>
    <script src="exercises.js"></script>
  </body>
</html>