JSS3 – Web & Python Foundations

Term 1: HTML & CSS Web Design

Students learn the building blocks of every website on the internet — HTML for structure and CSS for styling. By the end of this term, every student will have built and published their first real webpage!

Write valid HTML Style with CSS Build a multi-page site Understand the DOM Publish a webpage

How the Internet Works & Introduction to HTML

Servers, clients, browsers, and your first HTML tags

✓

▼

How Websites Actually Work

When you type a URL like "www.zeeqtech.com" in your browser, here's what happens in milliseconds:

1. Your computer (the client) sends a request over the internet
2. A DNS server translates the domain name to an IP address (like 142.250.80.14)
3. The web server receives the request and sends back the HTML, CSS, and JavaScript files
4. Your browser reads those files and renders (displays) the webpage

🌍 Fun Fact: There are over 1.9 billion websites on the internet! Every single one is built with HTML. When you right-click any webpage and select "View Page Source," you see the actual HTML code that makes it work.

What is HTML?

HTML (HyperText Markup Language) is the standard language for creating web pages. HTML uses tags — special labels in angle brackets — to describe the structure of content.

Your First HTML Page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Webpage</title>
</head>
<body>
  <h1>Hello, World! I am a Zeeqtech Student!</h1>
  <p>This is my first webpage. It will be amazing!</p>
</body>
</html>

Essential HTML Tags

<h1> to <h6> – Headings (h1 is biggest, h6 is smallest)
<p> – Paragraph of text
<a href="..."> – Hyperlink (clickable link)
<img src="..." alt="..."> – Image
<ul> / <ol> / <li> – Unordered/Ordered lists
<div> – Container/section block
<strong> – Bold text; <em> – Italic text
<br> – Line break; <hr> – Horizontal line

🌐 Project: My First Webpage!
Open Notepad (or VS Code if available), type the HTML template above, and modify it:

Change the title to your name
Add an <h1> with your name
Add a <p> paragraph about yourself
Add an <ul> list of your 5 favourite things
Add an <a> link to zeeqtech.com

Save as index.html and open in Chrome. You built a real webpage! 🎉

Q1. What does HTML stand for?

✅ HTML stands for HyperText Markup Language — the standard language for creating webpages.

Q2. Which HTML tag creates the LARGEST heading?

✅ <h1> creates the largest heading. HTML has headings from <h1> (biggest) to <h6> (smallest).

Q3. Which HTML tag is used to add a clickable link?

✅ The <a href="..."> tag creates a hyperlink. "href" is the attribute that contains the URL the link goes to.

CSS – Styling Your Webpage

Colours, fonts, layouts, and making it look amazing

✓

▼

What is CSS?

CSS (Cascading Style Sheets) is the language used to style and visually format HTML elements. While HTML provides the structure (skeleton), CSS provides the appearance (clothes and makeup).

How CSS Works

CSS rules have three parts: selector (what to style), property (what aspect to change), and value (what to change it to):

/* CSS Syntax: selector { property: value; } */

body {
  background-color: #f0f7ff;
  font-family: Arial, sans-serif;
  color: #2D3748;
}

h1 {
  color: #0066CC;
  font-size: 2rem;
  text-align: center;
}

p {
  line-height: 1.6;
  padding: 10px;
}

Key CSS Properties

color – Text colour
background-color – Background colour
font-size – Text size (px, rem, em)
font-family – Font type (Arial, Times, etc.)
padding – Space inside an element
margin – Space outside an element
border – Outline around an element
width / height – Size of an element
text-align – left, center, right, justify
border-radius – Rounded corners

🎨 Colour in CSS: You can specify colours as names (red, blue), hex codes (#FF6B35), or RGB values (rgb(255, 107, 53)). Use a colour picker tool to find your perfect colours!

🎨 Style Your Webpage!
Add a <style> section to your HTML from Module 1 and style it:

Give the body a background colour (not white)
Change the h1 colour to your favourite colour
Make the font bigger (font-size: 1.5rem)
Add padding to your paragraphs
Add a coloured border to your list
Center your heading with text-align: center

Bonus Challenge: Make a "card" using a div with background-color, padding, border-radius, and a box-shadow.

Q1. What does CSS stand for?

✅ CSS stands for Cascading Style Sheets — the language that styles and formats HTML pages.

Q2. Which CSS property changes the colour of TEXT?

✅ The color property changes the text colour. Use background-color to change the background instead.

Q3. What is the difference between padding and margin in CSS?

✅ Padding is the space INSIDE an element (between content and border). Margin is the space OUTSIDE an element (between elements). A helpful memory trick: think of a picture frame — padding is the inner mat, margin is the wall space!

Term 2: Introduction to Python Programming

Python is the world's most popular programming language — used for web development, data science, AI, and automation. Students write their first real programs, learning variables, conditions, loops, and functions.

Write Python syntax Use variables & data types Write loops & conditions Create simple programs Solve real problems

Introduction to Python: Variables & Data Types

Your first Python program, variables, strings, numbers, and booleans

✓

▼

Why Python?

Python is used by Google, NASA, Netflix, Instagram, and thousands of Nigerian tech companies. It's the #1 language for AI and data science, and one of the easiest to learn. Once you know Python, you can build almost anything!

Your First Python Program

# My first Python program
# The # symbol starts a comment — Python ignores it

print("Hello, World!")
print("My name is a Zeeqtech coder!")
print("I am learning Python! 🐍")
        

Variables

A variable stores a value. In Python, you just write the name and assign a value — no need to declare a type!

# Creating variables
name = "Amara"          # String (text)
age = 14                # Integer (whole number)
height = 1.65           # Float (decimal number)
is_student = True       # Boolean (True or False)

print("My name is", name)
print("I am", age, "years old")
        

Data Types in Python

str (String) – Text: "Hello", "Nigeria", "12345"
int (Integer) – Whole numbers: 5, 100, -42
float (Float) – Decimal numbers: 3.14, 9.99, -0.5
bool (Boolean) – True or False only
list – Collection of items: [1, 2, 3] or ["apples", "oranges"]

💡 Getting User Input: Use input() to ask the user a question!
name = input("What is your name? ")
print("Hello,", name, "!")

🐍 Project: Personal Profile Generator!
Write a Python program that:

Asks the user for their name, age, school, and favourite subject
Stores each answer in a variable
Prints a nicely formatted profile card using all the variables
Calculates and prints: "You will be [age+1] years old next year!"

Run in Python (IDLE, Replit.com, or Google Colab — all free!)

Q1. In Python, what symbol do you use to start a comment?

✅ In Python, the # symbol starts a comment. Python ignores everything on that line after #. Used to explain your code!

Q2. What data type is the value "Nigeria" in Python?

✅ "Nigeria" is a str (string) — any text (words, sentences, characters) in quotes is a string in Python.

Q3. What does the print() function do in Python?

✅ The print() function displays output (text, numbers, variables) on the screen. It's the first function every Python programmer learns!

Python: Conditions (if/elif/else) & Loops

Making decisions and repeating actions in Python

✓

▼

If / Elif / Else

Conditions let your program make decisions. The indentation (spaces) in Python is critical — it defines what's inside the if block.

score = 75

if score >= 70:
    print("Excellent! You passed with distinction!")
elif score >= 50:
    print("Good job! You passed.")
elif score >= 40:
    print("You passed. Keep working harder!")
else:
    print("You failed. Please study more.")
        

For Loops

A for loop repeats code for each item in a sequence:

# Print numbers 1 to 5
for i in range(1, 6):
    print("Number:", i)

# Loop through a list
subjects = ["Maths", "English", "ICT", "Science"]
for subject in subjects:
    print("I study", subject)
        

While Loops

# Keep asking until correct answer
answer = ""
while answer != "Zeeqtech":
    answer = input("Name a great Nigerian tech company: ")
print("Correct! 🎉")
        

⚠️ Indentation Warning: Python uses indentation (4 spaces or 1 tab) to define code blocks. Unlike most languages, Python will CRASH if your indentation is wrong. Always indent consistently!

🐍 Project: Grade Calculator!
Write a Python program that:

Asks the user to enter marks for 5 subjects
Calculates the average using a loop
Uses if/elif/else to give a grade: A (70+), B (60-69), C (50-59), D (40-49), F (below 40)
Prints a report card showing all marks, average, and final grade

Q1. What is CRUCIAL about code structure in Python?

✅ Indentation is crucial in Python — it defines what code belongs inside an if block, loop, or function. Wrong indentation causes errors!

Q2. What does range(1, 6) in a for loop produce?

✅ range(1, 6) produces 1, 2, 3, 4, 5. The range stops BEFORE the end value (6). range(1, 6) = from 1 up to (but not including) 6.

Term 3: Data, Content & Final Projects

Students apply their web and Python skills to real data, learn content creation for the digital economy, and complete their JSS3 capstone projects before the Junior Startup Challenge.

Analyse data with Excel Create charts & graphs Build a portfolio website Write Python data programs Complete startup pitch

Data Analysis with Excel/Google Sheets

Charts, pivot tables, and drawing insights from data

✓

▼

Data Analysis — Why It Matters

Data is the new oil. Companies like Facebook (Meta), Google, and Flutterwave make billions by understanding their users' data. Even small businesses in Nigeria use data to decide what products to stock, when to offer discounts, and which marketing works.

Advanced Excel/Sheets Functions

=IF(condition, value_if_true, value_if_false) – Logic in spreadsheets
=COUNTIF(range, criteria) – Count cells that match a condition
=VLOOKUP(value, table, column, 0) – Look up data in a table
=CONCATENATE() – Join text from multiple cells

Charts & Visualisation

A chart transforms rows of numbers into a visual story. Choose the right chart type:

Bar/Column Chart – Comparing categories (sales by product)
Line Chart – Trends over time (monthly sales)
Pie Chart – Parts of a whole (market share)
Scatter Plot – Relationship between two variables

📊 Data Project: School Survey Analysis
Conduct a survey of 20 classmates asking: favourite subject, hours of daily study, phone usage hours. Enter the data into Excel/Sheets. Create:

A bar chart of favourite subjects
Averages of study hours and phone usage
A written conclusion: "What did the data tell us?"

Q1. Which chart type is BEST for showing trends over time?

✅ A Line Chart is best for showing trends over time — e.g., how monthly sales changed over a year. The line connects data points to show direction and rate of change.

🏆 Junior Startup Challenge — JSS3

This is the biggest event of your junior secondary school journey! Teams of 2-3 students develop a complete tech business concept and present it to a panel of judges. Winners may be selected for Zeeqtech's mentorship program!

Full business concept Tech prototype/demo Financial projections Professional pitch

🏆 Challenge Requirements

Each team must deliver a complete startup package. You have the whole term to research, build, and refine. This is about applying EVERYTHING you've learned — web, Python, data, and entrepreneurship thinking.

📋

Business Plan (2 pages)

Problem, solution, target market, revenue model, competitive advantage, and 1-year goals.

🌐

Tech Demo

A working HTML/CSS webpage OR a Python program that demonstrates your product concept. Must be REAL and working!

📊

Pitch Deck (8 slides)

Problem → Solution → Market → Product → Revenue → Team → Milestones → The Ask. Designed in Canva or Google Slides.

🎤

5-Minute Pitch

Present to judges. 5 minutes pitch + 3 minutes Q&A. All team members must speak. Practice until it's perfect!

💡 Junior Startup Challenge Ideas (Nigerian Context)

Stuck on an idea? Here are real problems Nigerian students have identified that tech can solve:

📚

EduConnect

Platform connecting JSS/SS students with affordable tutors in their local area via WhatsApp integration.

🌾

AgriAlert

A simple app that sends weather and pest alerts to smallholder farmers via SMS in local languages.

🛒

LocalMart

A website/app helping market traders in Nigeria list products online so customers can order before coming.

🏥

HealthTrack

A simple Python program/web tool to help patients track medication schedules and doctor appointments.

📋 Tutor Notes – Junior Startup Challenge

Timeline

Week 1-2: Team formation & idea selection
Week 3-5: Research & business plan writing
Week 6-8: Build the tech demo
Week 9-10: Pitch deck & practice
Week 11: Pitch Day!

Judging Criteria

Problem clarity (20%)
Solution innovation (25%)
Tech demo quality (25%)
Business viability (15%)
Presentation quality (15%)

Prizes & Recognition

1st place: Zeeqtech mentorship spot
Top 3: Certificates + showcase on Zeeqtech website
All teams: "Junior Tech Entrepreneur" certificate
Invite parents/community to Pitch Day!

🌐 Web & PythonFoundations