WEB DESIGN NOTES
📘 MODULE 1: Introduction to Web Design
1.1 What is Web Design?
Web design is the process of creating websites — how they look, work, and interact with users.
It includes:
✔ Layout and structure
✔ Colors and fonts
✔ Images and graphics
✔ Navigation
✔ User experience
Simple definition:
Web design = planning and creating pages people see on the internet.
1.2 Types of Websites
Real-life examples.
Type Purpose
Personal website Portfolio, CV
Business website Promote services
E-commerce Sell products
Educational Learning materials
Blog Articles and opinions
Entertainment Videos, games
1.3 How Websites Work (Basic Concept)
Simple Explanation
1. User types a website address
2. Browser sends request
3. Server sends website files
4. Browser displays page
Key terms:
✔ Browser (Chrome, Edge)
✔ Server (stores website files)
✔ Domain name (website address)
1.4 Web Design vs Web Development
Web Design Web Development
Visual appearance Programming functionality
Layout and colors Code and databases
User experience Website logic
Design = how it looks
Development = how it works
📘 MODULE 2: Website Planning (Very Important)
Teach students that good websites start with planning.
2.1 Define Website Purpose
Ask:
✔ Who is the website for?
✔ What problem does it solve?
✔ What action should visitors take?
Example:
School website → share information + attract students.
2.2 Identify Target Audience
Examples:
✔ Children
✔ Students
✔ Business owners
✔ Customers
Design must match users.
2.3 Create Website Structure (Site Map)
Example structure:
Home
About
Services
Contact
Explain: This is like a building plan.
2.4 Content Planning
Content includes:
✔ Text
✔ Images
✔ Videos
✔ Links
Teach: Content first, design later.
📘 MODULE 3: Principles of Good Web Design
These are VERY important teaching points.
3.1 Simplicity
✔ Clean layout
✔ Few colors
✔ Easy navigation
Avoid clutter.
3.2 Consistency
Same:
✔ Fonts
✔ Colors
✔ Layout style
Across all pages.
3.3 Readability
✔ Clear fonts
✔ Good spacing
✔ Proper headings
3.4 Visual Hierarchy
Important items stand out.
Example:
Large heading
Bold buttons
Highlighted links
3.5 Fast Loading
Avoid:
✔ Large images
✔ Too many animations
3.6 Mobile Friendliness (Responsive Design)
Website must work on:
✔ Phones
✔ Tablets
✔ Computers
📘 MODULE 4: Introduction to HTML (Structure of Web
Pages)
HTML = HyperText Markup Language
Used to create page structure.
4.1 Basic HTML Page Structure
Teach this first.
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first website.</p>
</body>
</html>
Explain each part clearly.
4.2 Common HTML Tags
Tag Purpose
h1 – h6 Headings
p Paragraph
img Image
a Link
ul / li List
div Section
4.3 Adding Images
<img src="[Link]" alt="description">
4.4 Creating Links
<a href="[Link]
MODULE 5: Introduction to CSS (Styling
Websites)
What is CSS?
CSS (Cascading Style Sheets) is used to make web pages look attractive and organized.
HTML builds the structure of the page.
CSS controls how the page looks.
Think of it like this:
HTML = skeleton of the body
CSS = clothes, makeup, and design
Without CSS, websites look plain and boring.
5.1 What CSS Controls
CSS controls the appearance of elements on a webpage.
✔ Colors
You can change:
Background color
Text color
Border color
Example:
body {
background-color: lightblue;
}
p {
color: green;
}
✔ Fonts
CSS controls how text looks.
You can change:
Font type (Arial, Times New Roman)
Font size
Bold or italic
Text alignment
Example:
h1 {
font-family: Arial;
font-size: 30px;
text-align: center;
}
✔ Layout
CSS controls how items are arranged on a page.
You can:
Place elements side by side
Control page structure
Create columns
Example:
div {
width: 300px;
}
✔ Spacing
CSS controls space around elements.
Two important properties:
Padding → space inside the element
Margin → space outside the element
Example:
p {
padding: 10px;
margin: 20px;
}
✔ Size
CSS controls width and height.
Example:
img {
width: 200px;
height: 150px;
}
5.2 Basic CSS Example
CSS is written using rules.
A CSS rule has:
Selector (what to style)
Property (what to change)
Value (how to change it)
Structure:
selector {
property: value;
}
Example:
<style>
body {
background-color: lightblue;
}
h1 {
color: red;
}
</style>
Explanation:
body → changes whole page background
h1 → changes heading color
5.3 CSS Methods (Ways to Add CSS)
There are three ways to apply CSS.
1️⃣ Inline CSS
Written inside an HTML element.
Example:
<h1 style="color: red;">Hello</h1>
✔ Styles only one element
❌ Not recommended for large websites
Use only for quick testing.
2️⃣ Internal CSS
Written inside <style> in the HTML file.
Example:
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
✔ Styles one page
✔ Good for small projects
3️⃣ External CSS (BEST PRACTICE)
CSS is written in a separate file.
File name example:
[Link]
CSS file:
h1 {
color: green;
}
Link it to HTML:
<link rel="stylesheet" href="[Link]">
✔ Used by professionals
✔ Keeps code clean
✔ Reuse styles on many pages
✔ Easy to manage
👉 Always teach students to use external CSS.
📘 MODULE 6: Page Layout Techniques
6.1 Sections of a Web Page
Most websites follow a common structure.
✔ Header
Top part of page.
Usually contains:
Logo
Website name
Welcome message
Example:
<header>
<h1>My Website</h1>
</header>
✔ Navigation Menu
Contains links to other pages.
Example:
<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav>
✔ Main Content
The main information of the page.
Example:
<main>
<p>This is the main content.</p>
</main>
✔ Sidebar
Side section for extra info.
Often contains:
Ads
Links
News
Profile info
Example:
<aside>
<p>Related links</p>
</aside>
✔ Footer
Bottom of the page.
Usually contains:
Copyright
Contact info
Social media
Example:
<footer>
<p>© 2025 My Website</p>
</footer>
6.2 CSS Layout Tools
CSS provides tools to arrange elements properly.
Two important ones:
✔ Flexbox
Flexbox arranges items in one direction:
Row (horizontal)
Column (vertical)
Good for:
Navigation bars
Centering content
Simple layouts
Example:
.container {
display: flex;
}
Arrange in row:
.container {
display: flex;
flex-direction: row;
}
Arrange in column:
.container {
display: flex;
flex-direction: column;
}
Simple meaning:
👉 Flexbox = arrange items in rows or columns
✔ Grid
Grid is used for full page layout.
It creates:
Rows AND columns
Structured design
Example:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
This creates two equal columns.
Simple meaning:
👉 Grid = design full page layout like a table
Flexbox vs Grid (Simple Comparison)
Feature Flexbox Grid
Direction One direction Two directions
Best for Small layouts Full page layouts
Feature Flexbox Grid
Structure Row OR column Rows AND columns
📘 MODULE 7: Responsive Web Design
Very important modern concept.
Definition:
Website automatically adjusts to screen size.
7.1 Viewport Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1">
7.2 Media Queries (Simple Idea)
Change style depending on screen size.
📘 MODULE 8: User Experience (UX)
UX = how users feel when using website.
Good UX means:
✔ Easy navigation
✔ Fast loading
✔ Clear information
✔ Accessible design
📘 MODULE 9: Web Design Tools
Some common tools students should know:
✔ Code editors (VS Code)
✔ Graphic tools (Photoshop)
✔ Website builders
Popular website builders:
Wix
Squarespace
Adobe (Dreamweaver)
Explain difference:
Website builder = no coding required
HTML/CSS = full control
📘 MODULE 10: Website Testing and Publishing
10.1 Testing
Check:
✔ Links work
✔ Images display
✔ Mobile view
✔ Speed
10.2 Hosting and Domain
Hosting = where website files are stored
Domain = website name
Example:
[Link]
📘 MODULE 11: Basic Web Design Project (Practical)
Give students assignment:
Create a simple 4-page website:
✔ Home
✔ About
✔ Services
✔ Contact
Must include:
✔ Navigation menu
✔ Images
✔ Links
✔ CSS styling
📘 MODULE 12: Assessment Ideas for Students
✔ Short quiz (HTML tags)
✔ Practical design task
✔ Website planning worksheet
✔ Group project
✔ Website presentation