Digital Tech Notes (JSS1 - SS3)
Home
SSS1

Web Development for SS1

Learn the meaning of web development, its types (front-end, back-end, full-stack), core technologies, and tools — explained simply for SS1 students.

Every time a Nigerian student checks their JAMB result online, orders a phone on Jumia, or transfers money using an Opay app, they are using something that someone else designed, built, and tested from scratch. That "something" did not appear by accident. A person — or a team of people — wrote instructions that told a computer exactly how the page should look, what should happen when a button is tapped, and where the information being displayed should come from.

That process of planning, building, and maintaining these digital tools is called web development, and it is the subject of this lesson.

LEARNING OUTCOMES

By the end of this lesson, you should be able to:

  1. Describe what web development means.
  2. Identify examples of web development products such as websites and web applications.
  3. Describe the three types of web development.
  4. Explain the functions of HTML, CSS, and JavaScript as core web technologies.
  5. State the tools commonly used for web development.

WHAT IS WEB DEVELOPMENT?

Web development is the process of building, creating, and maintaining websites and web applications that run on the internet or on a private network called an intranet. It covers everything from writing the code that displays a simple page of text, to building complex systems that handle millions of users, such as a bank's online banking portal.

A useful way to think about it is to compare it to building a house. Before anyone moves in, someone has to lay the foundation, construct the walls, install the plumbing and electrical wiring, and finally paint and furnish the rooms. Web development follows a similar pattern — different stages and different specialists come together to produce a finished digital product that ordinary people can use without ever seeing the work behind it.

Web development is not the same thing as web design, although the two are closely related. Web design focuses mainly on how a site looks — its colours, layout, and visual appeal. Web development is the broader discipline that makes sure the site actually works: that pages load correctly, that forms submit information properly, and that the whole system runs smoothly.

EXAMPLES OF WEB DEVELOPMENT PRODUCTS

Web developers create two broad categories of products: websites and web applications.

Websites are collections of related pages that mainly display information. A school's website that shows its history, admission requirements, and contact details is a website. A blog like a NERDC curriculum resource site, or a news platform reporting on WAEC timetable changes, is also a website. The main purpose of a website is usually to inform, and the content does not change dramatically based on who is viewing it.

Web applications, on the other hand, are interactive tools that allow users to perform tasks, not just read information. When a student logs into the JAMB CBT portal to check their UTME result, they are using a web application. When a customer places an order on Jumia or Konga, tracks a delivery, or makes a payment through Paystack or Opay, they are interacting with a web application. Unlike a plain website, a web application responds differently depending on what the user does — it stores their login details, remembers their cart items, and processes their instructions in real time.

A simple way to tell them apart is to ask: does the page mostly tell me something, or does it let me do something? If it mostly tells, it leans toward being a website. If it lets you log in, search, buy, chat, or submit forms that trigger an action, it leans toward being a web application. In practice, many modern sites blend both — a school website may be mostly informational but also include a small web application for checking examination results.

TYPES OF WEB DEVELOPMENT

Building a website or web application is rarely the work of one person doing everything alone. The work is generally divided into three types.

1. Front-End Development

Front-end development deals with everything a user sees and interacts with directly — the layout, the colours, the buttons, the images, and the way the page responds when it is clicked or scrolled. It is sometimes called "client-side" development because it runs on the user's own device, inside their web browser.

Imagine walking into a shop. The shelves, the signage, the arrangement of goods, and the counter where you make payment are all part of what you experience directly. That visible, touchable side of the shop is similar to what front-end development produces for a website.

2. Back-End Development

Back-end development handles the parts of a website that users never see directly — the server, the database, and the logic that processes information behind the scenes. When a student submits a registration form on a school portal, the back end is responsible for checking the details, saving them to a database, and sending back a confirmation message.

Returning to the shop example, the back end is like the storeroom, the supplier arrangements, and the accounting records that keep the shop running, even though customers never walk into the storeroom themselves.

3. Full-Stack Development

A full-stack developer is someone who can work on both the front end and the back end. Rather than specialising in only the visible part or only the hidden part of a system, a full-stack developer understands how both sides connect and can build a complete web application largely on their own, or coordinate effectively with a team that does.

FUNCTIONS OF CORE TECHNOLOGIES FOR WEB DEVELOPMENT

Three core technologies work together to bring most websites to life: HTML, CSS, and JavaScript. Each one performs a distinct role, and understanding the difference between them is one of the most important foundations in web development.

Hyper-Text Markup Language (HTML)

HTML is used for structuring a web page. It defines what content appears on the page and how that content is organised — headings, paragraphs, images, links, and lists. Think of HTML as the skeleton or the bare frame of a building: the walls, the rooms, and the doorways, before any paint, tiles, or furniture are added. Without HTML, a browser would have no content to display at all.

Cascading Style Sheets (CSS)

CSS is used for styling. It controls how the HTML content looks — its colours, fonts, spacing, and overall layout. If HTML is the frame of a building, CSS is the paint, tiles, curtains, and interior decoration that make the building pleasant to look at and easy to navigate. A page built only with HTML would display correctly, but it would appear plain, with no styling of colour, size, or arrangement.

JavaScript (JS)

JavaScript is used for interactivity. It allows a web page to respond to user actions — for example, showing a dropdown menu when a user clicks a button, validating a form before it is submitted, or updating information on the page without needing to reload it entirely. If HTML is the frame and CSS is the decoration, JavaScript is what makes the doors open, the lights switch on, and the elevator move when someone presses a button.

Together, these three technologies allow a browser to display a page (HTML), make it visually appealing (CSS), and make it respond to user actions (JavaScript).

WEB DEVELOPMENT TOOLS

Developers do not write every website from a blank page using only their memory. They rely on tools that make the process faster, more organised, and less error-prone.

Web Builders

Web builders are platforms that allow people to create websites by dragging and dropping elements, without writing code directly. Examples include Wix and Canva's website builder. These are useful for individuals or small businesses — for example, a Nigerian tailor who wants a simple online catalogue — who need a functional website quickly without hiring a developer.

Content Management Systems (CMS)

A content management system is software that allows users to create, manage, and update website content through a simple dashboard, without needing to write code for every change. WordPress is the most widely used example, powering everything from personal blogs to large news websites. A CMS is particularly useful for websites that are updated frequently, such as a school's news page or an examination-updates blog, because new content can be published in minutes.

Text-Based Coding

Text-based coding involves writing the actual HTML, CSS, and JavaScript instructions directly, usually inside a code editor such as Visual Studio Code or Sublime Text. This approach gives a developer complete control over how a website looks and behaves, since nothing is hidden behind drag-and-drop templates. It requires more skill and patience than web builders, but it is the approach used to build most professional, custom web applications.

A COMMON MISCONCEPTION

Many students assume that anyone who can design a beautiful poster in an app like Canva can automatically build a website. This is not accurate. Designing a visual layout is only part of the picture. Turning that design into a working website requires knowledge of HTML, CSS, and often JavaScript, along with an understanding of how browsers and servers communicate — skills that fall squarely within web development.

WHY THIS MATTERS BEYOND THE CLASSROOM

Web development is one of the fastest-growing career paths available to Nigerian students today. Many young Nigerians have built successful careers, and even businesses, entirely around building websites and web applications for schools, churches, small businesses, and government agencies — often working remotely for clients outside the country. A student who understands the basics covered in this lesson has taken the first step toward a skill that can be developed further through practice, online courses, and eventually paid work, without necessarily requiring a large amount of capital or equipment beyond a computer and internet access.

CLASSROOM AND HOME ACTIVITIES

  1. Visit three websites you use regularly (for example, your school's website, a news site, and a shopping site) and decide whether each one behaves more like a plain website or a web application. Justify your answer.
  2. With a partner, list all the things you can see on a website's homepage (buttons, images, menus) and separate them into "things a front-end developer would build" and "things a back-end developer would build."
  3. If you have access to a computer, open a blank document and try writing out, in plain English, what instructions you would give to structure a simple "About Me" page (this mirrors how HTML organises content, even without writing actual code).
  4. Discuss in class: why might a school prefer to use a content management system like WordPress instead of paying a developer to write code for every small update to its website?

QUICK REFERENCE

  • Web development = building and maintaining websites and web applications.
  • Website = mainly informational; Web application = interactive and task-based.
  • Front-end = what users see; Back-end = what runs behind the scenes; Full-stack = both.
  • HTML = structure; CSS = styling; JavaScript = interactivity.
  • Tools: web builders (e.g. Wix), CMS (e.g. WordPress), text-based coding (e.g. VS Code).

ASSESSMENT

Objective Questions

  1. Web development is best described as: (a) Designing posters for social media (b) Building and maintaining websites and web applications (c) Repairing computer hardware (d) Installing an operating system 

  2. Which of the following is an example of a web application rather than a plain website? (a) A school's information page (b) A blog about examination tips (c) An online banking portal (d) A page showing a company's history 

  3. Which core technology is responsible for the structure of a web page? (a) CSS (b) JavaScript (c) HTML (d) A web builder 

  4. A developer who can work on both the visible and hidden parts of a website is called a: (a) Front-end developer (b) Back-end developer (c) Full-stack developer (d) Graphic designer 

  5. Which of the following is a content management system? (a) JavaScript (b) WordPress (c) HTML (d) CSS 

Theory Questions

  1. Explain the difference between a website and a web application, using one Nigerian example for each.
  2. Describe the three types of web development, and explain how they work together to produce a complete website.
  3. A friend tells you that CSS and JavaScript do the same job on a website. Correct this misunderstanding by explaining the specific function of each.

FREQUENTLY ASKED QUESTIONS

Is web development the same as web design? No. Web design focuses on appearance and layout, while web development covers the wider process of building the site so that it actually functions, including its structure and interactivity.

Do I need to know all three types of web development to build a website? Not necessarily. Many developers specialise in just front-end or back-end work. However, understanding all three types helps you know how a website is put together and where your interests might fit.

Can I build a website without learning to code? Yes, to an extent. Web builders and content management systems like WordPress allow people to create functional websites without writing HTML, CSS, or JavaScript directly, although custom or advanced features often still require coding knowledge.

Which should I learn first: HTML, CSS, or JavaScript? Most learners start with HTML because it provides the structure that CSS and JavaScript are later applied to. After HTML, CSS is usually learned next, followed by JavaScript.

Is web development a good career option in Nigeria? It is one of the more accessible technology careers, since it mainly requires a computer, internet access, and consistent practice. Many Nigerian web developers work for local and international clients, including remotely.

What is the difference between a CMS and a web builder? A web builder typically focuses on designing a site visually with drag-and-drop tools, while a CMS is broader software for managing and publishing content, often used for sites that are updated frequently, such as blogs and news platforms.

Understanding web development gives you a working picture of what happens behind every website and app you use daily. As you move forward in this course, you will begin exploring HTML, CSS, and JavaScript in greater depth — the very technologies this lesson introduced as the building blocks of the web.

I am Echofu George Adah, the Pioneer of Digital Tech Note and the Founder and Chief Executive Officer of GeoWeb Technologies Limited, an information technology company committed to providing cutting-edge ICT solutions.