Organising, Storing, and Delivering Digital Assets
| Course Title | Web File Management: Organising, Storing, and Delivering Digital Assets |
| Level | Beginner to Intermediate |
| Duration | 8 Weeks (16 Sessions × 90 minutes) |
| Delivery Mode | Hybrid (Lectures, Labs, Projects) |
| Prerequisites | Basic computer literacy; familiarity with a web browser and file explorer |
| Target Audience | Students, junior web developers, digital marketers, content managers, small business owners |
| Assessment | Weekly labs, mid-course project, final capstone project |
| Certification | Certificate of Completion upon satisfactory assessment |
This course introduces learners to the principles and practices of managing files in web environments. It covers local file organisation, cloud storage, web hosting file structures, content delivery networks, version control for assets, security considerations, and workflow automation. Learners will gain practical skills in organising, naming, storing, transferring, and delivering digital files for websites and web applications.
The course balances theory with hands-on practice. By the end of the course, learners will be able to design and implement an efficient web file management system for a real or simulated web project.
Upon completion of this course, learners will be able to:
| Week | Module | Focus | Assessment |
|---|---|---|---|
| 1 | Module 1 | Foundations of Web File Management | Lab 1 |
| 2 | Module 2 | File Naming and Folder Structure | Lab 2 |
| 3 | Module 3 | Local, Cloud, and Server Storage | Lab 3 |
| 4 | Module 4 | File Transfer Protocols and Tools | Lab 4 |
| 5 | Module 5 | Version Control for Web Assets | Lab 5 |
| 6 | Module 6 | Web File Security and Permissions | Lab 6 |
| 7 | Module 7 | Optimisation, CDNs, and Delivery | Lab 7 |
| 8 | Module 8 | Automation and Capstone Project | Capstone |
| Assessment | Weight | Description |
|---|---|---|
| Weekly Labs | 35% | Practical exercises completed each week |
| Mid-Course Project | 20% | Folder structure and naming convention design |
| Capstone Project | 35% | Complete web file management system |
| Participation | 10% | Engagement in discussions and peer review |
| Total | 100% |
| Title | Author | Focus |
|---|---|---|
| Learning Web Design | Jennifer Robbins | Web fundamentals including file organisation |
| Pro Git | Scott Chacon | Version control for web assets |
| Web Performance in Action | Jeremy Wagner | Optimisation and delivery |
| The Web Application Hacker's Handbook | Stuttard & Pinto | Security for web files |
| High Performance Web Sites | Steve Souders | File delivery and optimisation |
| Week | Session 1 | Session 2 |
|---|---|---|
| 1 | Lecture: Foundations | Lab 1: File Categorisation |
| 2 | Lecture: Naming and Structure | Lab 2: Folder Design |
| 3 | Lecture: Storage Types | Lab 3: Cloud Setup |
| 4 | Lecture: Transfer Protocols | Lab 4: FTP Transfer |
| 5 | Lecture: Version Control | Lab 5: Git and GitHub |
| 6 | Lecture: Security and Permissions | Lab 6: Permissions Setup |
| 7 | Lecture: Optimisation and CDNs | Lab 7: CDN Configuration |
| 8 | Lecture: Automation | Capstone Project Work |
This course employs a blend of instructional methods:
| Instructor | [To be assigned] |
| [To be assigned] | |
| Office Hours | [To be scheduled] |
| Communication | Email or course learning management system |
| Week | Dates | Topic | Deliverable |
|---|---|---|---|
| 1 | Week 1 | Foundations | Lab 1 |
| 2 | Week 2 | Naming and Structure | Lab 2 |
| 3 | Week 3 | Storage | Lab 3 |
| 4 | Week 4 | Transfer | Lab 4 |
| 5 | Week 5 | Version Control | Lab 5 + Mid-Course Project |
| 6 | Week 6 | Security | Lab 6 |
| 7 | Week 7 | Optimisation and CDN | Lab 7 |
| 8 | Week 8 | Automation and Capstone | Capstone Project |
| Criteria | Excellent (90–100) | Good (70–89) | Satisfactory (50–69) | Needs Improvement (<50) |
|---|---|---|---|---|
| Folder Structure | Logical, scalable, documented | Mostly logical, minor issues | Basic structure, some issues | Disorganised |
| Naming Conventions | Consistent, SEO-friendly | Mostly consistent | Some inconsistency | Inconsistent |
| Storage Strategy | Comprehensive, justified | Appropriate, minor gaps | Basic, some gaps | Inadequate |
| Transfer Method | Secure, verified | Secure, mostly verified | Basic, some verification | Insecure or unverified |
| Version Control | Full Git workflow | Git used, minor gaps | Basic Git usage | No version control |
| Security | Comprehensive measures | Good measures | Basic measures | Inadequate |
| Optimisation | Fully optimised | Mostly optimised | Basic optimisation | Not optimised |
| Automation | Effective scripts | Some automation | Minimal automation | None |
| Documentation | Clear, thorough | Clear, adequate | Basic | Missing or unclear |
| Presentation | Professional, confident | Clear, organised | Adequate | Poor |
| Term | Definition |
|---|---|
| FTP | File Transfer Protocol — standard protocol for transferring files over a network |
| SFTP | Secure File Transfer Protocol — encrypted version of FTP |
| CDN | Content Delivery Network — distributed servers for fast content delivery |
| Git | Distributed version control system for tracking file changes |
| Repository | A storage location for files and their version history |
| Permissions | Rules determining who can read, write, or execute files |
| Minification | Removing unnecessary characters from code to reduce file size |
| Caching | Storing copies of files for faster retrieval |
| Root Directory | The top-level folder of a website |
| .htaccess | Configuration file for Apache web servers |
| Rsync | Utility for efficient file synchronisation |
| Cron Job | Scheduled task on Unix-like systems |
This course provides a comprehensive foundation in web file management. By combining theoretical understanding with practical application, learners will develop the skills necessary to organise, store, transfer, secure, optimise, and automate files in web environments. The capstone project ensures that learners can apply these skills holistically to real-world scenarios.
Upon successful completion, learners will be prepared to manage web files professionally and to pursue further study in web development, DevOps, or digital asset management.
Welcome, young explorer! Have you ever wondered how websites work? When you open a website like Google, YouTube, or your school's portal, you see text, pictures, colours, and buttons. But behind everything you see, there are files.
Every website is made of files. Some files hold words. Some hold pictures. Some hold colours and designs. Some hold instructions that make buttons work. Without these files, a website would not exist.
Web file management is the skill of organising, storing, and handling these files. It is like keeping your room tidy, but for websites.
Imagine your school bag. If everything is thrown inside — books, pens, food, and dirty socks — you cannot find anything. But if you organise your bag with separate pockets for books, pens, and snacks, you can find what you need quickly. Web file management is the same idea. It keeps website files organised so they are easy to find, use, and update.
In this module, you will learn what web file management is, what kinds of files websites use, how files travel from a computer to your screen, and why all of this matters.
You do not need to know anything about websites before starting. Just bring your curiosity. Let us begin!
By the end of this module, you will be able to:
Tunde is a thirteen‑year‑old boy who lives in Ibadan, Nigeria. He loves computers. He is the head of the computer club at his school.
One Monday morning, Tunde's teacher, Mrs. Adebayo, called him to her office.
"Tunde," she said, "the school website is broken. When parents open it, they see a blank white page. Can you help?"
Tunde felt proud. He had helped build the school website last term. He opened his laptop and logged into the website's control panel.
He looked at the folders. His heart sank.
The main folder had files scattered everywhere. Pictures were mixed with text files. Some files had names like "final final final.docx" and "newpic.jpg". Some files had no names at all. Several folders had the same files copied inside them.
Tunde could not figure out which file was the real homepage. He did not know which picture was the current school logo. He did not know which folder held the latest version of the website.
He called his older cousin, Ngozi, who worked as a web developer in Lagos.
"Ngozi," said Tunde, "I think I broke the school website. Nothing is in the right place."
Ngozi laughed gently. "You did not break it, Tunde. It was never organised. That is the problem."
"What do you mean?" asked Tunde.
"Websites need something called file management," said Ngozi. "It means keeping every file in the right folder with a clear name. When files are messy, the website breaks. When files are tidy, the website works."
Ngozi showed Tunde how to create folders with clear names. She showed him how to name files properly. She showed him how to keep old versions in a separate folder.
By the evening, the school website was working again. It loaded faster. It looked cleaner.
Mrs. Adebayo was very happy. "Tunde," she said, "you have learned a very important skill. File management is the backbone of every website."
Tunde smiled. He had learned his lesson. From that day, he always organised his files carefully.
Now it is your turn. Are you ready to learn web file management?
Messy Files Organised Files +----------------+ +----------------+ | Random names | | Clear names | | Mixed folders | -----> | Logical folders| | Broken website | | Working website| | Confusion | | Confidence | +----------------+ +----------------+
Definition: A file is a collection of information stored on a computer with a name. Files hold text, pictures, sounds, videos, or instructions.
Why it is important: Everything on a computer is stored in files. Without files, you cannot save your homework, your photos, or a website.
Simple explanation: Imagine a file is like a notebook. Each notebook has a cover with a name, like "Maths Notes" or "My Diary." Inside, there is information. A computer file is the same: a name on the outside, information on the inside.
Real-life example: A photograph you take with your phone is a file. A document you write on a computer is a file. A song you download is a file.
School example: Your teacher gives you a file called "Homework.docx." You open it, complete the work, and save it.
Home example: Your family keeps a file called "Family Budget.xlsx" on the laptop.
Nigerian example: A trader in Onitsha keeps a file called "SalesRecord.xlsx" to track daily sales.
Illustration:
A File: +-------------------+ | MyHomework.docx | <-- name +-------------------+ | | | Inside: text, | <-- contents | numbers, images | | | +-------------------+
Mini summary: A file is information stored on a computer with a name. Everything on a computer is a file.
Definition: A folder is a container that holds files and other folders. Folders help you organise your files into groups.
Why it is important: Without folders, all your files would be in one giant pile. You would never find anything.
Simple explanation: Imagine a folder is like a school bag pocket. You have one pocket for books, one for pens, one for snacks. A computer folder works the same way. You put related files together in one folder.
Real-life example: A folder called "Holiday Photos" holds all the pictures from your trip.
School example: A folder called "Class 8" holds all your homework for the term.
Home example: A folder called "Family Documents" holds birth certificates, passports, and important papers.
Nigerian example: A trader keeps a folder called "2025 Sales" with monthly files inside.
Illustration:
Folder Structure: +-------------------+ | MySchoolWork | <-- folder +-------------------+ | | | +-- Maths.docx | <-- file | +-- English.docx| <-- file | +-- Science.pdf | <-- file | | +-------------------+
Mini summary: A folder is a container that holds files. Folders help you organise your work.
Definition: Web file management is the skill of organising, naming, storing, and delivering files used on a website.
Why it is important: Without good file management, a website will break. Files will be lost. Pages will not load. Visitors will leave.
Simple explanation: Imagine you are preparing a meal. You need rice, beans, oil, salt, and pepper. If everything is thrown into one pot at once, the meal will be a mess. But if you prepare each ingredient properly — wash the rice, soak the beans, measure the oil — the meal turns out well. Web file management is the same. Each file must be prepared and placed correctly.
Real-life example: A news website has folders for articles, photos, and videos. Each folder is organised by date. When a new article is published, it goes into the right folder.
School example: The school website has folders for admission, events, and contact. The webmaster keeps them neat.
Home example: A family website has folders for photos, videos, and family history.
Nigerian example: A business website in Lagos has folders for products, prices, and customer reviews. Everything is organised for easy updates.
Illustration:
Web File Management: +-------------------+ | Website Root | +-------------------+ | | | +-- index.html | <-- homepage | +-- css/ | <-- styles folder | +-- images/ | <-- pictures folder | +-- js/ | <-- scripts folder | +-- pages/ | <-- other pages | | +-------------------+
Mini summary: Web file management is organising and delivering files for a website.
Definition: Web file management matters because it keeps websites working, fast, and easy to update.
Why it is important: A tidy website loads faster. Visitors stay longer. Business grows.
Simple explanation: Imagine a library. If books are organised by title and author, you find what you want quickly. If books are thrown on the floor, you waste time. A website with good file management is like a well‑organised library.
Real-life example: Amazon's website loads quickly because its files are organised on servers around the world.
School example: The school website loads quickly for parents checking admission results.
Home example: A family blog loads quickly for relatives abroad.
Nigerian example: A Jumia product page loads quickly for a shopper in Abuja.
Illustration:
Why It Matters: +---------------------------+ | 1. Website works | | 2. Pages load fast | | 3. Easy to update | | 4. Visitors stay longer | | 5. Business grows | +---------------------------+
| Without File Management | With File Management |
|---|---|
| Website breaks often | Website runs smoothly |
| Pages load slowly | Pages load quickly |
| Hard to update | Easy to update |
| Visitors leave | Visitors return |
Mini summary: Good file management keeps websites fast, working, and easy to update.
Definition: Websites use many types of files. Each type does a different job.
Why it is important: Knowing file types helps you put the right file in the right place.
Simple explanation: Imagine a kitchen. You have pots, plates, spoons, and cups. Each has a job. Web files are the same. Each type has a job on a website.
Real-life example: When you visit a website, your browser loads HTML, CSS, JavaScript, and images.
School example: The school website has files for text (HTML), design (CSS), behaviour (JavaScript), and pictures (JPG).
Home example: A family photo blog has image files and text files.
Nigerian example: A business website has files for products (HTML), prices (data), and logo (PNG).
Illustration:
Web File Types: +----------------+----------------+ | Extension | Purpose | +----------------+----------------+ | .html | Page content | | .css | Page style | | .js | Page actions | | .jpg / .png | Images | | .mp4 | Video | | .mp3 | Audio | | .pdf | Documents | | .json / .xml | Data | +----------------+----------------+
| File Type | Extension | What It Does |
|---|---|---|
| HTML | .html | Holds the words and structure of a page |
| CSS | .css | Controls colours, fonts, and layout |
| JavaScript | .js | Makes buttons and menus work |
| Images | .jpg, .png, .gif | Show pictures on the page |
| Video | .mp4, .webm | Plays moving pictures |
| Audio | .mp3, .wav | Plays sound |
| Documents | .pdf, .docx | Holds downloadable documents |
| Data | .json, .xml | Stores information for the website |
Mini summary: Websites use many types of files. Each file type has a different job.
Definition: The client‑server model is how computers talk to each other on the internet. The client asks. The server answers.
Why it is important: Every time you open a website, a client‑server conversation happens.
Simple explanation: Imagine you walk into a restaurant. You (the client) ask for jollof rice. The kitchen (the server) prepares it and brings it to you. The internet works the same way. Your browser asks for a web page. The server sends the files.
Real-life example: When you type "google.com" in your browser, your browser asks Google's server for the homepage. The server sends the files back.
School example: When a parent opens the school website, their phone (client) asks the school server for the admission page.
Home example: When you watch a YouTube video, your phone (client) asks YouTube's server for the video file.
Nigerian example: When a shopper opens Jumia, their phone (client) asks Jumia's server for the product page.
Illustration:
Client-Server Model:
+-----------+ Request +-----------+
| Client | -----------------> | Server |
| (Browser) | | (Website) |
+-----------+ +-----------+
^ |
| Response |
+-----------------------------------+
(Files sent back)
Mini summary: The client asks. The server answers. This is how websites work.
Definition: When you open a website, a series of steps happen in less than a second.
Why it is important: Understanding these steps helps you see why file management matters.
Simple explanation: Imagine ordering a pizza. You call the shop. They find your address. They cook the pizza. They send a delivery rider. You receive the pizza. Opening a website is similar.
Real-life example: You type "www.example.com" and press Enter.
School example: A parent types the school website address and waits for it to load.
Home example: You click a link in a WhatsApp message and the website opens.
Nigerian example: A shopper searches for "jollof rice recipe" and clicks a result.
Illustration:
Opening a Website:
Step 1: You type the address
|
Step 2: Browser finds the server
|
Step 3: Browser asks for files
|
Step 4: Server sends files back
|
Step 5: Browser builds the page
|
Step 6: You see the website
Mini summary: Opening a website is a quick conversation between your browser and a server.
Definition: The lifecycle of a web file is the journey of a file from creation to retirement.
Why it is important: Every file goes through stages. Knowing the stages helps you manage files well.
Simple explanation: Think of a new student joining your class. They arrive, settle in, study, graduate, and leave. A web file does the same. It is created, stored, used, updated, and eventually removed.
Real-life example: A photo of a school event is taken, uploaded, displayed on the website, and later archived.
School example: A new admission form is created, uploaded, used by parents, and eventually replaced.
Home example: A family holiday photo is uploaded to a blog and later moved to an archive folder.
Nigerian example: A product photo on a Jumia page is uploaded when the product launches and removed when the product is discontinued.
Illustration:
Web File Lifecycle:
Create
|
V
Store
|
V
Transfer
|
V
Deliver
|
V
Archive
|
V
Remove
| Stage | What Happens |
|---|---|
| Create | The file is made (photo, text, code) |
| Store | The file is saved on a computer or cloud |
| Transfer | The file is moved to a web server |
| Deliver | The file is sent to visitors' browsers |
| Archive | The file is kept but not used |
| Remove | The file is deleted when no longer needed |
Mini summary: Every web file goes through stages: create, store, transfer, deliver, archive, remove.
Definition: Poor file management means messy, disorganised, or badly named files. It causes many problems.
Why it is important: Knowing the problems helps you avoid them.
Simple explanation: Imagine you cannot find your school uniform because your room is messy. Poor file management causes the same problem for websites.
Real-life example: A website shows a broken image icon because the image file was moved to a different folder.
School example: Parents cannot download the admission form because the link points to the wrong file.
Home example: A family blog shows old photos because the new photos were saved with wrong names.
Nigerian example: A customer cannot see a product photo on an online shop because the file was not uploaded correctly.
Illustration:
Common Problems: +---------------------------+ | 1. Broken links | | 2. Missing images | | 3. Slow loading | | 4. Duplicate files | | 5. Lost files | | 6. Confusing updates | +---------------------------+
| Problem | Cause | Effect |
|---|---|---|
| Broken links | File moved or renamed | Visitors see error pages |
| Missing images | Image in wrong folder | Blank spaces on page |
| Slow loading | Files too large | Visitors leave |
| Duplicates | Copies saved in multiple places | Confusion, wasted space |
| Lost files | Files saved in wrong folder | Time wasted searching |
Mini summary: Poor file management causes broken links, missing images, slow loading, and lost files.
Definition: Tools for web file management are software and services that help you organise, store, transfer, and deliver web files.
Why it is important: The right tools make file management easy and fast.
Simple explanation: Imagine you are cleaning your room. You use a broom, a dustpan, and a bin. Each tool has a job. Web file management tools are similar. Each tool helps with a specific task.
Real-life example: A web developer uses FileZilla to upload files and GitHub to track changes.
School example: The school webmaster uses cPanel to manage the school website.
Home example: A family uses Google Drive to store photos for their blog.
Nigerian example: A small business uses Cloudflare to speed up its website for customers in Lagos and Abuja.
Illustration:
Common Tools: +---------------------------+ | 1. File Explorer | | 2. FileZilla | | 3. GitHub | | 4. Google Drive | | 5. cPanel | | 6. Cloudflare | +---------------------------+
| Tool | Purpose |
|---|---|
| File Explorer | Organise files on your computer |
| FileZilla | Transfer files to a server |
| GitHub | Track changes and share files |
| Google Drive | Store files in the cloud |
| cPanel | Manage website hosting files |
| Cloudflare | Deliver files faster worldwide |
Mini summary: Many tools help with web file management. Each tool has a specific job.
Definition: Naming files properly means giving files clear, simple, and consistent names.
Why it is important: Clear names make files easy to find. Consistent names prevent confusion.
Simple explanation: Imagine you have three friends named "A," "A1," and "Aaa." You would be confused. But if they were named "Ada," "Chidi," and "Ngozi," you would remember easily. File names work the same way.
Real-life example: A photo of the school sports day is named "sports_day_2025.jpg" instead of "IMG_3857.jpg."
School example: A teacher names the class list "class8_students_2025.xlsx" instead of "list final final.xlsx."
Home example: A family names holiday photos "holiday_abuja_2025_01.jpg."
Nigerian example: A trader names product photos "ankara_blue_2025.jpg" instead of "photo1.jpg."
Illustration:
Good vs Bad File Names: +---------------------------+ | Bad: | | - IMG_3857.jpg | | - list final final.docx | | - photo1.jpg | +---------------------------+ | Good: | | - sports_day_2025.jpg | | - class8_students.xlsx | | - ankara_blue_2025.jpg | +---------------------------+
| Rule | Example |
|---|---|
| Use lowercase letters | school_logo.png |
| Use underscores, not spaces | sports_day.jpg |
| Include dates where useful | report_2025_03.pdf |
| Be descriptive | lagos_traffic_photo.jpg |
| Avoid special characters | file_name.txt (not file#name.txt) |
Mini summary: Good file names are clear, simple, and consistent.
Definition: A folder structure is the way folders are arranged inside each other.
Why it is important: A clear folder structure makes websites easy to build and maintain.
Simple explanation: Imagine a school with classrooms. Each classroom has a number. The library is in one building. The sports field is in another. A website's folder structure is similar: each type of file lives in its own folder.
Real-life example: A website has a folder for images, a folder for styles, and a folder for scripts.
School example: The school website has folders for admission, events, and staff.
Home example: A family blog has folders for photos, videos, and stories.
Nigerian example: A business website has folders for products, prices, and customer reviews.
Illustration:
Website Folder Structure: +---------------------------+ | website/ | | +-- index.html | | +-- about.html | | +-- css/ | | | +-- style.css | | +-- js/ | | | +-- script.js | | +-- images/ | | | +-- logo.png | | | +-- banner.jpg | | +-- pages/ | | +-- contact.html | +---------------------------+
Mini summary: A folder structure keeps files in the right place. Each type of file has its own folder.
Definition: A web server is a powerful computer that stores website files and sends them to visitors.
Why it is important: Without a web server, a website cannot be seen by anyone.
Simple explanation: Imagine a warehouse. It stores goods. When a customer orders, the warehouse sends the goods. A web server is like a warehouse for website files.
Real-life example: Google has many servers around the world. Each one stores copies of Google's website.
School example: The school's website is stored on a web server that parents can access.
Home example: A family blog is stored on a web server so relatives abroad can read it.
Nigerian example: A small business in Port Harcourt hosts its website on a server in Lagos or Europe.
Illustration:
Web Server:
+---------------------------+
| Web Server |
+---------------------------+
| - Stores website files |
| - Sends files to users |
| - Works 24 hours a day |
+---------------------------+
|
V
+---------------------------+
| Visitors' browsers |
+---------------------------+
Mini summary: A web server stores website files and sends them to visitors.
Definition: Files can be stored in three main places: locally on your computer, in the cloud, or on a web server.
Why it is important: Each storage type has strengths and weaknesses.
Simple explanation: Imagine three ways to keep your books. You can keep them on your desk (local). You can keep them in a friend's house (cloud). You can keep them in a library (server). Each place has a purpose.
Real-life example: A developer writes code on their laptop (local), saves backups to Google Drive (cloud), and uploads the final site to a web server.
School example: A teacher writes lesson notes locally, saves them to OneDrive, and uploads worksheets to the school server.
Home example: A family keeps photos locally, backs them up to Google Photos, and shares some on a blog.
Nigerian example: A trader keeps records locally, backs them up to Google Drive, and uploads product photos to the website server.
Illustration:
Storage Types: +--------------+--------------+--------------+ | Local | Cloud | Server | +--------------+--------------+--------------+ | On your PC | On the web | On a host | | Fast access | Access any | Accessed by | | Not shared | device | visitors | | Risk of loss | Backed up | Public | +--------------+--------------+--------------+
| Type | Where | Best For |
|---|---|---|
| Local | Your computer | Editing files |
| Cloud | Online service | Backups, sharing |
| Server | Web host | Public website files |
Mini summary: Files can live locally, in the cloud, or on a server. Each has a purpose.
Definition: Putting it all together means using everything you have learned to manage web files properly.
Why it is important: Real projects need all these skills working together.
Simple explanation: Imagine you are building a house. You need bricks, cement, wood, and nails. Each material has a role. Web file management is the same. File types, folder structures, naming rules, and tools all work together.
Real-life example: A web developer creates a new page: writes the HTML, saves it with a good name, places it in the right folder, uploads it to the server, and checks that it loads.
School example: A student updates the school website: adds a new photo, names it correctly, puts it in the images folder, and uploads it.
Home example: A family updates their blog: adds a story, adds photos, names everything clearly, and saves to OneDrive.
Nigerian example: A trader adds a new product to an online shop: uploads the photo, adds the description, names the file properly, and checks that customers can see it.
Illustration:
Complete Workflow:
Create File
|
V
Name File Properly
|
V
Save in Correct Folder
|
V
Upload to Server
|
V
Check Website
|
V
Update as Needed
Mini summary: Real web projects use all file management skills together.
| Word | Simple Definition |
|---|---|
| File | Information stored on a computer with a name. |
| Folder | A container that holds files. |
| Web File Management | Organising, naming, storing, and delivering files for a website. |
| Client | The computer or phone that asks for a web page. |
| Server | The computer that stores and sends web files. |
| HTML | The file type that holds the words and structure of a web page. |
| CSS | The file type that controls colours, fonts, and layout. |
| JavaScript | The file type that makes buttons and menus work. |
| Extension | The letters after the dot in a file name (e.g., .jpg, .html). |
| Folder Structure | The way folders are arranged inside each other. |
| Lifecycle | The journey of a file from creation to removal. |
| Upload | To send a file from your computer to a server. |
| Download | To receive a file from a server to your computer. |
| Backup | An extra copy of a file kept in case the original is lost. |
| Cloud Storage | Storing files on the internet instead of on your computer. |
Text, images, videos, and code are all stored as files. Managing them well is essential.
Good folder structures and clear file names keep websites working smoothly.
Every website visit is a conversation between a client and a server.
Files are created, stored, transferred, delivered, archived, and removed.
Good file names are clear, simple, and consistent.
Files can live locally, in the cloud, or on a server. Choose the right place for the right job.
A school in Lagos has a website with folders for admission, events, and staff. Each folder holds the right files. Parents can find forms quickly.
A shop in Abuja has folders for product photos, prices, and customer reviews. When a new product arrives, the shop adds the photo to the correct folder.
A news website in Port Harcourt organises articles by date. Each day's articles go into a folder named with the date.
A family blog stores photos in year folders. Each photo has a clear name like "birthday_2025_ada.jpg."
A trader at Balogun Market has an online shop. She keeps product photos in a folder called "products" and price lists in a folder called "prices." Everything is easy to find.
A student in Ibadan keeps study notes in folders for each subject. Each file is named clearly, like "chemistry_notes_2025.pdf."
A youth corper in Enugu runs a community project website. He organises photos, reports, and forms into separate folders.
A small business owner hosts her website on a Nigerian server. She uploads new product photos every week using FileZilla.
You keep photos of your football cards in folders by team. Each file is named like "messi_barcelona.jpg."
You save screenshots of your game wins in a folder called "game_wins." Each screenshot has a clear name.
You organise your school projects into folders by subject. Each project has its own folder with clear file names.
You save party photos in a folder called "birthday_2025" and name each photo clearly.
| Situation | Web File Management Skill |
|---|---|
| Saving homework | Clear file names and folders |
| Sharing photos | Cloud storage and folders |
| Updating a blog | Uploading files to a server |
| Backing up records | Cloud backups |
| Finding old documents | Organised folder structure |
| Mistake | Why It Is a Problem | How to Avoid It |
|---|---|---|
| Using spaces in file names | Servers cannot read them properly | Use underscores instead |
| Using vague names | Files are hard to find | Use clear, descriptive names |
| Mixing file types in one folder | Confusion and clutter | Keep separate folders for each type |
| Not backing up files | Files can be lost forever | Back up to the cloud regularly |
| Saving multiple "final" versions | Confusion about which is correct | Use dates or version numbers |
| Forgetting to upload files | Website shows old content | Check the server after uploads |
+-----------+ Request +-----------+
| Client | -----------------> | Server |
| (Browser) | | (Website) |
+-----------+ +-----------+
^ |
| Response |
+-----------------------------------+
Create
|
V
Store
|
V
Transfer
|
V
Deliver
|
V
Archive
|
V
Remove
website/
+-- index.html
+-- about.html
+-- css/
| +-- style.css
+-- js/
| +-- script.js
+-- images/
+-- logo.png
+-- banner.jpg
+----------------+----------------+ | Extension | Purpose | +----------------+----------------+ | .html | Page content | | .css | Page style | | .js | Page actions | | .jpg / .png | Images | | .mp4 | Video | | .mp3 | Audio | | .pdf | Documents | | .json / .xml | Data | +----------------+----------------+
Step 1: Understand files
|
Step 2: Understand folders
|
Step 3: Learn what web file management is
|
Step 4: Learn why it matters
|
Step 5: Learn file types
|
Step 6: Learn client-server
|
Step 7: Learn file lifecycle
|
Step 8: Learn tools
|
Step 9: Learn naming rules
|
Step 10: Learn folder structure
|
Step 11: Learn storage types
|
Step 12: Put it all together
| Feature | Local | Cloud | Server |
|---|---|---|---|
| Where it lives | Your computer | Online | Web host |
| Access speed | Fastest | Depends on internet | Depends on internet |
| Shared with others | No | Yes | Yes |
| Risk of loss | High | Low | Low |
| Best use | Editing | Backups | Public website files |
A file is information stored on a computer with a name.
A folder is a container that holds files.
Web file management is organising and delivering files for a website.
Good file management keeps websites fast, working, and easy to update.
Websites use many types of files. Each file type has a different job.
The client asks. The server answers. This is how websites work.
Opening a website is a quick conversation between your browser and a server.
Every web file goes through stages: create, store, transfer, deliver, archive, remove.
Poor file management causes broken links, missing images, slow loading, and lost files.
Many tools help with web file management. Each tool has a specific job.
Good file names are clear, simple, and consistent.
A folder structure keeps files in the right place. Each type of file has its own folder.
A web server stores website files and sends them to visitors.
Files can live locally, in the cloud, or on a server. Each has a purpose.
Real web projects use all file management skills together.
In this module, you learned what web file management is. You learned that a file is information stored on a computer with a name. A folder is a container that holds files.
You learned that web file management is the skill of organising, naming, storing, and delivering files used on a website. You learned why it matters: good file management keeps websites fast, working, and easy to update.
You learned about the many types of files used on websites. HTML holds the words and structure. CSS controls colours and layout. JavaScript makes buttons work. Images show pictures. Other files hold video, audio, documents, and data.
You learned about the client‑server model. The client asks. The server answers. This is how websites work. You learned what happens when you open a website and how a web file moves through its lifecycle.
You learned about common problems caused by poor file management. You learned about tools that help manage files.
You learned how to name files properly and how to organise them in folders. You learned about local, cloud, and server storage.
Finally, you learned how to put it all together. Real web projects use all these skills together.
Match the word on the left with the correct definition on the right.
| Word | Definition |
|---|---|
| 1. File | A. The computer that stores and sends web files |
| 2. Folder | B. The file type that makes buttons work |
| 3. Client | C. Information stored on a computer with a name |
| 4. Server | D. The computer that asks for a web page |
| 5. JavaScript | E. A container that holds files |
| 6. HTML | F. The file type that holds words and structure |
Answers: 1‑C, 2‑E, 3‑D, 4‑A, 5‑B, 6‑F
Your school website shows broken images. What could be the problem? How would you fix it?
Your family blog loads slowly. What could be causing this? What could you do?
An online shop shows old prices. What could be the problem? How would you fix it?
You want to build a personal portfolio website. What folder structure would you use?
A news website needs to organise articles by date. What folder structure would you suggest?
Goal: Work in groups of 3‑4 to design a folder structure for a website.
Steps:
Discussion: Which group's structure was clearest? Which group's names were best? Why?
Goal: Practice creating a folder structure on your own.
Steps:
Goal: Plan the files and folders for a personal website.
Steps:
Deliverable: A written plan with a folder structure, page list, and clear file names.
Instructions: Complete the following tasks on your computer. Write down what you did.
Submission: Share your folder structure screenshot and a short report of what you learned.
In the next module, you will learn how to name files properly and design folder structures for websites. You will learn the rules for file names, how to design a clear folder hierarchy, and why naming matters for search engines and accessibility.
Before the next module, please make sure you can:
If you can do these things, you are ready for Module Two: File Naming and Folder Structure.
See you in the next module, young explorer! Keep practising and stay curious.
End of Module One
Welcome back, young explorer! In Module One, you learned what web file management is. You learned that a file is information stored on a computer with a name. You learned that a folder is a container that holds files. You learned that websites use many types of files, and that the client asks while the server answers.
Now it is time to learn two very important skills: naming files properly and organising them into folders.
These two skills are the foundation of good web file management. If you name your files well and put them in the right folders, your website will work smoothly. If you name them badly and scatter them everywhere, your website will break.
Imagine you have a huge library with thousands of books. If the books have no titles on the cover and are thrown randomly on the floor, you will never find the one you want. But if every book has a clear title and sits on the right shelf, you can find any book in seconds. File naming and folder structure are exactly like that for websites.
By the end of this module, you will be able to name any file properly and design a clean folder structure for any website project.
Let us begin. Your files are waiting to be organised!
By the end of this module, you will be able to:
Ada is a thirteen‑year‑old girl who lives in Abuja, Nigeria. She loves photography. She takes photos of her family, her school events, and the beautiful streets of her city.
One day, Ada decided to build a photography website. She wanted to share her best photos with the world. She was very excited.
She opened her computer and started uploading photos. But she was in a hurry. She did not name her files carefully. She did not organise them into folders.
Her website folder looked like this:
Ada's Messy Folder: +-----------------------------+ | IMG_001.jpg | | IMG_002.jpg | | photo.jpg | | final.jpg | | final final.jpg | | newpic.jpg | | asdfgh.jpg | | DSC_9843.JPG | | my photo!.jpg | | school event photo.jpg | +-----------------------------+
When Ada opened her website, things went wrong. Some photos did not show. Some links were broken. The website looked messy.
Ada felt sad. She called her older brother, Chidi, who worked as a web designer.
"Chidi," said Ada, "my website is a disaster. The photos are not showing."
Chidi looked at her folder and laughed gently. "Ada," he said, "your problem is not the photos. Your problem is the names and the folders."
"What do you mean?" asked Ada.
"Look at these file names," said Chidi. "IMG_001.jpg tells us nothing. final final.jpg has spaces and repeated words. my photo!.jpg has a space and an exclamation mark. This is a mess."
Ada sighed. "I did not know names mattered."
"They matter a lot," said Chidi. "Good names make files easy to find. Bad names cause confusion. And folders? You need folders."
Chidi showed Ada how to rename her files and organise them into folders:
Ada's Organised Folder: +-----------------------------+ | index.html | | images/ | | family/ | | family_portrait_2025.jpg | family_holiday_abuja.jpg | school/ | | school_sports_day.jpg | | school_graduation.jpg | | city/ | | abuja_street_01.jpg | | abuja_sunset.jpg | +-----------------------------+
When Ada reopened her website, everything worked perfectly. The photos showed. The pages loaded fast. The website looked professional.
"I cannot believe the difference!" said Ada.
"Names and folders," said Chidi. "Never underestimate them."
Ada learned her lesson. From that day, she always named her files carefully and organised them into folders.
Now it is your turn. Are you ready to learn file naming and folder structure?
Definition: File naming is the practice of giving files clear, consistent, and useful names.
Why it is important: Good names help you find files quickly. They also help servers, browsers, and search engines understand your files.
Simple explanation: Imagine you have two bottles in your kitchen. One is labelled "Salt." The other is labelled "White stuff." Which one would you trust? A clear name tells you exactly what is inside. File names work the same way.
Real-life example: A photographer names photos like "wedding_lagos_2025_01.jpg" instead of "IMG_9234.jpg."
School example: A student names an assignment "maths_homework_chapter4.docx" instead of "hw.docx."
Home example: A family names budget files "family_budget_march_2025.xlsx" instead of "budget new.xlsx."
Nigerian example: A trader names product photos "ankara_blue_dress_01.jpg" instead of "photo3.jpg."
Illustration:
Bad Name: Good Name: +----------------+ +----------------------+ | hw.docx | | maths_hw_ch4.docx | +----------------+ +----------------------+ | Confusing | | Clear and useful | +----------------+ +----------------------+
Mini summary: File names matter. They help you, servers, browsers, and search engines understand what is inside.
Definition: There are simple rules for naming files. Following them keeps your files clean and working.
Why it is important: Some names break websites. Others slow them down. Following the rules prevents problems.
Simple explanation: Imagine writing a letter. If you use neat handwriting, people can read it. If you scribble, nobody understands. Naming files neatly is the same.
Real-life example: A web developer names files "about_us.html" instead of "About Us!.html."
School example: A teacher names the class list "class8_students_2025.xlsx."
Home example: A family names their holiday photo "holiday_abuja_2025_01.jpg."
Nigerian example: A business names its logo "company_logo_lagos.png" instead of "LOGO FINAL!!.png."
Illustration:
Rules for Naming Files: +-------------------------------+ | 1. Use lowercase letters | | 2. Use underscores (_) | | 3. Avoid spaces | | 4. Avoid special characters | | 5. Be descriptive | | 6. Keep names short | | 7. Include dates if useful | +-------------------------------+
| Rule | Bad Example | Good Example |
|---|---|---|
| Use lowercase | Logo.PNG | logo.png |
| Use underscores | about us.html | about_us.html |
| Avoid spaces | my photo.jpg | my_photo.jpg |
| Avoid special characters | photo!.jpg | photo.jpg |
| Be descriptive | img_001.jpg | abuja_sunset.jpg |
| Keep names short | this_is_a_very_long_name_for_a_simple_file.jpg | simple_file.jpg |
| Include dates if useful | report.pdf | report_2025_03.pdf |
Mini summary: Follow simple rules for naming files: lowercase, underscores, no spaces, no special characters, be descriptive, keep it short.
Definition: A file extension is the letters at the end of a file name after the dot. It tells the computer what type of file it is.
Why it is important: The extension tells the computer how to open the file. Wrong extensions cause errors.
Simple explanation: Imagine labels on jars in a kitchen. "Sugar," "Salt," "Pepper." The label tells you what is inside. A file extension is the same. ".jpg" means image. ".html" means web page.
Real-life example: A photo has ".jpg" at the end. A web page has ".html" at the end.
School example: A homework file has ".docx" at the end.
Home example: A family budget has ".xlsx" at the end.
Nigerian example: A product photo has ".jpg" at the end.
Illustration:
File Name with Extension:
+-------------------+
| sunset.jpg |
+-------------------+
|
V
.jpg is the extension
|
V
Tells the computer: "This is an image."
| Extension | Meaning | Example |
|---|---|---|
| .html | Web page | index.html |
| .css | Style sheet | style.css |
| .js | JavaScript file | script.js |
| .jpg / .png | Image | logo.png |
| .mp4 | Video | intro.mp4 |
| .mp3 | Audio | song.mp3 |
| Document | report.pdf | |
| .json | Data file | data.json |
Mini summary: The extension tells the computer what type of file it is. Always use the correct extension.
Definition: Web pages are HTML files with clear names that describe the page content.
Why it is important: Web page names become part of the website's URL. Good names help visitors and search engines understand the page.
Simple explanation: Imagine a book with chapter titles. If the titles are clear, you know what each chapter is about. Web page names work the same way.
Real-life example: A website has pages called "about.html," "contact.html," and "services.html."
School example: The school website has pages called "admission.html," "events.html," and "staff.html."
Home example: A family blog has pages called "home.html," "photos.html," and "stories.html."
Nigerian example: A business website has pages called "products.html," "prices.html," and "contact.html."
Illustration:
Web Page Names: +-------------------+ | index.html | <-- homepage | about.html | <-- about page | contact.html | <-- contact page | products.html | <-- products page +-------------------+
| Page | Good Name | Bad Name |
|---|---|---|
| Homepage | index.html | homepage final.html |
| About Us | about.html | About Us!.html |
| Contact | contact.html | contact page new.html |
| Products | products.html | prod list v3.html |
Mini summary: Web page names should be short, clear, and describe the page content.
Definition: Image names are the file names given to pictures used on a website.
Why it is important: Image names help search engines find your images. They also help you identify images quickly.
Simple explanation: Imagine you have a box of photos with no labels. You cannot tell what each photo shows without looking. Image file names are the labels.
Real-life example: A photographer names photos "wedding_lagos_2025_01.jpg" instead of "IMG_001.jpg."
School example: A teacher names class photos "class8_2025_group.jpg."
Home example: A family names holiday photos "holiday_abuja_2025_01.jpg."
Nigerian example: A trader names product photos "ankara_blue_dress_front.jpg."
Illustration:
Image Names: +-----------------------------+ | Bad: | | IMG_001.jpg | | photo.jpg | | DSC_9843.jpg | +-----------------------------+ | Good: | | wedding_lagos_2025_01.jpg | class8_group_2025.jpg | | ankara_blue_dress.jpg | +-----------------------------+
| Image | Good Name | Bad Name |
|---|---|---|
| School logo | school_logo.png | logo final.png |
| Class photo | class8_group_2025.jpg | IMG_3857.jpg |
| Product photo | ankara_blue_front.jpg | photo1.jpg |
| Holiday photo | holiday_abuja_2025.jpg | DSC_9823.jpg |
Mini summary: Image names should describe what the image shows. This helps search engines and helps you find images.
Definition: CSS and JavaScript files have their own naming conventions. They should be short and clear.
Why it is important: These files control the look and behaviour of a website. Clear names help developers find them quickly.
Simple explanation: Imagine you have tools in a toolbox. If the hammer has no label, you cannot find it. CSS and JS file names are the labels on the tools.
Real-life example: A website has a file called "style.css" for styling and "script.js" for behaviour.
School example: The school website has "school.css" for its colours and "menu.js" for the menu.
Home example: A family blog has "blog.css" and "gallery.js."
Nigerian example: A business website has "shop.css" and "cart.js."
Illustration:
CSS and JS File Names: +-----------------------------+ | style.css <-- main style | | school.css <-- specific | | script.js <-- main scripts | | menu.js <-- specific | +-----------------------------+
| File Purpose | Good Name | Bad Name |
|---|---|---|
| Main styles | style.css | styles final.css |
| School styles | school.css | school style new.css |
| Main scripts | script.js | scripts old.js |
| Menu scripts | menu.js | menu final v2.js |
Mini summary: CSS and JavaScript file names should be short, lowercase, and descriptive.
Definition: A folder structure is the way folders are arranged inside each other to organise files.
Why it is important: A good folder structure keeps files organised and easy to find. It also helps the website work correctly.
Simple explanation: Imagine a school with classrooms. Each class has its own room. The library is in a separate building. The sports field is outside. A website folder structure is similar: each type of file has its own folder.
Real-life example: A news website has folders for "articles," "photos," and "videos."
School example: The school website has folders for "admission," "events," and "staff."
Home example: A family blog has folders for "photos," "videos," and "stories."
Nigerian example: A business website has folders for "products," "prices," and "reviews."
Illustration:
Folder Structure: +---------------------------+ | website/ | | +-- index.html | | +-- about.html | | +-- css/ | | | +-- style.css | | +-- js/ | | | +-- script.js | | +-- images/ | | | +-- logo.png | | +-- pages/ | | +-- contact.html | +---------------------------+
Mini summary: A folder structure organises files into folders. Each type of file has its own folder.
Definition: Most websites have the same basic folders: root, css, js, images, and pages.
Why it is important: Using standard folder names helps you and others understand the structure.
Simple explanation: Imagine a school with standard rooms: classroom, library, sports field. Every website has standard folders: css, js, images. These are like the standard rooms of a website.
Real-life example: A developer creates folders called "css," "js," and "images" for every new website.
School example: A student creates folders for each subject: "maths," "english," "science."
Home example: A family creates folders for "photos," "videos," and "documents."
Nigerian example: A business creates folders for "products," "customers," and "orders."
Illustration:
Standard Website Folders: +---------------------------+ | website/ | | +-- index.html | <-- root | +-- css/ | <-- styles | +-- js/ | <-- scripts | +-- images/ | <-- pictures | +-- pages/ | <-- other pages +---------------------------+
| Folder | Purpose | Example Contents |
|---|---|---|
| Root | Top-level files | index.html, about.html |
| css/ | Stylesheets | style.css, school.css |
| js/ | Scripts | script.js, menu.js |
| images/ | Pictures | logo.png, banner.jpg |
| pages/ | Other HTML pages | contact.html, services.html |
Mini summary: Every website needs at least: root, css, js, images, and pages folders.
Definition: Subfolders are folders inside folders. They help organise images into smaller groups.
Why it is important: A website with many images needs subfolders. Otherwise, the images folder becomes messy.
Simple explanation: Imagine a school with classrooms numbered 1 to 100. It is easier to find a class if rooms are grouped by floor. Subfolders group images by topic.
Real-life example: A photography website has subfolders for "weddings," "portraits," and "landscapes."
School example: A school website has subfolders for "sports," "events," and "students."
Home example: A family blog has subfolders for "holidays," "birthdays," and "school."
Nigerian example: A business website has subfolders for "ankara," "lace," and "shoes."
Illustration:
Images with Subfolders: +-------------------------------+ | images/ | | +-- school/ | | | +-- sports_day.jpg | | | +-- graduation.jpg | | +-- family/ | | | +-- holiday_abuja.jpg | | | +-- birthday_ada.jpg | | +-- city/ | | +-- abuja_sunset.jpg | +-------------------------------+
| Type of Website | Suggested Subfolders |
|---|---|
| Photography | weddings/, portraits/, landscapes/ |
| School | sports/, events/, students/ |
| Business | products/, services/, team/ |
| Blog | photos/, videos/, illustrations/ |
Mini summary: Subfolders group images into smaller, more organised sets.
Definition: The root folder is the top-level folder that holds everything for the website.
Why it is important: The root folder is the starting point for all other folders and files.
Simple explanation: Imagine a house. The root folder is the front door. Inside, there are rooms (folders) and furniture (files).
Real-life example: A website's root folder is called "website" or the website name.
School example: The school website's root folder might be called "school_website."
Home example: A family blog's root folder might be called "family_blog."
Nigerian example: A business website's root folder might be called "shop_website."
Illustration:
Root Folder: +---------------------------------+ | my_website/ <-- root folder | | +-- index.html | | +-- about.html | | +-- css/ | | +-- js/ | | +-- images/ | +---------------------------------+
Mini summary: The root folder holds everything for the website. It is the starting point.
Definition: The homepage is the first page visitors see. In most websites, it is saved as "index.html."
Why it is important: Servers look for "index.html" by default. If the file is missing, the homepage does not show.
Simple explanation: Imagine a shop with a front door. If the front door is missing, customers cannot enter. The "index.html" file is the front door of a website.
Real-life example: When you visit "example.com," the server shows "index.html."
School example: When parents visit the school website, "index.html" shows first.
Home example: When relatives visit your family blog, "index.html" shows first.
Nigerian example: When customers visit an online shop, "index.html" shows first.
Illustration:
index.html is the Homepage: +-------------------------------+ | website/ | | +-- index.html <-- first! | | +-- about.html | | +-- contact.html | +-------------------------------+
Mini summary: "index.html" is the homepage. Servers look for it by default.
Definition: SEO stands for Search Engine Optimisation. It means making your website easy for search engines to find and rank.
Why it is important: Good folder structures and names help search engines understand your website.
Simple explanation: Imagine a library. If books are organised by topic and have clear titles, it is easy to find any book. Search engines work the same way. Clear folders and names help them find your website.
Real-life example: A blog uses folders like "recipes/jollof_rice.html" so Google understands the topic.
School example: The school uses "admission/forms.html" so parents find admission forms easily.
Home example: A family blog uses "photos/holiday_abuja.html" for clear structure.
Nigerian example: A business uses "products/ankara.html" so customers can find Ankara products easily.
Illustration:
SEO-Friendly Structure: +-------------------------------+ | website/ | | +-- products/ | | | +-- ankara.html | | | +-- lace.html | | +-- about/ | | | +-- team.html | +-------------------------------+
| Good for SEO | Bad for SEO |
|---|---|
| products/ankara.html | p1.html |
| about/team.html | about_final_new.html |
| images/ankara_blue.jpg | IMG_3847.jpg |
Mini summary: Clear folders and names help search engines find and rank your website.
Definition: Accessibility means making your website easy for everyone to use, including people with disabilities.
Why it is important: Clear file names and folder structures help screen readers and other tools work properly.
Simple explanation: Imagine a school with no ramps for wheelchairs. Some students cannot enter. Accessibility in websites is about making sure everyone can use them.
Real-life example: A website names images "school_building_entrance.jpg" so screen readers can describe them.
School example: The school website uses clear file names so visually impaired parents can navigate easily.
Home example: A family blog uses descriptive names so elderly relatives can find what they need.
Nigerian example: A business website uses clear names so customers with disabilities can shop easily.
Illustration:
Accessible File Names: +-------------------------------+ | Good: | | school_building.jpg | | student_reading.jpg | +-------------------------------+ | Bad: | | DSC_3847.jpg | | IMG_0923.jpg | +-------------------------------+
Mini summary: Clear file names help accessibility tools work properly.
Definition: Common mistakes are errors that people often make when organising folders.
Why it is important: Knowing these mistakes helps you avoid them.
Simple explanation: Imagine packing a suitcase. If you throw everything in without folding, it will be a mess. Folder mistakes are like that.
Real-life example: A developer puts all files in one folder. It becomes impossible to find anything.
School example: A student saves all assignments in one folder with random names.
Home example: A family saves all photos in one folder without subfolders.
Nigerian example: A trader saves all product photos in one folder without separating categories.
Illustration:
Common Folder Mistakes: +-------------------------------+ | 1. Everything in one folder | | 2. No subfolders for images | | 3. Duplicate folders | | 4. Deeply nested folders | | 5. Inconsistent folder names | +-------------------------------+
| Mistake | Why It Is a Problem | How to Fix It |
|---|---|---|
| Everything in one folder | Hard to find files | Create folders by type |
| No subfolders for images | Images folder becomes cluttered | Create subfolders by topic |
| Duplicate folders | Confusion and wasted space | Keep one copy of each folder |
| Deeply nested folders | Hard to navigate | Keep folders 2–3 levels deep |
| Inconsistent folder names | Confusion | Use the same naming style |
Mini summary: Avoid common folder mistakes. Keep your folders simple and consistent.
Definition: Putting it all together means designing a complete file naming and folder structure plan for a website.
Why it is important: A good plan prevents problems. It makes your website easier to build and maintain.
Simple explanation: Imagine you are building a house. Before you start, you draw a plan. Building a website needs a plan too. The plan includes file names and folder structure.
Real-life example: A web developer creates a plan before starting any website project.
School example: A student plans the folder structure for a school project.
Home example: A family plans the structure for a family blog.
Nigerian example: A trader plans the folder structure for an online shop.
Illustration:
Complete Plan: +-------------------------------+ | 1. Choose root folder name | | 2. Create standard folders | | 3. Create subfolders | | 4. Name all files clearly | | 5. Follow naming rules | | 6. Document the structure | +-------------------------------+
Mini summary: A complete plan includes root folder, standard folders, subfolders, and clear file names.
| Word | Simple Definition |
|---|---|
| File Naming | Giving files clear, useful names. |
| File Extension | The letters after the dot in a file name. |
| Folder Structure | The way folders are arranged inside each other. |
| Root Folder | The top-level folder for a website. |
| Subfolder | A folder inside another folder. |
| index.html | The default homepage file. |
| SEO | Search Engine Optimisation: making websites easy for search engines to find. |
| Accessibility | Making websites easy for everyone to use. |
| Naming Convention | A consistent way of naming files. |
| Directory | Another word for folder. |
| Path | The location of a file or folder. |
| Lowercase | Small letters, like a, b, c. |
| Underscore | The _ symbol used instead of spaces. |
| Special Character | Symbols like !, #, %, &. |
| Nested | Placed inside another folder. |
Clear file names help you, servers, browsers, and search engines find files.
Use lowercase, underscores, no spaces, no special characters.
Folders keep files grouped and easy to find.
Use css, js, images, and pages folders for every website.
Servers look for index.html by default.
Clear folders and names help search engines rank your website.
Clear names help screen readers and other tools work properly.
Plan your folder structure and file names before starting a project.
A school in Lagos uses folders: "admission," "events," and "staff." Files are named "admission_form_2025.pdf" and "event_sports_day.jpg."
A shop in Abuja uses folders: "products," "prices," and "reviews." Files are named "ankara_blue_front.jpg" and "price_list_2025.pdf."
A news website in Port Harcourt uses folders named by date: "2025_03_15." Files are named "headline.html" and "photo_01.jpg."
A family blog uses folders: "photos," "videos," and "stories." Files are named "birthday_ada_2025.jpg" and "story_holiday_abuja.html."
A trader at Balogun Market has folders for "ankara," "lace," and "shoes." Files are named "ankara_blue_dress_01.jpg" and "lace_gold_02.jpg."
A student in Ibadan has folders for each subject. Files are named "chemistry_notes_ch4.pdf" and "maths_practice_2025.docx."
A youth corper in Enugu has folders for "reports," "photos," and "forms." Files are named "report_march_2025.pdf."
A small business owner has folders for "products," "customers," and "orders." Files are named "product_list_2025.xlsx."
You have folders for "barcelona," "chelsea," and "arsenal." Files are named "messi_barcelona.jpg" and "drogba_chelsea.jpg."
You have folders for "wins," "losses," and "funny." Files are named "win_2025_03_15.jpg."
You have folders for "maths," "english," and "science." Files are named "maths_project_ch3.docx."
You have folders for "photos," "videos," and "decorations." Files are named "birthday_ada_2025_01.jpg."
| Situation | Folder and Naming Skill |
|---|---|
| School work | Folders by subject, files named by chapter |
| Family photos | Folders by year or event, files named descriptively |
| Music collection | Folders by artist, files named by song |
| Work documents | Folders by project, files named with dates |
| Game saves | Folders by game, files named by level |
| Mistake | Why It Is a Problem | How to Avoid It |
|---|---|---|
| Using spaces in file names | Servers cannot read them properly | Use underscores |
| Using uppercase letters | Some servers treat them differently | Use lowercase |
| Using vague names | Files are hard to find | Be descriptive |
| Ignoring extensions | Files may not open | Use the correct extension |
| Putting all files in one folder | Clutter and confusion | Use folders by type |
| Nesting folders too deeply | Hard to navigate | Keep 2–3 levels |
| Forgetting index.html | Homepage does not load | Always include index.html |
Start
|
V
Think of a clear name
|
V
Use lowercase
|
V
Replace spaces with underscores
|
V
Remove special characters
|
V
Add correct extension
|
V
Save the file
website/
+-- index.html
+-- about.html
+-- contact.html
+-- css/
| +-- style.css
+-- js/
| +-- script.js
+-- images/
| +-- logo.png
| +-- banner.jpg
+-- pages/
+-- services.html
images/
+-- school/
| +-- sports_day.jpg
| +-- graduation.jpg
+-- family/
| +-- holiday_abuja.jpg
| +-- birthday_ada.jpg
+-- city/
+-- abuja_sunset.jpg
New File
|
V
Choose descriptive name
|
V
Lowercase only
|
V
Underscores not spaces
|
V
No special characters
|
V
Add extension
|
V
Save to correct folder
Step 1: Why naming matters
|
Step 2: Naming rules
|
Step 3: File extensions
|
Step 4: Naming web pages
|
Step 5: Naming images
|
Step 6: Naming CSS and JS
|
Step 7: What is folder structure
|
Step 8: Main folders
|
Step 9: Subfolders
|
Step 10: Root folder
|
Step 11: index.html
|
Step 12: SEO
|
Step 13: Accessibility
|
Step 14: Common mistakes
|
Step 15: Putting it together
| Rule | Example |
|---|---|
| Lowercase | logo.png |
| Underscores | about_us.html |
| No spaces | my_photo.jpg |
| No special characters | photo.jpg |
| Descriptive | abuja_sunset.jpg |
| Short | home.html |
| Include date | report_2025_03.pdf |
| Folder | Purpose | Example Files |
|---|---|---|
| Root | Top-level files | index.html, about.html |
| css/ | Styles | style.css, school.css |
| js/ | Scripts | script.js, menu.js |
| images/ | Pictures | logo.png, banner.jpg |
| pages/ | Other HTML pages | contact.html, services.html |
File names matter. They help you, servers, browsers, and search engines understand what is inside.
Follow simple rules: lowercase, underscores, no spaces, no special characters, be descriptive, keep it short.
The extension tells the computer what type of file it is. Always use the correct extension.
Web page names should be short, clear, and describe the page content.
Image names should describe what the image shows. This helps search engines and helps you find images.
CSS and JavaScript file names should be short, lowercase, and descriptive.
A folder structure organises files into folders. Each type of file has its own folder.
Every website needs at least: root, css, js, images, and pages folders.
Subfolders group images into smaller, more organised sets.
The root folder holds everything for the website. It is the starting point.
"index.html" is the homepage. Servers look for it by default.
Clear folders and names help search engines find and rank your website.
Clear file names help accessibility tools work properly.
Avoid common folder mistakes. Keep your folders simple and consistent.
A complete plan includes root folder, standard folders, subfolders, and clear file names.
In this module, you learned about file naming and folder structure. You learned that file naming is the practice of giving files clear, consistent, and useful names.
You learned why file naming matters. Good names help you find files quickly. They help servers, browsers, and search engines understand your files.
You learned the rules for naming files: use lowercase letters, use underscores instead of spaces, avoid special characters, be descriptive, keep names short, and include dates if useful.
You learned about file extensions. The extension tells the computer what type of file it is. Examples include .html, .css, .js, .jpg, and .pdf.
You learned how to name web pages, images, CSS files, and JavaScript files. Each type has its own naming conventions.
You learned about folder structure. A folder structure is the way folders are arranged inside each other. Every website needs standard folders: root, css, js, images, and pages.
You learned about subfolders. Subfolders organise images into smaller groups. You learned about the root folder and index.html, the default homepage file.
You learned how folder structure affects SEO and accessibility. Clear folders and names help search engines rank your website and help accessibility tools work properly.
You learned about common folder mistakes and how to avoid them. You learned best practices for file naming and folder structure.
Finally, you learned how to put it all together. A complete plan includes root folder, standard folders, subfolders, and clear file names.
Match the word on the left with the correct definition on the right.
| Word | Definition |
|---|---|
| 1. File Naming | A. The default homepage file |
| 2. File Extension | B. Giving files clear, useful names |
| 3. Folder Structure | C. The letters after the dot in a file name |
| 4. Root Folder | D. The way folders are arranged inside each other |
| 5. index.html | E. A folder inside another folder |
| 6. Subfolder | F. The top-level folder for a website |
Answers: 1‑B, 2‑C, 3‑D, 4‑F, 5‑A, 6‑E
You are building a school website. What folders will you create? What will you name the homepage?
You have 200 photos to organise. How will you structure your images folder?
You are building an online shop. What folders will you create for products?
You are building a personal blog. What will you name your pages?
You are building a news website. How will you organise articles by date?
Goal: Work in groups of 3‑4 to design a folder structure and naming plan.
Steps:
Discussion: Which group's structure was clearest? Which group's names were best? Why?
Goal: Practice designing a folder structure on your own.
Steps:
Goal: Create a complete plan for a personal website.
Steps:
Deliverable: A written plan with folder structure, page list, and clear file names.
Instructions: Complete the following tasks on your computer. Write down what you did.
Submission: Share your folder structure screenshot and a short report of what you learned.
In the next module, you will learn about local, cloud, and server storage. You will learn how to store files on your computer, in the cloud, and on a web server. You will also learn how to back up your files and choose the right storage option.
Before the next module, please make sure you can:
If you can do these things, you are ready for Module Three: Local, Cloud, and Server Storage.
See you in the next module, young explorer! Keep practising and stay curious.
End of Module Two
Welcome back, young explorer! In Module One, you learned what web file management is. In Module Two, you learned how to name files properly and organise them into folders. Now it is time to learn where files live.
Files do not float in the air. They must be stored somewhere. There are three main places where files can live: on your own computer (local storage), on the internet (cloud storage), or on a powerful computer that serves websites (server storage).
Each place has strengths and weaknesses. Local storage is fast but risky. Cloud storage is safe but needs internet. Server storage is public but requires hosting.
Imagine you have a favourite book. You could keep it on your desk at home (local). You could keep a copy at your friend's house so you can read it there too (cloud). You could keep a copy in the school library so everyone can read it (server). Each location has a purpose.
By the end of this module, you will understand these three storage types. You will know when to use each one. You will learn how to set up cloud storage, how to back up your files, and how to choose the right storage for any project.
Let us begin. Your files need a home!
By the end of this module, you will be able to:
Chidi is a thirteen‑year‑old boy who lives in Port Harcourt, Nigeria. He loves making videos. He had spent three weeks working on a video project for the school science fair.
On the night before the fair, Chidi finished editing his video. He saved it on his laptop. He felt proud. He went to bed happy.
The next morning, Chidi opened his laptop to show his teacher the video. But the screen showed an error. The laptop would not start. The hard drive had failed.
Chidi's video was gone. Three weeks of work, lost forever.
At school, Chidi's teacher, Mr. Okafor, saw him looking sad.
"Chidi, what is wrong?" asked Mr. Okafor.
"My laptop broke," said Chidi. "My science fair video is gone. I have nothing to show."
Mr. Okafor sighed. "Chidi, did you back up your video?"
"Back up?" asked Chidi.
"Yes," said Mr. Okafor. "Did you save a copy somewhere else, like on Google Drive or OneDrive?"
Chidi shook his head. "I only saved it on my laptop."
Mr. Okafor explained. "When you only save a file in one place, you risk losing it. Laptops break. Phones get stolen. Memory cards get damaged. That is why we back up files to the cloud."
"The cloud?" asked Chidi.
"It is a way of storing files on the internet," said Mr. Okafor. "If you had saved your video to Google Drive, you could open it from any computer. You would not lose it, even if your laptop broke."
Chidi learned his lesson. He asked for an extension on his project. He also promised himself that he would always back up his work.
From that day, Chidi saved every project in three places: on his laptop, on a flash drive, and on Google Drive. He never lost a file again.
Now it is your turn. Are you ready to learn about storage?
Chidi's Problem Chidi's Solution +----------------+ +----------------+ | Only one copy | | Local copy | | Laptop broke | -----> | Cloud copy | | Work lost | | Flash drive | | Heartbroken | | Safe forever! | +----------------+ +----------------+
Definition: Storage is a place where files are kept. It can be a physical device or an online service.
Why it is important: Without storage, files would disappear when you turn off your computer. Storage keeps files safe and available.
Simple explanation: Imagine you write a letter. If you do not put it in a safe place, it may get lost. Storage is that safe place for digital files.
Real-life example: A photographer stores photos on a hard drive and on the cloud.
School example: A student saves homework on a USB drive and on Google Drive.
Home example: A family stores holiday photos on a laptop and on a cloud account.
Nigerian example: A trader stores sales records on a computer and on a cloud account.
Illustration:
Storage:
+-----------------------------+
| Files need a place |
| to live. |
+-----------------------------+
|
V
+---------+---------+---------+
| Local | Cloud | Server |
+---------+---------+---------+
Mini summary: Storage is a place where files are kept. Files need storage to survive.
Definition: Local storage means keeping files on the device you are using. Examples include your computer's hard drive, a USB flash drive, or an external hard drive.
Why it is important: Local storage is fast. You can access files without internet. It is useful for editing and working on files.
Simple explanation: Imagine keeping your books on your own desk. You can read them any time. But if your desk catches fire, the books are gone. Local storage works the same way.
Real-life example: A web developer writes code on their laptop. The files are stored locally.
School example: A student saves homework on the school computer's hard drive.
Home example: A family saves photos on an external hard drive.
Nigerian example: A trader saves sales records on a USB drive.
Illustration:
Local Storage:
+-----------------------------+
| Your Computer |
| - Hard Drive |
| - SSD |
| - USB Flash Drive |
| - External Hard Drive |
+-----------------------------+
|
V
Fast, but risky
(only one copy)
| Type | Example | Best For |
|---|---|---|
| Hard Drive | Inside your computer | Everyday use |
| SSD | Faster version of hard drive | Speed |
| USB Flash Drive | Small portable stick | Carrying files |
| External Hard Drive | Big portable box | Backups |
| Memory Card | Small card for phones/cameras | Photos, videos |
Mini summary: Local storage keeps files on your own device. It is fast but risky if you do not back up.
Definition: Cloud storage means keeping files on the internet. You access them through a website or app. Examples include Google Drive, OneDrive, Dropbox, and iCloud.
Why it is important: Cloud storage keeps your files safe. If your device breaks, your files are still available.
Simple explanation: Imagine keeping a copy of your book at a friend's house. If your book gets lost, you can go to your friend's house and read theirs. Cloud storage is like that friend's house.
Real-life example: A business keeps all documents on Google Drive.
School example: A teacher keeps lesson notes on OneDrive.
Home example: A family keeps photos on Google Photos.
Nigerian example: A trader keeps sales records on Google Drive.
Illustration:
Cloud Storage:
+-----------------------------+
| Internet |
| - Google Drive |
| - OneDrive |
| - Dropbox |
| - iCloud |
+-----------------------------+
|
V
Safe, but needs internet
(accessible anywhere)
| Service | Free Storage | Best For |
|---|---|---|
| Google Drive | 15 GB | Documents, photos |
| OneDrive | 5 GB | Microsoft Office files |
| Dropbox | 2 GB | Sharing files |
| iCloud | 5 GB | Apple devices |
Mini summary: Cloud storage keeps files on the internet. It is safe and accessible anywhere but needs internet.
Definition: Server storage means keeping files on a powerful computer (called a server) that sends files to visitors when they open your website.
Why it is important: Websites need servers. Without a server, no one can see your website.
Simple explanation: Imagine a warehouse. It stores goods. When a customer orders, the warehouse sends the goods. A web server is like that warehouse for website files.
Real-life example: Google has many servers around the world that store copies of Google's website.
School example: The school website is stored on a web server. Parents can open it from anywhere.
Home example: A family blog is stored on a web server.
Nigerian example: A business website is hosted on a server in Lagos or Europe.
Illustration:
Server Storage:
+-----------------------------+
| Web Server |
| - Stores website files |
| - Sends files to users |
| - Works 24 hours a day |
+-----------------------------+
|
V
Public, needs hosting
(accessible by everyone)
| Type | Example | Best For |
|---|---|---|
| Shared Hosting | One server, many websites | Small websites |
| VPS | Virtual Private Server | Medium websites |
| Dedicated Server | One server, one website | Large websites |
| Cloud Hosting | Many servers working together | Very large websites |
Mini summary: Server storage keeps website files on a powerful computer. It makes websites available to everyone.
Definition: Comparing storage types means looking at the strengths and weaknesses of local, cloud, and server storage.
Why it is important: Each type is good for different things. Choosing well makes your work easier.
Simple explanation: Imagine three ways to keep your shoes. On your feet (local). In a friend's house (cloud). In a shop for sale (server). Each has a purpose.
Real-life example: A developer writes code locally, backs it up to the cloud, and uploads the final site to a server.
School example: A student writes notes locally, saves them to OneDrive, and shares some on the school server.
Home example: A family keeps photos locally, backs them up to Google Photos, and shares some on a blog server.
Nigerian example: A trader keeps records locally, backs them up to Google Drive, and uploads product photos to the website server.
Illustration:
Storage Comparison: +--------------+--------------+--------------+ | Local | Cloud | Server | +--------------+--------------+--------------+ | On your PC | On the web | On a host | | Fast access | Access any | Accessed by | | Not shared | device | visitors | | Risk of loss | Backed up | Public | +--------------+--------------+--------------+
| Feature | Local | Cloud | Server |
|---|---|---|---|
| Where it lives | Your computer | Online | Web host |
| Access speed | Fastest | Depends on internet | Depends on internet |
| Shared with others | No | Yes | Yes |
| Risk of loss | High | Low | Low |
| Needs internet | No | Yes | Yes |
| Best use | Editing | Backups, sharing | Public website files |
Mini summary: Each storage type has strengths. Use local for editing, cloud for backups, and server for websites.
Definition: Choosing the right storage means picking the best place for your files based on what you need.
Why it is important: The right storage makes your work easier, faster, and safer.
Simple explanation: Imagine you are going on a trip. You pack clothes in a suitcase (local). You keep a copy of your passport on your phone (cloud). You leave a copy at home (server). Each place has a purpose.
Real-life example: A developer uses local storage for writing code, cloud storage for backups, and server storage for the live website.
School example: A student writes homework locally, saves to OneDrive, and submits on the school portal.
Home example: A family saves photos locally, backs up to Google Photos, and shares some on a blog.
Nigerian example: A trader writes records locally, backs up to Google Drive, and uploads product photos to the shop server.
Illustration:
Choosing Storage: +---------------------------+ | Task | Use | +---------------------------+ | Writing code | Local| | Backups | Cloud| | Website files |Server| | Sharing photos | Cloud| | Fast editing | Local| +---------------------------+
| Situation | Best Storage | Why |
|---|---|---|
| Writing code | Local | Fast, no internet needed |
| Backing up photos | Cloud | Safe from device failure |
| Hosting a website | Server | Accessible to everyone |
| Sharing with friends | Cloud | Easy to share links |
| Working without internet | Local | No internet needed |
Mini summary: Choose storage based on what you need: speed, safety, sharing, or public access.
Definition: Setting up cloud storage means creating an account and organising your files online.
Why it is important: Cloud storage protects your files and lets you access them anywhere.
Simple explanation: Imagine opening a bank account. You put your money there for safety. Cloud storage is like a bank for files.
Real-life example: A business owner creates a Google Drive account and uploads all important documents.
School example: A student creates a OneDrive account and uploads homework.
Home example: A family creates a Google Photos account and uploads holiday pictures.
Nigerian example: A trader creates a Dropbox account and uploads sales records.
Illustration:
Setting Up Cloud Storage:
Step 1: Choose a service
|
Step 2: Create an account
|
Step 3: Verify your email
|
Step 4: Create folders
|
Step 5: Upload files
|
Step 6: Access from anywhere
Step‑by‑step:
Mini summary: Setting up cloud storage is easy: choose a service, create an account, and upload files.
Definition: Backing up means making a copy of your files in another location.
Why it is important: Backups protect you from losing files if your device breaks, is stolen, or gets damaged.
Simple explanation: Imagine you write an important letter. You make a photocopy and keep it in a drawer. If the original is lost, you still have the copy. Backing up is like making a photocopy.
Real-life example: A photographer backs up photos to two external drives and to the cloud.
School example: A student backs up homework to a USB drive and to Google Drive.
Home example: A family backs up photos to an external hard drive and to Google Photos.
Nigerian example: A trader backs up sales records to a flash drive and to OneDrive.
Illustration:
Backing Up:
+-----------------------------+
| Original File (Local) |
+-----------------------------+
|
V
+-----------------------------+
| Backup 1 (USB Drive) |
+-----------------------------+
|
V
+-----------------------------+
| Backup 2 (Cloud) |
+-----------------------------+
| Backup Type | Example | Pros |
|---|---|---|
| USB Drive | Small portable stick | Cheap, portable |
| External Hard Drive | Large portable box | Large capacity |
| Cloud Storage | Google Drive, OneDrive | Accessible anywhere |
| Multiple Backups | Local + Cloud + USB | Maximum safety |
Mini summary: Backing up means making copies of your files in other places. Always back up important files.
Definition: Synchronisation (or "sync") means keeping files in two or more locations up to date with each other.
Why it is important: Sync makes sure you always have the latest version of a file, no matter where you open it.
Simple explanation: Imagine you and your friend both have copies of the same book. When one of you writes a note in the book, the other copy gets the same note automatically. That is sync.
Real-life example: A business uses OneDrive sync so all staff see the latest documents.
School example: A student uses Google Drive sync so homework is the same on phone and laptop.
Home example: A family uses iCloud sync so photos appear on all devices.
Nigerian example: A trader uses Dropbox sync so sales records are the same on phone and computer.
Illustration:
Synchronisation:
+-----------------------------+
| File on Laptop |
+-----------------------------+
|
V
+-----------------------------+
| Sync (Automatic) |
+-----------------------------+
|
V
+-----------------------------+
| File on Phone |
+-----------------------------+
Mini summary: Sync keeps files up to date in multiple locations automatically.
Definition: Storage space is the amount of room available for files. Each storage type has a limit.
Why it is important: When storage is full, you cannot save new files. You must delete old files or buy more space.
Simple explanation: Imagine a school bag. It can only hold so many books. When it is full, you must remove something. Storage space works the same way.
Real-life example: Google Drive gives 15 GB free. When full, you can buy more.
School example: A USB drive has 32 GB. When full, you must delete old files.
Home example: A phone has 64 GB. When full, you cannot take more photos.
Nigerian example: A trader's laptop has 500 GB. When full, he buys an external drive.
Illustration:
Storage Space: +-----------------------------+ | [##### ] 50% used | +-----------------------------+ | Free: 50% | | Used: 50% | +-----------------------------+
| Unit | Size | Example |
|---|---|---|
| Kilobyte (KB) | 1,000 bytes | Small text file |
| Megabyte (MB) | 1,000 KB | Photo |
| Gigabyte (GB) | 1,000 MB | Video, many photos |
| Terabyte (TB) | 1,000 GB | Large hard drive |
Mini summary: Storage space is limited. Manage your files to avoid running out of space.
Definition: File size is how much space a file takes up. Larger files use more space and take longer to upload or download.
Why it is important: Large files slow down websites and fill up storage quickly.
Simple explanation: Imagine carrying a small bag versus a huge suitcase. The suitcase takes more effort. Large files take more effort to move.
Real-life example: A high-resolution photo can be 5 MB. A compressed version can be 500 KB.
School example: A 20-page document can be 2 MB. A short note is 20 KB.
Home example: A 10-minute video can be 100 MB. A song is 5 MB.
Nigerian example: A product photo on an online shop should be under 500 KB to load quickly.
Illustration:
File Sizes: +-----------------------------+ | Text note : 20 KB | | Photo : 2 MB | | Song : 5 MB | | Video (short) : 50 MB | | Video (long) : 500 MB | +-----------------------------+
| File Type | Typical Size | Impact |
|---|---|---|
| Text file | 20 KB | Very small, fast |
| Photo | 2 MB | Medium |
| Song | 5 MB | Medium |
| Video | 50 MB+ | Large, slow |
Mini summary: Large files take more space and time. Compress files when possible.
Definition: Accessing files means opening them from any device — laptop, phone, or tablet.
Why it is important: Cloud storage lets you open the same file from any device.
Simple explanation: Imagine you write a note on your laptop. With cloud storage, you can read the same note on your phone later. It is like magic.
Real-life example: A business owner checks sales records on their phone while travelling.
School example: A student reviews notes on a tablet at home.
Home example: A family views holiday photos on a smart TV.
Nigerian example: A trader checks inventory on a phone while at the market.
Illustration:
Access from Any Device:
+--------+ +--------+ +--------+
| Laptop | | Phone | | Tablet |
+--------+ +--------+ +--------+
\ | /
\ | /
\ | /
+--------+--------+
|
V
+-------------------+
| Cloud Storage |
+-------------------+
Mini summary: Cloud storage lets you access files from any device.
Definition: Sharing files means giving other people access to your files. Sharing safely means doing it without risking your privacy.
Why it is important: Wrong sharing can leak private data.
Simple explanation: Imagine lending your notebook. If you lend it to a trusted friend, fine. If you leave it in a public place, anyone can read it. Sharing files works the same way.
Real-life example: A business shares a document with a client using a private link.
School example: A teacher shares notes with students using a class folder.
Home example: A family shares holiday photos with relatives only.
Nigerian example: A trader shares a price list with a customer using a private link.
Illustration:
Sharing Safely: +-----------------------------+ | Good: | | - Share with named people | | - Use private links | | - Set permissions | +-----------------------------+ | Bad: | | - Share with "anyone" | | - Use public links | | - No permissions | +-----------------------------+
| Sharing Option | Meaning | Safety |
|---|---|---|
| Private | Only you | Very safe |
| Specific people | Only named people | Safe |
| Anyone with link | Anyone who has the link | Less safe |
| Public | Anyone on the internet | Not safe |
Mini summary: Share files carefully. Use private links and specific people only.
Definition: Managing storage space means keeping your storage organised and not full.
Why it is important: Full storage slows down devices and prevents new files.
Simple explanation: Imagine your wardrobe. If it is full, you cannot add new clothes. If you remove old ones, you make space. Managing storage is the same.
Real-life example: A business deletes old backups to free up cloud space.
School example: A student deletes old homework to free up USB space.
Home example: A family deletes duplicate photos to save phone space.
Nigerian example: A trader deletes old sales records to free up computer space.
Illustration:
Managing Storage: +-----------------------------+ | 1. Check storage usage | | 2. Delete unused files | | 3. Remove duplicates | | 4. Move old files to cloud | | 5. Empty trash | +-----------------------------+
Mini summary: Manage your storage by deleting unused files and moving old files to the cloud.
Definition: Putting it all together means using local, cloud, and server storage together in a smart way.
Why it is important: Real projects use all three storage types.
Simple explanation: Imagine you are building a house. You need bricks (local), a warehouse to store them (cloud), and a shop to sell them (server). Storage works the same way.
Real-life example: A developer writes code locally, saves to GitHub, and deploys to a server.
School example: A student writes homework locally, saves to OneDrive, and submits to the school portal.
Home example: A family keeps photos locally, backs up to Google Photos, and shares some on a blog.
Nigerian example: A trader keeps records locally, backs up to Google Drive, and uploads product photos to the shop server.
Illustration:
Complete Workflow:
Create File Locally
|
V
Back Up to Cloud
|
V
Upload to Server
|
V
Share With Others
|
V
Celebrate 🎉
Mini summary: Use local, cloud, and server storage together for the best results.
| Word | Simple Definition |
|---|---|
| Storage | A place where files are kept. |
| Local Storage | Keeping files on your own device. |
| Cloud Storage | Keeping files on the internet. |
| Server Storage | Keeping website files on a powerful computer. |
| Backup | A copy of a file kept in another place. |
| Sync | Keeping files up to date in multiple places. |
| Storage Space | The room available for files. |
| File Size | How much space a file takes up. |
| Upload | Sending a file from your device to the internet. |
| Download | Bringing a file from the internet to your device. |
| Share | Giving others access to your file. |
| Permission | Rules about who can open or edit a file. |
| Hard Drive | A storage device inside your computer. |
| USB Drive | A small portable storage device. |
| Hosting | A service that stores website files on a server. |
Files must be stored somewhere. Local, cloud, and server are the three main options.
Local storage is quick, but if your device breaks, you lose files.
Cloud storage protects your files and allows access anywhere, but needs internet.
Server storage makes website files available to everyone.
Backups protect you from losing important files.
Sync keeps files up to date across devices.
Storage is limited. Delete unused files and move old files to the cloud.
Use private links and specific people to protect your privacy.
A photographer saves raw photos on an external hard drive (local), backs them up to Google Drive (cloud), and uploads final versions to a website server.
A business saves records on a laptop (local), backs up to OneDrive (cloud), and hosts its website on a shared server.
A student writes homework on a laptop (local), saves to Google Drive (cloud), and submits on the school portal (server).
A blogger writes posts locally, backs up to Dropbox, and publishes to a WordPress server.
A trader saves sales records on a laptop (local), backs up to Google Drive (cloud), and uploads product photos to her online shop server.
A student saves study notes on a USB drive (local), backs up to OneDrive (cloud), and shares some with friends via Google Drive.
A youth corper saves project reports locally, backs up to Dropbox, and uploads final reports to the community project server.
A business saves records on a computer (local), backs up to Google Drive (cloud), and hosts its website on a Nigerian hosting server.
You save game progress on your console (local), back up to the cloud (PlayStation Plus), and sync across devices.
You save card photos on your phone (local), back up to Google Photos (cloud), and share some on a blog.
You save projects on a laptop (local), back up to OneDrive (cloud), and submit on the school portal (server).
You save birthday photos on your phone (local), back up to Google Photos (cloud), and share an album with family.
| Situation | Storage Used |
|---|---|
| Writing homework | Local |
| Backing up photos | Cloud |
| Hosting a website | Server |
| Sharing files with friends | Cloud |
| Listening to music offline | Local |
| Mistake | Why It Is a Problem | How to Avoid It |
|---|---|---|
| Saving only one copy | Lost if device breaks | Back up in two places |
| Not checking storage space | Cannot save new files | Check regularly |
| Sharing public links | Privacy risk | Use private links |
| Ignoring sync errors | Files become out of date | Check sync status |
| Uploading huge files | Slow website | Compress files first |
| Forgetting backups | Data loss | Set a backup schedule |
+-------------+ +-------------+ +-------------+ | Local | | Cloud | | Server | +-------------+ +-------------+ +-------------+ | Your PC | | Internet | | Web Host | | Fast | | Safe | | Public | | Risky | | Anywhere | | 24/7 | +-------------+ +-------------+ +-------------+
Original File (Local)
|
V
Backup 1 (USB Drive)
|
V
Backup 2 (Cloud)
|
V
Safe and Secure
File on Laptop
|
V
Sync
|
V
File on Phone
|
V
File on Tablet
Create Locally
|
V
Back Up to Cloud
|
V
Upload to Server
|
V
Share With Others
|
V
Celebrate 🎉
Step 1: What is storage
|
Step 2: Local storage
|
Step 3: Cloud storage
|
Step 4: Server storage
|
Step 5: Compare types
|
Step 6: Choose storage
|
Step 7: Set up cloud
|
Step 8: Back up files
|
Step 9: Sync
|
Step 10: Storage space
|
Step 11: File size
|
Step 12: Access from devices
|
Step 13: Share safely
|
Step 14: Manage space
|
Step 15: Put it together
| Feature | Local | Cloud | Server |
|---|---|---|---|
| Where it lives | Your computer | Online | Web host |
| Access speed | Fastest | Depends on internet | Depends on internet |
| Shared with others | No | Yes | Yes |
| Risk of loss | High | Low | Low |
| Needs internet | No | Yes | Yes |
| Best use | Editing | Backups, sharing | Public website files |
| Service | Free Storage | Best For |
|---|---|---|
| Google Drive | 15 GB | Documents, photos |
| OneDrive | 5 GB | Microsoft Office files |
| Dropbox | 2 GB | Sharing files |
| iCloud | 5 GB | Apple devices |
Storage is a place where files are kept. Files need storage to survive.
Local storage keeps files on your own device. It is fast but risky.
Cloud storage keeps files on the internet. It is safe and accessible anywhere.
Server storage keeps website files on a powerful computer. It makes websites public.
Each storage type has strengths. Use local for editing, cloud for backups, and server for websites.
Choose storage based on what you need: speed, safety, sharing, or public access.
Setting up cloud storage is easy: choose a service, create an account, and upload files.
Backing up means making copies of your files in other places. Always back up important files.
Sync keeps files up to date in multiple locations automatically.
Storage space is limited. Manage your files to avoid running out of space.
Large files take more space and time. Compress files when possible.
Cloud storage lets you access files from any device.
Share files carefully. Use private links and specific people only.
Manage your storage by deleting unused files and moving old files to the cloud.
Use local, cloud, and server storage together for the best results.
In this module, you learned about local, cloud, and server storage. You learned that storage is a place where files are kept.
You learned about local storage. Local storage keeps files on your own device, like a hard drive or USB drive. It is fast but risky if you do not back up.
You learned about cloud storage. Cloud storage keeps files on the internet, like Google Drive or OneDrive. It is safe and accessible from any device but needs internet.
You learned about server storage. Server storage keeps website files on a powerful computer. It makes websites available to everyone.
You learned how to compare storage types and choose the right one for different tasks. You learned how to set up cloud storage, how to back up files, and what synchronisation means.
You learned about storage space, file sizes, and how to manage them. You learned how to access files from different devices and how to share files safely.
Finally, you learned how to put it all together. Use local storage for editing, cloud storage for backups, and server storage for websites.
Match the word on the left with the correct definition on the right.
| Word | Definition |
|---|---|
| 1. Local Storage | A. Keeping files on the internet |
| 2. Cloud Storage | B. Keeping files on your own device |
| 3. Server Storage | C. A copy of a file kept in another place |
| 4. Backup | D. Keeping website files on a powerful computer |
| 5. Sync | E. Sending a file from your device to the internet |
| 6. Upload | F. Keeping files up to date in multiple places |
Answers: 1‑B, 2‑A, 3‑D, 4‑C, 5‑F, 6‑E
You have 500 photos to store. Where would you store them? Why?
Your business needs to store records and share them with staff. Which storage would you use?
You are writing a project. Where would you save your work as you go?
You run a blog. Where would you store your posts and images?
You want to save your game progress and access it on another console. Which storage would you use?
Goal: Work in groups of 3‑4 to design a storage plan.
Steps:
Discussion: Which group's plan was clearest? Which group made the best choices? Why?
Goal: Practice designing a storage plan on your own.
Steps:
Goal: Create a backup plan for your important files.
Steps:
Deliverable: A written plan and one uploaded file.
Instructions: Complete the following tasks. Write down what you did.
Submission: Share your cloud folder screenshot and your report.
In the next module, you will learn about file transfer protocols and tools. You will learn how to move files from your computer to a web server using FTP and SFTP. You will also learn about web-based file managers and command-line transfer.
Before the next module, please make sure you can:
If you can do these things, you are ready for Module Four: File Transfer Protocols and Tools.
See you in the next module, young explorer! Keep practising and stay curious.
End of Module Three
Welcome back, young explorer! In Module One, you learned what web file management is. In Module Two, you learned how to name files and organise them into folders. In Module Three, you learned about local, cloud, and server storage.
Now it is time to learn how to move files from one place to another. This is called file transfer.
Imagine you have a letter to send to a friend in another city. You cannot just wish it there. You need a way to send it. You might use the post office. You might use a courier. You might hand it to someone travelling there.
Files work the same way. To move a file from your computer to a web server, you need a method and a tool. The method is called a protocol. The tool is the software you use.
In this module, you will learn about FTP, SFTP, and other ways to move files. You will learn about tools like FileZilla and WinSCP. You will learn how to use web-based file managers. You will also learn how to transfer files safely.
By the end of this module, you will be able to move files from your computer to a web server with confidence.
Let us begin. Your files are ready to travel!
By the end of this module, you will be able to:
Ngozi is a thirteen‑year‑old girl who lives in Enugu, Nigeria. She helps her mother run a small business selling handmade bags. Ngozi built a simple website for the business.
One day, Ngozi's mother said, "Ngozi, we have new bag designs. Please add them to the website."
Ngozi nodded. She took photos of the new bags. She wrote descriptions. She updated the HTML file on her laptop.
"Done!" she said.
But when her mother checked the website, nothing had changed. The new bags were not there.
"What happened?" asked Ngozi's mother.
Ngozi looked confused. "I updated the file on my laptop. Why is it not showing?"
Her older brother, Chidi, walked in. He was studying computer science. He looked at Ngozi's laptop and smiled.
"Ngozi," said Chidi, "you updated the file on your laptop. But your laptop is not the website. The website lives on a server. You need to transfer the updated file to the server."
"Transfer?" asked Ngozi.
"Yes," said Chidi. "You need to send the file from your laptop to the server. That is called file transfer. And you need a tool to do it."
Chidi opened a program called FileZilla on the laptop. He typed the server address, username, and password. Then he dragged Ngozi's updated files from the laptop to the server.
"Now check the website," said Chidi.
Ngozi's mother refreshed the page. The new bags appeared!
"Wonderful!" said her mother. "So I need to transfer files every time I update the website?"
"Yes," said Chidi. "Your laptop is where you build. The server is where the world sees. File transfer connects the two."
Ngozi learned an important lesson. From that day, she always transferred her files to the server after making changes.
Now it is your turn. Are you ready to learn about file transfer?
Ngozi's Mistake: Correct Process: +----------------+ +----------------+ | Edit locally | | Edit locally | | Forget to send | -----> | Transfer files | | Website stale | | Website updated| | Confusion | | Success! | +----------------+ +----------------+
Definition: File transfer means moving a file from one place to another. This could be from your computer to a server, from a server to your computer, or between two computers.
Why it is important: Websites live on servers. To update a website, you must transfer files to the server. Without file transfer, your website will not change.
Simple explanation: Imagine you have a letter. To send it to a friend, you must put it in an envelope and post it. File transfer is the posting of digital files.
Real-life example: A web developer edits a webpage on their laptop, then transfers it to the server.
School example: A student writes homework on a laptop and transfers it to the school portal.
Home example: A family takes photos on a phone and transfers them to a laptop.
Nigerian example: A trader takes product photos and transfers them to an online shop server.
Illustration:
File Transfer: +----------------+ +----------------+ | Your Computer | -----> | Web Server | | (Local) | Files | (Online) | +----------------+ +----------------+
Mini summary: File transfer means moving files from one place to another. It is how websites get updated.
Definition: A protocol is a set of rules for how computers talk to each other. It is like a language that computers agree to speak.
Why it is important: Without protocols, computers cannot understand each other. Files would not transfer correctly.
Simple explanation: Imagine two friends who speak different languages. They cannot understand each other. But if they agree to speak English, they can talk. A protocol is that agreed language for computers.
Real-life example: When you send an email, it uses a protocol called SMTP.
School example: When you browse a website, it uses a protocol called HTTP or HTTPS.
Home example: When you send a WhatsApp message, it uses a protocol for messaging.
Nigerian example: When a customer pays online, the payment uses a secure protocol.
Illustration:
Protocol:
+----------------+ +----------------+
| Computer A | Rules | Computer B |
| (Client) | -----> | (Server) |
+----------------+ +----------------+
|
V
Both agree on the protocol
| Protocol | Purpose |
|---|---|
| HTTP / HTTPS | Loading web pages |
| FTP | Transferring files |
| SFTP | Transferring files securely |
| SMTP | Sending email |
| DNS | Finding website addresses |
Mini summary: A protocol is a set of rules for computers to communicate. FTP and SFTP are protocols for file transfer.
Definition: FTP stands for File Transfer Protocol. It is a standard way to transfer files between computers over a network.
Why it is important: FTP is one of the oldest and most common ways to upload files to a web server.
Simple explanation: Imagine FTP is like a delivery service for files. You give it a file and an address, and it delivers the file to the server.
Real-life example: A web developer uses FTP to upload a new webpage to a server.
School example: A school webmaster uses FTP to upload photos from a sports day.
Home example: A family uses FTP to upload photos to a blog server.
Nigerian example: A trader uses FTP to upload new product photos to an online shop.
Illustration:
FTP Transfer:
+----------------+ +----------------+
| Your Computer | FTP | Web Server |
| (Local) | -----> | (Online) |
+----------------+ +----------------+
|
V
File appears on the server
| Feature | FTP |
|---|---|
| Full name | File Transfer Protocol |
| Security | Not encrypted |
| Port | 21 |
| Use case | Simple file transfers |
Mini summary: FTP is a protocol for transferring files. It is simple but not secure.
Definition: SFTP stands for Secure File Transfer Protocol. It is like FTP but with encryption. Encryption means the data is scrambled so no one else can read it.
Why it is important: SFTP protects your files and passwords from being stolen during transfer.
Simple explanation: Imagine sending a letter in a locked box instead of a clear envelope. Only the person with the key can open it. SFTP is that locked box for files.
Real-life example: A business uses SFTP to transfer sensitive customer data.
School example: A school uses SFTP to upload student records.
Home example: A family uses SFTP to back up important documents.
Nigerian example: A bank uses SFTP to transfer financial records between branches.
Illustration:
SFTP Transfer:
+----------------+ +----------------+
| Your Computer | SFTP | Web Server |
| (Local) | -----> | (Online) |
+----------------+ +----------------+
|
V
File is encrypted during transfer
(Safe from prying eyes)
| Feature | SFTP |
|---|---|
| Full name | Secure File Transfer Protocol |
| Security | Encrypted |
| Port | 22 |
| Use case | Secure file transfers |
Mini summary: SFTP is a secure version of FTP. It encrypts files during transfer.
Definition: FTPS stands for FTP Secure. It is FTP with added security using SSL/TLS encryption.
Why it is important: FTPS provides security for FTP transfers, similar to how HTTPS secures web browsing.
Simple explanation: Imagine FTP is a postcard. Anyone can read it. FTPS is a sealed envelope. Only the person with the key can open it.
Real-life example: Some older servers still use FTPS for secure transfers.
School example: A school might use FTPS if its server supports it.
Home example: A family might use FTPS for a personal server.
Nigerian example: A business might use FTPS if SFTP is not available.
Illustration:
FTPS Transfer:
+----------------+ +----------------+
| Your Computer | FTPS | Web Server |
| (Local) | -----> | (Online) |
+----------------+ +----------------+
|
V
File is encrypted using SSL/TLS
| Feature | FTPS |
|---|---|
| Full name | FTP Secure |
| Security | Encrypted with SSL/TLS |
| Port | 21 (with encryption) |
| Use case | Secure transfers on older servers |
Mini summary: FTPS is FTP with SSL/TLS encryption. It is an alternative to SFTP.
Definition: Comparing protocols means looking at the differences between FTP, SFTP, and FTPS.
Why it is important: Choosing the right protocol keeps your files safe and your transfers working.
Simple explanation: Imagine three ways to send a letter. FTP is a postcard (anyone can read). SFTP is a locked box (safe). FTPS is a sealed envelope (safe). Choose based on what you need.
Real-life example: A business uses SFTP for all transfers.
School example: A school uses SFTP because it is the safest option.
Home example: A family uses SFTP when available.
Nigerian example: A trader uses SFTP if the server supports it.
Illustration:
Comparison: +---------+---------+---------+ | FTP | SFTP | FTPS | +---------+---------+---------+ | No | Yes | Yes | | security| security| security| +---------+---------+---------+ | Port 21 | Port 22 | Port 21 | +---------+---------+---------+
| Feature | FTP | SFTP | FTPS |
|---|---|---|---|
| Security | No | Yes | Yes |
| Encryption | None | SSH | SSL/TLS |
| Port | 21 | 22 | 21 |
| Best for | Old servers | Modern servers | Older secure servers |
Mini summary: FTP is not secure. SFTP and FTPS are secure. Choose SFTP when possible.
Definition: An FTP client is a program that helps you transfer files using FTP or SFTP.
Why it is important: You need a client to connect to a server and move files.
Simple explanation: Imagine you want to make a phone call. You need a phone. An FTP client is the phone for file transfers.
Real-life example: A developer uses FileZilla to upload files to a website.
School example: A student uses WinSCP to upload homework to a school server.
Home example: A family uses Cyberduck to upload photos to a blog.
Nigerian example: A trader uses FileZilla to upload product photos to an online shop.
Illustration:
FTP Client:
+----------------+ +----------------+
| FTP Client | -----> | Web Server |
| (FileZilla) | | (Online) |
+----------------+ +----------------+
|
V
Drag and drop files to transfer
| Client | Platform | Best For |
|---|---|---|
| FileZilla | Windows, Mac, Linux | General use |
| WinSCP | Windows | Windows users |
| Cyberduck | Windows, Mac | Simple interface |
| Transmit | Mac | Mac users |
Mini summary: FTP clients are programs that help you transfer files. FileZilla and WinSCP are popular choices.
Definition: FileZilla is a free FTP client used to transfer files to and from servers.
Why it is important: FileZilla is easy to use and works on many systems.
Simple explanation: FileZilla has two panels. The left panel shows your computer. The right panel shows the server. You drag files from one side to the other.
Real-life example: A developer uses FileZilla every day to update websites.
School example: A school webmaster uses FileZilla to upload event photos.
Home example: A family uses FileZilla to update their blog.
Nigerian example: A trader uses FileZilla to upload new product photos.
Illustration:
FileZilla Interface:
+---------------------+---------------------+
| Local Files | Server Files |
| (Your Computer) | (Website) |
+---------------------+---------------------+
| [Folder] | [Folder] |
| [File 1] | [File 3] |
| [File 2] | [File 4] |
+---------------------+---------------------+
| ^
| Drag and drop files |
+--------------------------+
Step‑by‑step:
Mini summary: FileZilla is a free FTP client. It shows your files on the left and server files on the right.
Definition: A web-based file manager is a tool that lets you manage server files through a web browser. Examples include cPanel File Manager, Plesk File Manager, and DirectAdmin File Manager.
Why it is important: You do not need to install software. You can manage files from any browser.
Simple explanation: Imagine managing your files through a website instead of a program. That is a web-based file manager.
Real-life example: A business uses cPanel File Manager to upload files.
School example: A teacher uses cPanel to upload worksheets.
Home example: A family uses a web file manager to update their blog.
Nigerian example: A trader uses cPanel to upload product photos from any computer.
Illustration:
Web-Based File Manager:
+-----------------------------+
| Browser |
| - cPanel File Manager |
| - Upload, Delete, Rename |
+-----------------------------+
|
V
Manage server files without software
| Tool | Used By | Features |
|---|---|---|
| cPanel File Manager | Many hosting companies | Upload, delete, rename, edit |
| Plesk File Manager | Plesk hosting | File operations in browser |
| DirectAdmin File Manager | DirectAdmin hosting | Simple file management |
Mini summary: Web-based file managers let you manage files through a browser. No software needed.
Definition: Command-line file transfer means transferring files using typed commands instead of a graphical interface.
Why it is important: Command-line tools are fast and powerful. They are used by advanced users and in automation.
Simple explanation: Imagine giving instructions by typing words instead of clicking buttons. That is the command line.
Real-life example: A developer uses SCP to copy files to a server.
School example: A teacher uses Rsync to back up class files.
Home example: A family uses SCP to move photos to a home server.
Nigerian example: A business uses Rsync to back up records to a remote server.
Illustration:
Command-Line Transfer:
$ scp file.html user@server:/var/www/html/
|
V
File transferred using a typed command
| Command | Purpose | Example |
|---|---|---|
| scp | Copy files securely | scp file.txt user@server:/path/ |
| rsync | Synchronise files | rsync -av folder/ user@server:/path/ |
| sftp | Interactive secure transfer | sftp user@server |
Mini summary: Command-line tools like SCP and Rsync transfer files by typing commands. They are fast and powerful.
Definition: Uploading means sending a file from your computer to a server. Downloading means bringing a file from a server to your computer.
Why it is important: You need to know the difference to move files correctly.
Simple explanation: Imagine you are sending a parcel (upload). You are receiving a parcel (download). Direction matters.
Real-life example: A developer uploads updated files to the server.
School example: A student downloads class notes from the school server.
Home example: A family uploads photos to Google Drive.
Nigerian example: A trader uploads product photos to a shop server.
Illustration:
Upload: Download: +--------+ +--------+ | You | -----> Server | Server | -----> You +--------+ +--------+
| Action | Direction | Example |
|---|---|---|
| Upload | Computer → Server | Adding a new webpage |
| Download | Server → Computer | Downloading a backup |
Mini summary: Upload sends files to a server. Download brings files from a server.
Definition: Best practices are the habits that make file transfer safe and reliable.
Why it is important: Good habits prevent mistakes and protect your files.
Simple explanation: Imagine you are packing a suitcase. If you fold clothes neatly, everything fits. Best practices are the neat folding for file transfer.
Real-life example: A business uses SFTP and verifies files after each transfer.
School example: A teacher uploads files and checks that they appear on the site.
Home example: A family backs up before transferring.
Nigerian example: A trader uses SFTP and checks photos after uploading.
Illustration:
Best Practices: +---------------------------+ | 1. Use SFTP when possible | | 2. Back up before transfer| | 3. Verify after transfer | | 4. Use strong passwords | | 5. Keep logs | +---------------------------+
| Practice | Why It Matters |
|---|---|
| Use SFTP | Protects files from theft |
| Back up before transfer | Protects against errors |
| Verify after transfer | Ensures files arrived correctly |
| Use strong passwords | Prevents unauthorised access |
| Keep logs | Helps track changes |
Mini summary: Best practices protect your files: use SFTP, back up, verify, use strong passwords.
Definition: Verifying a transfer means checking that the file arrived safely and correctly.
Why it is important: Sometimes transfers fail. Files may be incomplete or corrupted.
Simple explanation: Imagine sending a parcel. You ask the receiver to confirm they got it. Verification is that confirmation for files.
Real-life example: A developer checks the website after uploading.
School example: A teacher downloads and opens a file after uploading to check it.
Home example: A family checks photos on Google Photos after uploading.
Nigerian example: A trader refreshes the shop website to confirm the product photo is showing.
Illustration:
Verification:
Upload File
|
V
Wait for Transfer to Finish
|
V
Check File on Server
|
V
Open File to Confirm
|
V
Correct? --Yes--> Done!
|
No
|
V
Re-upload
Mini summary: Always verify file transfers. Check that the file arrived and opens correctly.
Definition: Common mistakes are errors that happen often during file transfer.
Why it is important: Knowing them helps you avoid problems.
Simple explanation: Imagine writing an address wrong on a letter. It goes to the wrong place. File transfer mistakes are similar.
Real-life example: A developer uploads files to the wrong folder. The website does not update.
School example: A teacher uploads the wrong version of a file.
Home example: A family uploads a photo to the wrong album.
Nigerian example: A trader uploads a blurry photo instead of the clear one.
Illustration:
Common Mistakes: +---------------------------+ | 1. Wrong folder | | 2. Wrong file version | | 3. Using FTP (not SFTP) | | 4. Not verifying | | 5. Missing files | +---------------------------+
| Mistake | Why It Is a Problem | How to Avoid It |
|---|---|---|
| Wrong folder | File does not appear | Double-check the destination |
| Wrong version | Old content shows | Use clear file names |
| Using FTP | Data is not secure | Use SFTP |
| Not verifying | Problems go unnoticed | Always check after transfer |
| Missing files | Website looks incomplete | Check the folder before transfer |
Mini summary: Avoid common transfer mistakes: wrong folder, wrong version, unsecured transfer, no verification.
Definition: Putting it all together means using the right protocol and tool for each transfer task.
Why it is important: Real projects require choosing the right approach.
Simple explanation: Imagine you are a delivery driver. Some parcels are small, some are large. Some need to arrive fast. You choose the right vehicle for each job. File transfer works the same way.
Real-life example: A developer uses SFTP for large updates and cPanel File Manager for small ones.
School example: A teacher uses SFTP for student records and cPanel for worksheets.
Home example: A family uses Google Drive for photos and SFTP for their blog server.
Nigerian example: A trader uses SFTP for product photos and cPanel for price lists.
Illustration:
Complete Workflow:
Edit Files Locally
|
V
Choose Protocol (SFTP)
|
V
Choose Tool (FileZilla)
|
V
Upload Files
|
V
Verify on Server
|
V
Update Website
|
V
Celebrate 🎉
Mini summary: Choose the right protocol and tool for each task. Verify after transfer.
| Word | Simple Definition |
|---|---|
| File Transfer | Moving a file from one place to another. |
| Protocol | A set of rules for computers to communicate. |
| FTP | File Transfer Protocol. A simple way to transfer files. |
| SFTP | Secure File Transfer Protocol. FTP with encryption. |
| FTPS | FTP Secure. FTP with SSL/TLS encryption. |
| Encryption | Scrambling data so only the right person can read it. |
| FTP Client | A program that helps you transfer files using FTP or SFTP. |
| Server | A computer that stores website files. |
| Upload | Sending a file from your computer to a server. |
| Download | Bringing a file from a server to your computer. |
| Port | A number that identifies a service on a server. |
| Web-Based File Manager | A tool that manages server files through a browser. |
| Command Line | Giving instructions by typing words. |
| SCP | Secure Copy. A command for copying files securely. |
| Rsync | A command for synchronising files. |
| Verification | Checking that a file arrived correctly. |
Websites live on servers. To update a website, you must transfer files.
Protocols are agreed rules for computers to communicate. FTP, SFTP, and FTPS are protocols for file transfer.
FTP is not secure. SFTP and FTPS are secure. Always use secure protocols.
FTP clients like FileZilla make file transfer simple with drag and drop.
Web-based file managers let you manage files from any browser.
Command-line tools like SCP and Rsync are fast and useful for automation.
Upload sends files to a server. Download brings files from a server.
After every transfer, check that files arrived and open correctly.
A developer updates a website. They edit files locally, then use FileZilla to upload them via SFTP. They refresh the website to confirm changes.
A school webmaster uploads photos from a sports day using cPanel File Manager. They verify by opening the website.
A blogger uploads new posts using FileZilla. They use SFTP for security and check the blog after upload.
A business uses Rsync to back up records to a remote server every night.
A trader uploads new product photos using FileZilla. She uses SFTP and verifies the shop page after upload.
A student uses cPanel to upload project files to a school server. The student verifies the files after upload.
A youth corper uses SFTP to upload reports to a community project server. He verifies each file after transfer.
A small business uses Rsync to back up customer records to a remote server every night.
You upload game screenshots to a gaming website using FileZilla. You verify by refreshing the page.
You upload card photos to a football card website. You use SFTP and check the site after upload.
You upload project files to a school server. You use cPanel and verify each file after upload.
You upload birthday photos to a family website. You check the album after upload.
| Situation | Transfer Method |
|---|---|
| Sending homework to a school portal | Upload |
| Downloading class notes | Download |
| Updating a blog | SFTP upload |
| Backing up records | Rsync |
| Uploading photos | Web-based file manager |
| Mistake | Why It Is a Problem | How to Avoid It |
|---|---|---|
| Using FTP | Data is not secure | Use SFTP |
| Wrong folder | File does not appear | Double-check the destination |
| Not verifying | Problems go unnoticed | Check after transfer |
| Weak passwords | Unauthorised access | Use strong passwords |
| Missing backups | Data loss | Back up before transfer |
| Wrong file version | Old content shows | Use clear names |
Start
|
V
Edit Files Locally
|
V
Choose Protocol
|
V
Choose Tool
|
V
Connect to Server
|
V
Upload or Download
|
V
Verify Transfer
|
V
Celebrate 🎉
+---------+---------+---------+ | FTP | SFTP | FTPS | +---------+---------+---------+ | No | Yes | Yes | | security| security| security| +---------+---------+---------+ | Port 21 | Port 22 | Port 21 | +---------+---------+---------+
Upload: [You] -----> [Server] Download: [Server] -----> [You]
+---------------------+---------------------+
| Local Files | Server Files |
| (Your Computer) | (Website) |
+---------------------+---------------------+
| [Folder] | [Folder] |
| [File 1] | [File 3] |
| [File 2] | [File 4] |
+---------------------+---------------------+
| ^
| Drag and drop files |
+--------------------------+
Step 1: What is file transfer
|
Step 2: What is a protocol
|
Step 3: What is FTP
|
Step 4: What is SFTP
|
Step 5: What is FTPS
|
Step 6: Compare protocols
|
Step 7: FTP clients
|
Step 8: Using FileZilla
|
Step 9: Web-based managers
|
Step 10: Command-line transfer
|
Step 11: Upload vs download
|
Step 12: Best practices
|
Step 13: Verifying transfers
|
Step 14: Common mistakes
|
Step 15: Putting it together
| Feature | FTP | SFTP | FTPS |
|---|---|---|---|
| Security | No | Yes | Yes |
| Encryption | None | SSH | SSL/TLS |
| Port | 21 | 22 | 21 |
| Best for | Old servers | Modern servers | Older secure servers |
| Client | Platform | Best For |
|---|---|---|
| FileZilla | Windows, Mac, Linux | General use |
| WinSCP | Windows | Windows users |
| Cyberduck | Windows, Mac | Simple interface |
| Transmit | Mac | Mac users |
File transfer means moving files from one place to another. It is how websites get updated.
A protocol is a set of rules for computers to communicate. FTP and SFTP are protocols for file transfer.
FTP is a protocol for transferring files. It is simple but not secure.
SFTP is a secure version of FTP. It encrypts files during transfer.
FTPS is FTP with SSL/TLS encryption. It is an alternative to SFTP.
FTP is not secure. SFTP and FTPS are secure. Choose SFTP when possible.
FTP clients are programs that help you transfer files. FileZilla and WinSCP are popular choices.
FileZilla is a free FTP client. It shows your files on the left and server files on the right.
Web-based file managers let you manage files through a browser. No software needed.
Command-line tools like SCP and Rsync transfer files by typing commands. They are fast and powerful.
Upload sends files to a server. Download brings files from a server.
Best practices protect your files: use SFTP, back up, verify, use strong passwords.
Always verify file transfers. Check that the file arrived and opens correctly.
Avoid common transfer mistakes: wrong folder, wrong version, unsecured transfer, no verification.
Choose the right protocol and tool for each task. Verify after transfer.
In this module, you learned about file transfer protocols and tools. You learned that file transfer means moving files from one place to another.
You learned about protocols. A protocol is a set of rules for computers to communicate. FTP, SFTP, and FTPS are protocols for file transfer.
You learned about FTP. FTP is simple but not secure. You learned about SFTP, which is secure and encrypts files. You learned about FTPS, which uses SSL/TLS encryption.
You learned how to compare FTP, SFTP, and FTPS. You learned that SFTP is usually the best choice for modern servers.
You learned about FTP clients. FileZilla and WinSCP are popular tools for transferring files. You learned how to use FileZilla with its two-panel interface.
You learned about web-based file managers like cPanel. You learned about command-line tools like SCP and Rsync.
You learned the difference between uploading and downloading. You learned best practices for file transfer and how to verify that files arrived correctly.
Finally, you learned how to put it all together. Choose the right protocol and tool for each task. Verify after transfer.
Match the word on the left with the correct definition on the right.
| Word | Definition |
|---|---|
| 1. FTP | A. Secure File Transfer Protocol |
| 2. SFTP | B. A program for transferring files |
| 3. FTPS | C. File Transfer Protocol |
| 4. FTP Client | D. FTP with SSL/TLS encryption |
| 5. Upload | E. Bringing a file from a server |
| 6. Download | F. Sending a file to a server |
Answers: 1‑C, 2‑A, 3‑D, 4‑B, 5‑F, 6‑E
You need to update a website. Which protocol and tool would you use? Why?
You need to upload 200 photos. Which protocol and tool would you use?
You need to upload a new blog post. Which protocol and tool would you use?
You need to back up records every night. Which method would you use?
You need to upload homework to a school server. Which method would you use?
Goal: Work in groups of 3‑4 to practice file transfer.
Steps:
Discussion: Which group transferred fastest? Which group made the fewest mistakes? What did you learn?
Goal: Practice uploading a file to a server.
Steps:
Goal: Create a plan for transferring files to a website.
Steps:
Deliverable: A written plan with protocol, tool, and steps.
Instructions: Complete the following tasks. Write down what you did.
Submission: Share your screenshot and report.
In the next module, you will learn about version control for web assets. You will learn how to use Git and GitHub to track changes, manage versions, and collaborate with others.
Before the next module, please make sure you can:
If you can do these things, you are ready for Module Five: Version Control for Web Assets.
See you in the next module, young explorer! Keep practising and stay curious.
End of Module Four