Web Development Training Manual | Complete Teaching Note

WEB DEVELOPMENT
COMPREHENSIVE TRAINING MANUAL
From Zero to Deployed — HTML · CSS · JavaScript · Backend · Hosting

15 Hands-On Projects · Beginner to Intermediate · Deployment on Vercel · Custom Domains

© 2025 Web Development Training Page 1

Web Development Training Manual | Complete Teaching Note

Table of Contents
PART 1: Why Web Development? The Big Picture 3
PART 2: How the Web Works 5
PART 3: HTML — The Skeleton of the Web 7
PART 4: CSS — Dressing Up Your Website 13
PART 5: JavaScript — Bringing It to Life 20
PART 6: Git & GitHub — Saving and Sharing Your Work 28
PART 7: Deploying to Vercel 32
PART 8: Custom Domains — Getting Your .com or .ng 35
PART 9: Introduction to Backend Development 38
PART 10: Databases — Storing Information 43
PART 11: Authentication — Login & Signup 47
PART 12: Free & Affordable Hosting for Backend 51
APPENDIX: 15 Projects Overview & Checklist 53

© 2025 Web Development Training Page 2

Web Development Training Manual | Complete Teaching Note

PART 1: Why Web Development? The Big Picture

1.1 What Is Web Development?
Web development is the art and science of building things that live on the internet — websites, web
apps, online stores, blogs, portfolios, government portals, and much more. If you can access it through
a browser (Chrome, Firefox, Edge, Safari), a web developer built it.

Think of the internet as a giant city. Every website is a building in that city. Web developers are the
architects, interior designers, electricians, and plumbers who design and construct those buildings —
some handle the outside look (frontend), some manage the pipes and engines inside (backend), and
some do both (full-stack).

🏙 Analogy: The City and the Buildings

Imagine Lagos Island. There are skyscrapers, markets, offices, and restaurants.
Each building = one website.
The architect who drew the plan = the web developer.
The interior decorator = a CSS/UI developer.
The electrician who wires the lights = a JavaScript developer.
The security and plumbing team = the backend developer.
You are learning to do ALL of this!

1.2 A Brief History of Web Development

The World Wide Web (WWW) was invented by Sir Tim Berners-Lee in 1989 while working at CERN,
the physics research lab in Switzerland. He wanted scientists to share documents easily. He created
three foundational things:
• HTML — a language to write documents
• HTTP — a protocol to send those documents over a network
• A browser — a program to read and display those documents

By 1993, the first web browser (Mosaic) was released to the public. Websites in those days were plain
text with no pictures, no color — like reading a black-and-white newspaper.

Then CSS was introduced in 1996, allowing colors, fonts, and layouts. JavaScript arrived in 1995
(created in just 10 days by Brendan Eich at Netscape!) and made pages interactive. From 2005
onward, powerful frameworks like React, Angular, and Vue revolutionized how web apps were built.
Today, entire businesses — banks, hospitals, schools, governments — run on the web.

© 2025 Web Development Training Page 3

Web Development Training Manual | Complete Teaching Note

1.3 Why Is Web Development a Critical Skill Today?

We live in a digital-first world. Consider these facts:
• Over 5.4 billion people use the internet globally (Statista, 2024).
• Nigeria has over 100 million internet users — one of Africa's largest online populations.
• Businesses without a website lose customers to competitors who have one.
• Web developers are among the highest-paid professionals globally.
• Freelance web developers can earn between ₦200,000 and ₦2,000,000+ per month depending
on skill level.
• Skills in web development open doors to remote work, global clients, and startup opportunities.

💼 Real-World Examples of What Web Developers Build

E-commerce stores (Jumia, Konga, Amazon) — web developers built these.
School registration portals, JAMB, WAEC portals — web developers.
Mobile banking apps (GTBank, Opay, PalmPay) — their web versions are built by web
developers.
News websites (Punch, Vanguard, BBC) — web developers.
Your next startup idea? You'll need a web developer — and that could be YOU.

1.4 What You Will Learn in This Training

By the end of this course, you will be able to:
1. Write structured web pages using HTML
2. Style and design beautiful, responsive websites with CSS
3. Add interactivity and logic with JavaScript
4. Save and manage your code using Git and GitHub
5. Deploy your website live for the world to see using Vercel
6. Register and connect a custom domain (.com, .ng, etc.) from Truehost, Whogohost, or
Namecheap
7. Understand backend development — servers, APIs, and databases
8. Build login and signup systems
9. Use free and affordable hosting for backend services
10. Complete 15 real-world projects to build your portfolio

© 2025 Web Development Training Page 4

Web Development Training Manual | Complete Teaching Note

PART 2: How the Web Works

2.1 The Client and the Server
Every time you open a website, two computers talk to each other: your device (the CLIENT) and a
powerful computer somewhere in the world (the SERVER).

📬 Analogy: The Restaurant

Imagine visiting a restaurant.
YOU are the client — you sit down and place an order.
The WAITER is the internet — carrying your request to the kitchen.
The KITCHEN is the server — it prepares your order and sends it back.
The FOOD that arrives is the web page displayed on your screen.
When you type [Link], your browser (you) asks Google's server (kitchen) to send you
their homepage (food).

2.2 What Happens When You Visit a Website

11. You type a URL (e.g., [Link] into your browser.
12. The browser asks a DNS (Domain Name System) server: 'What is the IP address of
[Link]?' DNS is like a phonebook for the internet.
13. The DNS returns the IP address (e.g., [Link]).
14. Your browser connects to Google's server using that IP address.
15. The server sends back HTML, CSS, and JavaScript files.
16. Your browser reads those files and displays the webpage you see.

This entire process usually happens in less than one second!

2.3 Frontend vs Backend

Web development has two major sides:

FRONTEND BACKEND
What the user SEES and interacts with What happens behind the scenes
HTML, CSS, JavaScript [Link], Python, PHP, Ruby, Java
Runs in the browser Runs on the server
Design, layout, animations, forms Databases, authentication, business logic
Like the front of a shop Like the store room and accounts office

© 2025 Web Development Training Page 5

Web Development Training Manual | Complete Teaching Note

This training covers BOTH — you will leave here knowing frontend deeply and backend at a confident
beginner level.

© 2025 Web Development Training Page 6

Web Development Training Manual | Complete Teaching Note

PART 3: HTML — The Skeleton of the Web

3.1 What Is HTML?
HTML stands for HyperText Markup Language. It is NOT a programming language — it is a markup
language. That means it is used to structure content (text, images, links, forms) on a web page.

🦴 Analogy: HTML is the Skeleton

Every human being has a skeleton — bones that give structure to the body.
Remove the skin, muscles, and organs, and you still know what a person looks like by their
skeleton.
HTML is the skeleton of a website.
It defines: 'here is a heading', 'here is a paragraph', 'here is a button', 'here is an image'.
CSS adds the skin, hair, and clothes. JavaScript makes it move and talk.

3.2 Setting Up Your Environment

Before writing code, you need a text editor. We recommend Visual Studio Code (VS Code) — free,
lightweight, and powerful.

Steps to set up:

17. Go to [Link] and download VS Code for your operating system.
18. Install it with default settings.
19. Open VS Code and create a new folder called my-first-website.
20. Inside that folder, create a file called [Link]
21. Install the 'Live Server' extension inside VS Code (click Extensions icon, search 'Live Server',
click Install).
22. Right-click on [Link] and select 'Open with Live Server' — your browser will open and show
your page in real time!

3.3 Your First HTML File

Every HTML page follows a standard structure. Think of it as the frame of a house before any walls,
furniture, or paint:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Website</title>
</head>

© 2025 Web Development Training Page 7

Web Development Training Manual | Complete Teaching Note

<body>
<h1>Hello, World!</h1>
<p>This is my first web page.</p>
</body>
</html>

Let us break down what each part means:

• <!DOCTYPE html> — Tells the browser this is a modern HTML5 document.
• <html> — The root element. Everything lives inside here.
• <head> — Contains information ABOUT the page (title, links to CSS, etc.) — not visible on
screen.
• <meta charset> — Ensures special characters (like ₦, é, ç) display correctly.
• <meta name=viewport> — Makes your page look good on mobile phones.
• <title> — The text shown on the browser tab.
• <body> — Everything visible on the page goes here.

3.4 Essential HTML Tags

Tags are the building blocks of HTML. Most tags come in pairs — an opening tag and a closing tag:

Tag Purpose Example Output

<h1> to <h6> Headings (h1 is largest, h6 smallest) Big bold title text
<p> Paragraph of text A block of readable text
<a href='...'> Hyperlink / clickable link Click here
<img src='...'> Display an image (an image appears)
<ul> and <li> Unordered list (bullet points) • Item 1 • Item 2
<ol> and <li> Ordered list (numbered) 1. Item 2. Item
<div> A container / box for grouping (invisible group)
elements
<span> Inline container for styling part of (inline group)
text
<button> A clickable button [Click Me]
<input> A text field, checkbox, or form [type here...]
control
<form> A form for collecting user input (form container)
<table> A data table with rows and columns (grid of data)
<nav> Navigation bar section (menu links)
<header> Top section of a page (top of page)
<footer> Bottom section of a page (bottom of page)
<section> A section of related content (content block)

© 2025 Web Development Training Page 8

Web Development Training Manual | Complete Teaching Note

3.5 HTML Attributes

Attributes give extra information to HTML tags. They always go inside the opening tag:

<!-- Link with href (destination) and target (open in new tab) -->
<a href="[Link] target="_blank">Visit Google</a>

<!-- Image with src (file path) and alt (description for accessibility) -->
<img src="[Link]" alt="A beautiful landscape" width="400">

<!-- Input with type and placeholder -->

<input type="email" placeholder="Enter your email address">

<!-- Button with an id for JavaScript to target -->

<button id="submitBtn">Submit</button>

3.6 HTML Forms — Collecting User Input

Forms are how websites collect information from users — login, registration, search, contact pages,
etc. Every form has inputs and a submit button:

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

<label for="name">Full Name:</label>
<input type="text" id="name" name="name" placeholder="John Doe" required>

<label for="email">Email Address:</label>

<input type="email" id="email" name="email" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<label for="gender">Gender:</label>
<select id="gender" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>

<button type="submit">Create Account</button>

</form>

3.7 Semantic HTML

Semantic HTML means using the right tag for the right content. Instead of using <div> for everything,
use meaningful tags:
• <header> — For the top section of a page (logo, navigation)
• <nav> — For navigation menus

© 2025 Web Development Training Page 9

Web Development Training Manual | Complete Teaching Note

• <main> — For the primary content of the page

• <article> — For self-contained content like a blog post
• <section> — For a group of related content
• <aside> — For side content like ads or related links
• <footer> — For the bottom of the page

Why does this matter? Semantic HTML makes your site more accessible to people with disabilities
(screen readers), improves your SEO ranking on Google, and makes your code easier to understand.

🛠 PROJECT 1: Personal Profile Page

1. Create a file called [Link]
2. Add a heading with your name
3. Write a short paragraph (3-4 sentences) about yourself
4. Add an unordered list of your 5 hobbies
5. Add an ordered list of your top 3 goals
6. Add an image of yourself or any placeholder image (use [Link]
7. Add a link to your favorite website
8. Use proper semantic tags: <header>, <main>, <footer>
9. Open with Live Server and view it in your browser
💡 Hint: No CSS yet — focus only on structure. We will beautify it in Part 4!

🛠 PROJECT 2: Restaurant Menu Page

1. Create [Link]
2. Use a <table> to display at least 8 menu items with columns: Name, Description, Price
3. Add a <header> with the restaurant name and a navigation with links to 'Home' and 'Contact'
4. Add a <form> at the bottom so users can place an order (name, phone number, item choice,
quantity, submit button)
5. Add a <footer> with the restaurant address and phone number
💡 Hint: Use the <required> attribute on important form fields so users cannot submit without filling
them in.

© 2025 Web Development Training Page 10

Web Development Training Manual | Complete Teaching Note

PART 4: CSS — Dressing Up Your Website

4.1 What Is CSS?
CSS stands for Cascading Style Sheets. It controls how HTML elements look on screen — colors,
fonts, sizes, spacing, layout, animations, and responsive design.

👗 Analogy: CSS is the Wardrobe

If HTML is the skeleton (bones and structure), CSS is the clothes, skin, hair, and makeup.
Same skeleton (HTML) — different styles (CSS) = completely different appearance.
A website without CSS looks like a plain text document.
A website WITH CSS can look like a magazine, an app, or a masterpiece.

4.2 How to Add CSS

There are three ways to add CSS to your HTML:

23. Inline CSS — written directly in the HTML tag (not recommended for large projects)
<p style="color: red; font-size: 18px;">This text is red</p>

24. Internal CSS — written inside a <style> tag in the <head> section
<head>
<style>
p { color: blue; font-size: 16px; }
</style>
</head>

25. External CSS — the BEST approach. A separate .css file linked to your HTML
<!-- In HTML head -->
<link rel="stylesheet" href="[Link]">

/* In [Link] file */
p {
color: green;
font-size: 16px;
}

4.3 CSS Selectors — Targeting Elements

Selectors tell CSS which HTML elements to style:

/* Element selector — targets ALL paragraphs */

© 2025 Web Development Training Page 11

Web Development Training Manual | Complete Teaching Note

p { color: #333333; }

/* Class selector — targets elements with class='highlight' */

.highlight { background-color: yellow; }

/* ID selector — targets ONE element with id='header' */

#header { background-color: navy; color: white; }

/* Descendant selector — targets <a> tags inside a <nav> */

nav a { text-decoration: none; color: white; }

/* Hover pseudo-class — styles when mouse hovers over element */

button:hover { background-color: darkblue; cursor: pointer; }

/* Multiple selectors — targets h1 AND h2 at once */

h1, h2 { font-family: Arial, sans-serif; }

4.4 The CSS Box Model — Understanding Space

Every HTML element is a rectangular box. The Box Model explains how space works around content:

📦 The Box Model (from inside out)

CONTENT — The actual text or image inside the element.
PADDING — Space between the content and the border (inside the box).
BORDER — The visible or invisible line around the box.
MARGIN — Space outside the border, separating this box from other elements.

Think of a gift box:

Content = the gift inside.
Padding = the bubble wrap or stuffing around the gift.
Border = the walls of the box itself.
Margin = the distance between this box and the box next to it on the shelf.

.card {
width: 300px; /* Width of content area */
padding: 20px; /* 20px space inside on all sides */
border: 2px solid #ccc; /* A thin gray border */
margin: 16px; /* 16px space outside on all sides */
border-radius: 8px; /* Rounded corners */
box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* subtle shadow */
}

© 2025 Web Development Training Page 12

Web Development Training Manual | Complete Teaching Note

4.5 Colors and Typography

CSS gives you full control over colors and text styling:

body {
/* Background color */
background-color: #f0f4f8; /* Hex color code */
background-color: rgb(240, 244, 248); /* Same color using RGB */

/* Typography */
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 16px;
line-height: 1.6; /* Space between lines — 1.6x the font size */
color: #1a1a2e; /* Dark text color */
}

h1 {
font-size: 2.5rem; /* rem = relative to root font size */
font-weight: 700; /* Bold */
letter-spacing: -1px;
text-align: center;
}

/* Google Fonts — add this in HTML <head> */

/* <link href="[Link]
family=Inter:wght@400;700&display=swap" rel="stylesheet"> */

4.6 CSS Flexbox — Modern Layout

Flexbox is one of the most powerful CSS tools. It lets you arrange elements in a row or column and
control alignment, spacing, and order with ease.

🍽 Analogy: Flexbox is a Waiter Arranging Plates

Imagine a waiter placing dishes on a long table.
display: flex — tells the container: arrange children in a row.
justify-content — controls spacing along the row (left, center, right, space-between).
align-items — controls vertical alignment (top, center, bottom).
flex-wrap: wrap — if there are too many dishes, start a new row.

.navbar {
display: flex;
justify-content: space-between; /* Logo left, links right */
align-items: center; /* Vertically center everything */
padding: 16px 32px;
background-color: #1a56db;

© 2025 Web Development Training Page 13

Web Development Training Manual | Complete Teaching Note

.card-container {
display: flex;
flex-wrap: wrap; /* Wrap to next line on small screens */
gap: 24px; /* Space between cards */
justify-content: center;
}

.card {
flex: 1 1 280px; /* Grow, shrink, min-width 280px */
max-width: 320px;
}

4.7 CSS Grid — Advanced Layout

CSS Grid lets you create complex two-dimensional layouts (rows AND columns at the same time). It is
perfect for page layouts:

.page-layout {
display: grid;
grid-template-columns: 250px 1fr; /* Sidebar + main content */
grid-template-rows: auto 1fr auto; /* Header + content + footer */
min-height: 100vh;
gap: 0;
}

.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
gap: 24px;
}

/* On small screens, show 1 column */

@media (max-width: 768px) {
.blog-grid { grid-template-columns: 1fr; }
.page-layout { grid-template-columns: 1fr; }
}

4.8 Responsive Design — Mobile First

More than 60% of web traffic comes from mobile phones. Responsive design means your website looks
great on ALL screen sizes — phones, tablets, laptops, and desktops.

The key tool is the CSS Media Query — it applies styles only when certain conditions are met (like
screen width):

© 2025 Web Development Training Page 14

Web Development Training Manual | Complete Teaching Note

/* Default styles — for mobile first */

.hero-title {
font-size: 1.8rem;
padding: 16px;
}

/* Tablet screens — 600px and above */

@media (min-width: 600px) {
.hero-title { font-size: 2.5rem; }
}

/* Desktop screens — 1024px and above */

@media (min-width: 1024px) {
.hero-title { font-size: 3.5rem; }
}

4.9 CSS Variables and Reusability

CSS variables (custom properties) let you define values once and reuse them everywhere — making
updates fast and easy:

:root {
--primary-color: #1a56db;
--secondary-color: #0e9f6e;
--text-color: #1f2a37;
--border-radius: 8px;
--font-main: 'Inter', Arial, sans-serif;
}

button {
background-color: var(--primary-color);
border-radius: var(--border-radius);
font-family: var(--font-main);
}

/* To change your entire color theme, just update :root! */

🛠 PROJECT 3: Styled Personal Portfolio Page

1. Take your Project 1 (Personal Profile Page) HTML and create a [Link] file
2. Apply a Google Font (e.g., Inter or Poppins) to the whole page
3. Style the header with a colored background, white text, and padding
4. Create a navigation bar using Flexbox with at least 3 links (Home, About, Contact)
5. Add hover effects on navigation links

© 2025 Web Development Training Page 15

Web Development Training Manual | Complete Teaching Note

6. Style your profile image to be circular using border-radius: 50%

7. Make the page responsive using at least 2 media queries
8. Use CSS variables for your main colors
💡 Hint: Use Google Fonts: add the link tag in HTML <head>, then use font-family in CSS.

🛠 PROJECT 4: Landing Page for a Fictional Business

1. Create a full landing page for any business (salon, bakery, tech startup, school, etc.)
2. Include: Navigation bar, Hero section (big headline + CTA button), Features section (3 cards
using Flexbox), Testimonials, Contact form, Footer
3. Use CSS Grid for the main page layout
4. Make it fully responsive (looks good on phone and desktop)
5. Add at least 3 CSS animations or transitions (e.g., button hover, card hover effect)
6. Use CSS variables for your color scheme
💡 Hint: Search 'CSS card hover effect' or 'CSS button animation' on YouTube for inspiration.

© 2025 Web Development Training Page 16

Web Development Training Manual | Complete Teaching Note

PART 5: JavaScript — Bringing It to Life

5.1 What Is JavaScript?
JavaScript (JS) is a programming language that runs in the browser and makes websites interactive. It
can respond to user actions, change the page content without reloading, validate forms, fetch data from
the internet, animate elements, and much more.

🎭 Analogy: JS is the Actor

If HTML is the script and stage set (structure), and CSS is the costumes (style),
JavaScript is the ACTOR — bringing the script to life with movement, emotion, and response.
When you click a button and something happens — that is JavaScript.
When a website shows a notification — JavaScript.
When an image slides in as you scroll — JavaScript.
When a form validates and shows an error message — JavaScript.

5.2 How to Add JavaScript

Like CSS, JavaScript can be added inline, internally, or in an external file. External is best:

<!-- In HTML, just before closing </body> tag -->

<script src="[Link]"></script>

<!-- Or inline for quick tests -->

<script>
[Link]('Hello from JavaScript!');
</script>

To see JavaScript output, open browser Developer Tools (press F12) and click the 'Console' tab.

5.3 Variables — Storing Data

Variables are named containers that hold data. JavaScript has three keywords to declare variables:

// const — value cannot be changed (use for most things)

const studentName = 'Amara Obi';
const age = 22;
const isEnrolled = true;

// let — value CAN be changed (use when value will change)

let score = 0;

© 2025 Web Development Training Page 17

Web Development Training Manual | Complete Teaching Note

score = score + 10; // score is now 10

// var — old way (avoid in modern JS)

var city = 'Lagos'; // works but has issues — prefer const/let

// Data types in JavaScript:

const text = 'Hello World'; // String
const number = 42; // Number
const decimal = 3.14; // Number (decimals too)
const isTrue = true; // Boolean (true/false)
const nothing = null; // Null (intentionally empty)
const notDefined = undefined; // Undefined (not assigned)
const person = { name: 'Ada', age: 20 }; // Object
const colors = ['red', 'blue', 'green']; // Array

5.4 Functions — Reusable Actions

A function is a block of code that performs a task. You define it once and can call (run) it as many times
as you want:

// Function declaration
function greet(name) {
return 'Hello, ' + name + '! Welcome to web dev!';
}

[Link](greet('Emeka')); // Hello, Emeka! Welcome to web dev!

[Link](greet('Fatima')); // Hello, Fatima! Welcome to web dev!

// Arrow function (modern, shorter syntax)

const add = (a, b) => a + b;
[Link](add(5, 3)); // 8

// Function with default parameter

function welcome(name = 'Student') {
[Link]('Welcome, ' + name + '!');
}
welcome(); // Welcome, Student!
welcome('Chidi'); // Welcome, Chidi!

5.5 The DOM — Controlling HTML with JavaScript

The DOM (Document Object Model) is JavaScript's way of seeing and changing your HTML page.
When a browser loads HTML, it creates a 'tree' of all the elements — the DOM. JavaScript can find,
read, modify, add, or delete any element:

// Select elements

© 2025 Web Development Training Page 18

Web Development Training Manual | Complete Teaching Note

const title = [Link]('main-title');

const buttons = [Link]('.btn');
const firstPara = [Link]('p');

// Change content
[Link] = 'New Title!';
[Link] = '<em>Italic Title</em>';

// Change styles
[Link] = 'red';
[Link] = '32px';

// Add/remove CSS classes

[Link]('highlighted');
[Link]('old-class');
[Link]('dark-mode');

// Change attributes
const link = [Link]('a');
[Link] = '[Link]
[Link]('target', '_blank');

5.6 Events — Responding to User Actions

Events are things that happen — clicking, typing, submitting a form, scrolling, etc. JavaScript 'listens'
for these events and responds:

const btn = [Link]('myButton');

// Click event
[Link]('click', function() {
alert('Button was clicked!');
});

// Arrow function version (shorter)

[Link]('click', () => {
[Link]('message').textContent = 'You clicked!';
});

// Input event — fires every time user types

const input = [Link]('nameInput');
[Link]('input', (event) => {
[Link]('User typed: ' + [Link]);
});

// Form submit event

const form = [Link]('contactForm');

© 2025 Web Development Training Page 19

Web Development Training Manual | Complete Teaching Note

[Link]('submit', (event) => {

[Link](); // Stop page from reloading!
[Link]('Form submitted!');
});

5.7 Conditions and Loops

// If/else — making decisions
const score = 75;

if (score >= 70) {

[Link]('Passed! Grade: C');
} else if (score >= 80) {
[Link]('Good! Grade: B');
} else if (score >= 90) {
[Link]('Excellent! Grade: A');
} else {
[Link]('Failed. Please try again.');
}

// For loop — repeating actions

const students = ['Ada', 'Bola', 'Chidi', 'Dami'];

for (let i = 0; i < [Link]; i++) {

[Link]('Student ' + (i+1) + ': ' + students[i]);
}

// forEach — cleaner loop for arrays

[Link]((student, index) => {
[Link](`${index + 1}. ${student}`);
});

5.8 Fetch API — Getting Data from the Internet

The Fetch API lets your JavaScript code request data from a server (API) without reloading the page.
This is how modern apps load news feeds, weather, products, etc.:

// Fetch a list of users from a free test API

fetch('[Link]
.then(response => [Link]()) // Convert to JavaScript object
.then(users => {
[Link](user => {
[Link]([Link], [Link]);
});
})
.catch(error => {
[Link]('Something went wrong:', error);

© 2025 Web Development Training Page 20

Web Development Training Manual | Complete Teaching Note

});

// Modern async/await version (cleaner)

async function loadUsers() {
try {
const response = await
fetch('[Link]
const users = await [Link]();
[Link](users);
} catch (error) {
[Link]('Error:', error);
}
}
loadUsers();

5.9 Local Storage — Saving Data in the Browser

LocalStorage lets you save small amounts of data in the user's browser — like user preferences or a
to-do list — that persists even after the page is closed:

// Save data
[Link]('username', 'Tunde');
[Link]('theme', 'dark');

// Read data
const name = [Link]('username');
[Link]('Welcome back, ' + name);

// Save an object (must convert to JSON string first)

const user = { name: 'Ngozi', age: 25, city: 'Abuja' };
[Link]('user', [Link](user));

// Read the object back

const saved = [Link]([Link]('user'));
[Link]([Link]); // Ngozi

// Delete a key
[Link]('theme');

// Clear everything
[Link]();

🛠 PROJECT 5: Interactive Quiz App

1. Create a quiz with at least 5 multiple-choice questions on any topic
2. Display one question at a time using JavaScript to show/hide questions

© 2025 Web Development Training Page 21

Web Development Training Manual | Complete Teaching Note

3. When user selects an answer and clicks 'Next', highlight correct/wrong answer
4. Track the score with a variable
5. At the end, show the final score and a message (e.g., 'You passed!' or 'Try again!')
6. Add a 'Restart Quiz' button that resets everything
💡 Hint: Store questions in a JavaScript array of objects: [{question: '...', options: [...], answer: '...'}]

🛠 PROJECT 6: To-Do List App with Local Storage

1. Build a to-do list where users can type a task and press Add
2. Display all tasks in a list with a 'Delete' button next to each
3. Allow marking tasks as complete by clicking them (strikethrough style)
4. Save the task list to localStorage so tasks remain after page refresh
5. Add a 'Clear All' button
6. Show a count of remaining incomplete tasks
💡 Hint: Load tasks from localStorage when the page loads using [Link]('load', ...)

© 2025 Web Development Training Page 22

Web Development Training Manual | Complete Teaching Note

PART 6: Git & GitHub — Saving and Sharing Your Work

6.1 What Is Git?
Git is a version control system — software that tracks every change you make to your code. Think of it
as Google Docs' 'version history' feature, but far more powerful.

📸 Analogy: Git is a Time Machine with Photos

Imagine you are writing a novel. Every day you finish a chapter, you take a photograph of all your
pages.
If you later mess up Chapter 5, you can look at the photograph from when Chapter 5 was perfect
and restore it.
Git does exactly this for code.
Each 'save point' in Git is called a COMMIT.
Your entire history of commits is stored in a REPOSITORY (or 'repo').

6.2 What Is GitHub?

GitHub is a website ([Link]) where you store your Git repositories online. It is like Google Drive,
but specifically for code. It allows you to:
• Back up your code to the cloud
• Collaborate with other developers
• Show your work to employers or clients (your portfolio)
• Deploy your website live (we will do this in Part 7)

6.3 Setting Up Git

26. Download Git from [Link] and install it.
27. Open a terminal (on Windows: Git Bash, on Mac/Linux: Terminal).
28. Set your identity (do this once):

git config --global [Link] "Your Full Name"

git config --global [Link] "your@[Link]"

29. Create an account on [Link] (free).

6.4 Core Git Commands

Command What It Does

git init Initialize a new Git repository in your current folder

© 2025 Web Development Training Page 23

Web Development Training Manual | Complete Teaching Note

git status See which files have changed since last commit
git add . Stage ALL changed files (prepare them for commit)
git add [Link] Stage ONE specific file
git commit -m 'message' Save a snapshot (commit) with a descriptive message
git log View history of all commits
git push origin main Upload your local commits to GitHub
git pull Download latest changes from GitHub to your computer
git clone URL Download a repository from GitHub to your computer
git branch new-feature Create a new branch to work on a feature separately
git checkout main Switch back to the main branch
git merge new-feature Merge changes from a branch into main

6.5 Your First GitHub Workflow

Here is a step-by-step workflow to push your project to GitHub:
30. Create a new repository on GitHub (click '+' > 'New repository' > give it a name > click 'Create
repository').
31. Open your project folder in the terminal and run these commands:

# Step 1: Initialize Git in your project folder

git init

# Step 2: Connect to your GitHub repository

git remote add origin [Link]

# Step 3: Stage all your files

git add .

# Step 4: Make your first commit

git commit -m "Initial commit: Add my portfolio page"

# Step 5: Push to GitHub

git branch -M main
git push -u origin main

32. Refresh your GitHub repository page — your files are now online!

6.6 Editing Directly on GitHub

You can edit files directly on GitHub without using VS Code — useful for quick fixes:
33. Go to your repository on GitHub.
34. Click on any file (e.g., [Link]).
35. Click the pencil icon (Edit this file).

© 2025 Web Development Training Page 24

Web Development Training Manual | Complete Teaching Note

36. Make your changes in the editor.

37. Scroll down and click 'Commit changes' — write a message describing what you changed.
38. Your changes are saved and the repo is updated instantly.

🛠 PROJECT 7: Push Your Portfolio to GitHub

1. Set up Git on your computer (if not done already)
2. Create a GitHub account
3. Create a new repository called 'my-portfolio'
4. Push your styled portfolio page (Project 3) to this repository
5. Edit one thing directly from GitHub's web editor (e.g., change a heading text)
6. Pull the changes back to your local computer using git pull
7. Take a screenshot of your GitHub repository page as proof
💡 Hint: If you get a permission error when pushing, you may need to set up a Personal Access Token.
Go to GitHub > Settings > Developer Settings > Personal Access Tokens > Generate new token.

© 2025 Web Development Training Page 25

Web Development Training Manual | Complete Teaching Note

PART 7: Deploying to Vercel — Going Live!

7.1 What Is Deployment?
Deployment means making your website accessible on the internet for anyone to visit. Until now, your
website only exists on your computer. Deployment puts it on a server that is always on, always
connected to the internet.

🌍 Analogy: Opening Your Shop

You have spent months preparing your product and setting up your shop.
Deployment is the moment you OPEN THE DOOR and put the 'OPEN' sign outside.
Before deployment = the shop exists but no one can enter.
After deployment = anyone from anywhere in the world can visit!

7.2 What Is Vercel?

Vercel is a free hosting platform built specifically for frontend websites. It connects directly to your
GitHub and automatically deploys your site every time you push new code. No server configuration
needed — it just works.

Vercel is free for personal projects and gives you:

• Free hosting with HTTPS (secure connection)
• A free subdomain like [Link]
• Automatic deployments on every GitHub push
• Custom domain support (connect your .com or .ng domain)
• Fast global delivery (CDN — your site loads fast everywhere)

7.3 Deploying to Vercel Step by Step

39. Go to [Link] and click 'Sign Up'. Sign up with your GitHub account.
40. Click 'Add New Project'.
41. Click 'Import Git Repository' and select the GitHub repo you want to deploy.
42. Vercel will detect it is a plain HTML/CSS/JS site automatically. Just click 'Deploy'.
43. Wait 30–60 seconds while Vercel builds and deploys your site.
44. Click 'Visit' to see your live website at [Link] — share this link with anyone!

7.4 Automatic Deployments

One of Vercel's most powerful features: every time you push to GitHub, Vercel automatically re-deploys
your site. Your workflow becomes:

© 2025 Web Development Training Page 26

Web Development Training Manual | Complete Teaching Note

# Make changes in VS Code

# Then save to GitHub:
git add .
git commit -m "Update: Changed hero section colors"
git push origin main

# Vercel automatically detects the push

# and deploys the new version within ~30 seconds
# Your live site is updated — no extra steps needed!

🛠 PROJECT 8: Deploy Your Business Landing Page Live

1. Make sure your Project 4 (Business Landing Page) is pushed to GitHub
2. Sign up on Vercel with your GitHub account
3. Import and deploy the landing page repository
4. Wait for the deployment to complete and get your live URL
5. Make one small change in VS Code (e.g., change a color or text)
6. Push to GitHub and verify that Vercel automatically updates the live site
7. Share your live URL with at least one other student to review
💡 Hint: If your project has multiple HTML files, make sure your homepage is named [Link] —
Vercel serves this as the default page.

© 2025 Web Development Training Page 27

Web Development Training Manual | Complete Teaching Note

PART 8: Custom Domains — Getting Your .com or .ng

8.1 What Is a Domain Name?
A domain name is the human-readable address people type to visit your website (e.g.,
[Link], [Link]). Without a domain, your site lives at an address like
[Link] — functional, but not professional.

🏠 Analogy: Domain = Your House Address

Your website is a house. Your server (Vercel) is the land it sits on.
Without a domain, the address is a long, ugly GPS coordinate (like [Link]).
A domain name is like saying: '14 Palm Street, Ikeja, Lagos' — easy to remember and
professional.
Businesses, schools, and brands always have their own domain for credibility and trust.

8.2 Domain Extensions — What Do They Mean?

Extension Meaning Best For

.com Commercial — most popular globally Businesses, portfolios, general use
.ng Nigeria country domain Nigerian businesses, brands
.[Link] Commercial + Nigeria Nigerian companies wanting local
identity
.[Link] Education + Nigeria Nigerian schools and universities
.org Organizations, non-profits NGOs, communities, charities
.net Networks / tech companies Tech businesses, internet services
.io Tech startup favorite Apps, SaaS products, developer
tools
.co Company / startup Startups, creative agencies
.store E-commerce Online shops

8.3 Where to Buy a Domain in Nigeria

Here are the most popular domain registrars available in Nigeria, with their pricing and key features:

🇳🇬 Truehost Nigeria ([Link])

Very popular in Nigeria. Accepts Naira payments (bank transfer, card, USSD).
.[Link] domains start from ₦2,500/year.
.com domains start from about ₦5,000–₦8,000/year.

© 2025 Web Development Training Page 28

Web Development Training Manual | Complete Teaching Note

Also offers web hosting and email hosting.

Good customer support that understands Nigerian users.

🇳🇬 Whogohost ([Link])
Nigeria's leading web hosting and domain provider.
Accepts Naira, debit cards, bank transfers, USSD.
.[Link] from ₦1,500–₦2,500/year. .com from ₦5,000–₦9,000/year.
Excellent local support team with live chat available.
Offers free domain with hosting packages.

🌍 Namecheap ([Link])
International registrar — affordable, trusted, and reliable.
.com domains often as low as $1.98 for first year.
Accepts credit/debit cards. Students can use prepaid Visa/Mastercard cards.
Great for .io, .co, .store and other creative domain extensions.
Free WHOIS privacy protection included.

8.4 Connecting Your Domain to Vercel

45. Buy your domain from Truehost, Whogohost, Namecheap, or any registrar.
46. Go to your project on Vercel > Settings > Domains.
47. Type your domain name (e.g., [Link]) and click 'Add'.
48. Vercel will show you DNS records to add. Copy them.
49. Go to your domain registrar's dashboard > DNS Management.
50. Add the records Vercel gave you:
• An A Record pointing to Vercel's IP address: [Link]
• A CNAME Record pointing to [Link]
51. Save the changes. DNS propagation takes 5 minutes to 48 hours (usually under 1 hour).
52. Once done, visit your domain — your Vercel site now loads at your custom domain!

© 2025 Web Development Training Page 29

Web Development Training Manual | Complete Teaching Note

PART 9: Introduction to Backend Development

9.1 What Is the Backend?
The backend is everything that happens on the SERVER — the part users don't see but that powers
every feature behind the scenes. It handles:
• Storing and retrieving data (your account, messages, photos)
• Authentication (login, signup, password reset)
• Business logic (calculating prices, processing payments)
• Sending emails and notifications
• Talking to databases and external services

🏭 Analogy: The Backend is the Factory Floor

When you buy a product from an online store, you only see the nice website (frontend).
Behind the scenes: your order is logged in a database, payment is verified, warehouse is notified,
delivery is scheduled.
ALL of that happens on the backend — invisible to you, but essential.
The backend developer builds and maintains these systems.

9.2 [Link] — JavaScript on the Server

[Link] allows you to use JavaScript to write backend (server-side) code. This is great news — you
already know JavaScript from the frontend! One language, two places.

[Link] is:
• Free and open source
• Extremely fast and efficient
• Used by Netflix, LinkedIn, Uber, NASA, and thousands of startups
• Has a massive ecosystem of packages (npm — Node Package Manager)

9.3 [Link] — Building Web Servers

[Link] is the most popular [Link] framework for building web servers and APIs. Install and use it
like this:

# First, create a new folder and initialize a [Link] project

mkdir my-backend
cd my-backend
npm init -y

# Install Express
npm install express

© 2025 Web Development Training Page 30

Web Development Training Manual | Complete Teaching Note

// [Link] — Your first web server

const express = require('express');
const app = express();

// Middleware — allows reading JSON request bodies

[Link]([Link]());

// Route: When someone visits the homepage

[Link]('/', (req, res) => {
[Link]('<h1>Hello from my backend server!</h1>');
});

// Route: API endpoint that returns data

[Link]('/api/students', (req, res) => {
const students = [
{ id: 1, name: 'Ada Okafor', course: 'Web Dev' },
{ id: 2, name: 'Bola Ahmed', course: 'Web Dev' },
];
[Link](students);
});

// Start the server on port 3000

[Link](3000, () => {
[Link]('Server running at [Link]
});

Run it with: node [Link] — then visit [Link] in your browser!

9.4 REST APIs — How Frontend and Backend Talk

A REST API (Application Programming Interface) is how the frontend and backend communicate. The
frontend sends requests; the backend sends back responses — usually in JSON format.

The four main HTTP methods (actions):

• GET — Retrieve data (e.g., 'Give me the list of all products')
• POST — Send new data (e.g., 'Here is a new user registration')
• PUT/PATCH — Update existing data (e.g., 'Update this user's profile')
• DELETE — Remove data (e.g., 'Delete this post')

// GET — Return all products

[Link]('/api/products', (req, res) => {
[Link]({ products: [...] });
});

// POST — Accept a new product

© 2025 Web Development Training Page 31

Web Development Training Manual | Complete Teaching Note

[Link]('/api/products', (req, res) => {

const { name, price } = [Link];
// Save to database...
[Link](201).json({ message: 'Product created!', name, price });
});

// DELETE — Remove a product by ID

[Link]('/api/products/:id', (req, res) => {
const { id } = [Link];
// Delete from database...
[Link]({ message: `Product ${id} deleted` });
});

© 2025 Web Development Training Page 32

Web Development Training Manual | Complete Teaching Note

PART 10: Databases — Storing Information

10.1 What Is a Database?
A database is an organized collection of data, stored so it can be easily accessed, managed, and
updated. When you create an account on Instagram, your name, email, and password are stored in
Instagram's database. When you log in, the database is checked.

Analogy: Database = Filing Cabinet

Before computers, offices used giant filing cabinets to store documents.
Each drawer = a table (e.g., a drawer for 'Customers', one for 'Orders', one for 'Products').
Each folder inside a drawer = a row (one customer's file).
Each label on the folder = a column (name, phone, address).
A database is this filing cabinet — but digital, instant, and searchable in milliseconds.

10.2 Types of Databases

There are two major categories of databases:

SQL (Relational) NoSQL (Non-Relational)

Stores data in tables (rows and columns) Stores data as documents, key-value, graphs
Strict structure — define schema upfront Flexible structure — schema can change
Great for structured, relational data Great for dynamic, nested, or varied data
Examples: MySQL, PostgreSQL, SQLite Examples: MongoDB, Firebase Firestore
Used by: banks, airlines, ERP systems Used by: social apps, real-time systems

10.3 MongoDB — A Beginner-Friendly NoSQL Database

MongoDB stores data as JSON-like documents (called BSON), making it natural for JavaScript
developers. A MongoDB 'document' looks exactly like a JavaScript object:

// A MongoDB user document — looks just like a JS object!

{
_id: ObjectId('65f2a1b3c4d5e6f7a8b9c0d1'),
name: 'Ngozi Adeyemi',
email: 'ngozi@[Link]',
password: '$2b$10$hashedpasswordhere',
role: 'student',
createdAt: Date('2025-01-15'),
courses: ['HTML', 'CSS', 'JavaScript'] // Arrays work too!
}

© 2025 Web Development Training Page 33

Web Development Training Manual | Complete Teaching Note

10.4 MongoDB Atlas — Free Cloud Database

MongoDB Atlas is a FREE cloud-hosted MongoDB database. Perfect for beginners and small projects
— no installation needed, just sign up and connect.

53. Go to [Link] and sign up (free).

54. Create a new Project, then a new Cluster (choose the FREE M0 tier — 512MB free forever).
55. Create a database user (username and password).
56. Whitelist your IP address (or allow all IPs with [Link]/0 for development).
57. Click 'Connect' > 'Connect your application' > Copy the connection string.
58. Install mongoose in your [Link] project:

npm install mongoose

// Connect to MongoDB Atlas in [Link]

const mongoose = require('mongoose');

[Link]('mongodb+srv://username:password@[Link]/
myDatabase')
.then(() => [Link]('Connected to MongoDB Atlas!'))
.catch(err => [Link]('Connection error:', err));

// Define a schema (structure for your data)

const studentSchema = new [Link]({
name: { type: String, required: true },
email: { type: String, required: true, unique: true },
course: String,
enrolledAt: { type: Date, default: [Link] }
});

// Create a Model from the schema

const Student = [Link]('Student', studentSchema);

10.5 Firebase Firestore — The Easiest Option

Firebase (by Google) offers Firestore — a real-time NoSQL database with an extremely generous free
tier. Perfect for beginners:
• Free tier: 50,000 reads/day, 20,000 writes/day, 1 GB storage
• Real-time sync — data updates instantly on all connected browsers
• No server needed — can connect directly from your frontend JavaScript
• Built-in authentication — login with Google, email, phone

59. Go to [Link] and sign in with Google.

60. Click 'Add Project', name it, click through the setup.

© 2025 Web Development Training Page 34

Web Development Training Manual | Complete Teaching Note

61. Go to 'Firestore Database' > 'Create database' > Choose 'Start in test mode'.
62. Add Firebase to your web project using the SDK:

// Install Firebase SDK

npm install firebase

// Initialize Firebase in your app

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, addDoc, getDocs } from
'firebase/firestore';

const firebaseConfig = {
apiKey: 'your-api-key',
authDomain: '[Link]',
projectId: 'your-project-id',
};

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);

// Add a document
async function addStudent(name, email) {
const docRef = await addDoc(collection(db, 'students'), {
name: name,
email: email,
enrolledAt: new Date()
});
[Link]('Student added with ID:', [Link]);
}

// Read documents
async function getStudents() {
const snapshot = await getDocs(collection(db, 'students'));
[Link](doc => [Link]([Link], [Link]()));
}

© 2025 Web Development Training Page 35

Web Development Training Manual | Complete Teaching Note

PART 11: Authentication — Login & Signup

11.1 What Is Authentication?
Authentication is the process of verifying who a user is. When you log into any website, the system
checks: 'Is this person who they claim to be?' If yes, it grants access.

There are two related concepts:

• Authentication — Verifying IDENTITY (who are you?). Example: login with email and password.
• Authorization — Verifying PERMISSION (what can you do?). Example: only admins can delete
posts.

11.2 How Passwords Are Stored — NEVER Plain Text!

A very important security rule: NEVER store passwords as plain text in your database. If your database
is hacked, all users' passwords would be exposed. Instead, use HASHING:

🔒 Analogy: Hashing is a One-Way Blender

Put a mango into a blender — you get mango juice.
Can you put the juice back in and get the mango? NO.
Hashing works the same way. A password goes in, a hash comes out.
You store the hash, not the password.
When a user logs in, you hash what they typed and compare it to the stored hash.
If they match — correct password! If not — wrong password.

# Install bcrypt — the most popular password hashing library

npm install bcryptjs

const bcrypt = require('bcryptjs');

// SIGNUP: Hash password before saving

async function hashPassword(plainPassword) {
const saltRounds = 10; // Higher = more secure but slower
const hashed = await [Link](plainPassword, saltRounds);
return hashed; // Store this in database
}

// LOGIN: Compare entered password with stored hash

async function checkPassword(entered, storedHash) {
const isMatch = await [Link](entered, storedHash);
return isMatch; // true or false
}

© 2025 Web Development Training Page 36

Web Development Training Manual | Complete Teaching Note

11.3 JWT — Keeping Users Logged In

After a user logs in, the server needs to 'remember' them across requests. JSON Web Tokens (JWT)
solve this:
63. User logs in with correct credentials.
64. Server creates a JWT (a special encrypted token) and sends it to the browser.
65. Browser saves the token (in localStorage or a cookie).
66. For every future request, the browser sends the token along.
67. Server verifies the token — if valid, the user is authenticated.

npm install jsonwebtoken

const jwt = require('jsonwebtoken');

const SECRET = 'your-super-secret-key-change-this-in-production';

// Create a token (after successful login)

function createToken(userId) {
return [Link]({ userId }, SECRET, { expiresIn: '7d' });
}

// Verify a token (middleware for protected routes)

function verifyToken(req, res, next) {
const token = [Link]?.split(' ')[1];
if (!token) return [Link](401).json({ error: 'No token provided' });

try {
const decoded = [Link](token, SECRET);
[Link] = decoded;
next(); // Continue to the next route handler
} catch (err) {
[Link](401).json({ error: 'Invalid or expired token' });
}
}

11.4 Complete Signup & Login API Example

// POST /api/signup — Register a new user
[Link]('/api/signup', async (req, res) => {
const { name, email, password } = [Link];

// Check if user already exists

const existing = await [Link]({ email });
if (existing) return [Link](400).json({ error: 'Email already
registered' });

© 2025 Web Development Training Page 37

Web Development Training Manual | Complete Teaching Note

// Hash the password

const hashedPassword = await [Link](password, 10);

// Save to database
const user = new User({ name, email, password: hashedPassword });
await [Link]();

// Create and send token

const token = createToken(user._id);
[Link](201).json({ message: 'Account created!', token });
});

// POST /api/login — Authenticate existing user

[Link]('/api/login', async (req, res) => {
const { email, password } = [Link];

// Find user by email

const user = await [Link]({ email });
if (!user) return [Link](400).json({ error: 'Invalid email or
password' });

// Verify password
const isMatch = await [Link](password, [Link]);
if (!isMatch) return [Link](400).json({ error: 'Invalid email or
password' });

// Create and send token

const token = createToken(user._id);
[Link]({ message: 'Login successful!', token, name: [Link] });
});

// GET /api/profile — Protected route (requires login)

[Link]('/api/profile', verifyToken, async (req, res) => {
const user = await [Link]([Link]).select('-password');
[Link]({ user });
});

11.5 Firebase Authentication — Easiest Option

Firebase Authentication is the easiest way to add login/signup — especially for beginners. It handles
everything: email/password auth, Google sign-in, password reset emails, token management.
Completely FREE for most projects.

import { getAuth, createUserWithEmailAndPassword,

signInWithEmailAndPassword, signOut } from 'firebase/auth';

const auth = getAuth(app);

© 2025 Web Development Training Page 38

Web Development Training Manual | Complete Teaching Note

// Signup
async function signup(email, password) {
const userCredential = await createUserWithEmailAndPassword(auth, email,
password);
[Link]('Signed up:', [Link]);
}

// Login
async function login(email, password) {
const userCredential = await signInWithEmailAndPassword(auth, email,
password);
[Link]('Logged in:', [Link]);
}

// Logout
signOut(auth).then(() => [Link]('Logged out'));

🛠 PROJECT 9: Full-Stack Contact Form with Database

1. Build a contact form frontend (name, email, phone, message, submit button)
2. Create a [Link] + Express backend server
3. Connect to MongoDB Atlas or Firebase Firestore
4. When the form is submitted, send the data to your backend API (POST /api/contact)
5. The backend saves the message to the database
6. Add a GET /api/messages endpoint that returns all saved messages
7. Display all messages on a separate 'admin' page that fetches from your API
💡 Hint: Use CORS: npm install cors, then [Link](require('cors')()) in your server to allow the
frontend to talk to the backend.

🛠 PROJECT 10: User Authentication System

1. Build signup and login pages (frontend HTML/CSS/JS)
2. Create backend API routes: POST /api/signup and POST /api/login
3. Hash passwords with bcryptjs before storing in MongoDB Atlas
4. Return a JWT token on successful login
5. Save the token in localStorage on the frontend
6. Build a protected 'Dashboard' page that only shows if the user is logged in
7. Add a Logout button that clears the token from localStorage
8. Bonus: Show the logged-in user's name on the dashboard
💡 Hint: Always handle errors gracefully — show user-friendly messages like 'Invalid email or
password' instead of crashing.

© 2025 Web Development Training Page 39

Web Development Training Manual | Complete Teaching Note

© 2025 Web Development Training Page 40

Web Development Training Manual | Complete Teaching Note

PART 12: Free & Affordable Hosting for Backend

12.1 Frontend Hosting (Free)
For frontend-only sites (HTML, CSS, JS), these platforms offer completely free hosting:

• Vercel ([Link]) — Best for static sites and frontend frameworks. Covered in Part 7.
• Netlify ([Link]) — Similar to Vercel. Also free. Great for forms and serverless functions.
• GitHub Pages ([Link]) — Host directly from your GitHub repo. Free forever.

12.2 Backend Hosting Options

Backend apps ([Link], etc.) need a server to run continuously. Here are your best options at every
price point:

Platform Price Notes

[Link] Free / $7/mo Best free backend hosting in 2024. Free tier
includes [Link], databases. Sleeps after 15
min inactivity on free plan.
[Link] Free $5 credit/mo Simple, developer-friendly. Good for [Link]
and databases. Easy GitHub integration.
[Link] Free Specifically for [Link] apps. Never sleeps. Very
generous free tier.
[Link] Free tier available More advanced but powerful. Good for Docker-
based apps.
Vercel Serverless Free Run backend functions (not full servers) — great
for APIs alongside frontend.
Koyeb Free tier European platform, fast, supports [Link],
Python, Docker.
Supabase Free / $25/mo Open-source Firebase alternative. Includes
database (PostgreSQL), auth, storage.
Firebase (Google) Free / Pay-as-you-go Very generous free tier. Full platform: database,
auth, storage, hosting.

12.3 Deploying a [Link] App to [Link]

68. Push your [Link] project to GitHub (make sure you have a [Link] and a start script).
69. In [Link], make sure you have a start script:

// [Link]
{
"name": "my-backend",
"scripts": {
"start": "node [Link]",
"dev": "nodemon [Link]"

© 2025 Web Development Training Page 41

Web Development Training Manual | Complete Teaching Note

}
}

70. Go to [Link] and sign up with GitHub.

71. Click 'New' > 'Web Service'.
72. Connect your GitHub repo.
73. Set: Name (anything), Environment (Node), Build Command (npm install), Start Command
(node [Link]).
74. Click 'Create Web Service' — Render deploys it and gives you a live URL!
75. Add environment variables (like MongoDB connection string) in the 'Environment' tab — never
put secrets in your code!

12.4 Environment Variables — Protecting Secrets

Never put database passwords, API keys, or secrets directly in your code files (especially files pushed
to GitHub). Use environment variables:

# Create a .env file in your project root (DO NOT commit this to GitHub!)
# Add .env to .gitignore first!

MONGODB_URI=mongodb+srv://user:password@[Link]/mydb
JWT_SECRET=my-ultra-secret-key-2025
PORT=3000

# Install dotenv package

npm install dotenv

# In [Link], load the .env file at the very top:

require('dotenv').config();

# Then use variables like this:

[Link]([Link].MONGODB_URI);
const SECRET = [Link].JWT_SECRET;
const PORT = [Link] || 3000;

# .gitignore file — add these to prevent committing secrets:

node_modules/
.env
.[Link]
*.log

© 2025 Web Development Training Page 42

Web Development Training Manual | Complete Teaching Note

APPENDIX: 15 Projects — Complete Overview & Checklist

Below is a summary of all 15 projects in this training. Complete them in order — each builds on the
skills from before. By the time you finish all 15, you will have a strong portfolio to show to clients and
employers.

# Project Name Tech Stack Key Concepts

1 Personal Profile Page HTML Structure, headings, lists, links, images, forms, semantic
tags
2 Restaurant Menu HTML Tables, forms, navigation, semantic layout
Page
3 Styled Personal HTML + CSS Google Fonts, Flexbox navbar, hover effects, responsive
Portfolio design
4 Business Landing HTML + CSS Full page layout, CSS Grid, animations, CSS variables,
Page responsive
5 Interactive Quiz App HTML + CSS + JS DOM manipulation, events, conditionals, arrays, score
tracking
6 To-Do List with HTML + CSS + JS LocalStorage, CRUD operations, dynamic DOM, event
LocalStorage handling
7 Portfolio on GitHub HTML + CSS + Git Git workflow, GitHub push, editing on GitHub, git pull
8 Deployed Business HTML + CSS + Vercel Vercel deployment, automatic deployments, live URL
Landing Page sharing
9 Contact Form with Full-Stack [Link], Express, MongoDB/Firebase, REST API, form
Database submission
10 User Authentication Full-Stack + Auth Signup/Login, bcrypt, JWT, protected routes,
System localStorage token
11 Weather App with API HTML + CSS + JS + Fetch from OpenWeatherMap API, display dynamic data,
API loading states
12 Blog with Admin Full-Stack CRUD blog posts, admin login, database, rich text editor
Panel
13 E-Commerce Product HTML + CSS + JS Shopping cart, product filtering, dynamic rendering, cart
Page in localStorage
14 Chat App (Real-Time) Full-Stack + Firebase Firebase Realtime Database, real-time messages, user
auth, timestamps
15 Final Portfolio Full-Stack + Complete portfolio: about, skills, all projects, contact
Website Deployment form, custom domain

Detailed Project Instructions: Projects 11–15

🛠 PROJECT 11: Weather App with Live API

1. Sign up for a free API key at [Link]
2. Build a search form where users enter a city name
3. On submit, fetch weather data from the API:

© 2025 Web Development Training Page 43

Web Development Training Manual | Complete Teaching Note

[Link]
4. Display: city name, temperature, weather description, humidity, wind speed, and an
appropriate weather icon
5. Show a loading spinner while data is being fetched
6. Handle errors gracefully (e.g., 'City not found' message if invalid city entered)
7. Make the UI fully responsive with a clean design
💡 Hint: Store your API key in a variable at the top of your JS file. For production, use environment
variables.

🛠 PROJECT 12: Blog with Admin Panel

1. Create a public blog page that fetches and displays all posts from your API
2. Build an admin login page (only the admin can access the panel)
3. In the admin panel: create new post (title, content, image URL, tags), edit existing posts,
delete posts
4. Store posts in MongoDB Atlas with fields: title, content, author, createdAt, tags
5. Display posts on the public page sorted by newest first
6. Implement pagination: show 6 posts per page with Previous/Next buttons
7. Deploy frontend to Vercel, backend to Render
💡 Hint: Use a WYSIWYG editor like [Link] (free) for the post content input to allow rich formatting.

🛠 PROJECT 13: E-Commerce Product Page with Cart

1. Create a products page with at least 12 products (use a JSON file or free API like
[Link]/products)
2. Add category filter buttons (e.g., Electronics, Clothing, Food) that filter displayed products
3. Add a search bar that filters products by name in real-time as the user types
4. Implement Add to Cart functionality — clicking 'Add to Cart' adds the product
5. Show a cart icon in the navbar with the count of items
6. Build a Cart page/modal showing all items, quantity controls (+/-), item removal, and total price
7. Save the cart in localStorage so it persists on page refresh
💡 Hint: Use CSS Grid with auto-fill and minmax() for the product grid to make it automatically
responsive: grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

🛠 PROJECT 14: Real-Time Chat App with Firebase

1. Set up Firebase Authentication (email/password) and Firestore database
2. Build a login/signup page using Firebase Auth
3. After login, show a chat room where messages appear in real-time
4. Each message shows: sender's name, message text, and timestamp

© 2025 Web Development Training Page 44

Web Development Training Manual | Complete Teaching Note

5. Use Firestore's onSnapshot() to listen for new messages in real-time — no page refresh
needed
6. Allow users to send messages by typing and pressing Enter or clicking Send
7. Add a logout button
8. Bonus: Add multiple chat rooms that users can switch between
💡 Hint: Use Firestore's orderBy('createdAt', 'asc') and limit(50) to get messages in order and cap the
query.

🛠 PROJECT 15: FINAL PROJECT: Complete Professional Portfolio

1. Design and build your professional portfolio website from scratch
2. Must include: Hero section (your name, title, CTA button to contact you), About Me section
(photo, bio, skills as progress bars or tag badges), Projects section (display at least 6 of your 14
completed projects with title, description, tech stack, live link, GitHub link), Skills section (all
technologies you have learned), Contact section with a working contact form (saves to Firebase
or emails using EmailJS), Footer with social links (GitHub, LinkedIn, Twitter)
3. Build a backend contact form API ([Link] + Express + MongoDB OR Firebase)
4. Deploy frontend on Vercel with a custom domain (.com, .ng, or .[Link])
5. Deploy backend on [Link] or keep it serverless with Firebase
6. Ensure the entire website is fully responsive on mobile, tablet, and desktop
7. Achieve a Google Lighthouse performance score of 80+ (test at [Link]
8. Push ALL code to GitHub and write a good [Link] explaining the project
💡 Hint: Your portfolio is your most important project. Treat it like a real client project — perfect design,
no broken links, fast loading, and content that shows who you are and what you can do.

A Final Word to Every Student

Learning web development is not about memorizing syntax. It is about developing the ability to think in
systems, break problems into smaller pieces, and build things that work.

Every professional developer — no matter how experienced — still Googles things, reads
documentation, and makes mistakes. The difference between a beginner and a professional is simply
the number of mistakes they have made and learned from.

🚀 Your Next Steps After This Training

1. Complete all 15 projects — even if imperfect, finish them.
2. Put your portfolio online with a custom domain.

© 2025 Web Development Training Page 45

Web Development Training Manual | Complete Teaching Note

3. Create a GitHub profile and push all your projects there.

4. Start applying for freelance jobs on platforms like Fiverr, Upwork, and Toptal.
5. Join web developer communities: Twitter/X #WebDev, [Link], freeCodeCamp forums.
6. Learn a frontend framework next — [Link] is the most in-demand (free at [Link]).
7. Never stop building. The best way to learn is to make things.

The internet was built by people who simply started. Today, you are one of them.
Welcome to the world of web development. 🌍

© 2025 Web Development Training Page 46