First Month week 1

Day One: Introduction to Software Development & HTML Basics

1. What is Software Development?

Software development is the process of creating, designing, and maintaining software applications. It involves writing code, testing, and improving software to meet user needs.

👉 Example: Developing a mobile app, website, or computer program.

2. How Software Development Works

Software development follows a process called the Software Development Life Cycle (SDLC):

Planning – Understanding the problem.
Designing – Creating a blueprint (wireframe, UI design).
Coding – Writing the actual program.
Testing – Checking for errors (bugs).
Deployment – Releasing the software for use.
Maintenance – Updating and fixing issues.

3. Software Needed for Software Development

To start coding, you need:

Text Editor – VS Code, Sublime Text, Notepad++.
Web Browser – Chrome, Firefox.
Programming Languages – HTML, CSS, JavaScript.
Local Server (optional) – XAMPP for PHP projects.

4. Introduction to Websites Using Coding

A website is a collection of web pages displayed on the internet.
To create a website, we use:

HTML (HyperText Markup Language) – Structure
CSS (Cascading Style Sheets) – Styling
JavaScript – Interaction & Functionality

5. How to Create and Edit an HTML Page

🔹 Open Notepad or VS Code
🔹 Type the following HTML code:

html

CopyEdit

<!DOCTYPE html>

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>Welcome to My Website</h1>

<p>This is my first webpage.</p>

</body>

</html>

🔹 Save the file as index.html
🔹 Open it in a web browser.

6. Introduction to Tags and Elements

🔹 Tags: Keywords in HTML that define elements.
🔹 Elements: The content enclosed within tags.

👉 Example:

html

CopyEdit

<p>This is a paragraph.</p>

<p> is a tag
This is a paragraph. is the content
<p>...</p> forms an element

7. Basic HTML Structure

Every HTML page follows this structure:

html

CopyEdit

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>Main Heading</h1>

<p>Paragraph content.</p>

</body>

</html>

🔹 DOCTYPE – Declares HTML version.
🔹 <html> – The root of an HTML document.
🔹 <head> – Contains metadata & title.
🔹 <body> – Contains the visible content.

8. Difference Between a Tag and an Element

Feature	Tag	Element
Definition	An HTML keyword enclosed in < >	A tag with content inside
Example	<h1>	<h1>Heading</h1>
Types	Opening & Closing tags	Empty or Container elements

9. How to Write HTML Tags and Elements

🔹 Always use opening and closing tags (<tag>content</tag>)
🔹 Some tags don’t need closing (<br>, <img>).

Example:

html

CopyEdit

<h2>This is a heading</h2>

10. HTML Tags and Their Functionality

Tag	Function
<h1> - <h6>	Headings (Largest to Smallest)
<p>	Paragraph
<a href="#">	Hyperlink
<img src="path.jpg">	Image
<ul> <li>	Unordered List
<ol> <li>	Ordered List
<table>	Table Structure

Class Activities:

Write & Save a simple HTML page.
Identify different HTML tags in an example.
Discuss how websites work using HTML.

Day One Assignment – Software Development & HTML Basics

Part A: Theory Questions

What is software development? Give two examples of software.
List and explain the six stages of the Software Development Life Cycle (SDLC).
Mention three tools/software needed to start coding.
Differentiate between:
a. A tag and an element in HTML.
b. An opening tag and a closing tag.
State the function of the following HTML tags:
- <h1>
- <p>
- <a>
- <img>
- <ul> and <ol>

Part B: Practical Tasks

Create a simple HTML page using Notepad or VS Code that contains:
- A main heading with your name.
- A paragraph about why you want to learn web development.
- An image (use any picture on your computer, e.g., image.jpg).
- A link to your favorite website.
👉 Save it as index.html and open it in your browser.
Write HTML code that creates:
- An unordered list of three fruits.
- An ordered list of three school subjects.
Identify HTML tags and elements in the following code (write which part is the tag, and which part is the element):
```
<h2>Welcome to Coding</h2>
<p>Coding makes websites work.</p>
```

Part C: Mini Project

Build a Simple Personal Profile Webpage that should include:

Your name as the main heading (<h1>).
A short paragraph about yourself.
A list of your hobbies (use <ul>).
A list of your three favorite subjects (use <ol>).
A picture (use <img>).
A link to any website you like (use <a>).

👉 Save it as profile.html.

Day Two: Anchor link and List Tags in HTML

1. Anchor Link (`<a>` Tag)

The anchor (<a>) tag is used to create hyperlinks in HTML.
Example:

html

CopyEdit

<a href="https://www.google.com">Visit Google</a>

🔹 href="URL" → Specifies the link destination.
🔹 Example (Linking to another page on your site):

html

CopyEdit

<a href="about.html">About Us</a>

🔹 Example (Link opening in a new tab):

html

CopyEdit

<a href="https://www.google.com" target="_blank">Visit Google</a>

List Tags in HTML

1. What are Lists in HTML?

Lists in HTML are used to display items in an organized way.
Each item in a list is written inside the <li> tag.

👉 Example:


<li>Apple</li>
<li>Banana</li>
<li>Orange</li>

2. Types of Lists in HTML

There are three main types of lists:

a. Ordered List (`<ol>`)

What: A numbered list.
Why: To show items in a sequence or ranking.
Where: Steps, instructions, or rankings.
How: Use <ol> and put list items inside <li>.

👉 Example:


<ol>
  <li>Wake up</li>
  <li>Brush teeth</li>
  <li>Eat breakfast</li>
</ol>

✅ Output:

Wake up
Brush teeth
Eat breakfast

b. Unordered List (`<ul>`)

What: A bulleted list.
Why: To show items without order.
Where: Hobbies, shopping lists, features.
How: Use <ul> and put list items inside <li>.

👉 Example:


<ul>
  <li>Football</li>
  <li>Reading</li>
  <li>Drawing</li>
</ul>

✅ Output:

Football
Reading
Drawing

c. Description List (`<dl>`)

What: A list that describes terms with definitions.
Why: To explain words or concepts.
Where: Glossaries, product details, FAQs.
How: Use <dl> (description list), <dt> (term), and <dd> (description).

👉 Example:


<dl>
  <dt>HTML</dt>
  <dd>The language for creating web pages.</dd>
  <dt>CSS</dt>
  <dd>Used for styling web pages.</dd>
</dl>

✅ Output:
HTML – The language for creating web pages.
CSS – Used for styling web pages.

3. Class Activities

Create an ordered list of your daily routine.

Create an unordered list of your five favorite foods.

Use a description list to explain three computer terms.

4. Mini Project

My Shopping List Page

Create an HTML page called `shopping.html`.

Add a heading: "My Shopping List".

Add an unordered list of 5 items to buy.

Add an ordered list of 3 steps to prepare for shopping.

Add a description list explaining at least 2 items (e.g., Rice – A staple food).

Day Three: Tables in HTML

Tables in HTML

1. What is a Table in HTML?

A table is a way of displaying data in rows and columns on a webpage.

👉 Example in real life: Student results, price lists, timetables.

2. Why Use Tables?

To arrange information neatly.

To make data easy to read.

To show comparisons.

3. Table Tags and Their Functions

Tag Meaning Function
`<table>` Table Starts and ends the table
`<tr>` Table Row Creates a new row
`<td>` Table Data Creates a data cell (normal cell)
`<th>` Table Header Creates a heading cell (bold and centered by default)
`<caption>` Table Caption Adds a title to the table
`<thead>` Table Head Groups the header rows
`<tbody>` Table Body Groups the main content rows
`<tfoot>` Table Footer Groups the footer rows

Tag	Meaning	Function
`<table>`	Table	Starts and ends the table
`<tr>`	Table Row	Creates a new row
`<td>`	Table Data	Creates a data cell (normal cell)
`<th>`	Table Header	Creates a heading cell (bold and centered by default)
`<caption>`	Table Caption	Adds a title to the table
`<thead>`	Table Head	Groups the header rows
`<tbody>`	Table Body	Groups the main content rows
`<tfoot>`	Table Footer	Groups the footer rows

4. Simple Table Example


<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Class</th>
  </tr>
  <tr>
    <td>John</td>
    <td>12</td>
    <td>JS1</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>13</td>
    <td>JS2</td>
  </tr>
</table>

✅ Output:

Name	Age	Class
John	12	JS1
Mary	13	JS2

5. Adding Caption to a Table


<table border="1">
  <caption>Student Details</caption>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Ada</td>
    <td>14</td>
  </tr>
</table>

6. Using `thead`, `tbody`, and `tfoot`


<table border="1">
  <thead>
    <tr>
      <th>Subject</th>
      <th>Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Math</td>
      <td>80</td>
    </tr>
    <tr>
      <td>English</td>
      <td>75</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>155</td>
    </tr>
  </tfoot>
</table>

7. Class Activities

Create a table of 5 friends showing their name, age, and favorite food.

Create a table with 3 rows and 3 columns showing your school subjects and marks.

Add a caption to the table saying "My School Report".

8. Mini Project

Student Report Table

Create an HTML page called `report.html`.

Add a table with these columns: Name, Mathematics, English, Science, Total.

Fill in the data for at least 3 students.

Add a caption: "Class Report Sheet".

Day four: Forms in HTML

1. What is a Form in HTML?

A form is used in HTML to collect input from users (like text, numbers, options).
👉 Example in real life: Login form, registration form, feedback form.

2. Why Use Forms?

To collect user data (name, email, password, etc.).

To allow interaction between users and websites.

Forms are the main way websites receive information from visitors.

3. Basic Form Tag

The main container is the <form> tag.


<form>
   <!-- form elements go here -->
</form>

4. Common Form Elements

Tag Meaning Example
`<input type="text">` Single-line text field Name, Username
`<input type="password">` Hidden characters Password
`<input type="email">` Email address field example@mail.com
`<input type="number">` Numbers only Age, Phone
`<input type="radio">` Select one option Gender (Male/Female)
`<input type="checkbox">` Select multiple options Hobbies
`<textarea>` Multi-line text Comments, Messages
`<select>` `<option>` Drop-down list Choose Country
`<button>` or `<input type="submit">` Button to send data Submit form

Tag	Meaning	Example
`<input type="text">`	Single-line text field	Name, Username
`<input type="password">`	Hidden characters	Password
`<input type="email">`	Email address field	example@mail.com
`<input type="number">`	Numbers only	Age, Phone
`<input type="radio">`	Select one option	Gender (Male/Female)
`<input type="checkbox">`	Select multiple options	Hobbies
`<textarea>`	Multi-line text	Comments, Messages
`<select>` `<option>`	Drop-down list	Choose Country
`<button>` or `<input type="submit">`	Button to send data	Submit form

5. Simple Form Example


<form>
  <label for="name">Name:</label>
  <input type="text" id="name" placeholder="Enter your name"><br><br>

  <label for="email">Email:</label>
  <input type="email" id="email" placeholder="Enter your email"><br><br>

  <label for="password">Password:</label>
  <input type="password" id="password"><br><br>

  <input type="submit" value="Submit">
</form>

✅ Output: A small form with fields for name, email, and password.

6. Radio Buttons Example


<p>Gender:</p>
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female

7. Checkbox Example


<p>Hobbies:</p>
<input type="checkbox" value="Reading"> Reading
<input type="checkbox" value="Football"> Football
<input type="checkbox" value="Drawing"> Drawing

8. Dropdown Example


<label for="country">Choose Country:</label>
<select id="country">
  <option value="nigeria">Nigeria</option>
  <option value="ghana">Ghana</option>
  <option value="kenya">Kenya</option>
</select>

9. Class Activities

Create a simple form with fields for Name, Age, and Email.

Add radio buttons for gender selection.

Add checkboxes for hobbies.

Add a submit button.

10. Mini Project

Student Registration Form

Create a page `register.html`.

Add fields for: Name, Email, Password, Age.

Add a radio button for Gender.

Add checkboxes for Hobbies.

Add a drop-down for Class (e.g., JSS1, JSS2, JSS3).

Add a Submit button.

Day 5 Project

Week Project: Student Profile Website

Project Title:

📌 My Personal Student Website

Project Requirements

Students should create a single website with the following sections:

1. Homepage (index.html)

Add a heading with your name (<h1>).
Add a paragraph introducing yourself.
Add an image (your photo or any picture).
Add a link to your email or a favorite website.

2. My Hobbies Page (hobbies.html)

Use an unordered list to show at least 5 hobbies.
Use an ordered list to show your daily routine.
Use a description list to explain at least 3 school subjects.

3. My School Report Page (report.html)

Create a table with columns: Subject, Score, Grade.
Add at least 5 subjects with scores.
Add a caption: "My Report Sheet".

4. Registration Page (register.html)

Create a form with these fields:
- Full Name (text)
- Age (number)
- Gender (radio buttons)
- Hobbies (checkboxes)
- Class (dropdown: JSS1, JSS2, JSS3)
- Submit button

Navigation (Optional Challenge)

👉 Add links at the top of each page so you can move between Homepage, Hobbies, Report, and Registration.

Example:


<a href="index.html">Home</a> | 
<a href="hobbies.html">Hobbies</a> | 
<a href="report.html">Report</a> | 
<a href="register.html">Register</a>

Expected Skills Used

Headings, Paragraphs, Links, and Images (HTML basics)
Ordered, Unordered, and Description Lists
Tables (rows, columns, headers, caption)
Forms (text, email, password, radio, checkbox, dropdown, submit)

Final Deliverable

By the end of the week, students should have a mini website with 4 pages connected together, showing they can use all the HTML basics.

Week Two Lesson Plan: HTML & CSS

Week 2: Introduction to CSS

Day 1: What is CSS?

Definition: CSS (Cascading Style Sheets) is used to style HTML elements (colors, fonts, layout).
Why CSS?
- Makes websites look attractive.
- Separates structure (HTML) from design (CSS).
Where is CSS used? Websites, web apps, online forms, etc.
How to use CSS?
1. Inline CSS – style inside an HTML tag.
```
<p style="color:blue;">This is blue text</p>
```
2. Internal CSS – style inside <style> in the <head>.
```
<style>
  p { color: green; }
</style>
```
3. External CSS – style in a separate .css file linked with <link>.
```
<link rel="stylesheet" href="style.css">
```

Activity: Write a paragraph in 3 different colors using inline, internal, and external CSS.

Day 2: CSS Selectors

Selectors tell CSS which element to style.

Element Selector
```
p { color: red; }
```
Changes all <p> to red.
ID Selector (#)
```
#special { color: blue; }
```
Targets one element with id="special".
Class Selector (.)
```
.highlight { background-color: yellow; }
```
Targets all elements with class="highlight".

Activity: Style headings with ID, paragraphs with class, and one with element selector.

Day 3: CSS Properties

Text Properties: color, font-size, font-family, text-align.
Background Properties: background-color, background-image.
Box Model: margin, padding, border.

👉 Example:


h1 {
  color: blue;
  text-align: center;
  background-color: lightgray;
  padding: 10px;
  border: 2px solid black;
}

Activity: Create a heading with border, padding, and background color.

Day 4: CSS Colors & Units

Colors: By name (red), HEX (#ff0000), RGB (rgb(255,0,0)), HSL.
Units:
- px (pixels, fixed size)
- % (relative size)
- em/rem (relative to font size)

👉 Example:


p { color: #008000; font-size: 20px; }

Activity: Write 3 paragraphs, each styled with different colors and font sizes.

Day 5: Mini Project

Student Profile (Styled with CSS)

Use the profile.html from Week 1.

Add background color to the page.

Style the heading (different color, center aligned, bigger font).

Style the paragraph with a font-family of your choice.

Style the image (border + width).

Add a button and style it (background, color, padding).

✅ Expected Outcome by End of Week 2

Students will:

Know what CSS is and why it is used.

Understand inline, internal, and external CSS.

Use selectors (element, ID, class).

Style text, backgrounds, and boxes.

Create a styled profile webpage.

Week Three Lesson Plan: Advanced HTML & CSS

Day One: Advanced Attributes in HTML & CSS

1. Introduction to Attributes and Values

Attributes provide additional information about HTML elements.
🔹 Example:

html

CopyEdit

<img src="image.jpg" alt="Sample Image">

<a href="https://www.google.com" target="_blank">Visit Google</a>

src: Specifies the image source.
alt: Alternative text for images.
href: Defines the link URL.
target="_blank": Opens the link in a new tab.

2. Typesetting in CSS

CSS provides properties for text styling:
🔹 Example:

css

CopyEdit

h1 {

    font-family: Arial, sans-serif;

    font-size: 24px;

    font-weight: bold;

    text-align: center;

    text-transform: uppercase;

3. Color in CSS

Colors can be added using names, HEX, RGB, or HSL.
🔹 Example:

css

CopyEdit

p { color: red; } /* Named color */

p { color: #ff0000; } /* HEX color */

p { color: rgb(255, 0, 0); } /* RGB */

4. Background Color and Image

🔹 Example:

css

CopyEdit

body {

    background-color: lightblue;

    background-image: url("background.jpg");

    background-size: cover;

week 3: Borders, Margins, and Padding in CSS

1. What is a Border?

A border surrounds an element.
🔹 Example:

css

CopyEdit

div {

    border: 2px solid black;

    border-radius: 10px;

2. What is Padding?

Padding is the space inside an element, between the content and the border.
🔹 Example:

css

CopyEdit

div {

    padding: 20px;

    background-color: lightgray;

3. What is Margin?

Margin is the space outside an element, creating distance from others.
🔹 Example:

css

CopyEdit

div {

    margin: 30px;

Day 2: Forms with Class and ID Selectors

1. Introduction to Class and ID Selectors

🔹 Class Selector: Applied to multiple elements.

css

CopyEdit

.form-input {

    border: 1px solid blue;

    padding: 5px;

html

CopyEdit

<input type="text" class="form-input">

🔹 ID Selector: Unique to one element.

css

CopyEdit

#submit-btn {

    background-color: green;

    color: white;

html

CopyEdit

<button id="submit-btn">Submit</button>

2. Form Attributes and Values

🔹 Common Attributes:

action: Defines where form data is sent.
method: Specifies HTTP method (GET or POST).
required: Makes input mandatory.

🔹 Example:

html

CopyEdit

<form action="submit.php" method="post">

    <input type="text" placeholder="Enter name" required>

    <button type="submit">Submit</button>

</form>

Day 3: Advanced CSS (Simple Teaching)

1. Box Model

What is it?
Every HTML element is like a box with:

Content (text/picture inside)
Padding (space between content and border)
Border (line around the box)
Margin (space outside the box).

👉 Example:


div {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
}

2. Position

What is it?
Position tells the browser where to place an element on the page.

static → default (normal position)
relative → move a little from normal position
absolute → placed anywhere inside parent box
fixed → stays on screen when scrolling
sticky → sticks when scrolling.

👉 Example:


.box {
  position: relative;
  top: 20px;
  left: 30px;
}

3. Flexbox

What is it?
A simple way to arrange items in a row or column.

👉 Example:


.container {
  display: flex;
  justify-content: space-around;
}
.item {
  width: 100px;
  height: 100px;
  background: lightblue;
}

4. Grid

What is it?
Grid helps us arrange items in rows and columns (like a table).

👉 Example:


.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.box {
  background: lightgreen;
  padding: 20px;
}

5. Small Project

👉 Create a Profile Card Page with:

A box (using box model) for the card.
Profile picture + name centered (using Flexbox).
Two sections (About & Skills) in columns (using Grid).
Footer fixed at the bottom (using position: fixed).

✅ By end of Week 3, students can control spacing, move elements, arrange items in rows/columns, and make a simple web layout.

Week Four Lesson Plan: Introduction to JavaScript

Day One: JavaScript Basics

1. Introduction to JavaScript

JavaScript is a programming language used to make web pages interactive.
🔹 Example:

<script>

    alert("Welcome to JavaScript!");

</script>

2. How to Use JavaScript with HTML

JavaScript can be added inside an HTML file using:

Inline JavaScript:

<button onclick="alert('Button Clicked!')">Click Me</button>

Internal JavaScript:

html

CopyEdit

<script>

    document.write("Hello, JavaScript!");

</script>

External JavaScript:

html

CopyEdit

<script src="script.js"></script>

3. Types of Rules in JavaScript

Syntax Rules: How JavaScript should be written.
Variable Naming Rules: Cannot start with a number.
Operators Rules: +, -, *, /, etc.

4. Variable Declaration and Assigning

🔹 Using var, let, and const:

var name = "John";  // Old way

let age = 25;       // Modern way

const PI = 3.14;    // Cannot be changed

 Student Tasks
Declare your name using var. Change it to another name and print both.
Declare your age using let. Try to redeclare it and see what happens.
Declare a constant value for gravity (9.8) using const. Try to change it.
Summarize the difference between var, let, and const in your notebook.

Day 2. Introduction to Functions

Step 1: Function Declaration(no PARAMETER)

function greet() {

console.log("Hello, welcome to JavaScript!");

}

greet(); // Call the function

✅ Observe: A function can be declared and then called to run the code inside.

🔹 Step 2: Function with Parameters

function greetUser(name) {

console.log("Hello " + name + ", nice to meet you!");

}

greetUser("John"); // Hello John, nice to meet you!

greetUser("Mary"); // Hello Mary, nice to meet you!

✅ Observe: Functions can take parameters (inputs).

🔹 Step 3: Function with Return Value

function add(a, b) {

return a + b;

}

let sum = add(5, 7);

console.log("The sum is: " + sum); // The sum is: 12

✅ Observe: Functions can return a value.

🎯 Student Tasks

Write a function called myName() that prints your name.
Write a function called square(number) that returns the square of a number.
Write a function called areaOfRectangle(length, width) that returns the area.
Write a function called greetUser(name) and call it with your name.

✅ Expected Output

Hello, welcome to JavaScript!

Hello John, nice to meet you!

Hello Mary, nice to meet you!

The sum is: 12

Day 3: Conditional Statements & Loops

1. `if` Statement

What is it?
The if statement checks if a condition is true.

Why?
We use it when we want some code to run only when a condition is met.

Where?

Checking if a user is old enough to register.
Checking if a password is correct.

How?


let age = 18;

if (age >= 18) {
    console.log("You are an adult.");
}

✅ If age >= 18, the message will display.

2. `if...else`

What is it?
It provides two choices: one if the condition is true, another if false.

Why?
Because sometimes we need to decide between two options (pass/fail, yes/no).

Where?

Pass or fail results.
Show login success or error.

How?


let mark = 45;

if (mark >= 50) {
    console.log("You passed!");
} else {
    console.log("You failed.");
}

✅ If mark is 50 or above → Passed. Otherwise → Failed.

3. `if...else if...else`

What is it?
It checks many conditions one after another.

Why?
We use it when there are more than two outcomes.

Where?

Grading students (A, B, C, Fail).
Setting ticket prices (child, adult, senior).

How?


let score = 75;

if (score >= 80) {
    console.log("Grade A");
} else if (score >= 60) {
    console.log("Grade B");
} else if (score >= 40) {
    console.log("Grade C");
} else {
    console.log("Fail");
}

✅ The program checks each condition until it finds the correct one.

4. `switch` Statement

What is it?
A cleaner way to choose between many fixed values.

Why?
It makes the code look neater than using many else if.

Where?

Days of the week.
Menu options in an app.

How?


let day = 3;

switch(day) {
    case 1: console.log("Monday"); break;
    case 2: console.log("Tuesday"); break;
    case 3: console.log("Wednesday"); break;
    default: console.log("Invalid day");
}

✅ The program matches the number to the correct day.

Day 4: LOOPS

1. `for` Loop

What is it?
A loop that repeats code a fixed number of times.

Why?
Because we don’t want to write the same code again and again.

Where?

Printing numbers from 1 to 100.
Showing all items in a shopping cart.

How?


for (let i = 1; i <= 5; i++) {
    console.log("Number: " + i);
}

✅ Runs 5 times and prints numbers 1 to 5.

2. `while` Loop

What is it?
A loop that runs as long as the condition is true.

Why?
When we don’t know how many times the loop should run in advance.

Where?

Asking for a correct password until entered.
Waiting for a task to finish.

How?


let i = 1;
while (i <= 5) {
    console.log("Count: " + i);
    i++;
}

✅ Keeps running until i is greater than 5.

3. `do...while` Loop

What is it?
A loop that runs at least once before checking the condition.

Why?
When you want the code to run at least once, even if the condition is false.

Where?

Showing a menu at least once.
Asking a question at least once.

How?


let x = 1;
do {
    console.log("Step: " + x);
    x++;
} while (x <= 5);

✅ Runs first, then checks the condition.

🎯 Student Tasks

Write a program using if...else to check if a number is even or odd.
Write a program using if...else if...else to grade marks:
- 70+ = A
- 50–69 = B
- 40–49 = C
- Below 40 = F
Use a for loop to print numbers 1 to 10.
Use a while loop to print numbers 10 down to 1.
Use a do...while loop to print your name 5 times

3. User Input and Basic Interactions

1. Using `prompt()` to Collect User Input

The prompt() function asks the user to type something.

Example:

let name = prompt("What is your name?");
alert("Welcome, " + name + "!");

How It Works:

prompt() opens a small input box.
The user types their name.
The result is stored in the name variable.
alert() shows the result.

2. Using `alert()` to Display Results

The alert() function shows messages to the user.

Example:

alert("JavaScript makes websites fun!");

3. Using `confirm()` for Yes/No Questions

The confirm() function asks a Yes/No question and returns true or false.

Example:

let like = confirm("Do you like JavaScript?");
if (like) {
    alert("That's great! Keep learning.");
} else {
    alert("Don't worry, you'll enjoy it soon!");
}

4. Performing Basic Calculations

We can use JavaScript to calculate numbers entered by the user.

Example – Simple Calculator:

let num1 = prompt("Enter first number:");
let num2 = prompt("Enter second number:");

num1 = Number(num1);
num2 = Number(num2);

let sum = num1 + num2;
alert("The sum is: " + sum);

5. Mini Project – Shopping Bill Calculator

Goal: Create a program where the user enters product prices, and the total bill is displayed.

Step-by-Step Code:

// Step 1: Ask the user for three product prices
let item1 = Number(prompt("Enter price of item 1:"));
let item2 = Number(prompt("Enter price of item 2:"));
let item3 = Number(prompt("Enter price of item 3:"));

// Step 2: Calculate total
let total = item1 + item2 + item3;

// Step 3: Display total bill
alert("Your total bill is: ₦" + total);

// Step 4: Ask if user wants to proceed with payment
let payNow = confirm("Do you want to make payment?");
if (payNow) {
    alert("Payment Successful ✅");
} else {
    alert("Please complete your payment later.");
}

6. Practice Exercises

Write a program that asks the user for their age and displays a message:
- If they are 18 or older → “You are eligible to vote.”
- Otherwise → “You are too young to vote.”
Create a program that asks the user for two numbers and displays:
- Sum
- Difference
- Product
- Division
Make a program that asks for a student’s name and 3 subject scores, then displays their average.

8. Final Notes

Always convert user input to numbers using Number() when performing calculations.
Test your code in the browser console or a .html file.
Practice regularly to improve.

Project

Simple Report Card (save as report.html and open in browser)

<!DOCTYPE html>

<html>

<head>

<title>Simple Student Report Card</title>

</head>

<body>

<h2>Student Report Card</h2>

<button onclick="generateReport()">Generate Report</button>

function generateReport() {

// Collect input with prompt

let name = prompt("Enter Student Name:");

let math = parseInt(prompt("Enter Math score:"));

let english = parseInt(prompt("Enter English score:"));

let science = parseInt(prompt("Enter Science score:"));

// Calculate total and average

let total = math + english + science;

let average = total / 3;

let grade = "";

// Conditional for grade

if (average >= 70) {

grade = "A";

} else if (average >= 60) {

grade = "B";

} else if (average >= 50) {

grade = "C";

} else if (average >= 40) {

grade = "D";

} else {

grade = "F";

}

// Display report

document.getElementById("output").innerHTML = `

<p><strong>English:</strong> ${english}</p>

<p><strong>Science:</strong> ${science}</p>

<p><strong>Total:</strong> ${total}</p>

<p><strong>Average:</strong> ${average.toFixed(2)}</p>

<p><strong>Grade:</strong> ${grade}</p>

}

</script>

</body>

</html>

👉 When you click the button:

It will ask for name and 3 subject scores.

It calculates total, average, and grade.

It prints the report on the page

Week 5: Day One: Objects in JavaScript

1. What is an Object in JavaScript?

An object in JavaScript is a collection of key-value pairs. Objects store data and functions (called methods).

1. Meaning of Object
👉 An object in JavaScript is a collection of related information stored together as key–value pairs.
Keys (or properties): names (like "name", "age").
Values: the data (like "John", 25).
2. Why Use Objects?
To group information about one thing in one place.
Example: Instead of having separate variables for name, age, and school, we can put them all inside one object called student.
3. Where Do We Use Objects?
To represent real-life things like students, cars, books, products.
In projects like student report card, shopping cart, user profile, etc.
4. How to Use Objects?
🔹 Example 1 of an Object:
let student = {
    name: "John",
    age: 20,
    course: "Computer Science"
};
console.log(student.name);  // Output: John
Example 2 of an Object:
Creating an Object
let student = {
  name: "John",
  age: 20,
  grade: "A"
};

Accessing Values
console.log(student.name);   // John
console.log(student["age"]); // 20

Changing Values
student.grade = "B";

Adding New Property
student.school = "ABC College";

3. Some Pre-defined JavaScript Objects

JavaScript has built-in objects such as:
✅ Math Object – Used for mathematical operations.
✅ String Object – Handles text.
✅ Array Object – Works with lists of data.

🔹 Example using Math Object:

console.log(Math.sqrt(25));  // Output: 5

console.log(Math.random());  // Generates a random number

4. Date Object in JavaScript

The Date object handles time and dates.

🔹 Example:

js

CopyEdit

let today = new Date();

console.log(today);  // Displays current date and time

console.log(today.getFullYear());  // Gets the current year


Practical Example

<!DOCTYPE html>
<html>
<body>
  <p id="info"></p>
  <button onclick="showInfo()">Show Student Info</button>

  <script>
    // Object created
    let student = {
      name: "Alice",
      age: 18,
      grade: "A"
    };

    // Function to display object info
    function showInfo() {
      document.getElementById("info").innerHTML =
        "Name: " + student.name +
        ", Age: " + student.age +
        ", Grade: " + student.grade;
    }
  </script>
</body>
</html>

👉 When you click the button, it shows the student’s details using the object.

Mini Project with Object
Student Report Card using Object
<!DOCTYPE html>
<html>
<body>
  <p id="report"></p>
  <button onclick="showReport()">Show Report Card</button>

  <script>
    let student = {
      name: "James",
      math: 80,
      english: 70,
      science: 90
    };

    function showReport() {
      let total = student.math + student.english + student.science;
      let average = total / 3;
      let result = average >= 50 ? "Pass" : "Fail";

      document.getElementById("report").innerHTML =
        "Name: " + student.name + "<br>" +
        "Total: " + total + "<br>" +
        "Average: " + average + "<br>" +
        "Result: " + result;
    }
  </script>
</body>
</html>

✅ This uses an object (student) to store marks, and a function to calculate total, average, and pass/fail.

week 6 day 1: DOM with Simple Functions

DOM (Document Object Model) is the way a web page is shown to JavaScript so that it can read and change the HTML and CSS.

In short:

Document → your web page

Object → each element (paragraph, button, image) is treated like an object

Model → the structure or map of how everything is arranged

1. Changing Text with a Function


<!DOCTYPE html>
<html>
<body>
  <p id="demo">Hello World</p>
  <button onclick="changeText()">Click Me</button>

  <script>
    function changeText() {
      document.getElementById("demo").innerHTML = "Text Changed!";
    }
  </script>
</body>
</html>

👉 Explanation

We used a simple function changeText().
When the button is clicked, the function finds the paragraph (getElementById) and changes its text.

2. Change Color with a Function


<!DOCTYPE html>
<html>
<body>
  <p id="myText">This is black text</p>
  <button onclick="makeRed()">Make Red</button>

  <script>
    function makeRed() {
      document.getElementById("myText").style.color = "red";
    }
  </script>
</body>
</html>

👉 Explanation

The function makeRed() changes the style of the text to red.

3. Simple Counter with a Function


<!DOCTYPE html>
<html>
<body>
  <p>Count: <span id="count">0</span></p>
  <button onclick="increase()">Increase</button>

  <script>
    let count = 0;  // variable to store number

    function increase() {
      count = count + 1; // add 1
      document.getElementById("count").innerHTML = count;
    }
  </script>
</body>
</html>

👉 Explanation

A variable count starts at 0.
Function increase() adds 1 each time button is clicked.
Then it updates the text using DOM.

Mini Project with Simple Functions: Student Greeting


<!DOCTYPE html>
<html>
<body>
  <p id="greeting">Welcome!</p>
  <button onclick="askName()">Enter Your Name</button>

  <script>
    function askName() {
      let name = prompt("What is your name?");
      document.getElementById("greeting").innerHTML = "Hello, " + name + "!";
    }
  </script>
</body>
</html>

👉 How it works

A button calls the function askName().
The function uses prompt() to ask the user for their name.
It stores the answer in the variable name.
It changes the <p> text using getElementById.

💡 With just variables + functions + DOM + prompt + events, students can now:

Change text
Change style
Count numbers
Collect user input
Display results

week 7

Arrays in JavaScript

1. What is an Array?

An array is a special variable in JavaScript that can hold more than one value at the same time.
Think of it like a list or a container.

👉 Example:


let fruits = ["Apple", "Banana", "Orange"];
console.log(fruits); // ["Apple", "Banana", "Orange"]

2. Why Use Arrays?

To store many values in one variable.

Easy to organize related items.

Useful for loops and collections (e.g., list of students, scores, products).

3. Creating Arrays

(a) Using square brackets `[]`


let numbers = [1, 2, 3, 4, 5];

(b) Using `new Array()`


let colors = new Array("Red", "Green", "Blue");

4. Accessing Array Items

We use index numbers (starting from 0).

👉 Example:


let fruits = ["Apple", "Banana", "Orange"];
console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana
console.log(fruits[2]); // Orange

5. Changing Array Items

👉 Example:


let fruits = ["Apple", "Banana", "Orange"];
fruits[1] = "Mango";  
console.log(fruits); // ["Apple", "Mango", "Orange"]

6. Array Properties

length → tells how many items are in the array.


let fruits = ["Apple", "Banana", "Orange"];
console.log(fruits.length); // 3

7. Common Array Methods

(a) Add items


fruits.push("Pineapple"); // adds at the end
fruits.unshift("Strawberry"); // adds at the beginning

(b) Remove items


fruits.pop();  // removes last item
fruits.shift(); // removes first item

(c) Other helpful methods


let nums = [1, 2, 3, 4];
console.log(nums.indexOf(3)); // 2 (position of 3)
console.log(nums.includes(5)); // false

8. Looping Through Arrays

We use for loop or forEach to go through items.

👉 Example:


let fruits = ["Apple", "Banana", "Orange"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

9. Mini Project: Student Score List

👉 Create an array of student scores and calculate the average.


let scores = [80, 90, 75, 60, 95];
let sum = 0;

for (let i = 0; i < scores.length; i++) {
  sum += scores[i]; // add each score
}

let average = sum / scores.length;
console.log("Average Score = " + average);

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

Create arrays
Access and change items
Use methods like push, pop, shift, unshift
Loop through arrays
Build small projects

Week 8: Forms & Input Validation

1. What is it?
A form is a part of a webpage that lets users enter information (like name, email, or scores).

2. Why use it?
To collect data from users and ensure the data is correct before using it.

3. Where is it used?

Registration forms
Feedback forms
Login/signup pages

4. How to use it?

Use HTML <form> and <input> elements
Use JS to read values (document.getElementById("id").value)
Use conditional statements to validate data

Example:


<input type="text" id="name" placeholder="Enter name">
<button onclick="checkName()">Submit</button>
<p id="message"></p>

<script>
function checkName() {
    let name = document.getElementById("name").value;
    if(name === "") {
        document.getElementById("message").innerHTML = "Name cannot be empty!";
    } else {
        document.getElementById("message").innerHTML = "Hello, " + name;
    }
}
</script>

Mini Project:

Student Registration Form
- Inputs: Name, Age, Class
- Validation: Cannot be empty
- Display success message

Week 9: Arrays & Objects in Real Projects

1. What is it?

Array: List of values (e.g., fruits, scores)
Object: Stores related information together (e.g., {name: "John", score: 80})

2. Why use it?

Store multiple data efficiently
Loop through data easily
Combine with DOM to display lists dynamically

3. Where is it used?

Score sheets, product lists, task lists, quiz questions

4. How to use it?

Array Example:


let fruits = ["Apple", "Banana", "Orange"];
fruits.push("Mango"); // add item
console.log(fruits[0]); // access first item

Object Example:


let student = {name: "John", score: 90};
console.log(student.name); // John

Mini Project:

Student Score Table
- Array of objects: [ {name:"John", score:80}, {name:"Mary", score:90} ]
- Display as a table on webpage
- Add/remove students dynamically

Week 10: Advanced Event Handling & Dynamic UI

1. What is it?
Advanced event handling is responding to different user actions like mouse, keyboard, and clicks.

2. Why use it?
To make web pages interactive and user-friendly.

3. Where is it used?

Buttons, menus, games, interactive forms

4. How to use it?

Use addEventListener()
Respond to events like click, mouseover, keyup

Example: Counter App


<h2 id="count">0</h2>
<button id="plus">+</button>
<button id="minus">-</button>

<script>
let counter = 0;
document.getElementById("plus").addEventListener("click", function() {
    counter++;
    document.getElementById("count").innerHTML = counter;
});
document.getElementById("minus").addEventListener("click", function() {
    counter--;
    document.getElementById("count").innerHTML = counter;
});
</script>

Mini Project:

To-Do List App
- Add task
- Delete task
- Mark task as completed

Week 11: ES6 & Modern JavaScript

1. What is it?
Modern JavaScript (ES6+) is updated syntax and features for cleaner and easier code.

2. Why use it?

Shorter, cleaner code
Easier to work with arrays and objects
Makes projects more maintainable

3. Where is it used?

All modern websites and web apps

4. How to use it?

Arrow Function Example:


let sum = (a, b) => a + b;
console.log(sum(5, 3)); // 8

Template Literals Example:


let name = "John";
console.log(`Hello, ${name}!`); // Hello, John!

Destructuring Example:


let student = {name: "Mary", score: 90};
let {name, score} = student;
console.log(name, score); // Mary 90

Mini Project:

Simple Quiz App
- Store questions in array of objects
- Display question using template literals
- Check answers and calculate score

Week 12: Final Mini Project – Combining Everything

1. What is it?
A complete small app using HTML, CSS, JS, arrays, objects, forms, events, and ES6 features.

2. Why use it?

Practice everything together

Build confidence in real projects

Prepare for bigger apps

3. Where is it used?

Portfolio projects

School mini apps

Beginner-friendly web apps

4. How to do it?

Project Ideas:

A. Student Report Card Generator

Input student name, scores (forms)

Validate inputs

Store in array of objects

Display table dynamically

Calculate total and average

B. To-Do List with Local Storage

Add/remove tasks

Mark complete

Save tasks in browser

C. Quiz App

Questions in array of objects

Validate answers

Show score dynamically

✅ By the end of Week 12:
Students will be able to:

Use forms and validate user input

Work with arrays and objects

Handle advanced events

Use ES6 features

Build complete mini apps

MONTH 4: Python Training – Week 1: Variables & Data Basics

Day 1 (Mon) – Introduction to Python & Variables

1. What is it?

Python is a programming language.
Variables are like boxes where we store data (name, age, scores, etc.).

2. Code Example

# Store student info

name = "Mary"

age = 15

score = 90

print("Student Name:", name)

print("Age:", age)

print("Score:", score)

Explanation:

name = "Mary" saves text in a box called name.
age = 15 saves number in age.
print(...) shows the stored values.

✅ Class Work

Create variables: student_name, student_age, student_class → print them.

🏠 Assignment

Create variables for 3 products with their prices and print them.

Day 2 (Tue) – Numbers & Operators

1. What is it?

Operators are symbols that help us calculate (add, subtract, multiply, divide).

2. Code Example

math = 80

english = 70

total = math + english

average = total / 2

print("Total:", total)

print("Average:", average)

Explanation:

+ adds numbers.
/ divides numbers.
We used them to get total and average.

✅ Class Work

Calculate total and average for 3 subjects.

🏠 Assignment

Ask students to calculate sum, difference, and product of two numbers.

Day 3 (Wed) – Strings & Concatenation

1. What is it?

A string is text. Concatenation means joining text together.

2. Code Example

first_name = "Mary"

last_name = "John"

full_name = first_name + " " + last_name

print("Full Name:", full_name)

Explanation:

" " adds a space between names.
+ joins two texts together.

✅ Class Work

Students join first name + last name + class into one sentence.

🏠 Assignment

Write code to print:
"My name is Ali. I am 14 years old." (use variables).

Day 4 (Thu) – Input from User

1. What is it?

input() allows users to type values.

2. Code Example

name = input("Enter your name: ")

age = input("Enter your age: ")

print("Hello", name, "! You are", age, "years old.")

Explanation:

input() waits for the user to type something.
The typed text is saved in a variable.
print shows a message with that value.

✅ Class Work

Students enter their name + favorite subject → program greets them.

🏠 Assignment

Ask user for two numbers → add them and show result.

Day 5 (Fri) – Assessment

Practical Test (10 marks)

Create variables: name, age, score → print them. (2 marks)
Calculate total and average of 3 subjects. (2 marks)
Join first name and last name into one full name. (2 marks)
Use input() to ask for a user’s name → greet them. (2 marks)
Ask for 2 numbers → add them and print result. (2 marks)

✅ Step-by-Step Solutions

Q1 Solution

name = "Mary" # store text

age = 15 # store number

score = 90 # store number

print("Name:", name)

print("Age:", age)

print("Score:", score)

Q2 Solution

math = 80

english = 70

science = 90

total = math + english + science

average = total / 3

print("Total:", total) # 240

print("Average:", average) # 80.0

Q3 Solution

first_name = "Ali"

last_name = "Bello"

full_name = first_name + " " + last_name

print("Full Name:", full_name) # Ali Bello

Q4 Solution

user_name = input("Enter your name: ")

print("Hello", user_name + "!")

Q5 Solution

a = int(input("Enter first number: "))

b = int(input("Enter second number: "))

sum_result = a + b

print("Sum:", sum_result)

✅ End of Week 1 – Students now understand:

Variables
Numbers & operators
Strings
User input
Basic problem-solving with Python

Got it ✅ Let’s put everything together into one Week 1 Teaching Plan.
This will include Day 1–4 lessons, Day 5 assessment, and step-by-step solved answers (so you can teach and students can practice).

📘 Python Training – Week 1: Variables & Data Basics

Day 1 (Mon) – Introduction to Python & Variables

1. What is it?

Python is a programming language.
Variables are like boxes where we store data (name, age, scores, etc.).

2. Code Example

# Store student info

name = "Mary"

age = 15

score = 90

print("Student Name:", name)

print("Age:", age)

print("Score:", score)

Explanation:

name = "Mary" saves text in a box called name.
age = 15 saves number in age.
print(...) shows the stored values.

✅ Class Work

Create variables: student_name, student_age, student_class → print them.

🏠 Assignment

Create variables for 3 products with their prices and print them.

Day 2 (Tue) – Numbers & Operators

1. What is it?

Operators are symbols that help us calculate (add, subtract, multiply, divide).

2. Code Example

math = 80

english = 70

total = math + english

average = total / 2

print("Total:", total)

print("Average:", average)

Explanation:

+ adds numbers.
/ divides numbers.
We used them to get total and average.

✅ Class Work

Calculate total and average for 3 subjects.

🏠 Assignment

Ask students to calculate sum, difference, and product of two numbers.

Day 3 (Wed) – Strings & Concatenation

1. What is it?

A string is text. Concatenation means joining text together.

2. Code Example

first_name = "Mary"

last_name = "John"

full_name = first_name + " " + last_name

print("Full Name:", full_name)

Explanation:

" " adds a space between names.
+ joins two texts together.

✅ Class Work

Students join first name + last name + class into one sentence.

🏠 Assignment

Write code to print:
"My name is Ali. I am 14 years old." (use variables).

Day 4 (Thu) – Input from User

1. What is it?

input() allows users to type values.

2. Code Example

name = input("Enter your name: ")

age = input("Enter your age: ")

print("Hello", name, "! You are", age, "years old.")

Explanation:

input() waits for the user to type something.
The typed text is saved in a variable.
print shows a message with that value.

✅ Class Work

Students enter their name + favorite subject → program greets them.

🏠 Assignment

Ask user for two numbers → add them and show result.

Day 5 (Fri) – Assessment

Practical Test (10 marks)

Create variables: name, age, score → print them. (2 marks)
Calculate total and average of 3 subjects. (2 marks)
Join first name and last name into one full name. (2 marks)
Use input() to ask for a user’s name → greet them. (2 marks)
Ask for 2 numbers → add them and print result. (2 marks)

✅ Step-by-Step Solutions

Q1 Solution

name = "Mary" # store text

age = 15 # store number

score = 90 # store number

print("Name:", name)

print("Age:", age)

print("Score:", score)

Q2 Solution

math = 80

english = 70

science = 90

total = math + english + science

average = total / 3

print("Total:", total) # 240

print("Average:", average) # 80.0

Q3 Solution

first_name = "Ali"

last_name = "Bello"

full_name = first_name + " " + last_name

print("Full Name:", full_name) # Ali Bello

Q4 Solution

user_name = input("Enter your name: ")

print("Hello", user_name + "!")

Q5 Solution

a = int(input("Enter first number: "))

b = int(input("Enter second number: "))

sum_result = a + b

print("Sum:", sum_result)

✅ End of Week 1 – Students now understand:

Variables
Numbers & operators
Strings
User input
Basic problem-solving with Python

Perfect 👍 Let’s continue with Week 2: Lists & Loops.
I’ll keep the same Day 1–4 lessons + Day 5 assessment (with step-by-step solved answers) format.

📘 Python Training – Week 2: Lists & Loops

Day 1 (Mon) – Lists (like JS arrays)

1. What is it?

A list is a collection of items stored in one variable.
Think of it like a shopping basket holding many items.

2. Code Example

# A list of student names

students = ["Mary", "John", "Ali", "Aisha"]

print("All students:", students) # show all

print("First student:", students[0]) # index starts at 0

print("Second student:", students[1])

Explanation:

[] creates a list.
students[0] picks the first item.

✅ Class Work

Create a list of 5 fruits and print the 1st and 3rd fruit.

🏠 Assignment

Create a list of 5 numbers, print the 2nd and 5th number.

Day 2 (Tue) – Adding & Removing from Lists

1. What is it?

We can add or remove items from a list.

2. Code Example

fruits = ["Apple", "Banana"]

fruits.append("Orange") # add at end

fruits.append("Mango")

print("After adding:", fruits)

fruits.remove("Banana") # remove an item

print("After removing:", fruits)

Explanation:

.append(item) adds to the end.
.remove(item) deletes one item.

✅ Class Work

Create a list of subjects, add 2 new ones, then remove 1.

🏠 Assignment

Create a list of 3 countries, add 2 more, and print the final list.

Day 3 (Wed) – For Loops (Repeat over list)

1. What is it?

A loop repeats code automatically.

2. Code Example

fruits = ["Apple", "Orange", "Mango"]

for fruit in fruits:

print("I like", fruit)

Explanation:

for fruit in fruits: means "take each item in the list one by one."
The loop prints each fruit.

✅ Class Work

Make a list of 4 animals → use a loop to print: "Animal: X".

🏠 Assignment

Make a list of 5 students → use a loop to print: "Student Name: X".

Day 4 (Thu) – While Loops (Repeat until condition ends)

1. What is it?

A while loop repeats code as long as the condition is true.

2. Code Example

count = 1

while count <= 5:

print("Number:", count)

count = count + 1 # increase count

Explanation:

Starts at 1.
Prints numbers until 5.
count = count + 1 makes sure it will stop.

✅ Class Work

Write a while loop to print numbers 1 to 3.

🏠 Assignment

Write a while loop to print numbers 1 to 10.

Day 5 (Fri) – Assessment

Practical Test (10 marks)

Create a list of 5 fruits and print the 1st and 3rd fruit. (2 marks)
Add 2 new items to a list of subjects and remove 1. (2 marks)
Use a for loop to print all items in a list of 4 animals. (2 marks)
Write a while loop to print numbers 1 to 5. (2 marks)
Create a list of 3 numbers → print their sum using a loop. (2 marks)

✅ Step-by-Step Solutions

Q1 Solution

fruits = ["Apple", "Banana", "Mango", "Orange", "Pineapple"]

print("First fruit:", fruits[0]) # Apple

print("Third fruit:", fruits[2]) # Mango

Q2 Solution

subjects = ["Math", "English", "Science"]

subjects.append("History")

subjects.append("Geography")

print("After adding:", subjects)

subjects.remove("English")

print("After removing:", subjects)

Q3 Solution

animals = ["Dog", "Cat", "Goat", "Lion"]

for animal in animals:

print("Animal:", animal)

Q4 Solution

count = 1

while count <= 5:

print("Number:", count)

count = count + 1

Q5 Solution

numbers = [2, 4, 6]

total = 0

for n in numbers:

total = total + n

print("Sum:", total) # 12

✅ End of Week 2 – Students now understand:

Lists (create, add, remove, access items)
For loops
While loops
How to combine loops with lists

Perfect 👍 Let’s continue.
Here is Week 4: Functions in Python with the same teaching style (Day 1–4 teaching, Day 5 assessment, step-by-step solved answers).

📘 Python Training – Week 4: Functions

Day 1 (Mon) – Introduction to Functions

1. What is it?

A function is a block of code that does a task. Instead of repeating code, we write it once and call it anytime.

2. Code Example

def say_hello():

print("Hello, welcome to Python!")

# Call the function

say_hello()

Explanation:

def → used to define a function.
say_hello() → calling the function runs the code.

✅ Class Work

Write a function that prints "Good Morning".

🏠 Assignment

Write a function called greet() that prints "Hello, Student!".

Day 2 (Tue) – Functions with Parameters

1. What is it?

We can give functions inputs (parameters).

2. Code Example

def greet(name):

print("Hello, " + name)

greet("Raheem")

greet("Mary")

Explanation:

name is a parameter.
When calling the function, we give a value like "Raheem".

✅ Class Work

Write a function square(num) that prints the square of a number.

🏠 Assignment

Write a function add(a, b) that prints the sum of two numbers.

Day 3 (Wed) – Functions with Return Values

1. What is it?

Functions can return values to be used later.

2. Code Example

def add(a, b):

return a + b

result = add(5, 3)

print("The sum is:", result)

Explanation:

return sends the answer back.
We can save it in a variable like result.

✅ Class Work

Write a function multiply(a, b) that returns the product.

🏠 Assignment

Write a function is_even(num) that returns True if number is even, else False.

Day 4 (Thu) – Real Life Example with Functions

Example: Student Grading Function

def grade_student(score):

if score >= 70:

return "A"

elif score >= 50:

return "C"

else:

return "Fail"

print("Student 1:", grade_student(75))

print("Student 2:", grade_student(40))

Explanation:

Function checks the score.
Returns "A", "C", or "Fail".
Very useful in schools or exams!

✅ Class Work

Write a function check_age(age) that returns "Adult" if age ≥ 18, else "Minor".

🏠 Assignment

Write a function check_login(username, password) → if username = "admin" and password = "1234", return "Access Granted", else "Access Denied".

Day 5 (Fri) – Assessment

Practical Test (10 marks)

Write a function say_hi() that prints "Hi". (2 marks)
Write a function double(num) that returns double of the number. (2 marks)
Write a function subtract(a, b) that returns the difference. (2 marks)
Write a function check_number(num) that returns "Even" if even, else "Odd". (2 marks)
Write a function grade(score) that returns "Pass" if score ≥ 50, else "Fail". (2 marks)

✅ Step-by-Step Solutions

Q1 Solution

def say_hi():

print("Hi")

say_hi()

Q2 Solution

def double(num):

return num * 2

print(double(5)) # Output: 10

Q3 Solution

def subtract(a, b):

return a - b

print(subtract(10, 4)) # Output: 6

Q4 Solution

def check_number(num):

if num % 2 == 0:

return "Even"

else:

return "Odd"

print(check_number(7)) # Output: Odd

Q5 Solution

def grade(score):

if score >= 50:

return "Pass"

else:

return "Fail"

print(grade(65)) # Output: Pass

✅ End of Week 4 – Students now understand:

How to write functions
Parameters and return values
Using functions in real-life tasks (like grading systems)

Perfect 👍 Let’s continue!
Here is Week 5: Lists & Tuples explained in the same teaching style (Day 1–4 lessons, Day 5 assessment, solved step-by-step).

📘 Python Training – Week 5: Lists & Tuples

Day 1 (Mon) – Introduction to Lists

1. What is it?

A list is a collection of items stored in one variable.

Items can be numbers, words, or both.
Lists are changeable (we can add, remove, update).

2. Code Example

fruits = ["apple", "banana", "orange"]

print(fruits) # whole list

print(fruits[0]) # first item

print(fruits[2]) # third item

Explanation:

Lists are written inside [ ].
fruits[0] → first item (index starts from 0).

✅ Class Work

Create a list of 5 student names and print the first and last names.

🏠 Assignment

Make a list of 5 numbers. Print the second number.

Day 2 (Tue) – Changing & Adding to Lists

1. What is it?

We can update or add new items in a list.

2. Code Example

fruits = ["apple", "banana", "orange"]

# Change item

fruits[1] = "mango"

# Add item

fruits.append("grape")

print(fruits)

Output:
['apple', 'mango', 'orange', 'grape']

Explanation:

fruits[1] = "mango" → changes banana to mango.
.append("grape") → adds new item at the end.

✅ Class Work

Create a list of 3 countries. Change the second one.

🏠 Assignment

Create a list of 3 colors. Add one more color using .append().

Day 3 (Wed) – Removing Items & List Functions

1. What is it?

We can remove items and also use built-in list functions.

2. Code Example

numbers = [10, 20, 30, 40, 50]

# Remove item

numbers.remove(30)

# Length of list

print(len(numbers)) # 4 items left

Explanation:

.remove(30) → deletes item 30.
len(numbers) → counts how many items in list.

✅ Class Work

Make a list of 4 animals. Remove one animal.

🏠 Assignment

Create a list of 6 numbers. Print the length of the list.

Day 4 (Thu) – Tuples

1. What is it?

A tuple is like a list, but it cannot be changed (read-only).

2. Code Example

days = ("Mon", "Tue", "Wed", "Thu", "Fri")

print(days)

print(days[0]) # First item

Explanation:

Tuples use ( ).
Unlike lists, we cannot change or add new items.

✅ Class Work

Create a tuple of 3 fruits and print the second one.

🏠 Assignment

Create a tuple of 4 numbers. Print the last one.

Day 5 (Fri) – Assessment

Practical Test (10 marks)

Create a list of 4 fruits and print the second fruit. (2 marks)
Add "watermelon" to the list. (2 marks)
Remove "banana" from the list. (2 marks)
Create a tuple of 3 colors and print the first color. (2 marks)
Find the length of this list: [1,2,3,4,5,6]. (2 marks)

✅ Step-by-Step Solutions

Q1 Solution

fruits = ["apple", "banana", "orange", "grape"]

print(fruits[1]) # Output: banana

Q2 Solution

fruits.append("watermelon")

print(fruits)

# Output: ['apple', 'banana', 'orange', 'grape', 'watermelon']

Q3 Solution

fruits.remove("banana")

print(fruits)

# Output: ['apple', 'orange', 'grape', 'watermelon']

Q4 Solution

colors = ("red", "blue", "green")

print(colors[0]) # Output: red

Q5 Solution

numbers = [1, 2, 3, 4, 5, 6]

print(len(numbers)) # Output: 6

✅ End of Week 5 – Students now understand:

Lists: create, access, add, change, remove, count items
Tuples: read-only collections

Perfect 👍 Let’s continue!
Here is Week 6: Dictionaries in Python in the same teaching style (Day 1–4 teaching, Day 5 assessment, solved step-by-step).

📘 Python Training – Week 6: Dictionaries

Day 1 (Mon) – Introduction to Dictionaries

1. What is it?

A dictionary stores data in key–value pairs.

Key → like a name or label.
Value → the data connected to the key.

2. Code Example

student = {

"name": "John",

"age": 15,

"class": "SS1"

}

print(student) # whole dictionary

print(student["name"]) # get value using key

Explanation:

Keys are "name", "age", "class".
Values are "John", 15, "SS1".

✅ Class Work

Create a dictionary for your best friend with keys: name, age, hobby. Print the hobby.

🏠 Assignment

Make a dictionary for a product: name, price, quantity. Print the price.

Day 2 (Tue) – Changing & Adding Items

1. What is it?

We can update existing keys or add new ones.

2. Code Example

student = {"name": "John", "age": 15}

# Change value

student["age"] = 16

# Add new key-value

student["school"] = "ABC High"

print(student)

Output:
{'name': 'John', 'age': 16, 'school': 'ABC High'}

✅ Class Work

Make a dictionary car = {"brand": "Toyota", "year": 2020}. Change year to 2022.

🏠 Assignment

Add a new key "color" to the car dictionary.

Day 3 (Wed) – Removing Items

1. What is it?

We can delete items from dictionaries.

2. Code Example

student = {"name": "John", "age": 16, "school": "ABC High"}

# Remove "school"

student.pop("school")

print(student)

Output:
{'name': 'John', 'age': 16}

Explanation:

.pop("key") removes that item.

✅ Class Work

Create a dictionary of 3 animals and their sounds. Remove one animal.

🏠 Assignment

Make a dictionary of 3 cities with population. Remove one city.

Day 4 (Thu) – Real Life Example with Dictionaries

Example: Student Marks System

marks = {

"Math": 80,

"English": 70,

"Science": 90

}

# Total marks

total = marks["Math"] + marks["English"] + marks["Science"]

# Average

average = total / 3

print("Total:", total)

print("Average:", average)

Explanation:

Dictionary stores subjects with scores.
Easy to calculate totals and averages.

✅ Class Work

Create a dictionary of 3 products with prices. Calculate total price.

🏠 Assignment

Create a dictionary of 3 students and their ages. Print the average age.

Day 5 (Fri) – Assessment

Practical Test (10 marks)

Create a dictionary of a student with keys name, age, and class. Print the class. (2 marks)
Change the student’s age to 18. (2 marks)
Add a new key "grade" with value "A". (2 marks)
Remove the key "class". (2 marks)
Create a dictionary of 3 subjects with scores and print the total score. (2 marks)

✅ Step-by-Step Solutions

Q1 Solution

student = {"name": "Mary", "age": 16, "class": "SS2"}

print(student["class"]) # Output: SS2

Q2 Solution

student["age"] = 18

print(student)

Q3 Solution

student["grade"] = "A"

print(student)

Q4 Solution

student.pop("class")

print(student)

Q5 Solution

scores = {"Math": 70, "English": 65, "Science": 80}

total = scores["Math"] + scores["English"] + scores["Science"]

print("Total Score:", total) # Output: 215

✅ End of Week 6 – Students now understand:

How to create and use dictionaries
Updating, adding, removing items
Using dictionaries for real-life problems (like marks system)

Perfect 👍 Let’s continue.
Here is Week 7: If-Else and Loops in the same style (Day 1–4 teaching, Day 5 assessment, step-by-step solved answers).

📘 Python Training – Week 7: If-Else and Loops

Day 1 (Mon) – If-Else Statements

1. What is it?

An if-else statement helps the computer make decisions.

2. Code Example

age = 18

if age >= 18:

print("You are an adult")

else:

print("You are a minor")

Explanation:

If condition is True, run first block.
If condition is False, run second block.

✅ Class Work

Check if a number is greater than 10.

🏠 Assignment

Write code that checks if temperature is greater than 30 → print "Hot", else print "Cold".

Day 2 (Tue) – If-Elif-Else

1. What is it?

We use elif when we have more than two choices.

2. Code Example

score = 65

if score >= 70:

print("Grade: A")

elif score >= 50:

print("Grade: C")

else:

print("Fail")

Explanation:

First condition checked.
If not true, second one checked.
If none are true, else runs.

✅ Class Work

Check if a number is positive, negative, or zero.

🏠 Assignment

Write code that checks marks:

≥ 80 → "Excellent"
≥ 50 → "Good"
else → "Poor"

Day 3 (Wed) – While Loops

1. What is it?

A while loop repeats code as long as the condition is True.

2. Code Example

count = 1

while count <= 5:

print("Number:", count)

count += 1

Output:

Number: 1

Number: 2

Number: 3

Number: 4

Number: 5

Explanation:

Loop starts at 1.
Runs until count becomes 6.

✅ Class Work

Write a while loop that prints numbers from 1 to 3.

🏠 Assignment

Write a while loop that prints "Hello" 5 times.

Day 4 (Thu) – For Loops

1. What is it?

A for loop goes through items in a list.

2. Code Example

fruits = ["apple", "banana", "orange"]

for f in fruits:

print("I like", f)

Output:

I like apple

I like banana

I like orange

Explanation:

Loop goes through each item in the list.

✅ Class Work

Use a for loop to print numbers 1 to 5.

🏠 Assignment

Make a list of 3 names. Use a for loop to print each name.

Day 5 (Fri) – Assessment

Practical Test (10 marks)

Write an if-else to check if a number is even or odd. (2 marks)
Write an if-elif-else to check score: ≥ 70 → "Pass", else → "Fail". (2 marks)
Write a while loop to print numbers 1 to 4. (2 marks)
Write a for loop to print all items in ["pen", "book", "bag"]. (2 marks)
Write an if-else to check if age ≥ 18 → "Adult", else → "Minor". (2 marks)

✅ Step-by-Step Solutions

Q1 Solution

num = 7

if num % 2 == 0:

print("Even")

else:

print("Odd")

# Output: Odd

Q2 Solution

score = 65

if score >= 70:

print("Pass")

else:

print("Fail")

# Output: Fail

Q3 Solution

count = 1

while count <= 4:

print(count)

count += 1

# Output: 1 2 3 4

Q4 Solution

items = ["pen", "book", "bag"]

for i in items:

print(i)

# Output: pen book bag

Q5 Solution

age = 17

if age >= 18:

print("Adult")

else:

print("Minor")

# Output: Minor

✅ End of Week 7 – Students now understand:

If-else decisions
Elif for multiple choices
While loops (repeat with condition)
For loops (go through a list)

Great 👍 Let’s continue.

Week 7: Loops in Python

1. What is it?

A loop is a way to repeat actions many times without writing the same code again and again.

2. Why use it?

Because in real life, we often do repeated work.
Example:

Calling each student’s name in class
Counting from 1 to 10
Checking scores for many students

Instead of writing the same command multiple times, we use loops.

3. Where is it used?

Printing many items (like student names)
Adding numbers from 1 to 100
Repeating actions until a condition is met (example: asking for correct input)

4. How to use it?

Python has two main loops:

for loop → repeats for a fixed number of times
while loop → repeats until a condition is true

Example 1: for loop

Let’s print numbers from 1 to 5.

for i in range(1, 6):

print(i)

Output:

Example 2: while loop

Keep asking for a password until the user enters "1234".

password = ""

while password != "1234":

password = input("Enter password: ")

print("Access granted!")

Real Life Example: Taking Attendance

students = ["Ali", "Mary", "John"]

for name in students:

print("Present, " + name + "?")

Output:

Present, Ali?

Present, Mary?

Present, John?

Mini Project: Number Guessing Game

The computer asks the user to guess a number until they get it right.

secret = 5

guess = 0

while guess != secret:

guess = int(input("Guess the number (1–10): "))

print("You guessed it!")

Great 👌 Let’s continue with Week 8: File Handling in Python — full teaching, examples, classwork, assignment, and Friday assessment.

Week 8: File Handling in Python

1. What is it?

File handling means reading data from a file or writing data into a file (like a text document).

2. Why use it?

To save data permanently (not lost when program ends).
To read already stored information (like student scores).
To keep records (like receipts, names, or logs).

3. Where is it used?

Saving student records in a school system
Storing sales data in a shop
Reading exam results from a file

4. How to use it?

Creating and Writing to a File

file = open("students.txt", "w") # "w" means write mode

file.write("Ali - 85\n")

file.write("Mary - 90\n")

file.close()

print("Data saved successfully!")

This creates a file called students.txt and writes 2 student records.

Reading from a File

file = open("students.txt", "r") # "r" means read mode

print(file.read())

file.close()

Output:

Ali - 85

Mary - 90

Appending (Adding More Data)

file = open("students.txt", "a") # "a" means append

file.write("John - 75\n")

file.close()

5. Real Life Example: Saving Attendance

file = open("attendance.txt", "w")

students = ["Ali", "Mary", "John"]

for name in students:

file.write(name + " - Present\n")

file.close()

print("Attendance saved!")

This creates a file attendance.txt with attendance records.

6. Mini Project: Student Record System

# Save record

name = input("Enter student name: ")

score = input("Enter score: ")

file = open("record.txt", "w")

file.write(name + " - " + score)

file.close()

# Read record

file = open("record.txt", "r")

print("Saved Record: ", file.read())

file.close()

Classwork (Day 1–4 Practice)

Write a program to create a file called notes.txt and write "Python is fun!" in it.
Write a program to read and display the content of notes.txt.
Write a program to append "I love programming." to notes.txt.
Write a program that asks the user for their favorite color and saves it into color.txt.

Assignment (Homework)

Create a file called scores.txt. Save the names and scores of 3 students inside it.
Write a program to read and print the content of scores.txt.
Write a program to add one more student’s score into scores.txt.

Friday Assessment (Test)

Q1. What is file handling in Python?

(a) Drawing pictures in files
(b) Saving and reading data from files
(c) Printing text to screen

Q2. Which mode is used for:

Writing → ?
Reading → ?
Appending → ?

Q3. Write a Python program to save this text into a file called hello.txt:

Hello, Python!

Q4. Write a Python program to read and display the content of hello.txt.

Q5. Real Life Example: Why would a shopkeeper use file handling in their business? (Answer in 2–3 sentences).

Perfect 👍 we are now moving into Django Foundations + MySQL Basics. I’ll keep the same format (step-by-step teaching + real-life examples + simple code + daily classwork + homework + assessment).

Week 9: Django Foundations + MySQL Basics

1. What is it?

Django is a Python web framework that makes building websites faster and easier.
MySQL is a database system that stores information (like student names, products, sales).

2. Why use it?

Django helps you create websites without writing everything from scratch.
MySQL stores and organizes large amounts of data safely.
Together → You can build apps like student management systems, e-commerce websites, blogs, etc.

3. Where is it used?

Schools (to store student records online)
Shops (to manage products & sales)
Banks (to keep customer information)
Social media (to store user profiles, posts, messages)

4. How to use it?

Day 1 – Installing Django & Project Setup

# Install Django

pip install django

# Start a new project

django-admin startproject school_project

# Go inside project

cd school_project

# Run the server

python manage.py runserver

✅ Open browser → visit http://127.0.0.1:8000/ → You’ll see Django welcome page.

Classwork:

Install Django and create your first project school_project.

Day 2 – Django Apps & Settings

In Django, a project can have many apps (like modules). Example: one app for students, one for teachers.

# Create a new app

python manage.py startapp students

Go to settings.py and add the app:

INSTALLED_APPS = [

'students',

'django.contrib.admin',

'django.contrib.auth',

# others...

]

✅ This tells Django about your app.

Classwork:

Create an app called students and add it to INSTALLED_APPS.

Day 3 – MVT Pattern (Models, Views, Templates)

Django uses MVT (Model-View-Template):

Model → Database (e.g. Student table)
View → Python logic (fetch or save data)
Template → HTML page (show data)

Example: Create views.py in students app:

from django.http import HttpResponse

def home(request):

return HttpResponse("Welcome to Student App")

Link it in students/urls.py:

from django.urls import path

from . import views

urlpatterns = [

path('', views.home),

]

Then include in school_project/urls.py:

from django.urls import path, include

urlpatterns = [

path('students/', include('students.urls')),

]

✅ Open http://127.0.0.1:8000/students/ → You’ll see "Welcome to Student App".

Classwork:

Create a simple home view and display "Hello Students!".

Day 4 – MySQL Setup + Django Connection

Install MySQL:

pip install mysqlclient

In settings.py, update DATABASES:

DATABASES = {

'default': {

'ENGINE': 'django.db.backends.mysql',

'NAME': 'school_db',

'USER': 'root',

'PASSWORD': 'yourpassword',

'HOST': 'localhost',

'PORT': '3306',

}

Create Database in MySQL:

CREATE DATABASE school_db;

✅ Django is now connected to MySQL.

Classwork:

Create a database called school_db.
Connect it in your Django project.

Day 5 – Friday Assessment (Test)

Q1. What is Django used for?
Q2. What is the difference between Django project and app?
Q3. What does MVT stand for?
Q4. Write the command to start a new Django app called students.
Q5. Configure Django to connect with a MySQL database called school_db.

Mini Project (End of Week 9)

Student Database App (Part 1)

Create a Django project school_project.
Add an app students.
Create a homepage view showing "Welcome to Student App".
Connect Django to MySQL database school_db.

Excellent 🙌 Let’s move forward.
This week we’ll cover Django Models + CRUD with MySQL (Create, Read, Update, Delete). I’ll keep it step by step with simple code, examples, classwork, assignment, and Friday assessment.

Week 10: Django Models & CRUD with MySQL

1. What is it?

A Model in Django represents a table in the database.
CRUD = Create, Read, Update, Delete → the four basic actions we do with data.

2. Why use it?

To save data (like student records) in a structured way.
To easily fetch, update, or delete records from the database using Python instead of writing SQL.

3. Where is it used?

Schools (student records)
Hospitals (patient info)
Shops (products, sales)
Any website that stores user information

4. How to use it?

Day 1 – Creating Models (Student Table)

Open students/models.py:

from django.db import models

class Student(models.Model):

name = models.CharField(max_length=100)

age = models.IntegerField()

grade = models.CharField(max_length=10)

def __str__(self):

return self.name

Run migrations:

python manage.py makemigrations

python manage.py migrate

✅ A students_student table is now created in MySQL.

Classwork:

Create a Teacher model with name, subject, and phone.
Run migrations.

Day 2 – Adding Data (Create)

Use Django shell:

python manage.py shell

from students.models import Student

# Create new student

s1 = Student(name="Ali", age=15, grade="SS1")

s1.save()

s2 = Student(name="Mary", age=14, grade="JSS3")

s2.save()

✅ Now students are stored in MySQL!

Classwork:

Add 3 more students using the shell.

Day 3 – Reading Data (Retrieve)

from students.models import Student

# Get all students

students = Student.objects.all()

print(students)

# Get one student

ali = Student.objects.get(name="Ali")

print(ali.age)

Output:

Classwork:

Retrieve the student named "Mary" and print her grade.

Day 4 – Updating & Deleting Data

Update Example:

ali = Student.objects.get(name="Ali")

ali.age = 16

ali.save()

Delete Example:

mary = Student.objects.get(name="Mary")

mary.delete()

Classwork:

Update "Ali"’s grade to "SS2".
Delete one student record.

Day 5 – Friday Assessment (Test)

Q1. What is a Model in Django?
Q2. Write a simple Student model with fields: name, age, class_name.
Q3. Which commands are used to create database tables from models?
Q4. Write code to:

Create a student called "Joy", age 13, class "JSS2".
Retrieve "Joy"’s details.
Q5. Explain CRUD in simple words with examples.

Mini Project (End of Week 10)

Student Database App (Part 2)

Create a Student model with name, age, and grade.
Add at least 5 students using Django shell.
Display all students in the shell.
Update 1 student’s grade and delete 1 student.

✅ By the end of Week 10, students can create tables in Django and do full CRUD operations

Perfect 👍 Now let’s move into Week 11: Django Views + Templates.
This is where students learn to display data from the database (MySQL) onto a real webpage using Django.

Week 11: Django Views + Templates

1. What is it?

Views: Python functions that handle requests and send back responses.
Templates: HTML files used to display data to the user.

2. Why use it?

Views connect your database (Models) with your web pages (Templates).
Templates allow you to show dynamic data (like students, products, or results) on a website.

3. Where is it used?

School portals → show student records
Online shops → display product lists
Blogs → show articles
Social media → show posts

4. How to use it?

Day 1 – Simple View + Template

Inside students/views.py:

from django.shortcuts import render

def home(request):

return render(request, 'home.html')

Create a templates folder inside the students app → add file home.html:

<!DOCTYPE html>

<html>

<head>

<title>Student App</title>

</head>

<body>

<h1>Welcome to Student App</h1>

</body>

</html>

In students/urls.py:

from django.urls import path

from . import views

urlpatterns = [

path('', views.home),

]

✅ Now visit http://127.0.0.1:8000/students/ → It shows the HTML page.

Classwork:

Create a new template about.html and display "This is the Student App About Page".

Day 2 – Passing Data to Template

from django.shortcuts import render

def student_list(request):

students = ["Ali", "Mary", "John"]

return render(request, 'student_list.html', {'students': students})

student_list.html:

<h2>Student List</h2>

<ul>

{% for student in students %}

<li>{{ student }}</li>

{% endfor %}

</ul>

✅ Now visit http://127.0.0.1:8000/students/list/ → It shows a list of students.

Classwork:

Pass a list of 3 teachers (["Mr. A", "Mrs. B", "Mr. C"]) to a template and display them in a list.

Day 3 – Display Data from Database (Model → Template)

from django.shortcuts import render

from .models import Student

def show_students(request):

all_students = Student.objects.all()

return render(request, 'show_students.html', {'students': all_students})

show_students.html:

<h2>All Students</h2>

<tr>

<th>Grade</th>

</tr>

{% for student in students %}

<tr>

<td>{{ student.name }}</td>

<td>{{ student.age }}</td>

<td>{{ student.grade }}</td>

</tr>

{% endfor %}

</table>

✅ Now visit http://127.0.0.1:8000/students/show/ → All student records are displayed in a table.

Classwork:

Display all teachers (from your Teacher model in Week 10) in a table.

Day 4 – Template Inheritance (Layout Page)

base.html (main layout):

<!DOCTYPE html>

<html>

<head>

<title>Student App</title>

</head>

<body>

<h1>My School Website</h1>

<hr>

{% block content %}

{% endblock %}

</body>

</html>

home.html (extends base):

{% extends 'base.html' %}

{% block content %}

<p>Welcome to the Student App Homepage!</p>

{% endblock %}

✅ This makes your website pages look consistent.

Classwork:

Create a contact.html page that extends base.html and shows "Contact us at: school@email.com".

Day 5 – Friday Assessment (Test)

Q1. What is the difference between a View and a Template in Django?
Q2. Write a view that passes a list of 3 courses (Math, English, Science) to a template and displays them.
Q3. How do you display all students from the database on a webpage? (Explain in steps)
Q4. What is the purpose of base.html in Django?
Q5. Create a template that shows this table:

Course	Teacher
Math	Mr. A
English	Mrs. B

Mini Project (End of Week 11)

Student Database App (Part 3)

Create a home.html welcome page.
Create show_students.html that lists all students in a table (from MySQL).
Use base.html for consistent layout.
Add a contact.html page.

✅ By the end of Week 11, students can show dynamic data (from MySQL) in HTML pages using Django Views + Templates.

Perfect 👍 Now let’s move into Week 11: Django Views + Templates.
This is where students learn to display data from the database (MySQL) onto a real webpage using Django.

Week 11: Django Views + Templates

1. What is it?

Views: Python functions that handle requests and send back responses.
Templates: HTML files used to display data to the user.

2. Why use it?

Views connect your database (Models) with your web pages (Templates).
Templates allow you to show dynamic data (like students, products, or results) on a website.

3. Where is it used?

School portals → show student records
Online shops → display product lists
Blogs → show articles
Social media → show posts

4. How to use it?

Day 1 – Simple View + Template

Inside students/views.py:

from django.shortcuts import render

def home(request):

return render(request, 'home.html')

Create a templates folder inside the students app → add file home.html:

<!DOCTYPE html>

<html>

<head>

<title>Student App</title>

</head>

<body>

<h1>Welcome to Student App</h1>

</body>

</html>

In students/urls.py:

from django.urls import path

from . import views

urlpatterns = [

path('', views.home),

]

✅ Now visit http://127.0.0.1:8000/students/ → It shows the HTML page.

Classwork:

Create a new template about.html and display "This is the Student App About Page".

Day 2 – Passing Data to Template

from django.shortcuts import render

def student_list(request):

students = ["Ali", "Mary", "John"]

return render(request, 'student_list.html', {'students': students})

student_list.html:

<h2>Student List</h2>

<ul>

{% for student in students %}

<li>{{ student }}</li>

{% endfor %}

</ul>

✅ Now visit http://127.0.0.1:8000/students/list/ → It shows a list of students.

Classwork:

Pass a list of 3 teachers (["Mr. A", "Mrs. B", "Mr. C"]) to a template and display them in a list.

Day 3 – Display Data from Database (Model → Template)

from django.shortcuts import render

from .models import Student

def show_students(request):

all_students = Student.objects.all()

return render(request, 'show_students.html', {'students': all_students})

show_students.html:

<h2>All Students</h2>

<tr>

<th>Grade</th>

</tr>

{% for student in students %}

<tr>

<td>{{ student.name }}</td>

<td>{{ student.age }}</td>

<td>{{ student.grade }}</td>

</tr>

{% endfor %}

</table>

✅ Now visit http://127.0.0.1:8000/students/show/ → All student records are displayed in a table.

Classwork:

Display all teachers (from your Teacher model in Week 10) in a table.

Day 4 – Template Inheritance (Layout Page)

base.html (main layout):

<!DOCTYPE html>

<html>

<head>

<title>Student App</title>

</head>

<body>

<h1>My School Website</h1>

<hr>

{% block content %}

{% endblock %}

</body>

</html>

home.html (extends base):

{% extends 'base.html' %}

{% block content %}

<p>Welcome to the Student App Homepage!</p>

{% endblock %}

✅ This makes your website pages look consistent.

Classwork:

Create a contact.html page that extends base.html and shows "Contact us at: school@email.com".

Day 5 – Friday Assessment (Test)

Course	Teacher
Math	Mr. A
English	Mrs. B

Mini Project (End of Week 11)

Student Database App (Part 3)

Create a home.html welcome page.
Create show_students.html that lists all students in a table (from MySQL).
Use base.html for consistent layout.
Add a contact.html page.

✅ By the end of Week 11, students can show dynamic data (from MySQL) in HTML pages using Django Views + Templates.

Perfect 👍 Let’s continue!

Week 13: Editing & Deleting Records in Django

This week, students will learn how to update and delete student data using Django forms with MySQL.

1. What is it?

Update means changing existing data in the database.
Delete means removing data from the database.

2. Why use it?

In real life, students may change class, age, or details.
Some students or teachers may leave the school and need to be removed.

3. Where is it used?

School portals (edit student details, delete students)
Business systems (update product price, remove old products)
Any application with a database

4. How to use it?

Day 1 – Editing Student Records (Basic Way)

students/views.py

from django.shortcuts import render, redirect, get_object_or_404

from .models import Student

def edit_student(request, id):

student = get_object_or_404(Student, id=id)

if request.method == "POST":

student.name = request.POST['name']

student.age = request.POST['age']

student.grade = request.POST['grade']

student.save()

return redirect('/students/show/')

return render(request, 'edit_student.html', {'student': student})

students/templates/edit_student.html

<h2>Edit Student</h2>

{% csrf_token %}

Name: <input type="text" name="name" value="{{ student.name }}"><br><br>

Age: <input type="number" name="age" value="{{ student.age }}"><br><br>

Grade: <input type="text" name="grade" value="{{ student.grade }}"><br><br>

<button type="submit">Update</button>

</form>

✅ This allows editing a student.

Classwork:

Create a similar form to edit teacher details.

Day 2 – Editing with Django Forms (Cleaner Way)

students/views.py

from .forms import StudentForm

def edit_student(request, id):

student = get_object_or_404(Student, id=id)

form = StudentForm(request.POST or None, instance=student)

if form.is_valid():

form.save()

return redirect('/students/show/')

return render(request, 'edit_student.html', {'form': form})

students/templates/edit_student.html

<h2>Edit Student</h2>

{% csrf_token %}

<button type="submit">Update</button>

</form>

✅ Easier, because Django Forms handle everything.

Classwork:

Create a TeacherForm edit page for teachers.

Day 3 – Deleting Student Records

students/views.py

def delete_student(request, id):

student = get_object_or_404(Student, id=id)

if request.method == "POST":

student.delete()

return redirect('/students/show/')

return render(request, 'delete_student.html', {'student': student})

students/templates/delete_student.html

<h2>Delete Student</h2>

<p>Are you sure you want to delete {{ student.name }}?</p>

{% csrf_token %}

<button type="submit">Yes, Delete</button>

</form>

<a href="/students/show/">Cancel</a>

✅ This deletes a student from MySQL.

Classwork:

Create a delete page for teacher records.

Day 4 – Adding Edit & Delete Buttons in Student List

students/templates/show_students.html

<h2>All Students</h2>

<tr>

<th>Grade</th>

<th>Actions</th>

</tr>

{% for student in students %}

<tr>

<td>{{ student.name }}</td>

<td>{{ student.age }}</td>

<td>{{ student.grade }}</td>

<td>

<a href="/students/edit/{{ student.id }}/">Edit</a> |

<a href="/students/delete/{{ student.id }}/">Delete</a>

</td>

</tr>

{% endfor %}

</table>

✅ Now users can edit or delete directly from the student list.

Classwork:

Add Edit and Delete buttons for teachers in their list page.

Day 5 – Friday Assessment (Test)

Q1. What does “update” mean in Django?
Q2. Write a view function to edit a student’s name, age, and grade.
Q3. Write a view function to delete a teacher.
Q4. Why do we use get_object_or_404() in Django?
Q5. Add Edit and Delete links to the student list page.

Mini Project (End of Week 13)

Student Database App (Part 5)

Add ability to edit student details.
Add ability to delete students.
Add Edit/Delete buttons in the student list.
Do the same for teachers.

✅ By the end of Week 13, students can edit and delete records in Django with MySQL.

Perfect 🙌 Let’s move on!

Week 14: User Authentication (Login, Logout, Register)

This week, students will learn how to secure Django apps with login, logout, and user registration.

1. What is it?

Authentication means confirming who a user is (login/logout).
Registration allows new users to sign up.

2. Why use it?

In real life, a school portal allows only teachers/students with accounts to log in.
Helps protect sensitive data (like student results).

3. Where is it used?

School websites (students login to check results).
E-commerce (customers register and login to shop).
Social media (Facebook, Twitter, etc.).

4. How to use it?

Day 1 – User Registration (Sign Up)

students/views.py

from django.contrib.auth.forms import UserCreationForm

from django.shortcuts import render, redirect

def register(request):

if request.method == "POST":

form = UserCreationForm(request.POST)

if form.is_valid():

form.save()

return redirect('/login/')

else:

form = UserCreationForm()

return render(request, 'register.html', {'form': form})

students/templates/register.html

<h2>Register</h2>

{% csrf_token %}

</form>

✅ New users can register here.

Classwork:

Add a link to registration page from your homepage.

Day 2 – User Login

students/views.py

from django.contrib.auth import authenticate, login

from django.contrib.auth.forms import AuthenticationForm

def user_login(request):

if request.method == "POST":

form = AuthenticationForm(data=request.POST)

if form.is_valid():

user = form.get_user()

return redirect('/students/show/')

else:

form = AuthenticationForm()

return render(request, 'login.html', {'form': form})

students/templates/login.html

<h2>Login</h2>

{% csrf_token %}

<button type="submit">Login</button>

</form>

✅ Registered users can now login.

Classwork:

Add a "Welcome {{ user.username }}" message when logged in.

Day 3 – User Logout

students/views.py

from django.contrib.auth import logout

def user_logout(request):

logout(request)

return redirect('/login/')

students/templates/base.html

{% if user.is_authenticated %}

<p>Welcome, {{ user.username }} | <a href="/logout/">Logout</a></p>

{% else %}

<a href="/login/">Login</a> | <a href="/register/">Register</a>

{% endif %}

✅ Users can logout safely.

Classwork:

Show "Logout" link only if the user is logged in.

Day 4 – Protecting Pages (Only Logged-in Users Can See)

students/views.py

from django.contrib.auth.decorators import login_required

@login_required

def show_students(request):

students = Student.objects.all()

return render(request, 'show_students.html', {'students': students})

✅ Now only logged-in users can see the student list.

Classwork:

Protect teacher pages so only logged-in users can access them.

Day 5 – Friday Assessment (Test)

Q1. What is authentication in Django?
Q2. Write a view function for registering a user.
Q3. Write a view function for logging in a user.
Q4. How do you restrict a page so only logged-in users can access it?
Q5. What function is used to log out users in Django?

Mini Project (End of Week 14)

Student Database App (Part 6)

Add User Registration page.
Add Login and Logout pages.
Protect student list page (only logged-in users can view).
Show "Welcome, username" on the homepage.

✅ By the end of Week 14, students can build a secure Django app with login, logout, and registration using MySQL.

Perfect 👍 Let’s continue!

Week 15: Django + MySQL CRUD Operations

(Create, Read, Update, Delete in Database)

1. What is it?

CRUD means the four main actions we do with data:

Create → Add new data (e.g., add a student).
Read → View data (e.g., list of students).
Update → Edit data (e.g., change a student’s score).
Delete → Remove data (e.g., delete a student record).

In Django with MySQL, CRUD means we store data in the database and manage it through Django views.

2. Why use it?

In real life, schools add new students, view student records, update marks, and delete graduates.
CRUD makes our app interactive and useful.

3. Where is it used?

Student management systems
E-commerce (products)
Hospital records
Banking apps

4. How to use it?

Day 1 – Setup Django + MySQL Connection

settings.py

DATABASES = {

'default': {

'ENGINE': 'django.db.backends.mysql',

'NAME': 'school_db',

'USER': 'root',

'PASSWORD': 'password',

'HOST': 'localhost',

'PORT': '3306',

}

Run:

python manage.py makemigrations

python manage.py migrate

✅ Database is now connected.

Classwork:

Create your own MySQL database (school_db).
Connect it with Django.

Day 2 – CREATE & READ (Add + View Students)

models.py

from django.db import models

class Student(models.Model):

name = models.CharField(max_length=100)

age = models.IntegerField()

score = models.FloatField()

views.py

from django.shortcuts import render, redirect

from .models import Student

def add_student(request):

if request.method == "POST":

name = request.POST['name']

age = request.POST['age']

score = request.POST['score']

Student.objects.create(name=name, age=age, score=score)

return redirect('/students/show/')

return render(request, 'add_student.html')

def show_students(request):

students = Student.objects.all()

return render(request, 'show_students.html', {'students': students})

add_student.html

<h2>Add Student</h2>

{% csrf_token %}

Name: <input type="text" name="name"><br>

Age: <input type="number" name="age"><br>

Score: <input type="number" name="score"><br>

</form>

show_students.html

<h2>Student List</h2>

<ul>

{% for s in students %}

<li>{{ s.name }} - Age: {{ s.age }} - Score: {{ s.score }}</li>

{% endfor %}

</ul>

✅ Students can now be added and displayed.

Classwork:

Add 3 students to the database and view them.

Day 3 – UPDATE (Edit Student)

views.py

def edit_student(request, id):

student = Student.objects.get(id=id)

if request.method == "POST":

student.name = request.POST['name']

student.age = request.POST['age']

student.score = request.POST['score']

student.save()

return redirect('/students/show/')

return render(request, 'edit_student.html', {'student': student})

edit_student.html

<h2>Edit Student</h2>

{% csrf_token %}

Name: <input type="text" name="name" value="{{ student.name }}"><br>

Age: <input type="number" name="age" value="{{ student.age }}"><br>

Score: <input type="number" name="score" value="{{ student.score }}"><br>

<button type="submit">Update</button>

</form>

✅ Students can now be updated.

Classwork:

Edit a student’s score from 50 → 80.

Day 4 – DELETE (Remove Student)

views.py

def delete_student(request, id):

student = Student.objects.get(id=id)

student.delete()

return redirect('/students/show/')

show_students.html (update)

<h2>Student List</h2>

<ul>

{% for s in students %}

<li>

{{ s.name }} - Age: {{ s.age }} - Score: {{ s.score }}

<a href="/students/delete/{{ s.id }}/">Delete</a>

</li>

{% endfor %}

</ul>

✅ Students can now be deleted.

Classwork:

Delete one student and confirm it disappears from the list.

Day 5 – Friday Assessment (Test)

Q1. What does CRUD stand for?
Q2. Write the Python model code for a Teacher table (name, subject, age).
Q3. Write the view code to add a new teacher.
Q4. How do you update an existing record in Django?
Q5. What command is used to apply model changes to the database?

Mini Project (End of Week 15)

Student Database App (Part 7)

Connect Django to MySQL.
Add Create (Add) student page.
Add Read (View) student list.
Add Update (Edit) student page.
Add Delete function.

✅ By the end of Week 15, students will be able to build a full Student Management System (CRUD) with Django + MySQL.

Perfect 👍 Let’s move forward!

Week 16: Django Forms + Input Validation

(A better way to collect and validate user data in Django)

1. What is it?

A form in Django is a simple way to collect data from users and check that it’s correct before saving it into the database.

2. Why use it?

Easier than writing HTML forms manually.
Automatically validates data (e.g., checks if fields are empty, or age is a number).
Reduces errors when saving to the database.

3. Where is it used?

Student registration forms
Teacher record forms
Login/Signup forms
Feedback forms

4. How to use it?

Day 1 – Creating a Django Form (Add Student)

forms.py

from django import forms

from .models import Student

class StudentForm(forms.ModelForm):

class Meta:

model = Student

fields = ['name', 'age', 'score']

views.py

from .forms import StudentForm

def add_student(request):

if request.method == "POST":

form = StudentForm(request.POST)

if form.is_valid():

form.save()

return redirect('/students/show/')

else:

form = StudentForm()

return render(request, 'add_student.html', {'form': form})

add_student.html

<h2>Add Student (Form)</h2>

{% csrf_token %}

</form>

✅ Students can now be added using Django forms.

Classwork:

Add 3 new students using the form.

Day 2 – Form Validation (Check Empty Fields)

Add validation inside the form:

forms.py

class StudentForm(forms.ModelForm):

class Meta:

model = Student

fields = ['name', 'age', 'score']

def clean_name(self):

name = self.cleaned_data.get('name')

if name == "":

raise forms.ValidationError("Name cannot be empty!")

return name

✅ Now Django shows an error if the name field is left empty.

Classwork:

Try submitting an empty form.
Observe the error messages.

Day 3 – Update Student with Forms

views.py

def edit_student(request, id):

student = Student.objects.get(id=id)

if request.method == "POST":

form = StudentForm(request.POST, instance=student)

if form.is_valid():

form.save()

return redirect('/students/show/')

else:

form = StudentForm(instance=student)

return render(request, 'edit_student.html', {'form': form})

edit_student.html

<h2>Edit Student (Form)</h2>

{% csrf_token %}

<button type="submit">Update</button>

</form>

✅ Now students can be updated using forms.

Classwork:

Update a student’s name from Mary → Mary Jane.

Day 4 – Styling Django Forms + Error Display

add_student.html

<h2>Add Student</h2>

{% csrf_token %}

{% if form.errors %}

<p style="color: red;">Please correct the errors above</p>

{% endif %}

</form>

✅ Students can see clear error messages.

Classwork:

Add CSS styling to make the form look better (e.g., font, colors).

Day 5 – Friday Assessment (Test)

Q1. Why are Django forms better than raw HTML forms?
Q2. Write a Django form for Teacher model (name, subject, age).
Q3. How do you validate a form field in Django?
Q4. Write code to edit a student using Django forms.
Q5. What happens if a form is not valid?

Mini Project (End of Week 16)

Student Database App (Part 8)

Replace all manual forms with Django forms.
Add validation (name cannot be empty, score must be a number).
Show error messages clearly.
Make forms look nice with simple CSS.

✅ By the end of Week 16, students will know how to use Django forms with validation connected to MySQL.

Great 👍 Let’s move forward!

Week 17: Advanced MySQL in Django (Relationships)

(One-to-Many & Many-to-Many Relationships)

1. What is it?

In databases, relationships connect tables together.

One-to-Many → One teacher teaches many students.
Many-to-Many → A student can take many subjects, and a subject can have many students.

2. Why use it?

Makes databases more organized.
Avoids repeating data.
Allows real-life modeling (schools, hospitals, e-commerce).

3. Where is it used?

School system (Teachers ↔ Students ↔ Subjects).
Hospital (Doctors ↔ Patients ↔ Departments).
Online shops (Customers ↔ Products ↔ Orders).

4. How to use it in Django + MySQL?

Day 1 – One-to-Many (Teacher → Students)

models.py

from django.db import models

class Teacher(models.Model):

name = models.CharField(max_length=100)

subject = models.CharField(max_length=50)

class Student(models.Model):

name = models.CharField(max_length=100)

age = models.IntegerField()

teacher = models.ForeignKey(Teacher, on_delete=models.CASCADE)

✅ Each student is linked to one teacher.

views.py

def show_students(request):

students = Student.objects.all()

return render(request, 'show_students.html', {'students': students})

show_students.html

<h2>Student List</h2>

<ul>

{% for s in students %}

<li>{{ s.name }} (Age: {{ s.age }}) - Teacher: {{ s.teacher.name }}</li>

{% endfor %}

</ul>

Classwork:

Create 2 teachers and link 3 students to each.

Day 2 – Many-to-Many (Students ↔ Subjects)

models.py

class Subject(models.Model):

name = models.CharField(max_length=50)

class Student(models.Model):

name = models.CharField(max_length=100)

age = models.IntegerField()

subjects = models.ManyToManyField(Subject)

✅ A student can take many subjects, and each subject can have many students.

views.py

def show_students_subjects(request):

students = Student.objects.all()

return render(request, 'students_subjects.html', {'students': students})

students_subjects.html

<h2>Students & Subjects</h2>

<ul>

{% for s in students %}

<li>{{ s.name }} - Subjects:

{% for subj in s.subjects.all %}

{% empty %}

No subjects

{% endfor %}

</li>

{% endfor %}

</ul>

Classwork:

Add 2 subjects (Math, English).
Assign them to different students.

Day 3 – Adding Data with Forms

forms.py

from .models import Student, Teacher, Subject

from django import forms

class StudentForm(forms.ModelForm):

class Meta:

model = Student

fields = ['name', 'age', 'teacher', 'subjects']

views.py

def add_student(request):

if request.method == "POST":

form = StudentForm(request.POST)

if form.is_valid():

form.save()

return redirect('/students/show/')

else:

form = StudentForm()

return render(request, 'add_student.html', {'form': form})

add_student.html

<h2>Add Student</h2>

{% csrf_token %}

</form>

✅ Now you can select a teacher and multiple subjects when creating a student.

Classwork:

Create a new student and assign them 1 teacher + 2 subjects.

Day 4 – Querying Relationships

views.py

def students_by_teacher(request, teacher_id):

teacher = Teacher.objects.get(id=teacher_id)

students = Student.objects.filter(teacher=teacher)

return render(request, 'students_by_teacher.html', {'teacher': teacher, 'students': students})

students_by_teacher.html

<h2>Students taught by {{ teacher.name }}</h2>

<ul>

{% for s in students %}

{% endfor %}

</ul>

✅ You can now filter students by their teacher.

Classwork:

Show all students taught by "Mr. John".

Day 5 – Friday Assessment (Test)

Q1. What is the difference between One-to-Many and Many-to-Many?
Q2. Write a Django model for Course and Student where a student can take many courses.
Q3. Write a Django query to get all students of a specific teacher.
Q4. What happens if you delete a teacher with on_delete=models.CASCADE?
Q5. Why are relationships important in databases?

Mini Project (End of Week 17)

Student Database App (Part 9)

Add a Teacher model (one-to-many with students).
Add a Subject model (many-to-many with students).
Update student forms to allow teacher + subject selection.
Display subjects under each student in the student list.

✅ By the end of Week 17, students will be able to build a school system with teachers, students, and subjects connected using Django + MySQL relationships.

Perfect 👌 Let’s move into Week 18 — now that the Django + MySQL foundation is done, we make the project look professional by improving the user interface (UI).

Week 18: Templates + Bootstrap Styling in Django

1. What is it?

Templates in Django are HTML files that can use dynamic data (from the backend) and Bootstrap (a CSS framework) to make the website look neat, responsive, and professional.

2. Why use it?

· Makes the website look clean and easy to use

· Responsive (works on phones, tablets, laptops)

· Faster development with ready-made styles

3. Where is it used?

· Login/Register pages

· Student forms

· Tables (showing students list)

· Navigation menus

4. How to use it?

Step 1: Add Bootstrap to Django Template

Inside your base.html (main layout file):

<!DOCTYPE html>

<html>

<head>

    <title>Student Database</title>

    <!-- Bootstrap CDN -->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

</head>

<body>

    <div class="container mt-4">

        {% block content %}

        {% endblock %}

    </div>

</body>

</html>

Step 2: Use Template Inheritance

Now create a page that extends the base layout.

{% extends 'base.html' %}

{% block content %}

<h2 class="text-center">Student List</h2>

<table class="table table-striped">

    <tr>

        <th>ID</th>

        <th>Name</th>

        <th>Age</th>

        <th>Class</th>

    </tr>

    {% for student in students %}

    <tr>

        <td>{{ student.id }}</td>

        <td>{{ student.name }}</td>

        <td>{{ student.age }}</td>

        <td>{{ student.student_class }}</td>

    </tr>

    {% endfor %}

</table>

{% endblock %}

Step 3: Add a Form with Bootstrap

{% extends 'base.html' %}

{% block content %}

<h2 class="text-center">Add Student</h2>

<form method="POST" class="p-4 border rounded bg-light">

    {% csrf_token %}

    <div class="mb-3">

        <label>Name</label>

        <input type="text" name="name" class="form-control" placeholder="Enter name">

    </div>

    <div class="mb-3">

        <label>Age</label>

        <input type="number" name="age" class="form-control" placeholder="Enter age">

    </div>

    <div class="mb-3">

        <label>Class</label>

        <input type="text" name="student_class" class="form-control" placeholder="Enter class">

    </div>

    <button type="submit" class="btn btn-primary">Save</button>

</form>

{% endblock %}

5. Mini Project (This Week)

· Apply Bootstrap to:
✅ Student List Page (table)
✅ Add Student Form (styled with Bootstrap)
✅ Navigation bar (Home, Add Student, About)

6. Classwork

1. Style the student list with Bootstrap.

2. Add a form card for adding new students.

7. Assignment

· Create a homepage with:

o Navigation bar

o Welcome text

o Link to “Add Student” and “Student List”

✅ By the end of Week 18:
Your app will look like a professional web app (not plain HTML).

Great 👍 Let’s continue.

We finished Week 18 (Bootstrap + Templates).
Now we move into Week 19: User Authentication (Login, Register, Logout).

Week 19: User Authentication in Django

1. What is it?

Authentication means checking who the user is.

· Register → Create a new account.

· Login → Verify account and password.

· Logout → Exit the account.

2. Why use it?

· To secure the system (only authorized users can add/view students).

· To personalize experience (e.g., “Welcome Raheem”).

3. Where is it used?

· Websites with accounts (Facebook, Gmail, Banking apps).

· Our Student Database App → only logged-in users can add/edit students.

4. How to use it in Django?

Step 1: Enable Authentication

Django already has a User model built-in.

Step 2: Create Register (Signup) Page

# views.py

from django.contrib.auth.models import User

from django.contrib.auth import login

from django.shortcuts import render, redirect

def register_view(request):

    if request.method == "POST":

        username = request.POST["username"]

        password = request.POST["password"]

        user = User.objects.create_user(username=username, password=password)

        login(request, user)  # Auto login after signup

        return redirect("home")

    return render(request, "register.html")

Template (register.html):

{% extends 'base.html' %}

{% block content %}

<h2>Register</h2>

<form method="POST" class="p-3 border rounded bg-light">

    {% csrf_token %}

    <input type="text" name="username" placeholder="Username" class="form-control mb-2">

    <input type="password" name="password" placeholder="Password" class="form-control mb-2">

    <button type="submit" class="btn btn-success">Register</button>

</form>

{% endblock %}

Step 3: Create Login Page

# views.py

from django.contrib.auth import authenticate, login, logout

def login_view(request):

    if request.method == "POST":

        username = request.POST["username"]

        password = request.POST["password"]

        user = authenticate(request, username=username, password=password)

        if user is not None:

            login(request, user)

            return redirect("home")

    return render(request, "login.html")

Template (login.html):

{% extends 'base.html' %}

{% block content %}

<h2>Login</h2>

<form method="POST" class="p-3 border rounded bg-light">

    {% csrf_token %}

    <input type="text" name="username" placeholder="Username" class="form-control mb-2">

    <input type="password" name="password" placeholder="Password" class="form-control mb-2">

    <button type="submit" class="btn btn-primary">Login</button>

</form>

{% endblock %}

Step 4: Create Logout Function

def logout_view(request):

    logout(request)

    return redirect("login")

Add a logout button in base.html:

<a href="{% url 'logout' %}" class="btn btn-danger">Logout</a>

5. Mini Project (This Week)

✅ Add Register page
✅ Add Login page
✅ Add Logout button
✅ Restrict student pages → only logged-in users can access

6. Classwork

1. Create a register.html template.

2. Create a login.html template.

3. Add a logout link in the navigation.

7. Assignment

· Protect “Add Student” and “Student List” pages → only logged-in users should see them.
(Hint: Use Django’s @login_required decorator.)

✅ By the end of Week 19:
Your app will be secure: only users with accounts can use it.

Perfect 👍 Let’s move on to the next stage.

We completed Week 19: User Authentication.
Now we continue with Week 20: CRUD Operations with Django + MySQL.

Week 20: CRUD Operations (Create, Read, Update, Delete) with MySQL

1. What is it?

CRUD stands for:

· C → Create → Add new student records

· R → Read → Display student list/details

· U → Update → Edit student details

· D → Delete → Remove a student

This is the core of every database system.

2. Why use it?

· To manage data properly.

· Every system (bank app, school app, online store) needs CRUD operations.

3. Where is it used?

· Student management apps (add new students, update results).

· E-commerce sites (add products, edit price, delete product).

· Social media (create posts, edit posts, delete posts).

4. How to use it in Django + MySQL?

Step 1: Model (Student Table)

# models.py

from django.db import models

class Student(models.Model):

    name = models.CharField(max_length=100)

    age = models.IntegerField()

    grade = models.CharField(max_length=20)

    def __str__(self):

        return self.name

Run migrations to create the student table in MySQL:

python manage.py makemigrations

python manage.py migrate

Step 2: Create (Add Student)

# views.py

from django.shortcuts import render, redirect

from .models import Student

def add_student(request):

    if request.method == "POST":

        name = request.POST["name"]

        age = request.POST["age"]

        grade = request.POST["grade"]

        Student.objects.create(name=name, age=age, grade=grade)

        return redirect("student_list")

    return render(request, "add_student.html")

Template (add_student.html):

<h2>Add Student</h2>

<form method="POST">

    {% csrf_token %}

    <input type="text" name="name" placeholder="Name"><br><br>

    <input type="number" name="age" placeholder="Age"><br><br>

    <input type="text" name="grade" placeholder="Grade"><br><br>

    <button type="submit">Save</button>

</form>

Step 3: Read (View Students)

# views.py

def student_list(request):

    students = Student.objects.all()

    return render(request, "student_list.html", {"students": students})

Template (student_list.html):

<h2>Student List</h2>

<table border="1">

    <tr><th>Name</th><th>Age</th><th>Grade</th><th>Action</th></tr>

    {% for s in students %}

    <tr>

        <td>{{ s.name }}</td>

        <td>{{ s.age }}</td>

        <td>{{ s.grade }}</td>

        <td>

            <a href="{% url 'update_student' s.id %}">Edit</a> |

            <a href="{% url 'delete_student' s.id %}">Delete</a>

        </td>

    </tr>

    {% endfor %}

</table>

Step 4: Update (Edit Student)

# views.py

def update_student(request, id):

    student = Student.objects.get(id=id)

    if request.method == "POST":

        student.name = request.POST["name"]

        student.age = request.POST["age"]

        student.grade = request.POST["grade"]

        student.save()

        return redirect("student_list")

    return render(request, "update_student.html", {"student": student})

Template (update_student.html):

<h2>Edit Student</h2>

<form method="POST">

    {% csrf_token %}

    <input type="text" name="name" value="{{ student.name }}"><br><br>

    <input type="number" name="age" value="{{ student.age }}"><br><br>

    <input type="text" name="grade" value="{{ student.grade }}"><br><br>

    <button type="submit">Update</button>

</form>

Step 5: Delete (Remove Student)

# views.py

def delete_student(request, id):

    student = Student.objects.get(id=id)

    student.delete()

    return redirect("student_list")

5. Mini Project (This Week)

✅ Add new student (Create)
✅ Show all students (Read)
✅ Edit student info (Update)
✅ Remove student (Delete)

6. Classwork

1. Add 5 students using the Add Student form.

2. Display all students in student_list.html.

3. Try editing one student’s name.

4. Delete one student record.

7. Assignment

· Add an extra field in Student model → e.g., “Email”.

· Update all CRUD pages to include this new field.

✅ By the end of Week 20:
Your Student Database App will be fully functional with MySQL → you can add, view, edit, and delete students.

Perfect 👍 Let’s continue.

We finished Week 20 (CRUD with Django + MySQL).
Now we move to Week 21: Primary Keys & Foreign Keys (Relationships in MySQL + Django).

Week 21: Primary Keys & Foreign Keys in Django + MySQL

1. What is it?

· Primary Key (PK): A unique ID that identifies each row in a table.
Example → Each student has a unique id.

· Foreign Key (FK): A link between two tables (relationship).
Example → Each student belongs to a class (Class table).

2. Why use it?

· To avoid duplicate data.

· To link related information together.

· Example: Instead of writing "Basic 4" many times for each student, create a Class table and link students to it.

3. Where is it used?

· Schools → Student belongs to a class, class has many students.

· Shops → Product belongs to a category.

· Banks → Account belongs to a customer.

4. How to use it in Django + MySQL?

Step 1: Create Class Model

# models.py

from django.db import models

class ClassRoom(models.Model):

    name = models.CharField(max_length=50)

    def __str__(self):

        return self.name

Step 2: Link Student to Class using ForeignKey

class Student(models.Model):

    name = models.CharField(max_length=100)

    age = models.IntegerField()

    grade = models.CharField(max_length=20)

    classroom = models.ForeignKey(ClassRoom, on_delete=models.CASCADE)  # FK

    def __str__(self):

        return self.name

📌 on_delete=models.CASCADE → if a class is deleted, all its students will also be deleted.

Step 3: Run Migrations

python manage.py makemigrations

python manage.py migrate

Step 4: Update Add Student View (Now select Class)

# views.py

def add_student(request):

    from .models import ClassRoom

    classes = ClassRoom.objects.all()

    if request.method == "POST":

        name = request.POST["name"]

        age = request.POST["age"]

        grade = request.POST["grade"]

        classroom_id = request.POST["classroom"]

        classroom = ClassRoom.objects.get(id=classroom_id)

        Student.objects.create(name=name, age=age, grade=grade, classroom=classroom)

        return redirect("student_list")

    return render(request, "add_student.html", {"classes": classes})

Template (add_student.html):

<h2>Add Student</h2>

<form method="POST">

    {% csrf_token %}

    <input type="text" name="name" placeholder="Name"><br><br>

    <input type="number" name="age" placeholder="Age"><br><br>

    <input type="text" name="grade" placeholder="Grade"><br><br>

    <label>Class:</label>

    <select name="classroom">

        {% for c in classes %}

        <option value="{{ c.id }}">{{ c.name }}</option>

        {% endfor %}

    </select><br><br>

    <button type="submit">Save</button>

</form>

Step 5: Display Student with Class Name

<!-- student_list.html -->

<h2>Student List</h2>

<table border="1">

    <tr><th>Name</th><th>Age</th><th>Grade</th><th>Class</th></tr>

    {% for s in students %}

    <tr>

        <td>{{ s.name }}</td>

        <td>{{ s.age }}</td>

        <td>{{ s.grade }}</td>

        <td>{{ s.classroom.name }}</td>

    </tr>

    {% endfor %}

</table>

5. Mini Project (This Week)

✅ Create ClassRoom model
✅ Add Foreign Key (student belongs to class)
✅ Update forms to select a class when adding a student
✅ Show class name in student list

6. Classwork

1. Create 3 classes → “Basic 4”, “Basic 5”, “Basic 6”.

2. Add 5 students → assign each to a class.

3. Show all students with their class.

7. Assignment

· Add another model Teacher (with name + subject).

· Link each class to a teacher using ForeignKey.

· Show teacher’s name next to the class when displaying students.

✅ By the end of Week 21:
You’ll understand database relationships and your app will handle real-world school structure → Students in Classes, Classes with Teachers.

Perfect 👍 Let’s continue.

We finished Week 20 (CRUD with Django + MySQL).
Now we move to Week 21: Primary Keys & Foreign Keys (Relationships in MySQL + Django).

Week 21: Primary Keys & Foreign Keys in Django + MySQL

1. What is it?

· Primary Key (PK): A unique ID that identifies each row in a table.
Example → Each student has a unique id.

· Foreign Key (FK): A link between two tables (relationship).
Example → Each student belongs to a class (Class table).

2. Why use it?

· To avoid duplicate data.

· To link related information together.

· Example: Instead of writing "Basic 4" many times for each student, create a Class table and link students to it.

3. Where is it used?

· Schools → Student belongs to a class, class has many students.

· Shops → Product belongs to a category.

· Banks → Account belongs to a customer.

4. How to use it in Django + MySQL?

Step 1: Create Class Model

# models.py

from django.db import models

class ClassRoom(models.Model):

    name = models.CharField(max_length=50)

    def __str__(self):

        return self.name

Step 2: Link Student to Class using ForeignKey

class Student(models.Model):

    name = models.CharField(max_length=100)

    age = models.IntegerField()

    grade = models.CharField(max_length=20)

    classroom = models.ForeignKey(ClassRoom, on_delete=models.CASCADE)  # FK

    def __str__(self):

        return self.name

📌 on_delete=models.CASCADE → if a class is deleted, all its students will also be deleted.

Step 3: Run Migrations

python manage.py makemigrations

python manage.py migrate

Step 4: Update Add Student View (Now select Class)

# views.py

def add_student(request):

    from .models import ClassRoom

    classes = ClassRoom.objects.all()

    if request.method == "POST":

        name = request.POST["name"]

        age = request.POST["age"]

        grade = request.POST["grade"]

        classroom_id = request.POST["classroom"]

        classroom = ClassRoom.objects.get(id=classroom_id)

        Student.objects.create(name=name, age=age, grade=grade, classroom=classroom)

        return redirect("student_list")

    return render(request, "add_student.html", {"classes": classes})

Template (add_student.html):

<h2>Add Student</h2>

<form method="POST">

    {% csrf_token %}

    <input type="text" name="name" placeholder="Name"><br><br>

    <input type="number" name="age" placeholder="Age"><br><br>

    <input type="text" name="grade" placeholder="Grade"><br><br>

    <label>Class:</label>

    <select name="classroom">

        {% for c in classes %}

        <option value="{{ c.id }}">{{ c.name }}</option>

        {% endfor %}

    </select><br><br>

    <button type="submit">Save</button>

</form>

Step 5: Display Student with Class Name

<!-- student_list.html -->

<h2>Student List</h2>

<table border="1">

    <tr><th>Name</th><th>Age</th><th>Grade</th><th>Class</th></tr>

    {% for s in students %}

    <tr>

        <td>{{ s.name }}</td>

        <td>{{ s.age }}</td>

        <td>{{ s.grade }}</td>

        <td>{{ s.classroom.name }}</td>

    </tr>

    {% endfor %}

</table>

5. Mini Project (This Week)

✅ Create ClassRoom model
✅ Add Foreign Key (student belongs to class)
✅ Update forms to select a class when adding a student
✅ Show class name in student list

6. Classwork

1. Create 3 classes → “Basic 4”, “Basic 5”, “Basic 6”.

2. Add 5 students → assign each to a class.

3. Show all students with their class.

7. Assignment

· Add another model Teacher (with name + subject).

· Link each class to a teacher using ForeignKey.

· Show teacher’s name next to the class when displaying students.

✅ By the end of Week 21:
You’ll understand database relationships and your app will handle real-world school structure → Students in Classes, Classes with Teachers.

Great 👍 Let’s continue with the next part of Django Foundations + MySQL Basics.

We’ve already:
✅ Installed Django & set up a project
✅ Created apps & configured settings
✅ Learned Models, Views, Templates (MVT)
✅ Setup URLs & Static files
✅ Installed MySQL and connected with Django

📘 Today’s Lesson: Databases, Tables, and CRUD in Django with MySQL

1. Databases and Tables

A Database is like a big container where we keep data.
A Table is like a folder inside the database where specific data is stored.
Example:

Database: school_db
Table: students

In Django, tables are created automatically from Models.

2. CRUD Operations

CRUD = Create, Read, Update, Delete → the main actions we do with data.

(A) Create (Insert Data)

Let’s add a student to the database.

models.py

from django.db import models

class Student(models.Model):

name = models.CharField(max_length=100)

age = models.IntegerField()

email = models.EmailField(unique=True)

👉 Run:

python manage.py makemigrations

python manage.py migrate

Now Django creates a students table in MySQL.

Add data (in views.py):

from django.shortcuts import render

from .models import Student

def add_student(request):

new_student = Student(name="John Doe", age=20, email="john@example.com")

new_student.save()

return render(request, "success.html", {"student": new_student})

(B) Read (Retrieve Data)

Get all students:

def view_students(request):

students = Student.objects.all() # fetch all records

return render(request, "students.html", {"students": students})

(C) Update (Change Data)

Update one student’s age:

def update_student(request, student_id):

student = Student.objects.get(id=student_id)

student.age = 25

student.save()

return render(request, "success.html", {"student": student})

(D) Delete (Remove Data)

Delete a student:

def delete_student(request, student_id):

student = Student.objects.get(id=student_id)

student.delete()

return render(request, "deleted.html")

3. Primary Keys & Foreign Keys

Primary Key: Unique ID for each record (Django adds it automatically as id).
Foreign Key: Connects two tables. Example: A Course table linked to Student.

class Course(models.Model):

course_name = models.CharField(max_length=100)

student = models.ForeignKey(Student, on_delete=models.CASCADE)

4. Practical Mini Project – Student Database App

✅ Create a database in MySQL: school_db
✅ Add Students (Create)
✅ Show list of Students (Read)
✅ Update Student info (Update)
✅ Delete Student (Delete)

📌 Next, we’ll connect these views to URLs + Templates (HTML pages) so we can see them in the browser.

Perfect 🚀 Let’s continue!

Now we will connect our CRUD views with URLs and HTML templates so that we can see everything in the browser.

📘 Django CRUD with URLs + Templates

1. URLs Setup

Inside your app (example: students), open urls.py:

from django.urls import path

from . import views

urlpatterns = [

path('add/', views.add_student, name='add_student'),

path('view/', views.view_students, name='view_students'),

path('update/<int:student_id>/', views.update_student, name='update_student'),

path('delete/<int:student_id>/', views.delete_student, name='delete_student'),

]

👉 Then include these URLs in the main school/urls.py (the project file):

from django.contrib import admin

from django.urls import path, include

urlpatterns = [

path('admin/', admin.site.urls),

path('students/', include('students.urls')), # link app urls

]

2. Templates (HTML Files)

📂 Create a folder called templates inside your app, then add these files:

(A) success.html

<!DOCTYPE html>

<html>

<head>

<title>Success</title>

</head>

<body>

<h2>Student Saved Successfully!</h2>

<p>Name: {{ student.name }}</p>

<p>Age: {{ student.age }}</p>

<p>Email: {{ student.email }}</p>

<a href="/students/view/">View All Students</a>

</body>

</html>

(B) students.html

<!DOCTYPE html>

<html>

<head>

<title>Students List</title>

</head>

<body>

<h2>All Students</h2>

<ul>

{% for s in students %}

<li>

{{ s.name }} ({{ s.age }}) - {{ s.email }}

| <a href="/students/update/{{ s.id }}/">Update</a>

| <a href="/students/delete/{{ s.id }}/">Delete</a>

</li>

{% endfor %}

</ul>

<a href="/students/add/">Add New Student</a>

</body>

</html>

(C) deleted.html

<!DOCTYPE html>

<html>

<head>

<title>Deleted</title>

</head>

<body>

<h2>Student Deleted Successfully!</h2>

<a href="/students/view/">Back to Students List</a>

</body>

</html>

3. Testing in Browser

Open server:

· python manage.py runserver

Go to:

http://127.0.0.1:8000/students/add/ → Add student
http://127.0.0.1:8000/students/view/ → View list
Click update or delete links to test

✅ Now your Student Database App works fully with Django + MySQL CRUD.

Pages

Popular Posts

About

Search This Blog

About Me

Tuesday, March 18, 2025

Software Development Handout for Beginers

Day One Assignment – Software Development & HTML Basics

Part A: Theory Questions

Part B: Practical Tasks

Part C: Mini Project

Day Two: Anchor link and List Tags in HTML

1. Anchor Link (<a> Tag)

List Tags in HTML

1. What are Lists in HTML?

Lists in HTML are used to display items in an organized way. Each item in a list is written inside the <li> tag. 👉 Example: <li>Apple</li> <li>Banana</li> <li>Orange</li>

2. Types of Lists in HTML

There are three main types of lists:

a. Ordered List (<ol>)

What: A numbered list. Why: To show items in a sequence or ranking. Where: Steps, instructions, or rankings. How: Use <ol> and put list items inside <li>. 👉 Example: <ol> <li>Wake up</li> <li>Brush teeth</li> <li>Eat breakfast</li> </ol> ✅ Output: Wake up Brush teeth Eat breakfast

b. Unordered List (<ul>)

What: A bulleted list. Why: To show items without order. Where: Hobbies, shopping lists, features. How: Use <ul> and put list items inside <li>. 👉 Example: <ul> <li>Football</li> <li>Reading</li> <li>Drawing</li> </ul> ✅ Output: Football Reading Drawing

c. Description List (<dl>)

3. Class Activities

Create an ordered list of your daily routine. Create an unordered list of your five favorite foods. Use a description list to explain three computer terms.

4. Mini Project

My Shopping List Page Create an HTML page called shopping.html. Add a heading: "My Shopping List". Add an unordered list of 5 items to buy. Add an ordered list of 3 steps to prepare for shopping. Add a description list explaining at least 2 items (e.g., Rice – A staple food).

Day Three: Tables in HTML

Tables in HTML

1. What is a Table in HTML?

A table is a way of displaying data in rows and columns on a webpage. 👉 Example in real life: Student results, price lists, timetables.

2. Why Use Tables?

To arrange information neatly. To make data easy to read. To show comparisons.

3. Table Tags and Their Functions

4. Simple Table Example

<table border="1"> <tr> <th>Name</th> <th>Age</th> <th>Class</th> </tr> <tr> <td>John</td> <td>12</td> <td>JS1</td> </tr> <tr> <td>Mary</td> <td>13</td> <td>JS2</td> </tr> </table> ✅ Output: NameAgeClassJohn12JS1Mary13JS2

5. Adding Caption to a Table

<table border="1"> <caption>Student Details</caption> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Ada</td> <td>14</td> </tr> </table>

6. Using thead, tbody, and tfoot

<table border="1"> <thead> <tr> <th>Subject</th> <th>Score</th> </tr> </thead> <tbody> <tr> <td>Math</td> <td>80</td> </tr> <tr> <td>English</td> <td>75</td> </tr> </tbody> <tfoot> <tr> <td>Total</td> <td>155</td> </tr> </tfoot> </table>

7. Class Activities

Create a table of 5 friends showing their name, age, and favorite food. Create a table with 3 rows and 3 columns showing your school subjects and marks. Add a caption to the table saying "My School Report".

8. Mini Project

Student Report Table Create an HTML page called report.html. Add a table with these columns: Name, Mathematics, English, Science, Total. Fill in the data for at least 3 students. Add a caption: "Class Report Sheet".

Day four: Forms in HTML

1. What is a Form in HTML?

A form is used in HTML to collect input from users (like text, numbers, options). 👉 Example in real life: Login form, registration form, feedback form.

2. Why Use Forms?

To collect user data (name, email, password, etc.). To allow interaction between users and websites. Forms are the main way websites receive information from visitors.

3. Basic Form Tag

The main container is the <form> tag. <form>  </form>

4. Common Form Elements

5. Simple Form Example

6. Radio Buttons Example

<p>Gender:</p> <input type="radio" name="gender" value="Male"> Male <input type="radio" name="gender" value="Female"> Female

7. Checkbox Example

<p>Hobbies:</p> <input type="checkbox" value="Reading"> Reading <input type="checkbox" value="Football"> Football <input type="checkbox" value="Drawing"> Drawing

8. Dropdown Example

<label for="country">Choose Country:</label> <select id="country"> <option value="nigeria">Nigeria</option> <option value="ghana">Ghana</option> <option value="kenya">Kenya</option> </select>

9. Class Activities

Create a simple form with fields for Name, Age, and Email. Add radio buttons for gender selection. Add checkboxes for hobbies. Add a submit button.

10. Mini Project

Student Registration Form Create a page register.html. Add fields for: Name, Email, Password, Age. Add a radio button for Gender. Add checkboxes for Hobbies. Add a drop-down for Class (e.g., JSS1, JSS2, JSS3). Add a Submit button.

Day 5 Project

Week Project: Student Profile Website

Project Title:

Project Requirements

1. Homepage (index.html)

2. My Hobbies Page (hobbies.html)

3. My School Report Page (report.html)

4. Registration Page (register.html)

Navigation (Optional Challenge)

Expected Skills Used

Final Deliverable

Week Two Lesson Plan: HTML & CSS

Week 2: Introduction to CSS

Day 1: What is CSS?

Day 2: CSS Selectors

Day 3: CSS Properties

Day 4: CSS Colors & Units

1. Anchor Link (`<a>` Tag)

Lists in HTML are used to display items in an organized way.
Each item in a list is written inside the `<li>` tag.

👉 Example:

`<li>Apple</li> <li>Banana</li> <li>Orange</li>`

a. Ordered List (`<ol>`)

b. Unordered List (`<ul>`)

What: A bulleted list.

Why: To show items without order.

Where: Hobbies, shopping lists, features.

How: Use `<ul>` and put list items inside `<li>`.

👉 Example:

`<ul> <li>Football</li> <li>Reading</li> <li>Drawing</li> </ul>`

✅ Output:

Football

Reading

Drawing

c. Description List (`<dl>`)

Create an ordered list of your daily routine.

Create an unordered list of your five favorite foods.

Use a description list to explain three computer terms.

My Shopping List Page

Create an HTML page called `shopping.html`.

Add a heading: "My Shopping List".

Add an unordered list of 5 items to buy.

Add an ordered list of 3 steps to prepare for shopping.

Add a description list explaining at least 2 items (e.g., Rice – A staple food).

A table is a way of displaying data in rows and columns on a webpage.

👉 Example in real life: Student results, price lists, timetables.

To arrange information neatly.

To make data easy to read.

To show comparisons.

`<table border="1"> <tr> <th>Name</th> <th>Age</th> <th>Class</th> </tr> <tr> <td>John</td> <td>12</td> <td>JS1</td> </tr> <tr> <td>Mary</td> <td>13</td> <td>JS2</td> </tr> </table>`

✅ Output:

Name Age Class
John 12 JS1
Mary 13 JS2

`<table border="1"> <caption>Student Details</caption> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Ada</td> <td>14</td> </tr> </table>`

6. Using `thead`, `tbody`, and `tfoot`

`<table border="1"> <thead> <tr> <th>Subject</th> <th>Score</th> </tr> </thead> <tbody> <tr> <td>Math</td> <td>80</td> </tr> <tr> <td>English</td> <td>75</td> </tr> </tbody> <tfoot> <tr> <td>Total</td> <td>155</td> </tr> </tfoot> </table>`

Create a table of 5 friends showing their name, age, and favorite food.

Create a table with 3 rows and 3 columns showing your school subjects and marks.

Add a caption to the table saying "My School Report".

Student Report Table

Create an HTML page called `report.html`.

Add a table with these columns: Name, Mathematics, English, Science, Total.

Fill in the data for at least 3 students.

Add a caption: "Class Report Sheet".

A form is used in HTML to collect input from users (like text, numbers, options).
👉 Example in real life: Login form, registration form, feedback form.

To collect user data (name, email, password, etc.).

To allow interaction between users and websites.

Forms are the main way websites receive information from visitors.

The main container is the `<form>` tag.

`<form>  </form>`

`<p>Gender:</p> <input type="radio" name="gender" value="Male"> Male <input type="radio" name="gender" value="Female"> Female`

`<p>Hobbies:</p> <input type="checkbox" value="Reading"> Reading <input type="checkbox" value="Football"> Football <input type="checkbox" value="Drawing"> Drawing`

`<label for="country">Choose Country:</label> <select id="country"> <option value="nigeria">Nigeria</option> <option value="ghana">Ghana</option> <option value="kenya">Kenya</option> </select>`

Create a simple form with fields for Name, Age, and Email.

Add radio buttons for gender selection.

Add checkboxes for hobbies.

Add a submit button.

Student Registration Form

Create a page `register.html`.

Add fields for: Name, Email, Password, Age.

Add a radio button for Gender.

Add checkboxes for Hobbies.

Add a drop-down for Class (e.g., JSS1, JSS2, JSS3).

Add a Submit button.

Colors: By name (`red`), HEX (`#ff0000`), RGB (`rgb(255,0,0)`), HSL.

Units:

`px` (pixels, fixed size)

`%` (relative size)

`em/rem` (relative to font size)

👉 Example:
`p { color: #008000; font-size: 20px; }`
Activity: Write 3 paragraphs, each styled with different colors and font sizes.

Students will:

Know what CSS is and why it is used.

Understand inline, internal, and external CSS.

Use selectors (element, ID, class).

Style text, backgrounds, and boxes.

Create a styled profile webpage.

1. `if` Statement

2. `if...else`

3. `if...else if...else`

4. `switch` Statement

1. `for` Loop

2. `while` Loop

3. `do...while` Loop

1. Using `prompt()` to Collect User Input

2. Using `alert()` to Display Results

3. Using `confirm()` for Yes/No Questions