Web Development Intermediate Course

CSS Grid is the most powerful layout tool in modern web development. Unlike Flexbox (one dimension), Grid controls both rows and columns at once. You define columns with grid-template-columns, rows with grid-template-rows, and place items anywhere. This is how professional dashboards, photo galleries, and app layouts are built today.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.gallery-item {
  background: #6366f1;
  color: white;
  padding: 24px;
  text-align: center;
  border-radius: 12px;
  font-weight: 700;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

Flexbox excels at one-dimensional layout — a row or a column. The real power is in distribution: justify-content controls spacing along the main axis, align-items across it, and flex-grow lets items expand to fill remaining space. Nearly every navbar, button group, and card row uses these properties.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
}
.nav-links {
  display: flex;
  gap: 16px;
}
.logo {
  font-weight: 800;
  color: #4f46e5;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Transitions smoothly change a property when state changes (like hover). Keyframe animations run continuously or on load without needing a state change. Together they make interfaces feel alive — buttons that lift, cards that fade in, spinners that rotate forever.

.btn {
  padding: 12px 24px;
  background: #6366f1;
  color: white;
  border: none;
  border-radius: 8px;
  transition: transform 0.2s ease, background 0.2s ease;
}
.btn:hover {
  transform: translateY(-3px);
  background: #4f46e5;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e0e7ff;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.card { transition: transform 0.3s ease; }
.card:hover { transform: scale(1.05); }

Gradients add depth and color richness without images — linear-gradient goes in a straight line, radial-gradient from a center point. Box-shadow layers create realistic elevation. Combined, they make the modern 'soft UI' card look that's everywhere today.

.hero-card {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  padding: 32px;
  border-radius: 20px;
  color: white;
  box-shadow: 0 20px 40px rgba(99, 102, 241, 0.35);
}

.bg { background: radial-gradient(circle, #dbeafe, #1e3a8a); }

CSS variables (--name) store values once and reuse them everywhere. Change one variable and the whole site updates — perfect for themes, brand colors, and spacing systems. They're the foundation of design systems like Tailwind's config.

:root {
  --primary: #6366f1;
  --radius: 12px;
  --spacing: 16px;
}
.btn {
  background: var(--primary);
  border-radius: var(--radius);
  padding: var(--spacing);
  color: white;
  border: none;
}

:root { --accent: #f59e0b; }
h1 { color: var(--accent); }

Mobile-first means you write base styles for small screens, then use min-width media queries to enhance for larger ones. It's easier than squeezing desktop layouts down, and it keeps your CSS lean. This is how production teams actually build responsive sites.

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

Arrays hold lists of data, and the modern iteration methods are your daily tools. map() transforms each element into a new array, filter() keeps only matching items, reduce() boils an array down to one value. These three replace most loops you'd otherwise write by hand.

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);
const sum = numbers.reduce((total, n) => total + n, 0);

console.log(doubled, evens, sum);

['a','b','c'].map(l => l.toUpperCase()); // ['A','B','C']

Objects group related data under one name — a user has a name, email, and age. Access properties with dot notation (user.name) or bracket notation (user['name']) when keys are dynamic. Objects are the backbone of almost every API response you'll ever work with.

const user = {
  name: 'Sufyan',
  age: 21,
  skills: ['HTML', 'CSS', 'JS'],
  address: {
    city: 'Lahore',
    country: 'Pakistan'
  }
};

console.log(user.name, user.address.city, user.skills[1]);

user.phone = '0300-123';
console.log(user.phone);

Beyond changing text, real apps create and destroy elements at runtime. createElement builds new nodes, appendChild adds them, classList.toggle switches styling, and remove() deletes them. Master these four and you can build any dynamic interface.

const list = document.querySelector('#list');
const btn = document.querySelector('#add');

btn.addEventListener('click', () => {
  const item = document.createElement('li');
  item.textContent = 'New item';
  item.classList.add('active');
  list.appendChild(item);
});

const last = list.lastElementChild;
if (last) last.remove();

Instead of adding a listener to every list item (slow and buggy with new items), you add ONE listener to the parent and check event.target to see which child was clicked. This is event delegation — it automatically works for elements you add later.

const list = document.querySelector('#list');

list.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    event.target.classList.toggle('done');
  }
});

container.addEventListener('click', e => {
  if (e.target.tagName === 'BUTTON') console.log(e.target.textContent);
});

localStorage lets your app remember data between page loads without a backend — perfect for themes, settings, and to-do lists. Everything is stored as strings, so use JSON.stringify to save and JSON.parse to load objects.

// Save
const tasks = ['learn JS', 'build app'];
localStorage.setItem('tasks', JSON.stringify(tasks));

// Load
const saved = JSON.parse(localStorage.getItem('tasks'));
console.log(saved);

localStorage.setItem('user', JSON.stringify({name:'Sufyan'}));
JSON.parse(localStorage.getItem('user'));

fetch() is how your page talks to servers — getting weather, posts, users, anything. It returns a Promise because the request takes time. You chain .then() to parse the JSON response, and .catch() to handle failures. This is the gateway to real apps.

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data.title))
  .catch(error => console.error('Failed:', error));

fetch('/api/user')
  .then(r => r.json())
  .then(u => console.log(u.email));

async/await makes asynchronous code read like synchronous code. Mark a function async, then await promises inside it. The code pauses at await until the result arrives — much easier to read and debug than nested .then() chains.

async function getUser() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
  const user = await response.json();
  console.log(user.name);
}

getUser();

async function countPosts() {
  const res = await fetch('/posts');
  const posts = await res.json();
  console.log(posts.length);
}

Errors WILL happen — bad network, bad input, bad data. try/catch catches exceptions so your app doesn't crash silently. With async/await, wrap awaits in try/catch and show users a friendly fallback instead of a blank screen.

async function loadData() {
  try {
    const res = await fetch('/api/data');
    if (!res.ok) throw new Error('Bad response');
    const data = await res.json();
    console.log(data);
  } catch (error) {
    console.error('Something went wrong:', error.message);
  }
}

try {
  await fetch('/api');
} catch (e) {
  console.error(e.message);
}

Destructuring pulls values out of objects and arrays in one line. The spread operator (...) copies arrays/objects, and rest collects the remainder. These modern features cut out so much boilerplate that they're now considered the default way to write JavaScript.

const user = { name: 'Sufyan', age: 21, city: 'Lahore' };
const { name, age } = user;

const nums = [1, 2, 3];
const more = [...nums, 4, 5];

console.log(name, age, more);

const {a, b} = {a:1, b:2};
const nums = [...[1,2], 3]; // [1,2,3]

Forms are where users interact most, and validation keeps data clean. HTML5 gives you required, minlength, and type=email for free. JavaScript adds custom rules and live error messages. Good validation prevents bad data before it ever reaches your server.

const form = document.querySelector('form');
const email = document.querySelector('#email');
const error = document.querySelector('#error');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  if (!email.value.includes('@')) {
    error.textContent = 'Please enter a valid email';
    error.style.display = 'block';
  } else {
    error.style.display = 'none';
    form.submit();
  }
});

if (name.value.trim().length < 3) {
  error.textContent = 'Name must be 3+ characters';
}

The navbar is on every website, and making it responsive is a rite of passage. On desktop, links show in a row. On mobile, they hide behind a hamburger button that toggles open. This combines Flexbox, media queries, and a tiny bit of JavaScript.

<nav class="navbar">
  <div class="logo">MySite</div>
  <button class="hamburger">☰</button>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

@media (max-width: 600px) {
  .nav-links { display: none; }
  .nav-links.open { display: flex; flex-direction: column; }
}

Modals focus a user's attention on one task — signup, confirmation, details. The pattern: a fixed overlay covering the screen, a centered dialog, and JavaScript to open/close it. Clicking the backdrop or an X button closes it.

const modal = document.querySelector('#modal');
const openBtn = document.querySelector('#open');
const closeBtn = document.querySelector('#close');

openBtn.addEventListener('click', () => modal.classList.add('open'));
closeBtn.addEventListener('click', () => modal.classList.remove('open'));
modal.addEventListener('click', (e) => {
  if (e.target === modal) modal.classList.remove('open');
});

document.addEventListener('keydown', e => {
  if (e.key === 'Escape') modal.classList.remove('open');
});

Fast sites rank higher and keep users longer. Small wins: compress images, add loading='lazy' so off-screen images load later, and put scripts at the end of body. Performance isn't just for big companies — every millisecond counts for your users.

<img
  src="hero.jpg"
  alt="Hero"
  loading="lazy"
  width="1200"
  height="600"
>
<script src="app.js" defer></script>

<img src="a.jpg" loading="lazy" alt="">
<script src="app.js" defer></script>

Your capstone: a dashboard with stat cards (Grid), a task list (localStorage persistence), and a button that fetches a random fact (fetch/async). It uses every intermediate skill — layout, state, async, and polish — in one real, working project.

<!-- dashboard.html -->
<div class="dashboard">
  <header>My Dashboard</header>
  <div class="stats">
    <div class="stat">Tasks: <span id="taskCount">0</span></div>
    <div class="stat">Fact: <span id="fact">—</span></div>
  </div>
  <input id="taskInput" placeholder="Add task">
  <button id="addTask">Add</button>
  <button id="fetchFact">Get Random Fact</button>
  <ul id="taskList"></ul>
</div>

clearBtn.addEventListener('click', () => {
  list.innerHTML = '';
  localStorage.removeItem('tasks');
});