Web Development Fundamentals

What is Web Development?

Web development is the process of building websites and web applications that run in a browser. Every site you've visited — from Google to GitHub — was built by web developers using the same three core technologies: HTML, CSS, and JavaScript.

These three technologies have distinct responsibilities. HTML defines what is on the page (structure), CSS defines how it looks (presentation), and JavaScript defines how it behaves (interactivity). Understanding this separation is the foundation of front-end development.

How the browser works

When you visit a URL, your browser sends an HTTP request to a server. The server returns an HTML file. The browser reads it, fetches any linked CSS and JS files, and renders the page. This full process takes milliseconds.

HTML — The Structure

HTML (HyperText Markup Language) is a document format that uses angle-bracket tags to mark up content. Each tag tells the browser what kind of content it contains.

Document Structure

Every HTML page starts with the same boilerplate:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Page</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Hello, World!</h1>
    <script src="app.js"></script>
  </body>
</html>

The <head> contains metadata and resource links — nothing visible. The <body> contains everything the user sees. CSS and JS are linked, not embedded — keeping concerns separate.

Semantic HTML

Instead of using generic <div> tags everywhere, HTML5 introduced semantic elements that describe their content's meaning:

Tag	Purpose
<header>	Page or section header (logo, nav)
<nav>	Navigation links
<main>	Primary page content (one per page)
<article>	Standalone content (blog post, product card)
<section>	Thematic grouping of content
<aside>	Sidebar or tangentially related content
<footer>	Page or section footer

Semantic HTML improves accessibility (screen readers understand the page structure), helps search engines index your content, and makes the code easier to scan. Use <div> only for styling hooks that have no semantic meaning.

Forms & Inputs

Forms are how users submit data — search boxes, login forms, checkout flows:

<form action="/login" method="POST">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />

  <label for="password">Password</label>
  <input type="password" id="password" name="password" />

  <button type="submit">Login</button>
</form>

The for attribute on <label> must match the id on the input — this links them so clicking the label focuses the field.

CSS — The Style

CSS (Cascading Style Sheets) controls how your HTML looks. You write rules that target HTML elements using selectors, and assign visual properties like colour, font, spacing, and layout.

Selectors & Specificity

/* Element — all <p> tags */
p { color: #94a3b8; }

/* Class — elements with class="card" */
.card { border-radius: 12px; padding: 1.5rem; }

/* ID — element with id="hero" (use sparingly) */
#hero { font-size: 3rem; }

/* Pseudo-class — link on hover */
a:hover { color: #818cf8; }

/* Descendant — <p> anywhere inside .card */
.card p { margin: 0; }

/* Direct child — immediate <li> of .menu */
.menu > li { display: inline-block; }

When multiple rules target the same element, specificity decides the winner: ID > class > element. Prefer classes over IDs — they're reusable and easier to override.

The Box Model

Every HTML element is a rectangular box. From the inside out: content → padding → border → margin. This is the source of most layout confusion for beginners.

.box {
  width: 200px;       /* content area */
  padding: 16px;      /* space inside the border */
  border: 2px solid #334155;
  margin: 24px;       /* space outside the border */

  /* border-box: padding + border are INCLUDED in width — much easier to reason about */
  box-sizing: border-box;
}

Flexbox

Flexbox is the go-to for one-dimensional layouts — a row or column of items that need to align and distribute space:

/* Navigation bar */
.nav {
  display: flex;
  align-items: center;          /* vertical centre */
  justify-content: space-between; /* spread across full width */
  gap: 1rem;
}

/* Card row that wraps on smaller screens */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.cards > * {
  flex: 1 1 280px; /* grow, shrink, min 280px wide */
}

CSS Grid

Grid handles two-dimensional layouts where you need control over both rows and columns:

/* Sidebar + main content layout */
.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
  min-height: 100vh;
}

/* Responsive card grid — auto-fills columns */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

JavaScript — The Behavior

JavaScript (JS) is the programming language of the web. It runs directly in the browser, giving pages the ability to respond to user actions, update content dynamically, and load data from servers without a full page reload.

Variables & Types

// Use const by default — only use let when you need to reassign
const name  = 'Alice';          // string
const age   = 25;               // number
const isAdmin = false;          // boolean
const tags  = ['js', 'css'];    // array
const user  = { name, age };    // object (shorthand property names)

// Template literals (backtick strings — interpolation + multiline)
console.log(`Hello, ${name}! You are ${age} years old.`);

Functions & Array Methods

// Function declaration
function greet(name) {
  return `Hello, ${name}!`;
}

// Arrow function — concise, no own `this`
const double = x => x * 2;
const add    = (a, b) => a + b;

// The three essential array methods (use these constantly)
const nums = [1, 2, 3, 4, 5];

const doubled = nums.map(n => n * 2);           // [2, 4, 6, 8, 10]
const evens   = nums.filter(n => n % 2 === 0);  // [2, 4]
const sum     = nums.reduce((acc, n) => acc + n, 0); // 15

DOM Manipulation

The DOM (Document Object Model) is the browser's live, in-memory representation of your HTML. JavaScript can read and change it:

// Select elements
const btn   = document.querySelector('#submit-btn');  // first match
const cards = document.querySelectorAll('.card');      // all matches (NodeList)

// Read and modify
btn.textContent = 'Loading...';
btn.disabled    = true;

// Classes
btn.classList.add('loading');
btn.classList.remove('active');
btn.classList.toggle('hidden');

// React to events
btn.addEventListener('click', (event) => {
  event.preventDefault();  // stop default browser behaviour
  console.log('Clicked!');
});

Fetch API — Loading Data Async

Fetch lets you load data from an API without reloading the page. It's asynchronous — use async/await to handle it cleanly:

// GET request
async function loadPosts() {
  try {
    const res  = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const data = await res.json();
    renderPosts(data);
  } catch (err) {
    console.error('Failed to load:', err);
  }
}

// POST with JSON body
async function createPost(post) {
  const res = await fetch('/api/posts', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(post),
  });
  return res.json();
}

Putting It Together — A Mini App

A simple counter that uses all three layers. Build this yourself (don't copy) — it builds muscle memory faster than reading.

<!-- HTML -->
<div class="counter">
  <button id="dec">−</button>
  <span id="display">0</span>
  <button id="inc">+</button>
</div>

/* CSS */
.counter { display: flex; align-items: center; gap: 1rem; font-family: sans-serif; }
#display  { font-size: 2rem; min-width: 3rem; text-align: center; }
button    { padding: .5rem 1.25rem; font-size: 1.25rem; cursor: pointer;
            border-radius: 8px; border: 1px solid #334155;
            background: #1e293b; color: white; }
button:hover { background: #3730a3; }

// JavaScript
let count = 0;
const display = document.getElementById('display');

document.getElementById('inc').onclick = () => display.textContent = ++count;
document.getElementById('dec').onclick = () => display.textContent = --count;

Extend it yourself

Once it works: add a reset button, a max/min limit (can't go below 0), or persist the count in localStorage so it survives page refresh. These small stretches accelerate learning more than reading more notes.

Key Concepts Summary

HTML provides structure — use semantic tags (<main>, <nav>, <article>) not just <div>
CSS controls presentation — learn the box model, flexbox, and grid before frameworks
JavaScript adds behaviour — DOM selection, events, and async fetch are the core loop
Use const by default, let only when you need to reassign
DevTools (F12) is your debugging workspace — inspect elements, watch the console, trace network requests
Build small projects before jumping to frameworks. React is easier once you understand the DOM

Practice Exercises

Build a static profile card with your name, a placeholder image, and social links — HTML and CSS only.
Create a form with client-side validation: check that all required fields are filled before submitting.
Build a colour-picker — clicking coloured buttons changes the page's background colour using JS.
Fetch and display posts from jsonplaceholder.typicode.com/posts in a card grid.
Build a todo app: add items, mark as done (strikethrough), and delete — all in vanilla JS.

Next Steps

JavaScript Deep Dive — closures, async/await, modules, prototypes
React — the most-used UI framework, built on the DOM fundamentals you now know
Node.js / Backend — run JS on the server, build APIs
TypeScript — static types for JS, essential for larger codebases
SQL & PostgreSQL — store and query structured data