Environment, Structure & Your First Real Web Page

Environment, Structure & Your First Real Web Page

Before writing HTML, set up your editor so changes appear in the browser instantly.

VS Code Extensions to Install

Open the Extensions panel (Ctrl+Shift+X on Windows, Cmd+Shift+X on Mac) and install:

Live Server (by Ritwick Dey) — right-click any HTML file in the Explorer sidebar → "Open with Live Server" → browser reloads on every save. This is your dev loop: write, save, see. You never need to manually refresh the browser again.

Prettier (by Prettier) — auto-formats on save so you never manually indent again. After installing: press Ctrl+Shift+P → "Format Document With" → choose Prettier. Open Settings (Ctrl+,) → search "format on save" → enable it.

Create Your First Project

In VS Code: File → Open Folder → create a new folder called my-first-site. Right-click in the Explorer pane → New File → create three files:

my-first-site/
├── index.html
├── styles.css
└── script.js

Open index.html, type !, press Tab. VS Code's Emmet shortcut expands into the full HTML5 boilerplate:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>

  </body>
</html>

Every HTML file starts with exactly this structure. <!DOCTYPE html> tells the browser to use HTML5 rules. lang="en" tells screen readers and search engines the page language. <meta charset="UTF-8"> supports all characters including emoji and non-Latin text. The viewport meta is required for mobile — without it, phones display your page at ~980px wide and scale it down.

What HTML, CSS, and JavaScript Are

Three languages, three completely separate jobs:

• HTML is structure — the bones. Defines what is on the page: headings, paragraphs, images, forms, links.
• CSS is style — the skin. Controls how elements look: colors, fonts, spacing, layout, animations.
• JavaScript is behavior — the muscles. Makes things interactive: clicks, fetching data, DOM updates.

They live in separate files on purpose. A designer can overhaul the entire visual look by rewriting CSS without touching HTML. An engineer can add features with JavaScript without changing the design. Separation keeps concerns isolated and teams parallel.

Connecting CSS and JavaScript to HTML

The browser starts with your HTML file. You must explicitly tell it to load your other files:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Site</title>
    <!-- CSS link in head — styles load before rendering -->
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>

    <!-- content here -->

    <!-- JS before </body> — HTML is in the DOM by this point -->
    <script src="script.js"></script>
  </body>
</html>

The <link> tag is a void element — no closing tag. rel="stylesheet" tells the browser this is CSS. The href is the file path relative to this HTML file. Same folder = just the filename.

The <script> goes just before </body>. HTML elements exist in the browser's memory before JavaScript runs — no "element not found" errors.

How the Browser Processes Your Page

Order matters:

1. Browser reads <head> — not rendered. Downloads and applies CSS. Sets title. Loads fonts.
2. Browser reads <body> top to bottom — renders visible content as it parses.
3. At the bottom of <body>, downloads and runs JavaScript — all HTML elements are ready.

CSS in <head> prevents flash of unstyled content. JavaScript at the bottom prevents errors from elements not yet parsed.

Semantic HTML — Write Meaning, Not Just Structure

HTML5 introduced landmark elements that communicate what each region does:

<body>
  <header>                          <!-- site-level header: branding, nav -->
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  </header>

  <main>                            <!-- primary content — one per page -->
    <article>                       <!-- self-contained content piece -->
      <h1>Main Page Heading</h1>
      <p>One h1 per page — the topic. Use h2 for sections, h3 for subsections.</p>
      <p>Never skip heading levels just for visual size — use CSS for that.</p>
    </article>

    <aside>                         <!-- supplementary content -->
      <h2>Related</h2>
      <ul>
        <li><a href="/blog">Blog</a></li>
      </ul>
    </aside>
  </main>

  <footer>                          <!-- site-level footer -->
    <p>&copy; 2026 My Site. All rights reserved.</p>
  </footer>
</body>

Visually, <header>, <main>, <nav> look and behave like <div>. The value is semantic: screen readers announce "navigation landmark" at <nav>. Google understands <main> is the primary content to index. You get accessibility and better SEO simply by using the right element names.

The Complete 3-File Starter

styles.css:

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  color: #1a1a1a;
}

header {
  background: #111;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
}

nav a {
  color: #fff;
  text-decoration: none;
  margin-right: 24px;
}

main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 24px;
}

footer {
  text-align: center;
  padding: 32px 24px;
  border-top: 1px solid #e5e5e5;
  color: #666;
}

script.js:

console.log('Page loaded.')

Right-click index.html → Open with Live Server. Edit the CSS, hit save, and watch the browser update. This is the environment for every project in this course.