INSTITUTE OF PUBLIC ADMINISTRATION AND MANAGEMENT

(University of Sierra Leone)

Web Design

MR. JAMES BERNARD TURAY

+232 76 342693
tjamesbernard01@gmail.com
 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