Course Outline · Beginner Friendly · 2026
This short course teaches you what a web application is, how it works, and why it is different from a normal website. It is written for complete beginners. No coding experience needed.
| Item | Details |
|---|---|
| Level | Beginner |
| Duration | 2 weeks · 2–3 hours per week |
| Modules | 3 modules + 1 final project |
| Tools | Any web browser (Chrome, Firefox, Edge) |
| Certificate | Yes, after the final project |
Learn the basic meaning of a web application and see how it is different from a normal website.
Explain a web application in your own words and give three examples.
Learn the main parts of a web application and how they talk to each other.
Draw a simple diagram showing how a web application works.
Learn the common tools and languages used to build web applications.
Name the three main building blocks and explain what each one does.
Choose a simple idea for a web application (for example, a to-do list, a class attendance app, or a small online shop). Write a one-page plan that explains:
Present your plan to a friend, teacher, or family member. This plan becomes your portfolio piece.
After this course, you can continue to Introduction to Web Development, where you will learn how to actually build your first web page using HTML and CSS.
Understanding Web Applications · Beginner Level · 2026
Welcome to the very first module of Understanding Web Applications. This is the start of a fun journey. By the end, you will understand what a web application is and why it is such a big deal in the world today.
Have you ever used Gmail to send a message? Have you watched a video on YouTube? Have you searched for a place on Google Maps? If yes, then you have already used web applications. You just did not know their name.
A web application is a program that runs inside your web browser. It is not installed on your phone like WhatsApp or a game. Instead, it lives on the internet. You open your browser, type a web address, and the application appears on your screen.
In this module, you will learn what a web application is, how it is different from a normal website, and why it matters. You will see many examples. You will also learn new words, but every word will be explained in very simple language.
This module is written for beginners. You do not need to know any coding. You do not need to be a computer expert. You just need to be curious and ready to learn. So grab a notebook, sit comfortably, and let us begin.
YOUR LEARNING JOURNEY IN MODULE 1
=================================
[ Start ]
|
V
What is a Web Application?
|
V
Website vs Web Application
|
V
Examples You Already Use
|
V
Why Web Applications Matter
|
V
How You Use Them Every Day
|
V
[ You understand web applications! ]
This module introduces the idea of a web application. You will learn what it is, how it differs from a website, and why it is important. Everything is explained in simple language with plenty of examples.
By the end of this module, you will be able to:
You will understand what web applications are, see many examples, and know why they matter. You will also be ready to learn how they work in Module 2.
Ngozi is a 13-year-old girl who lives in Enugu. She loves school, especially English. One Monday morning, her teacher, Mrs. Okeke, said, "Class, I want you to submit your essays online. I have created a special page for it."
Ngozi was confused. "Online? How, ma?"
Mrs. Okeke smiled. "Open your browser. Type this address. You will see a page where you can write your essay and submit it."
Ngozi went home and opened her father's laptop. She typed the address. A page appeared. It had a box where she could type. It had a "Submit" button. She typed her essay, clicked "Submit", and a message appeared: "Thank you, Ngozi. Your essay has been received."
The next day, Mrs. Okeke said, "Well done, Ngozi. I received your essay last night."
Ngozi was amazed. "How did you receive it, ma? I did not give you any paper."
"Because it is a web application," Mrs. Okeke said. "It is a program that runs on the internet. When you typed your essay and clicked Submit, the information travelled through the internet to a computer somewhere. That computer stored it. This morning, I opened the same page and read your essay."
Ngozi thought about it. She had used a web application without even knowing. It was like magic, but it was real.
From that day, Ngozi started noticing web applications everywhere. She saw them in her father's bank app, in her mother's online shopping, and in her own video streaming. Ngozi had become a web application spotter.
NGOZI'S WEB APPLICATION DISCOVERY
=================================
[ Teacher says: submit online ]
|
V
[ Ngozi opens browser ]
|
V
[ Types address, sees page ]
|
V
[ Types essay, clicks Submit ]
|
V
[ Message: "Essay received" ]
|
V
[ Teacher reads essay next day ]
|
V
[ Ngozi learns: this is a web application! ]
Ngozi used a web application to submit her essay without knowing what it was. Her teacher explained that a web application is a program that runs on the internet. This story introduces the whole module.
In this section, you will go through 12 short lessons. Each lesson teaches one big idea. Each lesson ends with a mini summary so you can remember the important parts. Take your time. Read slowly. Think about the examples.
A web application is a program that runs inside a web browser. You open your browser, type a web address, and the program appears on your screen. You can then use it to do things like send messages, watch videos, or buy things.
Web applications let you do many things without installing anything on your phone or computer. You just need a browser and an internet connection.
Think of a television. You do not build the TV station in your house. You just turn on the TV and watch what the station sends. A web application is like that. You do not store the whole program on your device. You just use it through the browser.
Gmail is a web application. You open your browser, go to gmail.com, log in, and read your email. You did not install Gmail on your laptop like a game. It just runs in the browser.
Your school may have a web application for checking results. You type the address, enter your name and exam number, and your results appear.
Your mother uses a web application to pay electricity bills. She opens the browser, enters her meter number, and pays.
Many Nigerian banks have web applications. You can check your account balance, send money, and buy airtime from your browser.
WEB APPLICATION IN ACTION
=========================
[ You open browser ]
|
V
[ You type a web address ]
|
V
[ The application appears ]
|
V
[ You click, type, and use it ]
|
V
[ The application responds ]
A web application is a program that runs inside your browser. You do not install it. You just use it through the internet.
A website is a set of pages that give you information. A web application is a program that lets you do something. Both use a browser, but they are different.
Knowing the difference helps you understand what kind of thing you are using. It also helps you plan your own projects later.
Think of a school notice board. It shows information. You read it, but you do not write on it. That is like a website. Now think of a classroom where you can ask questions, write on the board, and get answers. That is like a web application.
A newspaper website shows news. You read it. A banking web application lets you send money. You do things with it.
A school website shows the school's history and contact details. A school result portal lets students check their results.
A recipe website shows you how to cook jollof rice. A shopping web application lets you buy the ingredients.
A news site like Punch shows news. A site like Jumia lets you buy and pay for items. The first is more like a website. The second is a web application.
| Website | Web Application |
|---|---|
| Shows information | Lets you do things |
| You mostly read | You click, type, and interact |
| Often simple | Often complex |
| Example: news site | Example: online banking |
WEBSITE vs WEB APPLICATION
==========================
Website: [ You read ] --> [ You leave ]
Web Application: [ You click ] --> [ It responds ] --> [ You do more ]
A website mostly gives information. A web application lets you do things. Both live in your browser, but they serve different purposes.
Many of the tools you use every day are web applications. You may not have called them that before, but now you will see them everywhere.
When you recognize web applications in your daily life, the idea becomes real and easy to remember.
Think of your day. You wake up, check messages, watch a video, search for something. Each of those activities may use a web application.
When you watch a YouTube video, you are using a web application. The video is stored somewhere else, and your browser shows it to you.
Google Classroom is a web application. Teachers give assignments. Students submit work. Everyone communicates.
When your family orders food online, that is a web application.
Paystack and Flutterwave are Nigerian web applications for payments. Many businesses use them to receive money.
WEB APPLICATIONS YOU ALREADY USE
================================
[Gmail] [YouTube] [Google Maps] [Jumia] [Bank App]
| | | | |
V V V V V
Email Videos Directions Shopping Money
Many everyday tools like Gmail, YouTube, and online banking are web applications. You are already using them.
Web applications matter because they make life easier, faster, and more connected. They help people do things without leaving home.
Understanding why they matter helps you see their value in school, business, health, and daily life.
Imagine a world where you had to walk to the bank to send money, walk to the market to buy a book, walk to the post office to send a letter. Web applications save you all those walks.
A student in Enugu can attend an online class in Lagos without travelling.
A teacher can post homework on Google Classroom. Students can submit from home.
Your family can pay bills, buy food, and watch movies without leaving the house.
A small business in Aba can sell shoes to customers in Lagos and Abuja through a web application. No physical shop needed.
WHY WEB APPLICATIONS MATTER
===========================
Old way: [ Walk to bank ] --> [ Wait in line ] --> [ Do one thing ]
New way: [ Open browser ] --> [ Click a few times ] --> [ Done from home ]
Web applications make life easier. They save time, money, and effort. They connect people across the world.
Using a web application means interacting with it. You type, click, tap, scroll, and press buttons. The application responds to what you do.
Understanding how you use a web application helps you get better at using them and prepares you to build your own later.
Think of playing a video game. You press buttons, and the game responds. A web application is the same, but with clicks and typing.
When you log into Facebook, you type your email and password, then click "Log in". That is how you use the web application.
When you check your results online, you type your exam number, click "Check", and the results appear.
When your mother buys airtime online, she selects the amount, types her phone number, and clicks "Buy".
When you use a bank web application, you enter your account number, choose an amount, and confirm the transfer.
HOW YOU USE A WEB APPLICATION
=============================
[ You type ] --> [ You click ] --> [ It responds ] --> [ You continue ]
You use web applications by typing, clicking, scrolling, and submitting. The application responds to what you do.
You do not need to install a web application on your phone or computer. You just open your browser and use it.
This saves space on your device. It also means you can use it on any device with a browser.
Think of a public library. You do not buy all the books and take them home. You just visit the library, read what you want, and leave. A web application is like that. You visit it through the browser.
You do not install YouTube on your laptop. You just go to youtube.com and watch. That is a web application.
You do not install your school's result portal. You just visit the address and check your results.
You do not install online banking. You just open the bank's website and log in.
You do not install Jumia on your laptop. You just visit jumia.com.ng and shop.
INSTALLED APP vs WEB APPLICATION
=================================
Installed app: [ Download ] --> [ Install ] --> [ Use ]
Web application: [ Open browser ] --> [ Type address ] --> [ Use ]
You do not install web applications. You just open your browser and use them. This saves space and makes them easy to access.
A web application can be used on a phone, a tablet, a laptop, or a desktop computer. As long as there is a browser, it works.
This means you can start something on your phone and finish it on your laptop. It also means businesses can serve more people.
Think of a football match on TV. You can watch it on a small phone or a big TV. The match is the same. A web application is like that. It works on any screen.
You can start writing a Google Doc on your phone and finish it on your laptop. The document is saved online.
A student can check homework on a phone at home, then finish it on a school computer.
Your family can watch a movie on the TV, pause it, and continue on a phone.
A trader can check her bank balance on her phone and print a statement on a laptop at the market.
MANY DEVICES, ONE APPLICATION
=============================
[ Phone ] [ Tablet ] [ Laptop ] [ Desktop ]
\ | | /
\ | | /
V V V V
[ The same web application ]
Web applications work on many devices. You can use them on a phone, tablet, laptop, or desktop computer.
Web applications are updated by their owners. You do not have to do anything. Next time you open it, you see the new version.
You always get the newest features and the latest security fixes. You do not have to download updates.
Think of a restaurant that changes its menu. You do not carry the menu home. Next time you visit, you see the new menu. A web application is like that.
When Gmail adds a new feature, you see it the next time you log in. You did not install anything.
When a school result portal adds a new subject, students see it the next time they check.
When an online shop adds new products, you see them the next time you visit.
When a Nigerian bank updates its web application, customers see the new design the next time they log in.
AUTOMATIC UPDATES
=================
[ Developer updates the app ]
|
V
[ You open the app next time ]
|
V
[ You see the new version ]
|
V
[ You did nothing! ]
Web applications are updated automatically. You always get the latest version without installing anything.
A web application needs an internet connection to work. Without internet, you cannot use it.
Knowing this helps you understand why some apps stop working when you are offline. It also helps you plan when to use them.
Think of a phone call. Without network, you cannot call. A web application is the same. It needs the internet.
If your internet is off, you cannot watch YouTube. The web application cannot reach the video.
If the school's internet is down, students cannot check results online.
If your data finishes, you cannot use online shopping.
When there is a network problem, customers cannot use bank web applications. They must wait until the network returns.
INTERNET NEEDED
===============
[ You ] --> [ Internet ] --> [ Web Application ]
If the internet is off, the chain breaks.
Web applications need the internet. Without it, they cannot work. That is why good network matters.
Many schools use web applications for teaching, learning, and administration. They help teachers and students do things faster.
School web applications help students learn from anywhere and help teachers manage work easily.
Think of a classroom that never closes. You can enter it anytime from home. A school web application is like that.
During holidays, students can still read school materials through an online library.
A teacher gives homework on Google Classroom. Students submit before the deadline.
A parent can check their child's results online without going to school.
Many Nigerian universities use web applications for course registration and checking results. Students log in with their matric numbers.
SCHOOL WEB APPLICATIONS
=======================
[ Teacher posts homework ] --> [ Student sees it ]
|
V
[ Student submits ]
|
V
[ Teacher grades ]
Schools use web applications for teaching, homework, results, and communication. They make learning easier.
Businesses use web applications to sell, manage, and communicate. These tools help them reach more customers and work faster.
Even small businesses can use web applications to grow. They do not need a big office.
Think of a market stall. Now imagine the same stall reaching customers in every city. That is what a web application does for a business.
A small bakery uses a web application to take orders and payments. Customers do not need to visit the shop.
A school uses a web application to collect fees and send receipts.
A family business can sell homemade snacks through a web application.
A tailor in Aba uses a web application to receive orders from customers in Lagos and Abuja. He ships the clothes through a delivery service.
BUSINESS WEB APPLICATION
========================
[ Customer orders online ]
|
V
[ Business receives order ]
|
V
[ Business prepares item ]
|
V
[ Delivery to customer ]
|
V
[ Payment confirmed ]
Businesses use web applications to sell, receive payments, and communicate. Even small businesses can grow with them.
A web application spotter is someone who notices web applications in daily life and understands how they are used.
This skill helps you understand the digital world. It also prepares you for Module 2, where you will learn how web applications work.
Think of a bird watcher. A bird watcher notices birds everywhere. A web application spotter notices web applications everywhere.
When you book a bus ticket online, you are using a web application.
When you register for an exam online, you are using a web application.
When your family pays for DSTV online, you are using a web application.
When you buy airtime on your bank's website, you are using a web application.
WEB APPLICATION SPOTTER'S QUESTIONS
===================================
[ Am I using a browser? ]
|
V
[ Am I reading or doing? ]
|
V
[ If doing, it is a web application ]
|
V
[ Write it down ]
|
V
[ You are now a spotter! ]
Becoming a web application spotter means noticing web applications in daily life. This skill prepares you for the next module.
You have now learned the core ideas of Module 1: what a web application is, how it differs from a website, examples you already use, why it matters, how you use it, why you do not install it, how it works on many devices, how it is updated, its need for the internet, and how schools and businesses use it. You also became a web application spotter.
| Word | Simple Definition |
|---|---|
| Web application | A program that runs inside a web browser. |
| Website | A set of pages that give you information. |
| Browser | A program like Chrome or Firefox that opens web pages. |
| Internet | The global network that connects computers. |
| Install | To put a program on your device. |
| Update | A new version of a program. |
| Log in | To enter your name and password to use an app. |
| Submit | To send information by clicking a button. |
| Upload | To send a file or photo from your device. |
| Download | To save a file from the internet to your device. |
| Interface | What you see on the screen when you use an app. |
| Button | Something you click to make the app do something. |
| Field | A box where you type information. |
| Account | Your personal space inside an app. |
| Password | A secret word or phrase that keeps your account safe. |
These words will help you understand web applications better. Use them often so they become easy.
A web application does not need to be installed. It lives on the internet and runs in your browser.
A website mostly shows information. A web application lets you do things. You type, click, and the app responds.
As long as there is a browser and internet, you can use a web application on any device.
The owner updates the app. You do not do anything. Next time you open it, you see the new version.
Without internet, most web applications cannot work. That is why good network matters.
These five concepts are the heart of Module 1. Read them again before moving on.
USING A WEB APPLICATION STEP-BY-STEP
====================================
[ Open browser ]
|
V
[ Type address ]
|
V
[ Page loads ]
|
V
[ Log in if needed ]
|
V
[ Use the app ]
|
V
[ Submit or save ]
|
V
[ Log out ]
SPOTTING A WEB APPLICATION
==========================
[ Using a browser? ]
|
V
[ Reading or doing? ]
|
V
[ Buttons and boxes? ]
|
V
[ Can you log in? ]
|
V
[ It is a web application! ]
Using and spotting web applications both follow clear steps. Following steps makes it easy.
You open your bank's website, log in, and send money. That is a web application.
You visit Jumia, search for a phone, add it to your cart, and pay. That is a web application.
You open YouTube, search for a video, and watch. That is a web application.
You open Gmail, read a message, and reply. That is a web application.
You open Google Classroom, see an assignment, and submit your work. That is a web application.
Web applications are everywhere — in banking, shopping, videos, email, and learning.
Banks like GTBank, Zenith, and Access have web applications for checking balances and sending money.
These are Nigerian online shops. You can buy phones, clothes, and food through their web applications.
These are Nigerian web applications for payments. Businesses use them to receive money.
Many Nigerian universities use web applications for course registration and checking results.
You can book a ride using the web version of Bolt or Uber. That is a web application.
Nigeria has many web applications in banking, shopping, payments, education, and transport.
Some games run in your browser. You do not install them. You just open the website and play. That is a web application.
Websites like Canva let you draw and design in your browser. That is a web application.
When you take a quiz on a website and get your score instantly, that is a web application.
When you call a friend using a website like Zoom, that is a web application.
Websites that let you read stories and click to turn pages are web applications.
Web applications include online games, drawing tools, quizzes, video calls, and storybooks.
| Situation | Web Application? |
|---|---|
| Checking email | Yes — Gmail |
| Watching videos | Yes — YouTube |
| Paying a bill | Yes — Bank web app |
| Reading news | Mostly a website, but some have app features |
| Buying airtime | Yes — Bank or telecom web app |
Even simple daily activities use web applications. Now you can see them everywhere.
Parents can help children notice and understand web applications in daily life.
Web applications are huge, popular, and used by billions of people.
Web applications are full of surprises. The more you learn, the more interesting they become.
These ten points are the heart of Module 1. Read them again before moving on.
Avoiding these mistakes will make you better at understanding web applications than many adults.
These ten practices keep you safe while using web applications.
WEB APPLICATION IN ACTION
=========================
[ You ] --> [ Browser ] --> [ Internet ] --> [ Web Application ]
|
V
[ Response ]
|
V
[ You see it ]
WEBSITE vs WEB APPLICATION
==========================
Website: [ You read ]
Web Application: [ You click ] --> [ It responds ]
MANY DEVICES, ONE APPLICATION
=============================
[ Phone ] [ Tablet ] [ Laptop ] [ Desktop ]
\ | | /
\ | | /
V V V V
[ The same web application ]
AUTOMATIC UPDATES
=================
[ Developer updates ]
|
V
[ You open next time ]
|
V
[ You see new version ]
INTERNET NEEDED
===============
[ You ] --> [ Internet ] --> [ Web Application ]
If the internet is off, the chain breaks.
SPOTTING A WEB APPLICATION
==========================
[ Using a browser? ]
|
V
[ Reading or doing? ]
|
V
[ Buttons and boxes? ]
|
V
[ Can you log in? ]
|
V
[ It is a web application! ]
These diagrams help you see web applications clearly. Draw them yourself to remember them better.
| Website | Web Application |
|---|---|
| Shows information | Lets you do things |
| You read | You click and type |
| Simple | Interactive |
| Example: news site | Example: online banking |
| Installed App | Web Application |
|---|---|
| Must be downloaded | Opens in browser |
| Uses device storage | Uses no storage |
| You update it | Updates automatically |
| Works only on that device | Works on many devices |
| Area | Example |
|---|---|
| School | Google Classroom |
| Business | Jumia, Paystack |
| Home | YouTube, Gmail |
| Banking | GTBank web app |
| Transport | Bolt, Uber |
Comparing ideas side by side helps you remember the differences clearly.
| Lesson | Main Idea |
|---|---|
| Lesson 1 | A web application is a program that runs in a browser. |
| Lesson 2 | A website shows information. A web application lets you do things. |
| Lesson 3 | You already use many web applications like Gmail and YouTube. |
| Lesson 4 | Web applications make life easier and more connected. |
| Lesson 5 | You use web applications by typing, clicking, and submitting. |
| Lesson 6 | You do not install a web application. You just open the browser. |
| Lesson 7 | Web applications work on phones, tablets, laptops, and desktops. |
| Lesson 8 | Web applications update automatically. |
| Lesson 9 | Web applications need the internet. |
| Lesson 10 | Schools use web applications for teaching and results. |
| Lesson 11 | Businesses use web applications to sell and manage. |
| Lesson 12 | You can become a web application spotter. |
Congratulations! You have completed Module 1. Let us review what you have learned.
You began by learning that a web application is a program that runs inside a web browser. You do not install it. You just open your browser and use it.
You then learned the difference between a website and a web application. A website shows information. A web application lets you do things.
You discovered many examples you already use: Gmail, YouTube, Google Maps, Jumia, and online banking. You also learned that web applications work on many devices and are updated automatically.
You learned that web applications need the internet to work. Without it, they cannot function.
You saw how schools use web applications for teaching, homework, and results. You saw how businesses use them for selling, payments, and communication.
Finally, you became a web application spotter. You can now notice web applications everywhere and understand what they are.
MODULE 1 SUMMARY MAP
====================
[ What is a Web Application? ]
|
V
[ Website vs Web Application ] --> [ Examples You Use ]
|
V
[ Why They Matter ] --> [ How You Use Them ] --> [ Many Devices ]
|
V
[ Automatic Updates ] --> [ Needs Internet ] --> [ School & Business Uses ]
|
V
[ You are now a Web Application Spotter! ]
Well done! You now have a strong foundation. In Module 2, you will learn how web applications actually work.
A web application is a program that runs inside a web browser. You do not install it. You just open your browser and use it.
No. A website shows information. A web application lets you do things like send messages or pay bills.
No. You just open your browser and type the web address.
Yes. As long as your phone has a browser and internet, you can use it.
Because the program lives on the internet, not on your device. It must connect to work.
Yes. The owner updates them. Next time you open the app, you see the new version.
Most are safe if you use strong passwords, log out, and check the web address.
Some are free. Some are paid. It depends on the application.
Ask: Am I using a browser? Am I reading or doing? If you are doing something, it is likely a web application.
Yes! This course will teach you more. In Module 3, you will learn the building blocks.
| Column A (Word) | Column B (Meaning) |
|---|---|
| 1. Web application | A. A program that opens web pages |
| 2. Browser | B. A program that runs in a browser |
| 3. Website | C. To send information by clicking |
| 4. Submit | D. Pages that give information |
| 5. Log in | E. To enter your name and password |
Answers: 1-B, 2-A, 3-D, 4-C, 5-E
| Column A (Example) | Column B (Type) |
|---|---|
| 1. News article | A. Web application |
| 2. Online banking | B. Website |
| 3. YouTube video | C. Web application |
| 4. School history page | D. Website |
| 5. Gmail | E. Web application |
Answers: 1-B, 2-A, 3-C, 4-D, 5-E
Matching helps you connect words to meanings quickly.
A teacher tells the class to submit homework on Google Classroom. A student does not know what Google Classroom is.
Questions:
A man wants to send money using his bank's web application. His data finishes. The app stops working.
Questions:
A student opens YouTube and sees a new design. She did not update anything.
Questions:
These scenarios help you apply what you have learned to real situations.
Group size: 3–5 students
Time: 30 minutes
Materials: Paper, pencil
Instructions:
Goal: To practise spotting web applications and explaining why.
Time: 20 minutes
Materials: Notebook, pencil
Instructions:
Goal: To see how many web applications you use daily.
Time: 1–2 hours
Materials: Paper, pencil, colour pencils
Instructions:
Goal: To start thinking like a web application designer.
Time: 1 week
Materials: Notebook, pencil
Instructions:
Goal: To see how real people use web applications.
You have finished Module 1. Well done! Here is how to prepare for Module 2, which is all about How Web Applications Work.
TRANSITION TO MODULE 2
======================
[ Module 1: What is a Web Application? ]
|
V
[ Module 2: How Web Applications Work ]
|
V
[ You will learn: client, server, database,
front end, back end, and how a request travels ]
See you in Module 2. Keep thinking like a web application expert!
Understanding Web Applications · Beginner Level · 2026
Welcome to Module 2. In Module 1, you learned what a web application is. You learned that it is a program that runs in your browser. You learned that you do not install it. You just open your browser and use it. You also learned the difference between a website and a web application.
Now we go deeper. In this module, you will learn how a web application actually works. You will learn what happens behind the scenes when you click a button or type in a box. You will meet new friends: the client, the server, and the database.
Imagine you order a pizza by phone. You speak to the person on the phone. They take your order to the kitchen. The kitchen cooks the pizza. They send it back to you. A web application works in a similar way. Your browser is like the phone. The server is like the kitchen. The database is like the store room where ingredients are kept.
You will also learn about the front end and the back end. The front end is what you see. The back end is what happens behind the scenes. Both are important.
Do not worry if these words sound new. Every word will be explained in very simple language. Every idea will come with examples from real life, school, home, and Nigeria. By the end of this module, you will understand how web applications work from the inside.
YOUR LEARNING JOURNEY IN MODULE 2
=================================
[ Start ]
|
V
What is a Client?
|
V
What is a Server?
|
V
What is a Database?
|
V
Front End vs Back End
|
V
How a Request Travels
|
V
The Response Comes Back
|
V
[ You understand how web applications work! ]
This module teaches you how web applications work. You will learn about the client, the server, the database, the front end, and the back end. You will also learn how a request travels from your browser to the server and back.
By the end of this module, you will be able to:
You will learn the main parts of a web application: client, server, database, front end, and back end. You will also learn how requests and responses travel.
Chidi is a 12-year-old boy who lives in Abuja. One Saturday, his mother took him to a new restaurant. It was called "The Magic Kitchen."
When they sat down, there was no waiter. Instead, there was a small screen on the table. Chidi touched it. A menu appeared. He chose jollof rice and chicken. He tapped "Order."
A message appeared: "Your order has been received. Your food will arrive in 10 minutes."
Chidi was amazed. "How did the kitchen know what I ordered, Mama?"
His mother smiled. "The screen sent your order to the kitchen. The kitchen received it and started cooking. Then they will bring it to you."
"But how did the screen talk to the kitchen?"
"There is a small computer in the kitchen," his mother said. "It receives orders from all the screens. It tells the cooks what to make. It also keeps a record of every order."
Chidi thought for a moment. "So the screen is like the browser. The kitchen computer is like the server. And the record book is like the database?"
His mother laughed. "Chidi, you just described a web application!"
From that day, Chidi understood. When he uses a web application, his browser sends a request. The server receives it and does something. The database stores the information. Then the server sends a response back to his browser.
CHIDI'S MAGIC RESTAURANT
========================
[ Chidi taps screen ]
|
V
[ Order sent to kitchen ]
|
V
[ Kitchen computer receives it ]
|
V
[ Record book stores it ]
|
V
[ Cook prepares food ]
|
V
[ Food brought to Chidi ]
This is how a web application works!
Chidi learned that the screen (browser) sends a request to the kitchen (server). The record book (database) stores information. Then the server sends a response back. This story introduces the whole module.
In this section, you will go through 12 short lessons. Each lesson teaches one big idea. Each lesson ends with a mini summary. Read slowly. Think about the examples. Ask questions. That is how you learn.
A client is the device or program that asks for information. In a web application, the client is usually your browser. It is the part that you see and use.
The client is the starting point. Without a client, there is no request. No request means no response. The client is what you use to talk to the web application.
Think of a customer in a shop. The customer asks for something. The shopkeeper gives it. The customer is the client. Your browser is the client when you use a web application.
When you open Chrome and go to Gmail, Chrome is the client. It asks Gmail for your inbox. Gmail sends it back.
When you use a school result portal, your browser is the client. It asks the school's computer for your results.
When you watch YouTube on your phone, your phone's browser is the client. It asks YouTube for the video.
When you use a bank web application on your laptop, your laptop's browser is the client. It asks the bank's server for your balance.
CLIENT IN ACTION
================
[ Client ] --> [ Asks for something ]
Examples of clients:
- Chrome browser
- Firefox browser
- Safari browser
- Edge browser
- A phone's built-in browser
A client is the device or program that asks for information. In a web application, the client is usually your browser.
A server is a computer that answers requests. It waits for clients to ask for something. When a request comes, the server finds the answer and sends it back.
The server is the brain of the web application. It holds the program. It processes requests. It sends responses. Without a server, there is no web application.
Think of a library. You ask the librarian for a book. The librarian finds it and gives it to you. The librarian is like a server. The library building is like the server computer.
When you open Gmail, your browser sends a request to a Google server. That server finds your emails and sends them back to you.
When you check your results online, the school's server finds your records and sends them to your browser.
When you order food online, the restaurant's server receives your order and sends it to the kitchen.
When you use a Nigerian bank's web application, the bank's server in Lagos or Abuja receives your request and sends your balance.
SERVER IN ACTION
================
[ Server ] --> [ Waits for requests ]
When a request arrives:
1. Server receives it
2. Server finds the answer
3. Server sends the response
Servers run all day and all night.
A server is a computer that answers requests. It holds the program and sends responses back to the client.
A database is a special place where information is stored. It keeps data safe and organized. Servers use databases to find and save information.
Without a database, the server would forget everything. It would not remember your account, your messages, or your orders. The database is the memory of the web application.
Think of a school file cabinet. Each student has a file. The file holds the student's name, class, and grades. A database is like that file cabinet, but on a computer.
When you log into Gmail, the server looks in its database for your account. It finds your emails and sends them to you.
A school's result portal uses a database. It stores every student's name, class, and scores.
A family budget app stores your expenses in a database. It remembers what you spent last month.
When you send money using a bank web application, the bank's database records the transaction. It remembers who sent money to whom.
DATABASE IN ACTION
==================
[ Database ]
| Name | Class | Score |
|----------|-------|-------|
| Ngozi | JSS 2 | 85 |
| Chidi | JSS 3 | 78 |
| Amina | JSS 1 | 92 |
The database stores information in tables like this.
A database is where information is stored. It is the memory of a web application. Servers use it to find and save data.
A web application has three main parts: the client, the server, and the database. They work together like a team.
Understanding how they work together helps you see the full picture. It also helps you understand what happens when you click a button.
Think of a restaurant again. You (the client) give your order to the waiter. The waiter (the server) takes it to the kitchen. The kitchen uses ingredients from the store room (the database). Then the food comes back to you.
When you log into Facebook, your browser (client) asks for your profile. The Facebook server receives the request. It looks in the database for your information. Then it sends it back to your browser.
When you check your results online, your browser (client) asks the school's server. The server looks in the database for your scores. Then it sends them back.
When you use a shopping web application, your browser asks the server. The server looks in the database for the product. Then it shows it to you.
When you check your bank balance, your browser asks the bank's server. The server looks in the database for your account. Then it sends your balance.
CLIENT, SERVER, DATABASE
========================
[ Client ] --> [ Server ] --> [ Database ]
^ | |
| | |
+--------------+--------------+
Response comes back
Client asks.
Server processes.
Database stores.
The client, server, and database work together. The client asks. The server processes. The database stores. Together they form a web application.
The front end is the part of a web application that you see and interact with. It includes the buttons, boxes, colours, and text on the screen.
The front end is what users see first. If it is clear and beautiful, users enjoy using the app. If it is messy, users get confused.
Think of a restaurant. The front end is the dining area — the tables, chairs, menus, and the way the place looks. It is what customers see when they walk in.
When you open Gmail, the front end is the inbox you see — the list of emails, the buttons, and the search bar.
When you check results online, the front end is the page where you type your exam number and click "Check".
When you watch YouTube, the front end is the video page — the play button, the comments, and the like button.
When you shop on Jumia, the front end is the page with products, prices, and the "Add to Cart" button.
FRONT END EXAMPLE
=================
+---------------------------------------+
| [ Search box ] [ Search button ] |
| |
| [ Product image ] ₦5,000 |
| [ Add to Cart ] |
| |
| [ Checkout ] |
+---------------------------------------+
This is what the user sees = FRONT END
The front end is what you see and interact with. It includes buttons, boxes, images, and layout.
The back end is the part of a web application that works behind the scenes. It includes the server, the database, and the programs that make everything work.
The back end does the hard work. It processes requests, saves information, and sends responses. Without the back end, the front end would do nothing.
Think of a restaurant. The back end is the kitchen — the cooks, the recipes, the ingredients, and the work that happens out of sight. Customers do not see it, but it makes the food.
When you send an email in Gmail, the back end receives it, stores it in the database, and sends it to the receiver.
When you submit homework on Google Classroom, the back end stores it, marks it as submitted, and shows it to the teacher.
When you pay a bill online, the back end checks your account and records the payment.
When you send money using a bank web application, the back end checks your balance, subtracts the amount, and adds it to the receiver's account.
BACK END EXAMPLE
================
[ User clicks "Pay" ]
|
V
[ Server receives request ]
|
V
[ Server checks account in database ]
|
V
[ Server updates balance ]
|
V
[ Server sends confirmation ]
|
V
[ User sees "Payment successful" ]
All of this happens behind the scenes = BACK END
The back end is what happens behind the scenes. It includes the server, the database, and the programs that process requests.
The front end is what the user sees. The back end is what happens behind the scenes. Both are needed for a web application to work.
Knowing the difference helps you understand how a web application is built. It also helps you decide what part you might want to work on in the future.
Think of a car. The front end is the dashboard, the steering wheel, and the seats. The back end is the engine, the fuel system, and the wheels. You see the front end. The back end makes it move.
| Front End | Back End |
|---|---|
| What the user sees | What happens behind the scenes |
| Buttons, boxes, colours | Server, database, programs |
| Runs in the browser | Runs on the server |
| Example: Gmail inbox | Example: Gmail's email storage |
On Facebook, the front end is your news feed. The back end stores your posts, friends, and messages.
On a result portal, the front end is the form you fill. The back end looks up your scores in the database.
In online shopping, the front end is the product page. The back end checks stock and processes payment.
On a bank web application, the front end is the page where you type the amount. The back end moves the money.
FRONT END vs BACK END
=====================
FRONT END: [ What you see ]
|
V
BACK END: [ What happens behind ]
Front end: Buttons, colours, text
Back end: Server, database, logic
The front end is what you see. The back end is what happens behind the scenes. Both are needed for a web application to work.
A request is a message sent by the client to the server. It asks for something. For example, it might ask for a webpage, a photo, or a piece of information.
Every action you take in a web application starts with a request. Without requests, nothing would happen.
Think of raising your hand in class. You are asking the teacher for something. That is a request. In a web application, your browser raises its hand by sending a request.
When you type "jollof rice" in YouTube's search box and press Enter, your browser sends a request to YouTube's server.
When you click "Check Results" on a school portal, your browser sends a request to the school's server.
When you tap "Buy" in an online shop, your browser sends a request to the shop's server.
When you type your account number in a bank web application and click "Check Balance", your browser sends a request to the bank's server.
SENDING A REQUEST
=================
[ You click a button ]
|
V
[ Browser builds a request ]
|
V
[ Request travels through internet ]
|
V
[ Server receives the request ]
A request is a message from the client to the server. It asks for something. Every action you take sends a request.
A response is the message the server sends back to the client. It contains the answer to the request.
Without a response, the client would never know the answer. The response is what makes the web application useful.
Think of asking a question in class. The teacher gives an answer. That answer is like a response.
When you search on Google, the response is the list of results that appear.
When you check your results, the response is your scores appearing on the screen.
When you order food online, the response is a message saying "Order confirmed."
When you send money using a bank web application, the response is a message saying "Transfer successful."
RECEIVING A RESPONSE
====================
[ Server finds the answer ]
|
V
[ Server builds a response ]
|
V
[ Response travels back ]
|
V
[ Browser shows it to you ]
A response is the answer the server sends back to the client. It shows you what you asked for.
A request travels from your browser to the server through the internet. The journey has several steps.
Knowing how a request travels helps you understand why some web applications are slow. It also helps you appreciate what happens when you click a button.
Think of sending a letter. You write it, put it in an envelope, and drop it in a post box. The postman carries it to the post office. The post office sends it to the right address. A request travels the same way.
When you open YouTube, your request travels from your phone to a Google server. The server finds the video and sends it back.
When you check results online, your request travels from your laptop to the school's server. The server finds your scores and sends them back.
When you pay a bill, your request travels to the bank's server. The bank processes the payment and sends a confirmation.
When you use a Nigerian bank web application, your request may travel from Kano to Lagos in less than a second. The internet makes this possible.
HOW A REQUEST TRAVELS
=====================
[ You click ]
|
V
[ Browser builds request ]
|
V
[ Internet ]
|
V
[ Server receives ]
|
V
[ Server processes ]
|
V
[ Response sent back ]
|
V
[ Browser shows result ]
A request travels from your browser through the internet to the server. The server processes it and sends a response back.
A URL is the web address you type in your browser. For example, "gmail.com". An IP address is a set of numbers that identifies a computer on the internet. For example, "142.250.190.46".
URLs are easy for humans to remember. IP addresses are what computers use. The URL is like a name. The IP address is like a house number.
Think of a phone contact. You save "Mama" as a name. But the phone actually uses a phone number to call her. The name is like a URL. The number is like an IP address.
You type "youtube.com" in your browser. That is a URL. The browser finds YouTube's IP address and connects to it.
Your school portal may have a URL like "results.myschool.edu.ng". The browser finds the school's server IP address.
"google.com" is a URL. It is easier to remember than a long IP address.
"jumia.com.ng" is a URL. The browser finds Jumia's server IP address.
URL vs IP ADDRESS
=================
URL: www.gmail.com (easy for humans)
IP: 142.250.190.46 (used by computers)
The browser looks up the IP address for the URL.
A URL is a web address you type. An IP address is a set of numbers that identifies a computer. The browser uses both to connect you.
A web application is slow when the request or response takes a long time. Many things can cause this.
Understanding slowness helps you be patient and helps developers fix problems. It also helps you choose better networks.
Think of a traffic jam. The car is fine. The road is fine. But too many cars slow everything down. The internet can have traffic jams too.
When many people watch a live football match online, the app may slow down. The server is busy.
When all students check results on the same day, the portal may be slow. Too many requests at once.
When your data is weak, YouTube videos load slowly.
When there is a network problem, bank web applications may be slow. Customers must wait.
WHY WEB APPLICATIONS ARE SLOW
=============================
[ Many users ] --> [ Server busy ] --> [ Slow response ]
[ Weak network ] --> [ Slow request ] --> [ Slow response ]
Web applications can be slow for many reasons: weak network, busy server, large data, or long distance. Patience and better networks help.
You have now learned the core ideas of Module 2: the client, the server, the database, the front end, the back end, requests, responses, how requests travel, URLs, IP addresses, and why web applications can be slow.
| Word | Simple Definition |
|---|---|
| Client | The device or program that asks for information. |
| Server | A computer that answers requests. |
| Database | A place where information is stored. |
| Front end | The part of a web application you see. |
| Back end | The part that works behind the scenes. |
| Request | A message from the client asking for something. |
| Response | The answer the server sends back. |
| URL | A web address you type in the browser. |
| IP address | A set of numbers that identifies a computer. |
| Browser | A program that shows web pages. |
| Internet | The global network that connects computers. |
| Network | A group of connected computers. |
| Traffic | Many requests happening at the same time. |
| Processing | When the server works on a request. |
| Data | Information stored or sent. |
These words will help you understand how web applications work. Use them often so they become easy.
The client asks. The server answers. Without both, the web application cannot work.
The database stores information. Without it, the server would forget everything.
The front end is what you see. The back end is what happens behind the scenes. Both are needed.
When you click, a request travels. When the server answers, a response comes back.
URLs and IP addresses help your browser find the right server. The internet makes it all possible.
These five concepts are the heart of Module 2. Read them again before moving on.
WHAT HAPPENS WHEN YOU CLICK
===========================
[ You click ]
|
V
[ Browser builds request ]
|
V
[ Request travels ]
|
V
[ Server receives ]
|
V
[ Server processes ]
|
V
[ Server builds response ]
|
V
[ Response travels back ]
|
V
[ Browser shows result ]
SIMPLE WEB APPLICATION DIAGRAM
==============================
[ Client ] --request--> [ Server ] --query--> [ Database ]
^ | |
| | |
+-------response--------+<-------data-----------+
Clicking a button and drawing a diagram both follow clear steps. Following steps makes it easy.
Your browser (client) asks the bank's server for your balance. The server looks in the database and sends your balance back.
Your browser asks the shop's server for a product. The server checks the database and sends the product details.
Your browser asks YouTube's server for a video. The server sends the video back.
Your browser asks Gmail's server for your messages. The server looks in the database and sends them back.
Your browser asks Google Classroom's server for your assignments. The server looks in the database and sends them.
Client, server, and database work together in banking, shopping, videos, email, and learning.
Banks like GTBank, Zenith, and Access have web applications. Your browser asks the bank's server. The server looks in the database and sends your balance.
When you shop on Jumia, your browser asks Jumia's server. The server checks the database for stock and sends the product details.
When you pay online with Paystack, your browser sends a request. Paystack's server processes it and confirms the payment.
When you check results, your browser asks the school's server. The server looks in the database for your scores.
When you book a ride, your browser asks the server for available drivers. The server checks the database and sends a list.
Nigeria has many examples of client, server, and database working together in banking, shopping, payments, education, and transport.
When you play an online game, your browser is the client. The game's server keeps track of scores and sends updates.
When you take a quiz, your browser sends your answers. The server marks them and sends your score.
When you send a message on WhatsApp Web, your browser sends it. The server stores it in the database. Your friend's browser receives it.
When you draw on Canva, your browser sends your drawing to the server. The server saves it in the database.
When you read a story online, your browser asks the server for the next page. The server sends it.
Client, server, and database work together in online games, quizzes, chats, drawing tools, and storybooks.
| Situation | Client | Server | Database |
|---|---|---|---|
| Checking email | Your browser | Gmail server | Gmail database |
| Watching videos | Your browser | YouTube server | YouTube database |
| Paying a bill | Your browser | Bank server | Bank database |
| Buying airtime | Your browser | Telecom server | Telecom database |
| Checking results | Your browser | School server | School database |
Even simple daily activities use client, server, and database. Now you can see them everywhere.
Parents can help children understand how web applications work by using simple examples and drawing together.
Servers and databases are powerful. They make web applications possible.
Servers, databases, URLs, and IP addresses are full of surprises. The more you learn, the more interesting they become.
These ten points are the heart of Module 2. Read them again before moving on.
Avoiding these mistakes will make you better at understanding web applications than many adults.
These ten practices will help you understand and use web applications better.
CLIENT, SERVER, DATABASE
========================
[ Client ] --request--> [ Server ] --query--> [ Database ]
^ | |
| | |
+-------response--------+<-------data-----------+
FRONT END vs BACK END
=====================
FRONT END: [ What you see ]
BACK END: [ What happens behind ]
HOW A REQUEST TRAVELS
=====================
[ You click ]
|
V
[ Browser builds request ]
|
V
[ Internet ]
|
V
[ Server receives ]
|
V
[ Server processes ]
|
V
[ Response sent back ]
|
V
[ Browser shows result ]
URL vs IP ADDRESS
=================
URL: www.gmail.com (easy for humans)
IP: 142.250.190.46 (used by computers)
WHY WEB APPLICATIONS ARE SLOW
=============================
[ Many users ] --> [ Server busy ] --> [ Slow response ]
[ Weak network ] --> [ Slow request ] --> [ Slow response ]
SIMPLE WEB APPLICATION DIAGRAM
==============================
[ Client ] --request--> [ Server ] --query--> [ Database ]
^ | |
| | |
+-------response--------+<-------data-----------+
These diagrams help you see how web applications work. Draw them yourself to remember them better.
| Client | Server |
|---|---|
| Asks for information | Answers requests |
| Runs on your device | Runs on a remote computer |
| Example: your browser | Example: Gmail's computer |
| Many clients can talk to one server | One server can serve many clients |
| Front End | Back End |
|---|---|
| What you see | What happens behind |
| Buttons, colours, layout | Server, database, logic |
| Runs in browser | Runs on server |
| Example: inbox page | Example: email storage |
| URL | IP Address |
|---|---|
| Easy for humans | Used by computers |
| Example: gmail.com | Example: 142.250.190.46 |
| Contains words | Contains numbers |
| You type it | Browser finds it |
Comparing ideas side by side helps you remember the differences clearly.
| Lesson | Main Idea |
|---|---|
| Lesson 1 | The client is the device or program that asks for information. |
| Lesson 2 | The server is the computer that answers requests. |
| Lesson 3 | The database stores information. It is the memory. |
| Lesson 4 | Client, server, and database work together as a team. |
| Lesson 5 | The front end is what you see. |
| Lesson 6 | The back end is what happens behind the scenes. |
| Lesson 7 | Front end and back end are different. Both are needed. |
| Lesson 8 | A request is a message from the client to the server. |
| Lesson 9 | A response is the answer the server sends back. |
| Lesson 10 | Requests travel from browser to server through the internet. |
| Lesson 11 | A URL is a web address. An IP address identifies a computer. |
| Lesson 12 | Web applications can be slow for many reasons. |
Congratulations! You have completed Module 2. Let us review what you have learned.
You began by learning that a client is the device or program that asks for information. In a web application, the client is usually your browser.
You then learned that a server is a computer that answers requests. It waits for clients to ask for something and sends back an answer.
You discovered that a database is where information is stored. It is the memory of a web application.
You learned that the client, server, and database work together like a team. The client asks. The server processes. The database stores.
You explored the front end — what the user sees. And the back end — what happens behind the scenes. Both are needed.
You learned about requests and responses. A request is a message from the client. A response is the answer from the server.
You discovered how a request travels from your browser through the internet to the server and back.
You learned about URLs and IP addresses. A URL is a web address for humans. An IP address is for computers.
Finally, you learned why web applications can be slow and how to be patient.
MODULE 2 SUMMARY MAP
====================
[ Client ] --> [ Server ] --> [ Database ]
| | |
V V V
[ Front End ] [ Back End ] [ Storage ]
| | |
V V V
[ Request ] --> [ Processing ] --> [ Response ]
|
V
[ You understand how web applications work! ]
Well done! You now understand how web applications work from the inside. In Module 3, you will learn the building blocks: HTML, CSS, and JavaScript.
A client is the device or program that asks for information. In a web application, the client is usually your browser.
A server is a computer that answers requests. It holds the program and sends back responses.
A database is where information is stored. It is the memory of a web application.
The front end is the part of a web application you see and interact with.
The back end is the part that works behind the scenes. It includes the server, the database, and the programs.
A request is a message from the client to the server. It asks for something.
A response is the answer the server sends back to the client.
A URL is a web address you type in your browser. For example, gmail.com.
An IP address is a set of numbers that identifies a computer on the internet.
They can be slow because of weak network, busy servers, large data, or long distance between client and server.
| Column A (Word) | Column B (Meaning) |
|---|---|
| 1. Client | A. A computer that answers requests |
| 2. Server | B. The device that asks for information |
| 3. Database | C. What the user sees |
| 4. Front end | D. Where information is stored |
| 5. Back end | E. What happens behind the scenes |
Answers: 1-B, 2-A, 3-D, 4-C, 5-E
| Column A (Term) | Column B (Example) |
|---|---|
| 1. Request | A. gmail.com |
| 2. Response | B. "Login successful" |
| 3. URL | C. Clicking "Search" |
| 4. IP address | D. Chrome browser |
| 5. Client | E. 142.250.190.46 |
Answers: 1-C, 2-B, 3-A, 4-E, 5-D
Matching helps you connect words to meanings quickly.
It is the day results are released. Many students log in at the same time. The portal becomes very slow.
Questions:
A student sends an email. The receiver does not get it. The student checks again. The email is in the "Sent" folder.
Questions:
A person types "gogle.com" instead of "google.com". The page does not load.
Questions:
These scenarios help you apply what you have learned to real situations.
Group size: 3–5 students
Time: 30 minutes
Materials: Paper, pencil, ruler
Instructions:
Goal: To practise understanding how web applications work.
Time: 20 minutes
Materials: Notebook, pencil
Instructions:
Goal: To connect what you learned to a real web application.
Time: 1–2 hours
Materials: Paper, pencil, colour pencils
Instructions:
Goal: To practise designing a simple web application.
Time: 1 week
Materials: Notebook, pencil
Instructions:
Goal: To connect what you learned to real users.
You have finished Module 2. Well done! Here is how to prepare for Module 3, which is all about Building Blocks of a Web Application.
TRANSITION TO MODULE 3
======================
[ Module 2: How Web Applications Work ]
|
V
[ Module 3: Building Blocks of a Web Application ]
|
V
[ You will learn: HTML, CSS, JavaScript,
frameworks, APIs, and hosting ]
See you in Module 3. Keep thinking like a web application expert!
Understanding Web Applications · Beginner Level · 2026
Welcome to Module 3 — the final module of the Understanding Web Applications course. You have come a long way. In Module 1, you learned what a web application is. In Module 2, you learned how it works: the client, the server, the database, requests, and responses.
Now we come to the building blocks. A web application is like a house. A house is built with bricks, cement, and paint. A web application is built with HTML, CSS, and JavaScript. These three are the main building blocks.
HTML gives the structure. It is like the walls and rooms of a house. CSS gives the style. It is like the paint, the tiles, and the decoration. JavaScript gives the behaviour. It is like the doors that open, the lights that switch on, and the taps that run water.
You will also learn about frameworks, APIs, and hosting. A framework is like a ready-made set of building tools. An API is like a messenger that lets different programs talk to each other. Hosting is like renting land where your house will stand.
Do not worry if these words sound new. Every word will be explained in very simple language. Every idea will come with examples from real life, school, home, and Nigeria. By the end of this module, you will understand what a web application is made of.
YOUR LEARNING JOURNEY IN MODULE 3
=================================
[ Start ]
|
V
What is HTML?
|
V
What is CSS?
|
V
What is JavaScript?
|
V
HTML, CSS, JavaScript Together
|
V
What is a Framework?
|
V
What is an API?
|
V
What is Hosting?
|
V
[ You understand the building blocks! ]
This module teaches you the three main building blocks of a web application: HTML, CSS, and JavaScript. You will also learn about frameworks, APIs, and hosting. Everything is explained in simple language with examples.
By the end of this module, you will be able to:
You will learn the three main building blocks: HTML, CSS, and JavaScript. You will also learn about frameworks, APIs, and hosting.
Amina is a 12-year-old girl who lives in Kaduna. One Saturday, her teacher gave the class a project: "Build a model house using cardboard. Make it beautiful. Add a door that opens and a light that switches on."
Amina was excited. She gathered her materials: cardboard, glue, paint, scissors, and a small battery-powered light.
First, she cut the cardboard into walls and a roof. She glued them together. Now the house had shape. It stood up. But it was plain brown and boring.
"This is the structure," her mother said. "It is like the skeleton of a house."
Next, Amina painted the walls yellow, the roof red, and the door blue. She added small flowers on the walls. Now the house looked beautiful.
"This is the style," her mother said. "It makes the house look nice."
Finally, Amina added a small hinge to the door so it could open. She connected the light to a switch so it could turn on and off. Now the house could do things.
"This is the behaviour," her mother said. "It makes the house interactive."
Amina smiled. "So, structure, style, and behaviour. Just like a web application!"
Her mother nodded. "Exactly. HTML gives structure. CSS gives style. JavaScript gives behaviour. Together, they make a web application."
Amina learned something important that day. Every web application, no matter how big, is built with these three blocks.
AMINA'S CARDBOARD HOUSE
=======================
[ Cut and glue walls ] --> Structure --> HTML
[ Paint and decorate ] --> Style --> CSS
[ Add door and light ] --> Behaviour --> JavaScript
Together they make a complete house.
Amina built a cardboard house with structure, style, and behaviour. Her mother explained that HTML gives structure, CSS gives style, and JavaScript gives behaviour. This story introduces the whole module.
In this section, you will go through 12 short lessons. Each lesson teaches one big idea. Each lesson ends with a mini summary. Read slowly. Think about the examples. Ask questions. That is how you learn.
HTML stands for HyperText Markup Language. It is the language used to build the structure of a web page. It tells the browser what things are: a heading, a paragraph, a picture, or a button.
Without HTML, there would be no web page. HTML is the foundation. It is the first building block.
Think of a school timetable. It has rows and columns. Each subject is in its place. HTML is like the timetable. It puts things in their place on a web page.
When you open a news website, the headings, the paragraphs, and the pictures are all created using HTML.
When your teacher writes a title on the board, then a list of items below, that is similar to HTML structure.
A shopping list has a title ("Things to Buy") and items below. HTML does the same for a web page.
When you visit a Nigerian news site like Punch, the headlines, the pictures, and the article text are all built with HTML.
HTML STRUCTURE
==============
My School
Welcome to my school website.
HTML is the language that builds the structure of a web page. It tells the browser what things are.
An HTML tag is a special word wrapped in angle brackets, like this: <p>. Tags tell the browser what to do. Most tags come in pairs: an opening tag and a closing tag.
Tags are how you write HTML. Without tags, the browser would not know what to show.
Think of a gift box. You open it and close it. HTML tags are like that. The opening tag starts something. The closing tag ends it.
A news article uses <h1> for the headline, <p> for each paragraph, and <img> for the pictures.
A school newsletter uses <h1> for the title, <p> for the story, and <ul> for the list of events.
A recipe page uses <h1> for the dish name, <p> for instructions, and <ul> for ingredients.
A Jumia product page uses <h1> for the product name, <p> for the description, and <img> for the photos.
HTML TAGS
=========
Title
-> Big heading
Text here
-> Paragraph
-> Image
-> Link
-> List start
- Item
-> List item
-> List end
HTML tags tell the browser what to show. Most tags come in pairs: an opening tag and a closing tag.
CSS stands for Cascading Style Sheets. It is the language used to style a web page. It controls colours, fonts, sizes, spacing, and layout.
Without CSS, every web page would look plain and boring. CSS makes pages beautiful and easy to read.
Think of a house. HTML builds the walls. CSS paints them. Without paint, the house is dull. With paint, it looks beautiful.
When you visit a website with a beautiful blue header and white text, that styling is done with CSS.
A school website uses CSS to make the school colours appear everywhere. This makes it look professional.
When you design a birthday card, you choose colours and fonts. CSS does that for web pages.
A Nigerian online shop uses CSS to make product images big and prices clear. This helps customers shop easily.
CSS IN ACTION
=============
Without CSS:
My School
Welcome to my school website.
With CSS:
[ My School ] <- Big blue text
Welcome to my school website. <- Nice font
CSS styles a web page. It controls colours, fonts, sizes, and layout. Without CSS, pages would look plain.
JavaScript is a programming language that makes web pages interactive. It lets pages respond to clicks, typing, and other actions.
Without JavaScript, web pages would be static. They would not respond. With JavaScript, pages come alive.
Think of a TV remote. Pressing a button changes the channel. JavaScript is like the remote. It makes things happen when you click.
When you click "Like" on Facebook, JavaScript sends the like without reloading the page.
When you take an online quiz, JavaScript checks your answer and shows if it is correct.
When you use a calculator app on a website, JavaScript does the math.
When you type in a bank web application, JavaScript checks that you entered a valid account number before sending it.
JAVASCRIPT IN ACTION
====================
[ You click "Like" ]
|
V
[ JavaScript runs ]
|
V
[ Page updates without reloading ]
|
V
[ You see the like appear ]
JavaScript makes web pages interactive. It responds to clicks and typing. It brings pages to life.
HTML, CSS, and JavaScript work together to build a complete web application. HTML gives structure. CSS gives style. JavaScript gives behaviour.
Understanding how they work together helps you see the whole picture. It also helps you decide which one to learn first.
Think of a car. HTML is the body and frame. CSS is the paint and design. JavaScript is the engine that makes it move.
A YouTube page uses HTML for the video and comments. CSS makes it look good. JavaScript makes the play button work.
A school portal uses HTML for the login form. CSS makes it look nice. JavaScript checks if you typed your details correctly.
An online shopping site uses HTML for products. CSS makes them look attractive. JavaScript updates the cart when you add items.
A Nigerian bank's web application uses HTML for the login page. CSS makes it look like the bank's colours. JavaScript checks your account number and password.
| Language | Role | Example |
|---|---|---|
| HTML | Structure | Headings, paragraphs, images |
| CSS | Style | Colours, fonts, layout |
| JavaScript | Behaviour | Clicks, animations, checks |
HTML + CSS + JAVASCRIPT
=======================
[ HTML ] -> Structure (walls)
|
V
[ CSS ] -> Style (paint)
|
V
[ JavaScript ] -> Behaviour (doors, lights)
Together: a complete web page!
HTML gives structure. CSS gives style. JavaScript gives behaviour. Together they build a complete web application.
A framework is a ready-made set of tools and rules that helps developers build web applications faster. It is like a toolkit.
Frameworks save time. They give you ready-made parts. You do not have to build everything from scratch.
Think of a LEGO set. You get pre-made pieces that fit together. A framework is like that for code. It gives you pieces you can use.
Many big websites use React to build their user interface. This makes them fast and smooth.
A school portal could use a framework to build the login page and result page faster.
A family business could use a framework to build a simple online shop quickly.
Many Nigerian tech companies use React and Django to build their web applications faster.
FRAMEWORK AS A TOOLKIT
======================
Without framework: [ Build everything from scratch ]
With framework: [ Use ready-made pieces ]
Example:
React -> ready-made buttons, forms, lists
A framework is a ready-made set of tools. It helps developers build web applications faster.
API stands for Application Programming Interface. It is a way for two programs to talk to each other. It is like a messenger between programs.
APIs let different programs share information. Without APIs, programs would work alone. With APIs, they work together.
Think of a waiter in a restaurant. You tell the waiter what you want. The waiter tells the kitchen. The kitchen sends the food back through the waiter. An API is like a waiter between two programs.
When you pay with Paystack on a website, the website uses Paystack's API to process your payment.
A school portal might use a weather API to show today's weather on the login page.
A food delivery app uses a map API to show the rider's location.
Many Nigerian online shops use Paystack's API to accept payments. The shop does not build its own payment system. It uses Paystack's API.
API AS A MESSENGER
==================
[ Your App ] --> [ API ] --> [ Other Service ]
^ |
| |
+------ Response ------------+
Example: Online shop -> Paystack API -> Payment done
An API is a way for two programs to talk. It is like a messenger. It lets different apps share information.
Hosting is the service of keeping a web application on a computer (server) that is always connected to the internet. The company that provides this service is called a host.
Without hosting, no one else can use your web application. Hosting makes your app available to the world.
Think of a shop. You can build a shop in your house. But if you want customers to find it, you must rent a space in a market. Hosting is like renting space on the internet.
When you visit a website, the page is stored on a hosting server somewhere in the world.
A school portal is hosted on a server so students can access it from home.
A family business can host its online shop on a hosting service for a small monthly fee.
Some Nigerian companies host their websites on local servers. Others use international hosting services like AWS or Google Cloud.
HOSTING IN ACTION
=================
[ Your web application files ]
|
V
[ Uploaded to a hosting server ]
|
V
[ Server is connected to the internet ]
|
V
[ Users can now visit your app! ]
Hosting is the service of keeping a web application on an internet-connected server so everyone can use it.
A complete web application uses HTML, CSS, JavaScript, frameworks, APIs, and hosting together. Each part plays a role.
Understanding how everything fits together helps you see the full picture. It also prepares you to build your own web application.
Think of a school play. HTML is the stage. CSS is the costumes and lighting. JavaScript is the actors moving and speaking. Frameworks are the scripts. APIs are the messengers. Hosting is the hall where the play happens.
An online shop uses HTML for product pages. CSS makes them look good. JavaScript updates the cart. It uses a framework to build faster. It uses a payment API to accept money. It is hosted on a server.
A school portal uses all these parts. It is built with HTML, CSS, and JavaScript. It uses frameworks. It may use APIs for weather or maps. It is hosted on a server.
A family business could build a small web application using all these parts to sell products online.
A Nigerian startup might use React (framework) for the front end, Django (framework) for the back end, Paystack (API) for payments, and AWS (hosting) for the server.
PUTTING IT ALL TOGETHER
=======================
[ HTML ] -> Structure
|
V
[ CSS ] -> Style
|
V
[ JavaScript ] -> Behaviour
|
V
[ Framework ] -> Speed
|
V
[ API ] -> Connections
|
V
[ Hosting ] -> Availability
Together: a complete web application!
HTML, CSS, JavaScript, frameworks, APIs, and hosting all work together to create a complete web application.
If you want to build web applications, you might wonder what to learn first. The answer is simple: start with HTML, then CSS, then JavaScript.
Learning in the right order helps you understand each part. You build a strong foundation.
Think of building a house. You start with the walls (HTML). Then you paint (CSS). Then you add doors and lights (JavaScript). You do not start with the paint.
Most web developers start with HTML. Then they learn CSS. Then JavaScript. Then they pick a framework.
A student learning web development might start with HTML in a computer class. Then they learn CSS. Then JavaScript.
Someone learning at home can follow free lessons online. Start with HTML.
Many Nigerian tech training centres teach HTML first, then CSS, then JavaScript.
LEARNING PATH
=============
[ HTML ] -> [ CSS ] -> [ JavaScript ] -> [ Frameworks ]
^
|
Start here!
Then: APIs, Hosting
Start with HTML. Then CSS. Then JavaScript. Then frameworks, APIs, and hosting.
The building blocks matter because they are the foundation of every web application. Without them, there would be no web applications.
Understanding them helps you appreciate the web applications you use. It also prepares you for a career in tech if you want one.
Think of learning to write. You first learn letters. Then words. Then sentences. Then stories. HTML, CSS, and JavaScript are the letters and words of the web.
The websites you visit, the apps you use, and the games you play — all built with these blocks.
A student who learns these blocks can build a school project website or a class attendance app.
A family business could be built using these blocks. The owner could sell products online.
Young Nigerians are learning HTML, CSS, and JavaScript and building web applications for local businesses and international clients.
WHY THEY MATTER
===============
[ HTML, CSS, JavaScript ]
|
V
[ Every web application ]
|
V
[ Jobs, businesses, ideas ]
|
V
[ You can build the future! ]
The building blocks matter because they power every web application. They can lead to jobs, businesses, and new ideas.
A web application builder is someone who uses HTML, CSS, and JavaScript to create web applications. Anyone can become one with practice.
This skill is valuable. It lets you turn ideas into real apps. It also opens doors to many careers.
Think of learning to cook. At first, you follow recipes. Later, you create your own dishes. Building web applications is the same.
Many people start by building a personal website. Then they build a small app. Then they get a job or start a business.
A student can build a class website. This shows what they can do.
A young person can build a simple app for a family business. This helps the business and teaches the builder.
Many Nigerian developers started by learning HTML at home. Now they work for companies around the world.
BECOMING A BUILDER
==================
[ Learn HTML ]
|
V
[ Learn CSS ]
|
V
[ Learn JavaScript ]
|
V
[ Practice with projects ]
|
V
[ Learn frameworks ]
|
V
[ Build your own web application! ]
|
V
[ Celebrate 🎉 ]
Anyone can become a web application builder. Start with HTML, CSS, and JavaScript. Practice. Build. Grow.
You have now learned the core ideas of Module 3: HTML, CSS, JavaScript, how they work together, frameworks, APIs, hosting, the learning path, why they matter, and how to become a builder.
| Word | Simple Definition |
|---|---|
| HTML | The language that gives a web page its structure. |
| Tag | A special word in angle brackets that tells the browser what to do. |
| CSS | The language that styles a web page. |
| JavaScript | The language that makes a web page interactive. |
| Framework | A ready-made set of tools for building web applications. |
| API | A way for two programs to talk to each other. |
| Hosting | Keeping a web application on an internet-connected server. |
| Server | A computer that answers requests. |
| Front end | The part of a web application you see. |
| Back end | The part that works behind the scenes. |
| Structure | The way something is arranged. |
| Style | The way something looks. |
| Behaviour | The way something acts or responds. |
| Developer | A person who builds web applications. |
| Code | The instructions written in a programming language. |
These words will help you understand the building blocks of web applications. Use them often so they become easy.
HTML gives structure. CSS gives style. JavaScript gives behaviour. These three work together.
Frameworks give you ready-made pieces. You do not build everything from scratch.
APIs let different programs share information. They are like messengers.
Without hosting, no one else can use your web application.
Start with HTML. Then CSS. Then JavaScript. Practice. Build. Grow.
These five concepts are the heart of Module 3. Read them again before moving on.
BUILDING A WEB PAGE
===================
[ Write HTML ]
|
V
[ Write CSS ]
|
V
[ Write JavaScript ]
|
V
[ Test in browser ]
|
V
[ Fix problems ]
|
V
[ Use framework / APIs ]
|
V
[ Host the page ]
|
V
[ Share with the world! ]
LEARNING WEB DEVELOPMENT
========================
[ Learn HTML ]
|
V
[ Build simple page ]
|
V
[ Learn CSS ]
|
V
[ Style the page ]
|
V
[ Learn JavaScript ]
|
V
[ Add interaction ]
|
V
[ Build projects ]
|
V
[ Learn frameworks ]
|
V
[ Build bigger projects ]
Building a web page and learning web development both follow clear steps. Following steps makes it easy.
HTML creates the headlines and articles. CSS styles them. JavaScript makes the menu work.
HTML shows the products. CSS makes them look attractive. JavaScript updates the cart. A payment API handles money.
HTML shows posts. CSS styles them. JavaScript handles likes and comments.
HTML shows the login form. CSS styles it. JavaScript checks the input. It is hosted on a server.
HTML shows the video player. CSS styles it. JavaScript controls play and pause.
HTML, CSS, and JavaScript appear in news sites, shops, social media, school portals, and video sites.
Banks like GTBank, Zenith, and Access use HTML, CSS, and JavaScript for their web applications. They also use APIs for payments.
These Nigerian online shops use all three building blocks. They use frameworks to build faster.
These are payment APIs. Nigerian businesses use them to receive money on their web applications.
Sites like Punch, Vanguard, and The Guardian use HTML, CSS, and JavaScript to show news beautifully.
These use HTML for forms, CSS for styling, and JavaScript for checking input. They are hosted on servers.
Nigeria has many examples of web applications built with HTML, CSS, JavaScript, frameworks, APIs, and hosting.
The message is HTML. The colours and drawings are CSS. A pop-up surprise is JavaScript.
The walls and furniture are HTML. The paint and curtains are CSS. A lamp that turns on and off is JavaScript.
The bricks are HTML. The colours are CSS. A door that opens is JavaScript.
The characters and background are HTML. The colours are CSS. The moves and reactions are JavaScript.
The bread and filling are HTML. The way you arrange it is CSS. Adding a sauce that changes the taste is JavaScript.
HTML, CSS, and JavaScript appear in birthday cards, room decoration, LEGO houses, video games, and sandwiches.
| What You See | HTML | CSS | JavaScript |
|---|---|---|---|
| A heading on a page | Creates it | Styles it | — |
| A coloured button | Creates it | Colours it | Makes it click |
| A photo gallery | Adds photos | Arranges them | Opens on click |
| A login form | Creates the boxes | Styles them | Checks input |
| A search bar | Creates it | Styles it | Shows results |
HTML, CSS, and JavaScript work together in everything you see on a web page.
Parents can help children understand and start learning HTML, CSS, and JavaScript.
HTML, CSS, and JavaScript are powerful, free, and used by almost every website.
HTML, CSS, and JavaScript are full of surprises. The more you learn, the more interesting they become.
These ten points are the heart of Module 3. Read them again before moving on.
Avoiding these mistakes will help you learn faster and build better web applications.
These ten practices will help you become a better web application builder.
HTML, CSS, JAVASCRIPT
=====================
[ HTML ] -> Structure (walls)
|
V
[ CSS ] -> Style (paint)
|
V
[ JavaScript ] -> Behaviour (doors, lights)
FRAMEWORK AS A TOOLKIT
======================
Without framework: [ Build from scratch ]
With framework: [ Use ready-made pieces ]
API AS A MESSENGER
==================
[ Your App ] --> [ API ] --> [ Other Service ]
^ |
| |
+------ Response ------------+
HOSTING
=======
[ Your web application files ]
|
V
[ Uploaded to hosting server ]
|
V
[ Server connected to internet ]
|
V
[ Users can now visit! ]
LEARNING PATH
=============
[ HTML ] -> [ CSS ] -> [ JavaScript ] -> [ Frameworks ]
Then: APIs, Hosting
PUTTING IT ALL TOGETHER
=======================
[ HTML ] -> Structure
|
V
[ CSS ] -> Style
|
V
[ JavaScript ] -> Behaviour
|
V
[ Framework ] -> Speed
|
V
[ API ] -> Connections
|
V
[ Hosting ] -> Availability
These diagrams help you see the building blocks clearly. Draw them yourself to remember them better.
| HTML | CSS | JavaScript |
|---|---|---|
| Structure | Style | Behaviour |
| Headings, paragraphs | Colours, fonts, layout | Clicks, checks, animations |
| Always needed | Always needed | Needed for interactive pages |
| Framework | API |
|---|---|
| Ready-made tools | Messenger between programs |
| Used to build faster | Used to connect services |
| Example: React | Example: Paystack |
| Type | Cost | Best For |
|---|---|---|
| Shared hosting | Low | Small sites |
| VPS hosting | Medium | Growing sites |
| Dedicated hosting | High | Big sites |
| Cloud hosting | Varies | Big companies |
Comparing ideas side by side helps you remember the differences clearly.
| Lesson | Main Idea |
|---|---|
| Lesson 1 | HTML gives structure to a web page. |
| Lesson 2 | HTML tags tell the browser what to show. |
| Lesson 3 | CSS gives style to a web page. |
| Lesson 4 | JavaScript gives behaviour to a web page. |
| Lesson 5 | HTML, CSS, and JavaScript work together. |
| Lesson 6 | A framework is a ready-made set of tools. |
| Lesson 7 | An API lets two programs talk. |
| Lesson 8 | Hosting makes an app available on the internet. |
| Lesson 9 | All parts work together to make a web application. |
| Lesson 10 | Learn HTML, then CSS, then JavaScript. |
| Lesson 11 | These blocks power every web application. |
| Lesson 12 | Anyone can become a web application builder. |
Congratulations! You have completed Module 3. Let us review what you have learned.
You began by learning that HTML gives structure to a web page. It uses tags to tell the browser what to show: headings, paragraphs, images, and links.
You then learned that CSS gives style to a web page. It controls colours, fonts, sizes, and layout. Without CSS, pages would look plain.
You discovered that JavaScript gives behaviour to a web page. It makes pages respond to clicks and typing. It brings pages to life.
You learned that HTML, CSS, and JavaScript work together to build a complete web application.
You explored frameworks — ready-made sets of tools that help developers build faster.
You learned about APIs — messengers that let different programs talk to each other.
You discovered hosting — the service of keeping a web application on an internet-connected server.
You learned the learning path: HTML first, then CSS, then JavaScript, then frameworks, APIs, and hosting.
Finally, you learned how to become a web application builder. Anyone can do it with practice.
MODULE 3 SUMMARY MAP
====================
[ HTML ] -> Structure
|
V
[ CSS ] -> Style
|
V
[ JavaScript ] -> Behaviour
|
V
[ Framework ] -> Speed
|
V
[ API ] -> Connections
|
V
[ Hosting ] -> Availability
|
V
[ You understand the building blocks! ]
Well done! You now understand the building blocks of a web application. You have completed the Understanding Web Applications course. Keep learning, keep practising, and one day you will build your own web application.
HTML is the language that gives a web page its structure. It tells the browser what to show: headings, paragraphs, images, and links.
CSS is the language that styles a web page. It controls colours, fonts, sizes, and layout.
JavaScript is the language that makes a web page interactive. It responds to clicks and typing.
For a simple page, HTML and CSS are enough. For an interactive page, you need JavaScript too.
A framework is a ready-made set of tools that helps developers build web applications faster.
An API is a way for two programs to talk to each other. It is like a messenger.
Hosting is the service of keeping a web application on an internet-connected server so everyone can use it.
Start with HTML. Then CSS. Then JavaScript. Then frameworks.
Yes, many people learn using just a phone and free internet resources.
Yes! Start with small projects. Practice. Learn a framework. Build bigger projects.
| Column A (Language) | Column B (Role) |
|---|---|
| 1. HTML | A. Style |
| 2. CSS | B. Behaviour |
| 3. JavaScript | C. Structure |
Answers: 1-C, 2-A, 3-B
| Column A (Term) | Column B (Meaning) |
|---|---|
| 1. Framework | A. Messenger between programs |
| 2. API | B. Keeping an app on a server |
| 3. Hosting | C. Ready-made tools for building |
| 4. Tag | D. A word in angle brackets |
Answers: 1-C, 2-A, 3-B, 4-D
Matching helps you connect words to meanings quickly.
A student builds a web page with only HTML. The page works, but it looks plain. There are no colours and no nice fonts.
Questions:
A developer builds a page with HTML and CSS. The page looks beautiful. But when users click a button, nothing happens.
Questions:
A developer builds a web application on her computer. It works perfectly. But when she sends the link to a friend, the friend cannot open it.
Questions:
These scenarios help you apply what you have learned to real situations.
Group size: 3–5 students
Time: 40 minutes
Materials: Paper, pencil, colour pencils
Instructions:
Goal: To practise planning a web page using the three building blocks.
Time: 20 minutes
Materials: Notebook, pencil
Instructions:
Goal: To see the building blocks in real websites.
Time: 1–2 hours
Materials: Paper, pencil, colour pencils
Instructions:
Goal: To practise designing a web page using the three building blocks.
Time: 1 week
Materials: Notebook, pencil
Instructions:
Goal: To learn from someone who builds web applications.
You have completed the entire Understanding Web Applications course. Well done! Here is what to do next.
YOUR COURSE JOURNEY
===================
[ Module 1: What is a Web Application? ]
|
V
[ Module 2: How Web Applications Work ]
|
V
[ Module 3: Building Blocks of a Web Application ]
|
V
[ You understand web applications! ] 🎉
Next step: Learn HTML, CSS, and JavaScript.
Congratulations on completing the course. Keep learning. Keep building. The web is waiting for your ideas.