Web Design I

 

Web Design I for: Complete Beginner's Guide to HTML and CSS

---

INTRODUCTION

Every time you visit a website — whether it is the JAMB portal, a school result-checking platform, or even a news site like Vanguard or Punch — someone had to sit down and build that page. Someone wrote the code that made it look the way it does, placed the text where it appears, and chose the colours you see on your screen. That person is a web designer, and the journey to becoming one starts with exactly what you are about to learn today.

In SSS 2, the Nigerian NERDC curriculum introduces students to Web Design I, which focuses on the fundamentals of HTML and CSS. These two technologies are the bedrock of everything you see on the internet. Without them, there would be no web pages, no online forms, no school portals, no e-commerce stores — nothing.

Nigeria's technology industry is growing rapidly. According to various reports, Nigeria consistently ranks among the top countries in Africa for technology startups and digital businesses. Cities like Lagos, Abuja, and Port Harcourt are producing software developers, UI designers, and digital entrepreneurs at an impressive pace. Learning web design in school gives you a foundation that can eventually lead to a career, a freelance income, or the ability to build something that solves a problem in your community.

This lesson note covers everything you need to know about Web Design I for your SSS 2 class — from understanding what HTML and CSS are, to writing your first lines of code, to seeing how these skills apply in the real world around you.

---

LEARNING OBJECTIVES

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

1. Define web design, HTML, and CSS in their own words.
2. Identify and explain the basic structure of an HTML document.
3. Describe the function of common HTML tags such as headings, paragraphs, links, and images.
4. Explain what CSS is and how it is used to style a web page.
5. Demonstrate how to apply basic CSS styles including colour, font, and layout changes.
6. Relate the importance of web design skills to real-life opportunities in Nigeria's growing digital economy.

---

 WHAT IS WEB DESIGN?

Web design is the process of planning, creating, and arranging content on a website. It involves decisions about layout, colour, fonts, images, and how everything fits together so that visitors can find information easily and enjoy using the site.

Think of it this way. If your school wants to create a website where students can check their timetable, read school news, and contact teachers, someone needs to design that website. They need to decide where the school logo goes, what colour the background should be, how the menu should look, and where students click to find what they need. All of that is web design.

There are two sides to web design. The first is the structure — deciding what content appears on the page and how it is organised. The second is the presentation — deciding how that content looks. HTML handles the structure. CSS handles the presentation.

Web design is different from web development, though many people use the terms together. Web development refers more to the programming logic behind a website — things like databases, user login systems, and server operations. Web design focuses on what users actually see and experience.

---

 INTRODUCTION TO HTML

What is HTML?

HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on web pages. Every website you have ever visited was built using HTML as its foundation.

The word "markup" is important here. HTML does not work like a programming language that calculates or makes decisions. Instead, it marks up content — it labels parts of your text so the web browser knows what each part is. For example, you tell the browser "this is a heading," "this is a paragraph," "this is an image," or "this is a link." The browser then reads those labels and displays the content accordingly.

HTML was created by Tim Berners-Lee in 1991, and it has been updated several times since then. The version used today is HTML5, which was designed to work smoothly on mobile phones, tablets, and computers — all of which Nigerian students use daily.

Understanding HTML Tags

HTML works through tags. A tag is a short keyword written inside angle brackets, like this: less-than sign, keyword, greater-than sign. Most tags come in pairs — an opening tag and a closing tag. The closing tag has a forward slash before the keyword.

For example, the paragraph tag opens with p inside angle brackets and closes with /p inside angle brackets. Whatever text you place between those two tags becomes a paragraph on the page.

Here are the most common HTML tags every SSS 2 student should know:

The DOCTYPE Declaration: This is always the very first line of an HTML document. It tells the browser that the document is written in HTML5. It is written as an exclamation mark followed by DOCTYPE and then HTML, all inside angle brackets.

The html Tag: This tag wraps around your entire web page. Everything else goes inside it.

The head Tag: This section contains information about the page that does not appear directly on screen — things like the page title, links to stylesheets, and character settings.

The title Tag: Whatever you type inside the title tag appears on the browser tab when someone opens your page. For example, if you are building a school website, you might write something like "Greenfield Secondary School — Welcome."

The body Tag: This is where all the visible content of your page lives — your headings, paragraphs, images, links, tables, and everything the visitor sees.

The h1 to h6 Tags (Headings): HTML has six levels of headings. h1 is the largest and most important — usually the main title of the page. h2 is used for major subheadings, h3 for smaller ones, and so on down to h6. Using headings correctly not only organises your content but also helps search engines like Google understand what your page is about.

The p Tag (Paragraph): Every block of regular text on a web page is placed inside a p tag. Each paragraph you write should have its own opening and closing p tag.

The a Tag (Anchor/Link): This is how you create clickable links on a web page. Inside the opening a tag, you include an href attribute that tells the browser where the link should go. For example, you can link to another page on your website or to an external site like the WAEC portal.

The img Tag (Image): This tag adds an image to your page. It is a self-closing tag, meaning it does not need a separate closing tag. It includes an src attribute that points to the image file and an alt attribute that describes the image for people who cannot see it.

The ul and ol Tags (Lists): ul creates an unordered (bullet point) list, while ol creates an ordered (numbered) list. Each item in the list goes inside an li tag.

The table Tag: Tables are used to display data in rows and columns, similar to a spreadsheet. Inside the table tag, you use tr for rows, th for header cells, and td for regular data cells.

The Structure of a Basic HTML Document

Every HTML document follows the same basic structure. It starts with the DOCTYPE declaration, followed by the html tag, which contains two sections — the head and the body. The head holds background information about the page, and the body holds all the content visitors see.

When you open a text editor like Notepad on Windows or TextEdit on a Mac and type out this structure, then save the file with the extension .html, you can open it in any browser and see your web page displayed.

---

HTML GENERAL STRUCTURE

Every HTML document follows this skeleton:

html

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page Title Here</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>

    <header>
      <h1>Website Name or Logo</h1>
      <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </nav>
    </header>

    <main>
      <h2>Main Heading</h2>
      <p>Your paragraph text goes here.</p>

      <section>
        <h3>Sub Section</h3>
        <p>More content here.</p>
      </section>
    </main>

    <footer>
      <p>&copy; 2025 Your Name. All rights reserved.</p>
    </footer>

  </body>

</html>

What each part does:

• <!DOCTYPE html> — Tells the browser this is an HTML5 document
• <html> — The root element that wraps everything
• <head> — Holds invisible page info (title, links, settings)
• <body> — Holds everything the visitor actually sees
• <header> — Top section (logo, navigation)
• <main> — The core content area
• <section> — Groups related content together
• <footer> — Bottom section (copyright, links)

A Simple Real-Life Example

Imagine you are a student at Covenant Academy in Ibadan, and your computer teacher asks you to create a simple web page about your school. You would create a title in the head section, then use h1 in the body for the school name, h2 for section names like "About Our School" and "Our Mission," and p tags for each block of descriptive text. You might add an img tag to display the school logo and an a tag linking to the school's social media page. That is a complete, working web page — and it is built entirely with HTML.

---

SECTION 3: INTRODUCTION TO CSS

What is CSS?

CSS stands for Cascading Style Sheets. While HTML tells the browser what content to show, CSS tells the browser how that content should look. CSS is responsible for colours, fonts, spacing, borders, backgrounds, sizes, and layouts.

Without CSS, every web page would look like a plain text document — black text on a white background with no design whatsoever. CSS is what turns that plain structure into something visually appealing and professional.

The word "cascading" in the name refers to the way styles flow down and override each other. If you set a general style for the whole page and then a more specific style for one element, the specific one takes priority. This gives you flexible control over your design.

How CSS Works: Selectors, Properties, and Values

CSS is written in rules. Each rule has three parts:

The selector identifies which HTML element you want to style. For example, if you want to style all paragraphs, your selector is p. If you want to style all h2 headings, your selector is h2.

The property is the aspect of the element you want to change — things like colour, font-size, background-color, margin, or padding.

The value is what you want that property to be set to. For example, if the property is colour, the value might be the word "green" or a colour code like #008000.

A CSS rule is written with the selector first, then a pair of curly brackets. Inside the brackets, you write the property name, a colon, the value, and a semicolon.

The Three Ways to Add CSS to HTML

Inline CSS: You write the style directly inside the HTML tag using the style attribute. This method is quick but not recommended for large projects because it becomes messy and hard to manage.

Internal CSS: You write your CSS inside a style tag placed in the head section of your HTML document. This keeps your styles in one place within the same file, which is better for single-page designs.

External CSS: You write all your styles in a separate file with the .css extension and link it to your HTML document using a link tag in the head section. This is the most professional and widely used method because it allows one stylesheet to control the appearance of many pages at once.

Common CSS Properties Every SSS 2 Student Should Know

color — Changes the colour of text. background-color — Changes the background colour of an element or the whole page. font-family — Sets the typeface (font) for text. Common choices include Arial, Georgia, and Times New Roman. font-size — Controls how large or small text appears. You can use pixels (px), percentages, or em units. font-weight — Makes text bold or normal. text-align — Aligns text to the left, right, centre, or justified. margin — Controls the space outside an element, pushing it away from other elements. padding — Controls the space inside an element, between its content and its border. border — Adds a visible line around an element. width and height — Set the size of an element.

A Real-Life CSS Example

Suppose you built that school website for Covenant Academy. Right now it looks plain. You want the school name at the top to appear in dark green (to match the school's colours), the body text to be a readable size, and the background of the page to be a light cream colour. All of that is done with CSS. You write a rule targeting the body element to set the background colour and font size. You write a rule targeting h1 to set the colour to dark green. You write a rule targeting p to control the line spacing for easier reading. In just a few lines of CSS, the page transforms from plain to polished.

CSS GENERAL STRUCTURE

Every CSS file or style block follows this pattern:

css

/* ── Global Reset ── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── Body / Page Defaults ── */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background-color: #ffffff;
  color: #333333;
}

/* ── Headings ── */
h1 {
  font-size: 32px;
  color: #1a6b3a;
  margin-bottom: 10px;
}

h2 {
  font-size: 24px;
  color: #444444;
}

/* ── Paragraphs ── */
p {
  font-size: 16px;
  margin-bottom: 15px;
}

/* ── Links ── */
a {
  color: #0077cc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ── Layout ── */
header {
  background-color: #1a6b3a;
  color: white;
  padding: 20px;
  text-align: center;
}

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px 20px;
}

footer {
  background-color: #f1f1f1;
  text-align: center;
  padding: 15px;
  font-size: 13px;
}

The CSS rule formula is always:

selector {
  property: value;
}

• Selector — what you are targeting (e.g. h1, p, body)
• Property — what you want to change (e.g. color, font-size)
• Value — what you want to set it to (e.g. red, 20px)

---

How HTML and CSS connect:

There are three ways to attach CSS to HTML:

1. External (best practice) — separate .css file linked in the <head>
2. Internal — <style> block written inside the <head>
3. Inline — style written directly on a tag like <p style="color:red;">

---

 PRACTICAL APPLICATIONS OF HTML AND CSS IN NIGERIA

Web design is not just a classroom exercise. It has real, concrete uses in Nigerian society today:

School Portals and Result Checkers: Many Nigerian private schools build their own portals where students log in to check results, download timetables, or read announcements. These portals all begin with HTML and CSS.

Church and Religious Organisation Websites: Churches, mosques, and other religious organisations in Nigeria use websites to share sermon notes, announce events, and reach members online. Many of these sites were built by young Nigerians who learned web design.

Small Business Websites: A tailor in Oshogbo, a bakery in Enugu, or a phone repair shop in Kano can attract more customers by having a website that shows their services and contact information. HTML and CSS are all that is needed for a basic business website.

Student Portfolios: Many Nigerian students who want to study abroad or apply for scholarships create personal portfolio websites to showcase their academic achievements, certificates, and skills. Knowing HTML and CSS means you can build that portfolio yourself.

Freelance Income: Platforms like Fiverr and Upwork have Nigerian freelancers earning in dollars by building simple websites for clients around the world. It starts with learning exactly what you are studying now.

NGO and Community Websites: Non-governmental organisations working on health, education, and poverty issues in Nigeria use websites to share their work and attract donors. Students who know web design can volunteer their skills or find employment with these organisations.

---

 ADVANTAGES AND DISADVANTAGES OF WEB DESIGN KNOWLEDGE

Advantages:

It is a marketable and increasingly in-demand skill in Nigeria and globally. It gives you the ability to build something real — a website you can show to people. It forms the foundation for learning more advanced web technologies like JavaScript and PHP. It supports entrepreneurship — you can build a business website without paying someone else. It improves your logical thinking and attention to detail. It prepares you for further study in Computer Science, Information Technology, or related fields.

Disadvantages:

Learning web design takes consistent practice. Reading about it is not enough — you must write code regularly. Without a computer or internet access, practising at home can be difficult. This is a genuine challenge for many Nigerian students. The field changes quickly. New tools and best practices emerge regularly, meaning you need to keep updating your knowledge. Poor design choices — like clashing colours or unreadable fonts — can make a website worse than having none at all. Good taste matters alongside technical skill.

---

SAFETY AND ETHICAL CONSIDERATIONS IN WEB DESIGN

As you learn to create websites, it is important to understand your responsibilities as a web creator:

Do not plagiarise other people's designs or content. Taking someone else's CSS code or copying images from their website without permission is unethical and, in many cases, illegal. Always use original content or properly licensed materials.

Be truthful about what your website represents. Creating a website that pretends to be a bank, school, or government agency to deceive people is a form of cybercrime called phishing. In Nigeria, this is prosecuted under the Cybercrimes (Prohibition, Prevention, etc.) Act of 2015.

Protect your visitors' privacy. If you ever create a website that collects information from users — like a contact form — you have a responsibility to keep that information safe and not share it without consent.

Design for everyone. Consider people with visual impairments when building websites. The alt attribute on images, for example, helps blind users who use screen readers understand what an image contains. Ethical web design includes thinking about accessibility.

Avoid spreading misinformation. If you create a website, the content you publish shapes what people believe. Always verify the information you share and present it honestly.

---

 CLASSROOM AND HOME ACTIVITIES

Activity 1 — Build Your First Web Page: Open Notepad (Windows) or any plain text editor. Type out a complete HTML document structure. In the body, add an h1 tag with your full name, an h2 tag with the name of your school, and three p tags describing yourself, your favourite subject, and your future career goal. Save the file as mypage.html and open it in a web browser. Take note of how the browser displays each element.

Activity 2 — Style Your Page with CSS: Using the same HTML file, add an internal style block inside the head section. Write CSS rules to change the background colour of the page, change the colour of your name in the h1 tag, increase the font size of your paragraphs, and add some padding to the body. Save and refresh your browser to see the changes.

Activity 3 — Nigerian Website Analysis: Visit any two Nigerian websites such as a news site, a school's website, or a government portal. Write down in your exercise book what you notice about the design — the colours used, how the headings are arranged, where the logo sits, and how easy or difficult the site is to navigate. Share your observations in class and discuss what you think could be improved.

Activity 4 — Create a Mini School Magazine Page: Design a simple web page that looks like the front page of your school magazine. Include the school name as h1, a "Headlines" section using h2, three short articles using h3 headings and p tags, and a footer with your name and the current year. Apply CSS to make the page look neat, readable, and appealing.

---

 ASSESSMENT QUESTIONS

Objective Questions:

1. What does HTML stand for? A. HyperText Markup Language B. High Transfer Method Link C. HyperText Modern Layout D. Home Tool Markup Language

2. Which HTML tag is used to create the largest heading on a web page? A. h6 B. h3 C. h1 D. head

3. CSS stands for: A. Creative Style Structure B. Cascading Style Sheets C. Coded Style System D. Computer Style Settings

4. Which of the following HTML tags is used to create a hyperlink? A. link B. href C. a D. url

5. Which CSS property is used to change the text colour of an element? A. text-color B. font-color C. colour D. color

Theory Questions:

1. Explain the difference between HTML and CSS. Use an example related to a Nigerian school website to support your explanation.

2. Describe the basic structure of an HTML document. Mention at least four tags that must be present and explain the function of each.

3. A student wants to create a personal website to showcase her academic awards and skills. Describe THREE ways CSS can be used to improve the appearance of her web page, and explain why web design skills are important for Nigerian young people today.

---

SUMMARY

Web design is the process of creating and arranging content on websites. HTML, which stands for HyperText Markup Language, provides the structure of a web page through the use of tags. These tags include elements like headings, paragraphs, links, images, and lists. Every HTML document follows a standard structure beginning with the DOCTYPE declaration and including the html, head, title, and body tags.

CSS, which stands for Cascading Style Sheets, controls the visual presentation of an HTML document. It uses selectors, properties, and values to apply styles such as colour, font, size, spacing, and layout. CSS can be added to a web page inline, internally within the head section, or externally through a separate stylesheet file.

Together, HTML and CSS form the foundation of web design. They are used to build school portals, business websites, personal portfolios, and almost every web page on the internet. Learning these technologies is a practical and valuable skill that opens doors to careers, freelance opportunities, and digital entrepreneurship in Nigeria.

---

CONCLUSION

The internet has become as essential to daily life in Nigeria as electricity and roads. Businesses, schools, hospitals, government agencies, and individuals all have a presence online, and that presence is built with web technologies — starting with HTML and CSS.

As an SSS 2 student, you are at exactly the right stage to begin this journey. The skills you develop in this Web Design I course will not expire. They will grow with you. Every professional web developer, every UI designer, and every technology entrepreneur who builds a website today once sat down to write their first HTML tag, just like you are doing now.

Take the activities in this lesson seriously. Open that text editor. Write the code. Make the mistakes. Fix them. Refresh the browser and see your page come alive. That moment — when you create something in a browser with your own hands — is where the real learning happens.

Nigeria needs more young people who can build digital things, not just consume them. Web design is your first step in that direction.

---

FREQUENTLY ASKED QUESTIONS (FAQ)

Q1. What is the difference between a web designer and a web developer? A web designer focuses on how a website looks — its layout, colours, fonts, and visual appeal. A web developer focuses on how a website works — the programming logic, databases, and server-side functions. Many professionals do both, but they are technically different roles.

Q2. Do I need a computer to learn HTML and CSS as an SSS 2 student in Nigeria? Ideally, yes, but it is not always possible for every student. If you have access to a school computer lab, use that time well. There are also mobile apps available on Android phones — such as Spck Editor and Acode — that allow you to write and preview HTML and CSS code directly from your phone. Many Nigerian students have used these tools to learn and build real projects.

Q3. Is HTML a programming language? Technically, no. HTML is a markup language, not a programming language. It does not have logic, conditions, or calculations. It simply labels content so that browsers know how to display it. CSS is also not a programming language — it is a styling language. JavaScript is the programming language of the web, and it is typically studied after HTML and CSS.

Q4. How long does it take to learn HTML and CSS? For a motivated student who practises regularly, the basics of HTML and CSS can be understood within a few weeks. However, becoming truly comfortable with them — especially CSS layouts and responsive design — takes several months of consistent practice. The good news is that you can build useful and attractive web pages very early in your learning journey.

Q5. Can I make money with web design skills in Nigeria? Yes, absolutely. Many Nigerian young people earn income by building websites for small businesses, churches, schools, and individuals. Platforms like Fiverr, Upwork, and LinkedIn allow you to find clients both within Nigeria and internationally. Starting rates for simple websites on freelance platforms range from small amounts to significant fees depending on your skill level and the complexity of the project.

Q6. What do I study after HTML and CSS? After learning HTML and CSS, the natural next step is JavaScript, which adds interactivity to web pages — things like pop-ups, form validation, animations, and dynamic content. After JavaScript, many students go on to learn frameworks like React or Vue, and back-end technologies like Node.js or PHP. There are also design tools like Figma that complement web design skills beautifully.

---

Published for Nigerian SSS 2 students in alignment with the NERDC Computer Studies curriculum. All content is original, educational, and suitable for classroom and online publication.