Complete Lecture Notes

01

Introduction to the Web

How the internet works and what tools you need

What is the World Wide Web?

The World Wide Web (WWW) is a system of web pages and websites linked together over the internet. When you open a browser and go to a website, several things happen behind the scenes:

1

You type a URL (e.g. www.google.com)

URL stands for Uniform Resource Locator — it is the address of a web page.

2

Your browser contacts a DNS Server

DNS (Domain Name System) converts the domain name into an IP address — the real address of the server.

3

The server sends back HTML, CSS & JS files

These three languages make up every website you see.

4

Your browser renders the page

The browser reads the files and paints them on your screen as a visual web page.

The Three Languages of the Web

🏗 HTML

HyperText Markup Language. Provides the structure and content — headings, paragraphs, images, links. Think of it as the skeleton.

🎨 CSS

Cascading Style Sheets. Controls the appearance — colors, fonts, layout, spacing. Think of it as the skin and clothes.

⚡ JavaScript

A programming language that adds behavior and interactivity — menus, animations, forms. Think of it as the muscles.

Tools You Need

Tool	Purpose	Free?
VS Code	Code editor — where you write your HTML, CSS and JS	✅ Yes
Google Chrome	Browser to view and test your work	✅ Yes
Chrome DevTools	Built-in inspector (F12) — debug your code live	✅ Built-in
Git	Version control — track changes to your project	✅ Yes

💡 Pro Tip

Install the Live Server extension in VS Code. It auto-refreshes your browser every time you save a file — huge time saver!

✏ Exercise 1

Set Up Your Environment

Download and install VS Code from code.visualstudio.com
Install the "Live Server" and "Prettier" extensions
Create a folder on your Desktop called my-first-site
Open the folder in VS Code
Create a file called index.html and type your name inside it

02

HTML — Structure & Elements

Building blocks of every web page

HTML Document Structure

Every HTML file must follow this exact structure. Without it, the browser may not display your page correctly.

HTML

<!-- This goes at the top of EVERY HTML file -->
<!DOCTYPE html>
<html lang="en">

  <head>
    <!-- Meta info — NOT visible on page -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <!-- Visible content goes here -->
    <h1>Hello, World!</h1>
  </body>

</html>

Headings & Paragraphs

HTML has 6 heading levels. <h1> is the most important (biggest), <h6> is the least important (smallest). Use only ONE <h1> per page.

HTML

<h1>Main Title of Page</h1>
<h2>Section Heading</h2>
<h3>Sub-section Heading</h3>
<h4>Sub-sub Heading</h4>

<p>This is a paragraph of text. It can contain as much
text as you like. Use paragraphs to group related sentences.</p>

<p>This is a second paragraph — notice it starts on a new line
automatically. You do not need <br> between paragraphs.</p>

Essential HTML Tags

Tag	Name	Use
`<a href="">`	Anchor / Link	Create clickable links to other pages or sites
`<img src="" alt="">`	Image	Display an image. Always add alt text!
`<ul> <li>`	Unordered List	Bullet-point list of items
`<ol> <li>`	Ordered List	Numbered list of items
`<div>`	Division	A container — groups content together
`<span>`	Span	Inline container — wraps part of a sentence
`<strong>`	Strong	Bold text (also signals importance to browsers)
`<em>`	Emphasis	Italic text (also signals emphasis)
`<br>`	Line Break	Forces a new line within text
`<hr>`	Horizontal Rule	Draws a horizontal dividing line

Semantic HTML5 Elements

Semantic tags tell the browser what the content is, not just how it looks. Use them always — they improve accessibility and SEO.

HTML — Semantic Structure

<header>  <!-- Site logo, nav bar -->
  <nav>
    <a href="#">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

<main>  <!-- Main content of the page -->
  <section id="about">
    <h2>About Me</h2>
    <p>I am a web designer based in Nigeria.</p>
  </section>

  <article>  <!-- A standalone piece of content -->
    <h2>My Latest Project</h2>
    <p>Details about the project...</p>
  </article>
</main>

<aside>  <!-- Related content, sidebar -->
  <p>Related links...</p>
</aside>

<footer>  <!-- Copyright, links -->
  <p>&copy; 2025 My Website</p>
</footer>

HTML Forms

Forms allow users to input data — used for contact pages, login pages, search bars, etc.

HTML — Form

<form action="/submit" method="POST">

  <label for="name">Full Name</label>
  <input type="text" id="name" name="name" placeholder="Enter your name" required>

  <label for="email">Email Address</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5"></textarea>

  <button type="submit">Send Message</button>

</form>

⚠ Important Rule

Always pair every <label> with an <input> using matching for and id attributes. This is required for accessibility — screen readers depend on it.

✏ Exercise 2

Build Your First HTML Page

Create a new file about.html
Add the full HTML boilerplate (DOCTYPE, html, head, body)
Inside body: add your name as an <h1>, your course as an <h2>
Write a short paragraph about yourself
Add an unordered list of your 3 hobbies
Add a link to your favourite website
Add a contact form with name, email, and a message textarea

03

CSS — Styling the Web

Making your HTML beautiful

How CSS Works

CSS is written as rules. Each rule targets one or more HTML elements (the selector) and applies styles (the declarations).

CSS — Anatomy of a Rule

h1 /* ← Selector: targets all <h1> elements */ {
  color: navy;          /* ← Property: color | Value: navy */
  font-size: 48px;     /* ← Property: font-size | Value: 48px */
  font-weight: bold;   /* ← Bold text */
  text-align: center;  /* ← Centered */
}

Three Ways to Add CSS

1. External CSS (Best)

A separate .css file linked in the HTML head. Reusable across pages. Always use this method for real projects.

2. Internal CSS

Written inside a <style> tag in the HTML <head>. Only applies to that one page.

3. Inline CSS (Avoid)

Written directly on an element with the style="" attribute. Hard to maintain — avoid in most cases.

CSS Selectors

Selector	Targets	Example
`element`	All elements of that type	`p { color: red; }`
`.class`	Elements with that class	`.btn { padding: 10px; }`
`#id`	The element with that ID	`#header { height: 80px; }`
`*`	Every element on the page	`* { box-sizing: border-box; }`
`a, p`	Multiple selectors (comma = OR)	`h1, h2 { font-family: serif; }`
`div p`	Descendants — p inside div	`nav a { color: white; }`
`a:hover`	Link when mouse is over it	`a:hover { color: blue; }`

Common CSS Properties

CSS — Essential Properties

.card {
  /* TEXT */
  color: #333333;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 400;         /* 100–900 */
  line-height: 1.6;         /* Space between lines */
  text-align: left;         /* left | center | right */
  text-decoration: none;    /* Remove underline from links */
  text-transform: uppercase; /* CAPITAL LETTERS */
  letter-spacing: 2px;

  /* BACKGROUND */
  background-color: #ffffff;
  background-image: url('photo.jpg');
  background-size: cover;
  background-position: center;

  /* BORDER */
  border: 1px solid #cccccc; /* width style color */
  border-radius: 8px;        /* Rounded corners */

  /* SIZING */
  width: 300px;
  height: 200px;
  max-width: 100%;

  /* SHADOW */
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

✏ Exercise 3

Style Your About Page

Create style.css and link it to your about.html
Set the body background to a light gray (#f0f0f0)
Give the h1 a dark color, large font size, and center align it
Style the paragraph with a comfortable font and line height
Give the contact form a white background, padding, border-radius, and box-shadow
Style the submit button with a background color, white text, and remove the default border

04

The CSS Box Model

Understanding spacing and layout

Every Element is a Box

In CSS, every single HTML element is treated as a rectangular box. Understanding this model is critical for controlling layout and spacing.

MARGIN (space outside the border)

Content

MARGIN (space outside the border)

Content

The actual text, image, or content of the element. Controlled by width and height.

Padding

Space inside the border, between the content and the edge. Adds to the element's total size.

Border

The visible line around the element. Defined by border: 2px solid black.

Margin

Space outside the border — pushes other elements away. Use to create gaps between elements.

CSS — Box Model Example

.box {
  width: 300px;          /* Content width */
  height: 150px;         /* Content height */

  padding: 20px;         /* All 4 sides equally */
  padding: 10px 20px;    /* Top/Bottom  Left/Right */
  padding: 10px 15px 20px 5px; /* Top Right Bottom Left (clockwise) */

  border: 2px solid #333;
  border-top: 4px solid red; /* Style only one side */

  margin: 30px;          /* Push other elements away */
  margin: 0 auto;        /* Center block element horizontally */
}

/* CRITICAL: Always reset the box model */
* {
  box-sizing: border-box; /* Padding included in width — much easier to work with */
}

🔑 Key Concept

Always put * { box-sizing: border-box; } at the top of your CSS file. Without it, adding padding increases the element's total size unexpectedly — a common source of layout bugs.

05

CSS Layout — Flexbox & Grid

The two most powerful layout tools in CSS

Flexbox — One-dimensional Layout

Flexbox lets you arrange items in a row or column. Perfect for navigation bars, button groups, card rows, and centering content.

CSS — Flexbox

/* Apply to the PARENT (container) */
.container {
  display: flex;
  flex-direction: row;         /* row | column */
  justify-content: center;     /* Main axis: start|end|center|space-between|space-around */
  align-items: center;         /* Cross axis: start|end|center|stretch */
  gap: 20px;                   /* Space between items */
  flex-wrap: wrap;             /* Items wrap to next line if no room */
}

/* Apply to CHILDREN (items) */
.item {
  flex: 1;                     /* Grow equally to fill available space */
  flex: 0 0 300px;             /* Fixed 300px wide, no grow/shrink */
}

/* Common pattern: Perfect centering */
.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;               /* Full viewport height */
}

CSS Grid — Two-dimensional Layout

Grid lets you arrange items in rows AND columns simultaneously. Perfect for page layouts, image galleries, dashboards.

CSS — Grid

.gallery {
  display: grid;

  /* 3 equal columns */
  grid-template-columns: 1fr 1fr 1fr;
  /* Shorthand for the same */
  grid-template-columns: repeat(3, 1fr);
  /* Auto-fill: as many columns as fit at minimum 250px */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

  gap: 24px;                   /* Space between all cells */
  row-gap: 16px;              /* Gap between rows only */
  column-gap: 24px;           /* Gap between columns only */
}

/* Make one item span multiple columns */
.featured {
  grid-column: span 2;         /* Takes up 2 columns */
  grid-row: span 2;            /* Takes up 2 rows */
}

✅ Use Flexbox when...

Aligning items in one direction (nav bar, button row)
Centering content vertically and horizontally
Items have variable sizes

✅ Use Grid when...

Creating a full page layout (header, sidebar, main)
Building image galleries or card grids
You need control over rows AND columns

✏ Exercise 4

Build a Card Grid Layout

Create 6 <div class="card"> elements inside a container
Each card should have: an image placeholder, a title, and a short description
Make the container a CSS Grid with repeat(auto-fill, minmax(280px, 1fr))
Add gap between cards, padding inside each card, and a border-radius
Use Flexbox inside each card to push the description to the bottom

06

Responsive Web Design

Making websites work on all screen sizes

What is Responsive Design?

A responsive website looks good on all devices — phones, tablets, laptops, and large monitors. Over 60% of web traffic is from mobile phones, so this is not optional.

📱 Mobile First

Always design for mobile screens first, then add styles for larger screens. It is easier to scale up than to shrink down.

The Viewport Meta Tag

This one line in your <head> is essential. Without it, mobile browsers zoom out and your page looks tiny.

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Media Queries

Media queries allow you to apply different CSS based on the screen width. Think of them as IF statements for styles.

CSS — Media Queries

/* ─── Base styles (Mobile First) ─── */
.container {
  padding: 16px;
  display: flex;
  flex-direction: column; /* Stack vertically on mobile */
}

/* ─── Tablet (768px and above) ─── */
@media (min-width: 768px) {
  .container {
    padding: 32px;
    flex-direction: row;     /* Side by side on tablet */
  }
}

/* ─── Desktop (1024px and above) ─── */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;          /* Center on wide screens */
  }

  h1 {
    font-size: 72px;          /* Bigger heading on desktop */
  }
}

Responsive Units

Unit	Meaning	Example
`px`	Pixels — fixed size	`border: 1px solid`
`%`	Percentage of parent element	`width: 100%`
`vw`	% of viewport width	`width: 50vw` = half screen
`vh`	% of viewport height	`height: 100vh` = full screen
`rem`	Relative to root font size (16px)	`font-size: 2rem` = 32px
`em`	Relative to parent's font size	`padding: 1em`
`fr`	Fraction of available grid space	`grid-template-columns: 1fr 2fr`
`clamp()`	Min, preferred, max value	`font-size: clamp(16px, 4vw, 32px)`

✅ Best Practice

Use clamp() for font sizes and heading sizes — they will automatically scale with the screen width without needing multiple media queries. Example: font-size: clamp(18px, 4vw, 36px)

07

Typography & Color Theory

The design principles that separate amateurs from professionals

Typography Fundamentals

Typography is the art of arranging type. Great typography makes content readable, attractive, and professional.

CSS — Typography System

/* Import Google Fonts in HTML <head> first */
/* <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"> */

body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;   /* Base: never go below 16px for body text */
  line-height: 1.6;  /* 1.4–1.8 is comfortable for reading */
  color: #1a1a1a;    /* Near-black — softer than pure #000000 */
}

/* Type Scale — each heading 1.25x larger than previous */
h1 { font-size: clamp(32px, 5vw, 64px); line-height: 1.1; }
h2 { font-size: clamp(24px, 4vw, 48px); line-height: 1.2; }
h3 { font-size: clamp(20px, 3vw, 32px); line-height: 1.3; }

/* Limit paragraph width for readability */
p {
  max-width: 65ch;   /* 65 characters per line — optimal for reading */
}

Color in CSS

Format	Example	Best For
Named color	`red`, `navy`	Quick testing only
Hex	`#c8401e`	Specific brand colors (most common)
RGB	`rgb(200, 64, 30)`	When you need to calculate colors
RGBA	`rgba(0, 0, 0, 0.5)`	Transparency — the last value (0–1) is opacity
HSL	`hsl(15, 74%, 45%)`	Programmatically adjusting colors
CSS Variable	`var(--primary)`	Consistent color system across your site

CSS Custom Properties (Variables)

Define your colors and fonts once and reuse them everywhere. When you change a value, it updates across the entire site.

CSS — Design Tokens

/* Define in :root — available everywhere */
:root {
  /* Colors */
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-text: #1a1a1a;
  --color-muted: #6b7280;
  --color-bg: #ffffff;
  --color-surface: #f9fafb;

  /* Spacing */
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;

  /* Border radius */
  --radius: 8px;
}

/* Use them like this */
.button {
  background: var(--color-primary);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  color: white;
}

Design Rules Every Student Must Know

Contrast

Text must be readable. Dark text on light background. Check contrast ratio — aim for at least 4.5:1.

Whitespace

Don't fear empty space. Generous padding and margins make designs look professional and breathable.

Consistency

Use the same fonts, colors, and spacing throughout. Visual systems create trust.

Hierarchy

Make the most important information the biggest and boldest. Guide the user's eye.

08

JavaScript Fundamentals

Bringing web pages to life

Adding JavaScript to HTML

HTML

<!-- Always put <script> just before </body> -->
<script src="script.js"></script>

<!-- Or write JS directly (small scripts only) -->
<script>
  console.log('Hello from JavaScript!');
</script>

Variables, Data Types & Functions

JavaScript

// ─── Variables ───
let name = "Amara";          // Can be changed later
const PI = 3.14159;         // Cannot be changed — use for constants
var old = "avoid this";      // Old style — avoid in modern code

// ─── Data Types ───
let text = "Hello";          // String
let age = 22;               // Number
let isStudent = true;       // Boolean (true or false)
let nothing = null;         // Intentionally empty
let colors = ["red", "blue", "green"]; // Array
let person = { name: "Emeka", age: 25 }; // Object

// ─── Functions ───
function greet(name) {
  return `Hello, ${name}! Welcome.`;  // Template literal
}

console.log( greet("Bola") );  // "Hello, Bola! Welcome."

// Arrow function (modern style)
const double = (num) => num * 2;
console.log( double(5) );  // 10

DOM Manipulation

The DOM (Document Object Model) is the JavaScript representation of your HTML. JS can read and change any element on the page.

JavaScript — DOM

// ─── Select elements ───
const heading = document.querySelector('h1');           // First match
const btn = document.querySelector('#myButton');       // By ID
const cards = document.querySelectorAll('.card');      // All matches

// ─── Change content ───
heading.textContent = 'New Title!';                   // Change text
heading.innerHTML = '<em>Italic Title!</em>';        // Change HTML inside

// ─── Change styles ───
heading.style.color = 'red';
heading.style.fontSize = '48px';

// ─── Add/remove classes (better than inline styles) ───
heading.classList.add('active');
heading.classList.remove('hidden');
heading.classList.toggle('dark-mode');               // Adds if not there, removes if there

// ─── Events ───
btn.addEventListener('click', function() {
  alert('Button was clicked!');
});

// Get form input value
const nameInput = document.querySelector('#name');
nameInput.addEventListener('input', () => {
  console.log(`User typed: ${nameInput.value}`);
});

✏ Exercise 5

Interactive Dark Mode Toggle

Add a button to your page: <button id="themeBtn">Toggle Dark Mode</button>
In CSS, create a .dark class that changes body background to #0e0e0e and text to white
In JS, select the button and add a click event listener
In the handler, use document.body.classList.toggle('dark')
Also change the button text: "Enable Dark Mode" / "Enable Light Mode"

09

Building a Complete Website

Putting it all together — a real portfolio site

Project Structure

File Structure

my-portfolio/
├── index.html          # Homepage
├── about.html          # About page
├── contact.html        # Contact page
├── css/
│   └── style.css       # All your styles
├── js/
│   └── script.js       # All your JavaScript
└── images/
    ├── hero-bg.jpg
    └── profile.jpg

The Complete Portfolio HTML

HTML — index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Portfolio</title>
  <link rel="stylesheet" href="css/style.css"

💬 Comments 0

💬

No comments yet. Be the first to leave one!

Complete Lecture Notes

WebDesignMastery

Table of Contents

Introduction to the Web

What is the World Wide Web?

You type a URL (e.g. www.google.com)

Your browser contacts a DNS Server

The server sends back HTML, CSS & JS files

Your browser renders the page

The Three Languages of the Web

🏗 HTML

🎨 CSS

⚡ JavaScript

Tools You Need

Set Up Your Environment

HTML — Structure & Elements

HTML Document Structure

Headings & Paragraphs

Essential HTML Tags

Semantic HTML5 Elements

HTML Forms

Build Your First HTML Page

CSS — Styling the Web

How CSS Works

Three Ways to Add CSS

1. External CSS (Best)

2. Internal CSS

3. Inline CSS (Avoid)

CSS Selectors

Common CSS Properties

Style Your About Page

The CSS Box Model

Every Element is a Box

Content

Padding

Border

Margin

CSS Layout — Flexbox & Grid

Flexbox — One-dimensional Layout

CSS Grid — Two-dimensional Layout

✅ Use Flexbox when...

✅ Use Grid when...

Build a Card Grid Layout

Responsive Web Design

What is Responsive Design?

The Viewport Meta Tag

Media Queries

Responsive Units

Typography & Color Theory

Typography Fundamentals

Color in CSS

CSS Custom Properties (Variables)

Design Rules Every Student Must Know

Contrast

Whitespace

Consistency

Hierarchy

JavaScript Fundamentals

Adding JavaScript to HTML

Variables, Data Types & Functions

DOM Manipulation

Interactive Dark Mode Toggle

Building a Complete Website

Project Structure

The Complete Portfolio HTML

💬 Comments 0

✍️ Leave a Comment

Web
Design
Mastery