Getting Started – Basic Guide

Welcome to the basic guide. This page walks you through the fundamentals of building a simple, responsive web page.

1. Project Structure

my-website/
├─ index.html
├─ guides/
│  ├─ basic.html
│  └─ advanced.html
└─ assets/
   ├─ styles.css
   └─ script.js

2. Basic HTML

Start with a semantic skeleton:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>
<body>
  <header>Header content</header>
  <main>Main content</main>
  <footer>Footer content</footer>
</body>
</html>

3. Styling with CSS

Link a stylesheet or embed CSS directly. Use variables for themes.

/* example.css */
:root {
  --primary:#0066ff;
  --bg:#fafafa;
}
body {background:var(--bg);color:#222;font-family:sans-serif;}

4. Adding Interactivity

Use a small script to toggle dark mode.

document.getElementById('theme-toggle').addEventListener('click',()=> {
  const html=document.documentElement;
  if(html.dataset.theme==='dark'){
    html.dataset.theme='light';
  } else {
    html.dataset.theme='dark';
  }
});

5. Next Steps

Explore our advanced guide to learn about CSS Grid, Flexbox, and JavaScript frameworks.