INSTITUTE OF PUBLIC ADMINISTRATION AND MANAGEMENT
(University of Sierra Leone)
Web Design
MR. JAMES BERNARD TURAY
+232 76 342693
[email protected]
INSTITUTE OF PUBLIC ADMINISTRATION AND MANAGEMENT
(University of Sierra Leone)
Table of Content
Contents
Table of Content..............................................................................................................................1
PART 1. Introduction to Web Design.............................................................................................4
What is Web Design?..................................................................................................................4
Importance of Web Design..........................................................................................................4
Key Components of Web Design................................................................................................4
Web Design Tools & Technologies.............................................................................................4
Internet, Web, Browser, and Web Pages.....................................................................................4
PART 2: Hypertext Markup Language............................................................................................6
What is HTML?...........................................................................................................................6
Importance of HTML..................................................................................................................6
History of HTML.........................................................................................................................6
Basic Structure of an HTML Document......................................................................................6
.....................................................................................................................................................6
Explanation of Elements..............................................................................................................6
HTML Elements and Tags...........................................................................................................7
Basic Tags................................................................................................................................7
HTML Attributes.........................................................................................................................8
Common Attributes.................................................................................................................8
Global Attributes.....................................................................................................................8
Semantic HTML..........................................................................................................................8
What is Semantic HTML?.......................................................................................................8
Examples of Semantic Tags.....................................................................................................8
Multimedia in HTML..................................................................................................................9
Adding Images.........................................................................................................................9
Embedding Videos...................................................................................................................9
Embedding Audio....................................................................................................................9
HTML Forms and User Input......................................................................................................9
Form Elements........................................................................................................................9
Input Types..............................................................................................................................9
HTML5 New Features.............................................................................................................9
1
ICT1: FOS114 Lecture 1: Introduction to ICT
INSTITUTE OF PUBLIC ADMINISTRATION AND MANAGEMENT
(University of Sierra Leone)
HTML5 Features.....................................................................................................................9
Best Practices in HTML..............................................................................................................9
PART 3: CSS (Cascading Style Sheets)........................................................................................11
1. Introduction to CSS...............................................................................................................11
1.1 What is CSS?...................................................................................................................11
1.2 Importance of CSS...........................................................................................................11
1.3 History of CSS.................................................................................................................11
2. CSS Syntax and Selectors......................................................................................................11
2.1 Basic CSS Syntax............................................................................................................11
2.2 Types of Selectors............................................................................................................11
3. Types of CSS.........................................................................................................................12
3.1 Inline CSS........................................................................................................................12
3.2 Internal CSS.....................................................................................................................12
3.3 External CSS....................................................................................................................12
4. CSS Box Model.....................................................................................................................12
5. CSS Positioning and Layouts................................................................................................12
5.1 Positioning Properties......................................................................................................12
5.2 Display Properties............................................................................................................13
5.3 Flexbox Layout................................................................................................................13
5.4 Grid Layout......................................................................................................................13
6. Responsive Web Design........................................................................................................13
6.1 Media Queries..................................................................................................................13
6.2 Units in CSS....................................................................................................................13
7. CSS Animations and Transitions...........................................................................................14
7.1 Transitions.......................................................................................................................14
7.2 Keyframe Animations......................................................................................................14
8. Advanced CSS Techniques....................................................................................................14
8.1 CSS Variables..................................................................................................................14
8.2 CSS Preprocessors (SCSS, LESS)...................................................................................14
8.3 CSS Frameworks.............................................................................................................14
9. Best Practices in CSS.............................................................................................................15
PART 4: JavaScript.......................................................................................................................16
1. Introduction to JavaScript......................................................................................................16
1.1 What is JavaScript?..........................................................................................................16
2
ICT1: FOS114 Lecture 1: Introduction to ICT
INSTITUTE OF PUBLIC ADMINISTRATION AND MANAGEMENT
(University of Sierra Leone)
1.2 Importance of JavaScript.................................................................................................16
1.3 History of JavaScript.......................................................................................................16
2. JavaScript Basics...................................................................................................................16
2.1 JavaScript Syntax.............................................................................................................16
2.2 Variables and Data Types................................................................................................17
2.3 Operators..........................................................................................................................17
3. Control Structures..................................................................................................................17
3.1 Conditional Statements....................................................................................................17
3.2 Switch Statement.............................................................................................................18
3.3 Loops...............................................................................................................................18
4. Functions................................................................................................................................18
4.1 Function Declaration.......................................................................................................18
4.2 Arrow Functions..............................................................................................................18
...................................................................................................................................................18
5. Objects and Arrays................................................................................................................19
5.1 Objects.............................................................................................................................19
5.2 Arrays..............................................................................................................................19
6. DOM Manipulation...............................................................................................................19
6.1 Selecting Elements...........................................................................................................19
6.2 Event Handling................................................................................................................19
7. ES6 and Modern JavaScript Features....................................................................................19
7.1 Template Literals.............................................................................................................19
7.2 Destructuring...................................................................................................................20
7.3 Spread and Rest Operator................................................................................................20
8. Asynchronous JavaScript.......................................................................................................20
8.1 Callbacks..........................................................................................................................20
8.2 Promises...........................................................................................................................20
8.3 Async/Await....................................................................................................................20
9. JavaScript Frameworks and Libraries...................................................................................20
10. Best Practices in JavaScript.................................................................................................20
PART 6: Web Hosting & Deployment......................................................................................22
Domain Names & Hosting.....................................................................................................22
Website Deployment Steps....................................................................................................22
Web Design Best Practices........................................................................................................22
3
ICT1: FOS114 Lecture 1: Introduction to ICT
INSTITUTE OF PUBLIC ADMINISTRATION AND MANAGEMENT
(University of Sierra Leone)
PART 1. Introduction to Web Design
What is Web Design?
Web design refers to the process of planning, conceptualizing, and arranging content online. It
includes aspects such as layout, color schemes, graphics, fonts, and interactive elements. A well-
designed website enhances usability, accessibility, and user engagement.
Importance of Web Design
User Experience (UX): Ensures easy navigation and interaction.
Aesthetics: Creates visually appealing pages.
Branding: Establishes a professional identity.
SEO: Improves search engine rankings.
Responsiveness: Ensures compatibility with various devices.
Key Components of Web Design
HTML (Hypertext Markup Language) – Structure
CSS (Cascading Style Sheets) – Styling
JavaScript – Interactivity
Web Graphics and Multimedia – Enhances visual appeal
UI/UX Design – Focuses on usability and experience
Web Design Tools & Technologies
Code Editors: VS Code, Sublime Text
Design Tools: Adobe XD, Figma
Frameworks: Bootstrap, Tailwind CSS
Version Control: Git, GitHub
4
ICT1: FOS114 Lecture 1: Introduction to ICT
INSTITUTE OF PUBLIC ADMINISTRATION AND MANAGEMENT
(University of Sierra Leone)
Internet, Web, Browser, and Web Pages
In web design, understanding the relationship between the Internet, the Web, the Browser, and
Web Pages is essential:
1. Internet: The Internet is a global network of interconnected computers that
communicate using protocols like TCP/IP. It allows data transfer and provides the
foundation for various services, including the World Wide Web.
2. Web (World Wide Web - WWW): The Web is a service that runs on the Internet.
It consists of websites and web applications that users access through browsers. It uses
protocols like HTTP/HTTPS to retrieve and display content.
3. Web Browser: A web browser (e.g., Chrome, Firefox, Edge) is software that allows
users to access and interact with web pages. It retrieves HTML documents from web
servers, interprets them, and renders them visually for users.
4. Web Pages: A web page is a document on the Web, typically written in HTML, styled
with CSS, and made interactive with JavaScript. Web pages are hosted on web servers
and accessed via browsers using URLs.
How They Are Related:
- The Internet provides the infrastructure for data exchange.
- The Web uses the Internet to deliver websites and applications.
- A Web Browser fetches, interprets, and displays Web Pages for users.
- Web Pages are hosted on web servers and accessed via the Web using browsers.
5
ICT1: FOS114 Lecture 1: Introduction to ICT
INSTITUTE OF PUBLIC ADMINISTRATION AND MANAGEMENT
(University of Sierra Leone)
PART 2: Hypertext Markup Language
What is HTML?
HTML (Hypertext Markup Language) is the standard language for creating web pages. It
provides the basic structure of a webpage using elements enclosed in tags.
The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>
Importance of HTML
Defines the structure of web content
Works with CSS and JavaScript to create interactive websites
Supported by all web browsers
History of HTML
HTML 1.0 (1993) – Basic text and links
HTML 2.0 (1995) – Form elements introduced
HTML 3.2 (1997) – Better support for tables and scripting
HTML 4.01 (1999) – Enhanced multimedia support
XHTML (2000) – Stricter version of HTML
HTML5 (2014-present) – Modern features including multimedia and APIs
Basic Structure of an HTML Document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a simple webpage.</p>
</body>
</html>
Explanation of Elements
<!DOCTYPE html> – Declares the document type
<html> – Root element
6
ICT1: FOS114 Lecture 1: Introduction to ICT
INSTITUTE OF PUBLIC ADMINISTRATION AND MANAGEMENT
(University of Sierra Leone)
<head> – Contains metadata
<meta> – Defines character encoding and viewport settings
<title> – Defines the page title
<body> – Contains visible content
HTML Elements and Tags
Basic Tags
Headings: <h1> to <h6>
Paragraphs: <p>
Links: <a href="URL">Click Here</a>
Images: <img src="image.jpg" alt="Description">
Lists:
Unordered List:
<ul>
<li>Item</li>
</ul>
Ordered List:
<ol>
<li>Item</li>
</ol>
Tables:
<table>
<tr>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
</table>
7
ICT1: FOS114 Lecture 1: Introduction to ICT
INSTITUTE OF PUBLIC ADMINISTRATION AND MANAGEMENT
(University of Sierra Leone)
Forms:
<form action="submit.php" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
HTML Attributes
Common Attributes
id – Unique identifier
class – Assigns a class for styling
src – Specifies image or media source
alt – Alternative text for images
href – Hyperlink reference
Global Attributes
style – Inline styling
title – Tooltip text
data- – Custom data attributes
Semantic HTML
What is Semantic HTML?
Semantic HTML uses meaningful tags to improve accessibility and SEO.
Examples of Semantic Tags
<header> – Defines introductory content
<nav> – Navigation menu
<section> – A section of content
<article> – Independent content
<aside> – Sidebar content
<footer> – Footer of the page
8
ICT1: FOS114 Lecture 1: Introduction to ICT
INSTITUTE OF PUBLIC ADMINISTRATION AND MANAGEMENT
(University of Sierra Leone)
Multimedia in HTML
Adding Images
<img src="image.jpg" alt="Description">
Embedding Videos
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Embedding Audio
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
HTML Forms and User Input
Form Elements
<form action="submit.php" method="POST">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
Input Types
text – Text input
password – Password field
email – Email validation
radio – Single choice
checkbox – Multiple selections
submit – Submit button
reset – Reset form
HTML5 New Features
HTML5 Features
New Semantic Elements: <article>, <section>, <nav>, <footer>
Forms Enhancements: New input types (date, number, range)
Multimedia Support: <audio>, <video>
Canvas API: <canvas> for drawing graphics
9
ICT1: FOS114 Lecture 1: Introduction to ICT
INSTITUTE OF PUBLIC ADMINISTRATION AND MANAGEMENT
(University of Sierra Leone)
Local Storage: localStorage and sessionStorage
Best Practices in HTML
Use semantic tags for better SEO and accessibility.
Write clean and well-structured code.
Ensure proper indentation and formatting.
Use alt attributes for images.
Optimize for performance and accessibility.
10
ICT1: FOS114 Lecture 1: Introduction to ICT
INSTITUTE OF PUBLIC ADMINISTRATION AND MANAGEMENT
(University of Sierra Leone)
PART 3: CSS (Cascading Style Sheets)
1. Introduction to CSS
1.1 What is CSS?
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of an
HTML document. It controls the layout, colors, fonts, and overall look of web pages.
1.2 Importance of CSS
Enhances the visual presentation of web pages.
Enables separation of content (HTML) and design (CSS).
Supports responsive and adaptive web design.
Improves website performance and user experience.
1.3 History of CSS
CSS1 (1996): Basic styling support.
CSS2 (1998): Introduced positioning, media types.
CSS3 (2011-Present): Added animations, flexbox, grid, and more.
2. CSS Syntax and Selectors
2.1 Basic CSS Syntax
selector {
property: value;
}
Example:
h1 {
color: blue;
font-size: 24px;
}
2.2 Types of Selectors
Universal Selector (): Targets all elements.
Element Selector (h1, p, div): Targets specific elements.
Class Selector (.class-name): Targets elements with a specific class.
ID Selector (#id-name): Targets a unique element by ID.
Attribute Selector ([type="text"]): Selects elements with a specific attribute.
Pseudo-classes (: hover,: focus): Applies styles based on user interaction.
11
ICT1: FOS114 Lecture 1: Introduction to ICT
INSTITUTE OF PUBLIC ADMINISTRATION AND MANAGEMENT
(University of Sierra Leone)
3. Types of CSS
3.1 Inline CSS
<p style="color: red;">This is a red paragraph. </p>
3.2 Internal CSS
<style>
p{
color: blue;
}
</style>
3.3 External CSS
<link rel="stylesheet" href="styles.css">
External CSS example:
body {
background-color: lightgray;
}
4. CSS Box Model
The Box Model consists of:
1. Content – The actual text or image inside an element.
2. Padding – Space around the content.
3. Border – Surrounds padding and content.
4. Margin – Space outside the border.
Example: div {
5. CSS width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
Positioning and Layouts
5.1 Positioning Properties
Static (default) – Elements are positioned normally.
Relative – Positioned relative to its normal position.
Absolute – Positioned relative to its nearest positioned ancestor.
Fixed – Stays fixed relative to the viewport.
Sticky – Toggles between relative and fixed based on scroll position.
12
ICT1: FOS114 Lecture 1: Introduction to ICT
INSTITUTE OF PUBLIC ADMINISTRATION AND MANAGEMENT
(University of Sierra Leone)
5.2 Display Properties
block – Takes full width.
inline – Takes only as much width as needed.
inline-block – Like inline but respects width and height.
none – Hides the element.
5.3 Flexbox Layout
.container {
display: flex;
justify-content: center;
align-items: center;
}
5.4 Grid Layout
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
6. Responsive Web Design
6.1 Media Queries
6.2 Units(max-width:
@media in CSS 600px) {
body { – Pixels (fixed size)
px
background-color: lightblue;
% – Percentage relative to parent
}
} em – Relative to the element’s font size
rem – Relative to the root font size
vh/vw – Viewport height/width
7. CSS Animations and Transitions
13
ICT1: FOS114 Lecture 1: Introduction to ICT
INSTITUTE OF PUBLIC ADMINISTRATION AND MANAGEMENT
(University of Sierra Leone)
7.1 Transitions
div {
transition: background-color 0.5s;
}
div:hover {
background-color: yellow;
}
7.2 Keyframe Animations
@keyframes example {
from { background-color: red; }
to { background-color: yellow; }
}
div {
animation: example 3s infinite;
}
8. Advanced CSS Techniques
8.1 CSS Variables
:root {
--main-color: blue;
}
h1 {
color: var(--main-color);
}
8.2 CSS Preprocessors (SCSS, LESS)
SCSS Example:
$main-color: blue;
h1 {
color: $main-color;
}
8.3 CSS Frameworks
Bootstrap
Tailwind CSS
Materialize
14
ICT1: FOS114 Lecture 1: Introduction to ICT
INSTITUTE OF PUBLIC ADMINISTRATION AND MANAGEMENT
(University of Sierra Leone)
9. Best Practices in CSS
Use external CSS for better maintainability.
Avoid inline styles.
Use semantic class names.
Optimize for performance (minify and compress files).
Make designs responsive using media queries.
15
ICT1: FOS114 Lecture 1: Introduction to ICT
INSTITUTE OF PUBLIC ADMINISTRATION AND MANAGEMENT
(University of Sierra Leone)
PART 4: JavaScript
1. Introduction to JavaScript
1.1 What is JavaScript?
JavaScript is a lightweight, interpreted, or just-in-time compiled programming language with
first-class functions. It is primarily used for creating dynamic and interactive web content.
1.2 Importance of JavaScript
Enables interactivity in web applications.
Works on all modern browsers without additional software.
Supports both frontend and backend development (Node.js).
Allows manipulation of HTML and CSS.
1.3 History of JavaScript
Created by Brendan Eich in 1995.
Standardized as ECMAScript (ES) in 1997.
Continuous improvements with ES6 (2015) and beyond.
2. JavaScript Basics
2.1 JavaScript Syntax
console.log("Hello, World!");
Case-sensitive.
Uses semicolons (optional but recommended).
Uses let, const, or var for variable declarations.
16
ICT1: FOS114 Lecture 1: Introduction to ICT
INSTITUTE OF PUBLIC ADMINISTRATION AND MANAGEMENT
(University of Sierra Leone)
2.2 Variables and Data Types
let name = "John"; // String
const age = 25; // Number
let isStudent = true; // Boolean
let car = null; // Null
let city; // Undefined
let symbols = Symbol("unique"); // Symbol
let person = { firstName: "John", lastName: "Doe" }; // Object
2.3 Operators
Arithmetic: +, -, , /, %
Assignment: =, +=, -=, =, /=
Comparison: ==, ===, !=, !==, >, <
Logical: &&, ||, !
3. Control Structures
3.1 Conditional Statements
if (age > 18) {
console.log("Adult");
} else {
console.log("Minor");
}
3.2 Switch Statement
switch(day) {
case "Monday":
console.log("Start of the week");
break;
case "Friday":
console.log("Weekend is near");
break;
default:
console.log("Regular day");
}
17
ICT1: FOS114 Lecture 1: Introduction to ICT
INSTITUTE OF PUBLIC ADMINISTRATION AND MANAGEMENT
(University of Sierra Leone)
3.3 Loops
4. Functions
4.1 Function Declaration
function greet(name) {
return "Hello, " + name;
}
console.log(greet("Alice"));
4.2 Arrow Functions
const add = (a, b) => a + b;
console.log(add(5, 3));
for (let i = 0; i < 5; i++) {
5.
console.log(i);
}
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
Objects and Arrays
5.1 Objects
let person = {
name: "John",
age: 30,
5.2 Arrays
greet: function() {
6. DOM Manipulation
return "Hello " + this.name;
}
};
console.log(person.greet());
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[1]);
18
ICT1: FOS114 Lecture 1: Introduction to ICT
INSTITUTE OF PUBLIC ADMINISTRATION AND MANAGEMENT
(University of Sierra Leone)
6.1 Selecting Elements
document.getElementById("demo").innerText = "Hello JavaScript";
document.querySelector(".className").style.color = "red";
6.2 Event Handling
7.
document.getElementById("btn").addEventListener("click", function() {
alert("Button Clicked!");
});
ES6 and Modern JavaScript Features
7.1 Template Literals
let name = "Alice";
console.log(`Hello, ${name}`);
7.2 Destructuring
let [a, b] = [10, 20];
console.log(a);
7.3 Spread and Rest =Operator
let nums [1, 2, 3];
8. Asynchronous JavaScript
let newNums = [...nums, 4, 5];
8.1 Callbacks
console.log(newNums);
function fetchData(callback) {
setTimeout(() => {
callback("Data fetched");
}, 1000);
}
fetchData(console.log);
8.2 Promises
let promise = new Promise((resolve, reject) => {
let success = true;
if (success) resolve("Success!");
else reject("Failed!");
});
promise.then(console.log).catch(console.error);
19
ICT1: FOS114 Lecture 1: Introduction to ICT
INSTITUTE OF PUBLIC ADMINISTRATION AND MANAGEMENT
(University of Sierra Leone)
8.3 Async/Await
9. JavaScript Frameworks and Libraries
React.js – UI library for building single-page applications.
Vue.js – Progressive framework for user interfaces.
Angular – Full-featured framework by Google.
Node.js – JavaScript runtime for backend development.
async function fetchData() {
let response = await fetch("https://jsonplaceholder.typicode.com/posts");
let data = await response.json();
console.log(data);
}
fetchData();
10. Best Practices in JavaScript
Use const and let instead of var.
Follow the DRY (Don’t Repeat Yourself) principle.
Optimize performance (avoid unnecessary DOM manipulations).
Use meaningful variable and function names.
Handle errors properly with try...catch.
20
ICT1: FOS114 Lecture 1: Introduction to ICT
INSTITUTE OF PUBLIC ADMINISTRATION AND MANAGEMENT
(University of Sierra Leone)
PART 6: Web Hosting & Deployment
Domain Names & Hosting
Domain Name: The website address (e.g., www.example.com)
Hosting: Storage space for website files
Popular Hosting Services: GoDaddy, Bluehost, AWS, Netlify
Website Deployment Steps
1. Buy a domain and hosting.
2. Upload files using FTP or GitHub.
3. Configure the database (if needed).
4. Ensure security and optimization.
Web Design Best Practices
Simplicity: Avoid cluttered designs.
Mobile-First Design: Optimize for small screens.
Fast Loading Speed: Minimize large images and scripts.
Accessibility: Ensure content is usable for all users.
SEO Optimization: Improve search rankings with proper tags and descriptions.
21
ICT1: FOS114 Lecture 1: Introduction to ICT
INSTITUTE OF PUBLIC ADMINISTRATION AND MANAGEMENT
(University of Sierra Leone)
22
ICT1: FOS114 Lecture 1: Introduction to ICT
