Computing 1 BK2
Computing 1 BK2
Activity (10 minutes) Activity 1: Introducing Variables and Activity 1: Introducing Variables Level 1 (Recall)
Algorithms (25 minutes) and Algorithms (25 minutes) 1. What is an algorithm?
Teacher introduces learners to Explain variables in programming Discuss the role of variables in a. A computer program
algorithms using a simple real-life using real-life examples, such as solving problems. b. A graph
example (e.g., cooking palm nut asking the user for their name and age. Identify the inputs and outputs of c. Step-by-step instructions
soup). Present a simple real-life algorithm
Learners discuss the step-by-step (e.g., making a meal) and prompt the real-life algorithm presented
process and identify how it can be learners to identify inputs and outputs. by the teacher.
represented algorithmically.
Activity 2: Writing Pseudocode (30 Activity 2: Writing Pseudocode
Tell learners the Strand and Sub- minutes) (30 minutes)
used to solve a problem
Strand of the lesson Share the Demonstrate how to write pseudocode Work in pairs to develop
2. State what is meant by a
indicator with learners. for a simple task, like adding two pseudocode for the task assigned
variable in programming
numbers or calculating the area of a by the teacher (e.g., calculating the
3. Name two ways to
rectangle. area of a rectangle).
represent an algorithm.
Give learners a task to write Share their pseudocode with the
pseudocode for a new problem. class and explain their process.
Level 2 (Skills & Concepts)
1. Give one similarity and
Activity 3: Flowchart Development Activity 3: Flowchart
one difference between
(35 minutes) Development (35 minutes)
pseudocode and a flowchart.
Introduce flowcharts as a visual In groups, create a flowchart based
representation of algorithms and on the pseudocode they developed.
explain the key symbols (e.g., Present their flowchart to the
terminator, input/output, process). class, explaining each symbol
Guide learners in converting their used.
pseudocode into flowcharts.
Lesson Closure (20 minutes)
Facilitate a reflection session where learners discuss how the flowchart helped clarify the algorithm.
Learner Activities
Participate in the group discussion and share reflections on how the flowchart improved understanding of the algorithm.
Reflection & Remarks
What did I do right in today’s lesson and how can I create more situations?
Which activity did learners enjoy most in today’s lesson?
Were the different subgroups in the class catered for?
What were my challenges in today’s lesson?
What must I do to improve on the challenges in the next lesson?
Lesson 2
Theme/Focal Area (s)/Sub-Strand Area (SSA)
Assessment DoK aligned to
Main Lesson drawing on Concepts, Skills and Competencies to
Starter the Curriculum and
reenforce as in the Subject Manual
Subject Manual
Activity (10 minutes) Activity 1: Problem Analysis & Activity 1: Problem Analysis &
Algorithm Design (30 minutes) Algorithm Design (30 minutes)
Teacher reviews the flowcharts Explain the stages of the program Analyze the problem presented by
created in Lesson 1 and prompts a development cycle: analysis, design, the teacher and identify inputs,
discussion on how these help in coding, and testing. processes, and outputs.
planning a program before Present a simple problem (e.g., Design an algorithm to solve the
coding. calculating the average of four problem.
numbers) and guide learners in
. analyzing the problem.
Activity (10 minutes) Activity 1: Introduction to Program Activity 1: Introduction to Level 1: Recall
Development Cycle (30 minutes) Program Development Cycle (30 1. Name the first four
Introduce the class to a familiar Explain the concept of the program minutes) phases/stages of the Program
task, such as organizing a school development cycle (analysis, design, Discuss the first essential Development Cycle.
event. coding, and testing). question: "What is the role of 2. What is the second stage
Ask learners to reflect on how Provide visual aids, showing how each analysis in problem-solving?" of the SDLC?
analysis helps in breaking down stage leads to successful problem- Analyze a given problem (e.g., 3. At what stage of the
the event into manageable steps. solving. calculating the area of a circle), program development cycle
Encourage them to think of how identifying inputs, processes, and would a wireframe of the
the task would be solved outputs. This allows learners to user interface be created?
differently if analysis were see the value of analysis in a. Analysis stage
skipped. ensuring clarity in problem- b. Design stage
Activity 2: Algorithm Design (35 solving. c. Testing stage
minutes)
Guide learners through the design Activity 2: Algorithm Design (35
phase, explaining how creating minutes)
pseudocode ensures clarity before Design an algorithm using
moving to coding. pseudocode for a real-life problem
Reinforce the second essential (e.g., finding the average of test
question: "How does the design phase scores). Focus on the clarity of the
improve the clarity of an algorithm?" steps.
Engage in group discussions on
how the design phase helps them
Activity 3: Introduction to Flowcharts avoid mistakes in later stages.
(35 minutes)
Demonstrate how to represent Activity 3: Introduction to
pseudocode using flowcharts, Flowcharts (35 minutes)
explaining each symbol. Convert their pseudocode into
Guide the learners to revisit the third flowcharts and explain the steps in
essential question: "What are the steps their algorithms.
to implement an algorithm in coding?" Discuss how the flowchart makes
Show them how clear flowcharts make coding simpler, relating it to the
coding easier. essential question.
Lesson Closure (20 minutes)
1. Reinforce the importance of the design phase and how it prepares them for coding and testing.
2. Assign homework: create a flowchart for a task that requires analysis, design, coding, and testing.
Learner Activities
1. Reflect on the lesson’s essential questions and how they answered them throughout the lesson.
2. Complete the assigned task, emphasizing the analysis and design phases.
Reflection & Remarks
What did I do right in today’s lesson and how can I create more situations?
Which activity did learners enjoy most in today’s lesson?
Were the different subgroups in the class catered for?
What were my challenges in today’s lesson?
What must I do to improve on the challenges in the next lesson?
Lesson 2
Theme/Focal Area (s)/Sub-Strand Area (SSA)
Assessment DoK aligned to
Main Lesson drawing on Concepts, Skills and Competencies to
Starter the Curriculum and
reenforce as in the Subject Manual
Subject Manual
Activity (10 minutes) Activity 1: Introduction to Coding (40 Activity 1: Introduction to Level 2: Skills and Concepts
minutes) Coding (40 minutes) 1. Describe what is meant by
Begin by reviewing the essential Demonstrate how to turn a flowchart Work individually or in pairs to a logical error. State one
questions and prompting learners into actual code, emphasizing syntax write code from their flowcharts.
to reflect on the coding challenges and logical errors. Share challenges they encounter
they expect to encounter. Discuss the essential question, "What and discuss how to address them.
Discuss how debugging can help challenges are faced during the coding
solve coding issues. phase?"
example of pseudocode
Activity 2: Debugging (30 minutes) Activity 2: Debugging (30
containing a logical error to
Introduce the process of debugging and minutes)
support your answer.
provide examples of errors (syntax, Debug their own code and
logic, runtime). document the errors they find.
Level 3: Strategic Thinking
Focus on the essential question: "How Reflect on how debugging helps
1. When executed, the
does debugging improve the accuracy improve their programs.
program shown in Figure
of a program?"
14:4 generates a run-time
error.
Activity 3: Program Testing (30 Activity 3: Program Testing (30
Explain why this is so.
minutes) minutes)
message = "Happy Birthday
Explain the importance of testing and Test their code using various sets
to you!" print(message1
how to use normal, extreme, and of data and make improvements.
exceptional test data. Document their results and note
Ask learners to reflect on the essential how different test data uncovered
question: "How do different types of errors.
test data help in debugging programs?"
Activity (10 minutes) Activity 1: Introduction to Data Activity 1: Introduction to Data Level 1: Recall
Structures (30 minutes) Structures (30 minutes) 1. State the name of two data
Engage learners by using a real- Introduce the concept of data structures Discuss the importance of structures used in
life analogy, like comparing data with a focus on their role in organizing organizing data efficiently. programming.
structures to organizing items in a and storing data. In groups, identify examples of 2. A data structure is a
home.
Use visuals (charts or diagrams) to data structures from everyday particular way of storing and
For instance, ask learners how
they would store cloths in a show the difference between simple scenarios (e.g., bookshelves, organizing data in a
wardrobe, utensils in a kitchen, data types (e.g., integers, strings) and organizational charts) and relate computer so that it can be
or books in a library more complex data structures (e.g., them to linear and non-linear used efficiently.
This sets the stage for arrays, stacks, trees). structures. a. True
understanding the role of data b. False
structures in programming. Activity 2: Classification of Data Activity 2: Classification of Data
Structures (35 minutes) Structures (35 minutes)
Explain the classifications of data Work in pairs to classify real-
structures: linear vs non-linear and world examples (e.g., library
static vs dynamic. systems, road networks) into linear
Provide examples of each type (e.g., and non-linear data structures.
arrays and linked lists for linear Present their findings and engage
structures, trees and graphs for non- in discussions.
linear structures).
Activity (10 minutes) Activity 1: Static vs Dynamic Data Activity 1: Static vs Dynamic Level 3: Strategic Thinking
Structures (35 minutes) Data Structures (35 minutes) 1. As a member of the
Begin with a quick recap of the Introduce the differences between Work in pairs to discuss the
computing club in your
static and dynamic data structures, advantages and disadvantages of
different types of data structures school, imagine you need to
emphasizing memory allocation. static vs dynamic data structures.
and ask learners to brainstorm Use Python code to demonstrate how Experiment with Python code to manage an ever-changing list
situations where dynamic data arrays (static) and linked lists create and manipulate static and of member names with
structures (like linked lists) would (dynamic) are declared and dynamic structures. frequent additions and
be more efficient than static ones manipulated. deletions.
(like arrays). Activity 2: Exploring Searching a. Which would be more
Activity 2: Exploring Searching and and Sorting Algorithms (30 suitable for this task: a static
Sorting Algorithms (30 minutes) minutes)
Explain how searching (e.g., linear or a dynamic data structure?
In small groups, simulate
search, binary search) and sorting (e.g., searching and sorting operations Justify your choice of
bubble sort, quick sort) are performed on arrays and linked lists. answer. b. Identify at least
on different data structures.
Use visual aids (e.g., flowcharts) to Present their findings, discussing
show the steps involved in these which data structure is more
algorithms. efficient for each operation.
two operations that would be
Activity 3: Choosing the Right Data regularly performed on the
Structure (30 minutes) Activity 3: Choosing the Right chosen data structure.
Pose a complex problem (e.g., Data Structure (30 minutes) c. Describe possible uses of
managing a dynamic list of students’ Work in teams to solve the these operations in this
grades) and ask learners to suggest the problem using the data structure scenario.
most suitable data structure. they find most appropriate.
Guide learners in reflecting on the Present their solutions and justify
advantages and limitations of different their choice of data structure.
structures.
Lesson Closure (20 minutes)
1. Summarize the key learning outcomes of the day and assign homework to create a flowchart for a real-life scenario (e.g., planning a
school event).
Learner Activities
1. Reflect on the day’s activities and prepare to complete the homework assignment.
Reflection & Remarks
What did I do right in today’s lesson and how can I create more situations?
Which activity did learners enjoy most in today’s lesson?
Were the different subgroups in the class catered for?
What were my challenges in today’s lesson?
What must I do to improve on the challenges in the next lesson?
Weekly Learning Plan
Subject Computing Week 16 Duration 240 minutes Form Year 1
Computational Thinking Sub-
Strand Algorithm and Data Structure
(Programming Logic) Strand
Learning Outcome(s) Apply knowledge of data structures to explain their real-life applications effectively
Content Standard Demonstrate knowledge and understanding of Data Structures
Learning
Differentiate between the types of Data Structures.
Indicator(s)
1. What is an array, and how does it help organize data in programming?
Essential Question(s) linked to the 2. How does a one-dimensional array differ from a two-dimensional array?
Knowledge Hierarchy aligned with the 3. What are the advantages and disadvantages of arrays?
4. How does memory allocation work in arrays, and why is it important?
Content Standards and Learning
5. Why is it important to choose the right type of array (1D vs 2D) for specific problems?
Indicators 6. What are the real-world applications of 2D arrays in computing?
7. How do static arrays differ from dynamic arrays in terms of memory allocation?
Project-Based Learning;
Talk for Learning;
Experiential learning;
Pedagogical Strategies Group work/collaborative learning.
Think-pair-share,
Questioning
Demonstration
Teaching & Learning Resources Notepad or exercise book
Pen
Smartphones
Laptop computers
Desktop computers
Tablets
TV
Radio
Productivity tools
Open Educational Resources (Including: YouTube, MOOCS-Udemy/ Coursera, khan
academy, TESSA)
The iBox (CENDLOS)
Subject based application software
Instructional Laboratories (with multimedia equipment and smartboards)
Maintenance and repair workshops
Key Notes on Differentiation
1. Provide scaffolding for complex concepts like 2D arrays and dynamic arrays.
2. Use real-life examples to simplify abstract programming concepts.
Content 3. Offer additional materials (e.g., videos, diagrams) to support learners who need more
guidance.
4. Challenge advanced learners with tasks involving dynamic arrays and practical applications.
1. Use group discussions to facilitate peer learning and support.
Process 2. Offer independent coding tasks for advanced learners who progress faster.
3. Allow students to work at their own pace, offering extra support as needed.
4. Incorporate hands-on activities to engage kinesthetic learners.
1. Encourage students to present their arrays in various formats (written, coded, diagrams).
Product 2. Provide multiple assessment opportunities (peer review, presentations, coding exercises).
3. Allow advanced learners to solve more complex problems using dynamic arrays.
4. Encourage self-assessment through reflection tasks.
Keywords Array, One-dimensional, Two-dimensional, Static, Dynamic, Insertion, Deletion, Memory
Allocation.
Lesson 1
Theme/Focal Area (s)/Sub-Strand Area (SSA)
Assessment DoK aligned to
Main Lesson drawing on Concepts, Skills and Competencies to
Starter the Curriculum and
reenforce as in the Subject Manual
Subject Manual
Activity (10 minutes) Activity 1: Applications of Linked Activity 1: Applications of Linked Level 2: Skills and Concepts
Lists (35 minutes) Lists (35 minutes) 1. Explain how a data item in
Begin with a quick review of the Show examples of how linked lists are In pairs, learners will discuss and a linked list can be deleted.
used in web browsers (back and present examples of linked lists in
previous lesson. Use a class 2. Explain why insertions
forward buttons) and task scheduling in real-world applications.
discussion to compare how a operating systems. Work on a group task where they and deletions of data items
stack might be used in undo/redo Guide learners in exploring a music diagram a linked list used for task are faster in a linked list
functions versus how a linked list app's playlist feature as a linked list. scheduling in an operating system. compared to an array.
might manage a playlist in a
music app. Activity 2: Operations in Linked Lists Activity 2: Operations in Linked
(30 minutes) Lists (30 minutes)
Demonstrate how insertion and Learners will simulate insertion
deletion work in linked lists and and deletion in a linked list using
compare them with array operations. visual aids and discuss the
Use diagrams to show the steps of efficiency of these operations
adding and removing nodes in a singly compared to arrays.
linked list.
Activity (10 minutes) Activity 1: Introduction to Binary Activity 1: Introduction to Binary Level 2: Skills and Concepts
Trees (35 minutes) Trees (35 minutes) 1. Draw diagrams to
Start with a class activity where Introduce binary trees as a type of non- Learners will work in groups to illustrate how data items are
learners organize a set of objects linear data structure. Use diagrams to construct a binary tree from a set arranged in the following
into a tree structure (e.g., family explain the hierarchy and parent-child of data (e.g., student test scores). data structures:
trees or organizational charts). relationships in binary trees. They will practice adding new • Binary tree
Discuss how tree structures make Show examples of binary trees used in nodes and rearranging the tree. • Graph
it easier to see relationships and search engines and file systems. Each group will present their
navigate data. binary tree and discuss how the Level 4: Extended Thinking
data is organized. 1. Find out more about tree
and graph data structures.
Activity 2: Operations on Binary Activity 2: Operations on Binary Create a presentation about
Trees (30 minutes) Trees (30 minutes) these two non-linear data
Demonstrate the key operations on In small groups, learners will structures.
binary trees: insertion, deletion, and simulate performing operations on
traversal (inorder, preorder, postorder). a binary tree, practicing traversal
Provide a step-by-step guide on how to techniques.
perform these operations using an Each group will discuss the
example tree. advantages of using a binary tree
for efficient data organization and
Activity 3: Binary Trees in Real- retrieval.
World Applications (30 minutes) Activity 3: Binary Trees in Real-
Discuss the use of binary trees in World Applications (30 minutes)
applications like search engines, where Learners will work in pairs to
they help organize large datasets research and present one real-
efficiently. world application of binary trees
Provide examples of other non-linear or graphs (e.g., organizing web
data structures like graphs and explain pages in a search engine or
their relevance in fields like social modeling social networks).
networks. Present findings to the class,
highlighting the advantages of
using trees and graphs.
Lesson Closure (20 minutes)
1. Summarize the key takeaways from the lesson, focusing on the applications of binary trees and graphs in solving complex problems.
2. Assign homework: learners should create a simple binary tree representing a hierarchy in their daily life (e.g., organizing their files or
contacts).
Learner Activities
1. Reflect on how binary trees can be applied in various contexts and complete the homework task.
Reflection & Remarks
What did I do right in today’s lesson and how can I create more situations?
Which activity did learners enjoy most in today’s lesson?
Were the different subgroups in the class catered for?
What were my challenges in today’s lesson?
What must I do to improve on the challenges in the next lesson?
Weekly Learning Plan
Activity (10 minutes) Activity 1: Arrays in Python (35 Activity 1: Arrays in Python (35
minutes) minutes)
Begin with a quick review of Introduce arrays as a data structure in In small groups, learners will
arrays. Ask learners to discuss Python using lists. Demonstrate basic create an array in Python and
where they see arrays in real life operations like inserting, deleting, and perform basic operations.
(e.g., seating arrangements, lists accessing elements. Present their arrays and explain
of names). This will connect Walk learners through examples in how the operations work.
arrays in programming to real- Python, showing how arrays work.
world examples. Activity 2: Built-in Python Array
Activity 2: Built-in Python Array Methods (30 minutes)
Methods (30 minutes) Learners will experiment with
Introduce built-in array methods in array methods in Python,
Python (e.g., `append()`, `pop()`, practicing operations like
`sort()`). appending and sorting elements.
Demonstrate how these methods Discuss the importance of built-in
simplify common operations. methods and how they simplify
code.
Activity 3: Solving Problems with Activity 3: Solving Problems with
Arrays (30 minutes) Arrays (30 minutes)
Present a real-world problem that In small groups, learners will
requires the use of arrays (e.g., storingsolve the problem by planning
and sorting a list of student names). their approach, writing
Guide learners in planning the pseudocode, and coding the
algorithm, creating pseudocode, and solution.
implementing the solution in Python. Present their solutions and discuss
how arrays helped solve the
problem efficiently.
Lesson Closure (20 minutes)
1. Summarize the lesson by highlighting the importance of arrays and Python's built-in methods.
2. Assign homework: learners will write a Python program that creates an array of five numbers and sorts it in descending order.
Learner Activities
1. Reflect on how they applied algorithms and arrays in Python and complete the assigned homework task.
Reflection & Remarks
What did I do right in today’s lesson and how can I create more situations?
Which activity did learners enjoy most in today’s lesson?
Were the different subgroups in the class catered for?
What were my challenges in today’s lesson?
What must I do to improve on the challenges in the next lesson?
Activity (10 minutes) Activity 1: Arrays in Python (35 Activity 1: Arrays in Python (35 Level 1 (Recall)
minutes) minutes) 1. What method would you
Begin with a quick review of Introduce arrays as a data structure in In small groups, learners will use to add an item to the end
arrays. Ask learners to discuss Python using lists. Demonstrate basic create an array in Python and of an array in Python?
where they see arrays in real life operations like inserting, deleting, and perform basic operations.
(e.g., seating arrangements, lists accessing elements. Present their arrays and explain Level 2 (Skill/Concept)
of names). This will connect Walk learners through examples in how the operations work. 2. Use a `for` loop to print
arrays in programming to real- Python, showing how arrays work. each element in an array of
world examples. Activity 2: Built-in Python Array student names. What
Activity 2: Built-in Python Array Methods (30 minutes) changes would you make to
Methods (30 minutes) Learners will experiment with print the names in reverse
Introduce built-in array methods in array methods in Python, order?
Python (e.g., `append()`, `pop()`, practicing operations like
`sort()`). appending and sorting elements. Level 3 (Strategic Thinking)
Demonstrate how these methods Discuss the importance of built-in 3. Design a Python program
simplify common operations. methods and how they simplify that uses both a `for` loop
code. and a `while` loop to process
an array of temperatures over
Activity 3: Solving Problems with Activity 3: Solving Problems with
Arrays (30 minutes) Arrays (30 minutes)
Present a real-world problem that In small groups, learners will
a week. How would you
requires the use of arrays (e.g., storingsolve the problem by planning
modify your program to
and sorting a list of student names). their approach, writing
include temperature
Guide learners in planning the pseudocode, and coding the
conversion from Celsius to
algorithm, creating pseudocode, and solution.
Fahrenheit?
implementing the solution in Python. Present their solutions and discuss
how arrays helped solve the
problem efficiently.
Lesson Closure (20 minutes)
1. Summarize the lesson by highlighting the importance of arrays and Python's built-in methods.
2. Assign homework: learners will write a Python program that creates an array of five numbers and sorts it in descending order.
Learner Activities
1. Reflect on how they applied algorithms and arrays in Python and complete the assigned homework task.
Reflection & Remarks
What did I do right in today’s lesson and how can I create more situations?
Which activity did learners enjoy most in today’s lesson?
Were the different subgroups in the class catered for?
What were my challenges in today’s lesson?
What must I do to improve on the challenges in the next lesson?
Activity (10 minutes) Introduction (10 minutes) Introduction (10 minutes) Level 1 (Recall)
Introduce HTML tags, explaining how Learners follow along by taking 1. What HTML tag is used to
Show a live example of a simple they define different elements of a notes on the tags introduced. create a hyperlink?
webpage and ask learners to webpage. Ask questions to clarify how each
identify its components (headings, Demonstrate the syntax of basic tag contributes to the overall Level 2 (Skill/Concept)
menus, text, links, images). HTML tags, such as `<h1>`, `<p>`, structure of a webpage. 2. Create a basic webpage
`<img>`, and `<a>`. with a heading, a paragraph,
Learner Activities and an image. What tags did
Learners observe the webpage Activity 1 (20 minutes) Activity 1 (20 minutes) you use, and why?
and participate by identifying the Guide learners through creating a Work in pairs to create their own
components. simple webpage layout with headings HTML document, writing code for Level 3 (Strategic Thinking)
Share their ideas on the purpose and paragraphs using HTML. basic headings and text 3. After creating a webpage
of each component and how it Provide step-by-step instructions on paragraphs. with images and links, how
helps the user navigate the page. how to set up an HTML document Test their code in a web browser would you modify the page
(using a text editor) and structure it and ensure the webpage displays to make it accessible for
with `<html>`, `<head>`, and `<body>` correctly.
tags.
Activity 2 (30 minutes) Activity 2 (30 minutes)
Demonstrate how to insert images Individually practice inserting an
(`<img>`) and links (`<a>`) into the image of their choice into their
HTML page. webpage.
Explain how images enhance the visual Add a link to a favorite website or
appeal and how links enable navigation another section of their webpage
between different pages or external and test the functionality in their users with visual
websites. browser. impairments?
Activity 3 (30 minutes)
Challenge learners to create a webpage Activity 3 (30 minutes)
that includes a heading, a paragraph, an Complete the challenge by adding
image, and a link. Encourage them to all the required elements to their
experiment with different heading sizes webpage.
and image alignments. Test the webpage in a browser,
- Circulate around the room, ensuring that all components work
providing individual support as needed. correctly.
Lesson Closure (20 minutes)
1. Review the key HTML elements covered in the lesson (headings, text, images, and links).
2. Emphasize the importance of structure in web development and how HTML is the foundation for building webpages.
Learner Activities
1. Recap what they learned and ask any lingering questions about HTML tags or webpage structure.
2. Homework: Plan the layout for a personal webpage (e.g., about their favorite hobby), sketching the structure and labeling the HTML elements
they will use.
Reflection & Remarks
What did I do right in today’s lesson and how can I create more situations?
Which activity did learners enjoy most in today’s lesson?
Were the different subgroups in the class catered for?
What were my challenges in today’s lesson?
What must I do to improve on the challenges in the next lesson?
Lesson 2
Theme/Focal Area (s)/Sub-Strand Area (SSA)
Assessment DoK aligned to
Main Lesson drawing on Concepts, Skills and Competencies to
Starter the Curriculum and
reenforce as in the Subject Manual
Subject Manual
Activity (10 minutes) Introduction (10 minutes) Introduction (10 minutes) Level 1 (Recall)
Explain how CSS (Cascading Style Take notes on CSS rules and 1. What attribute is used in
Conduct a quick review of the Sheets) works with HTML to improve syntax. the `<img>` tag to specify
previous lesson by asking learners the appearance of a webpage. Ask questions to clarify how CSS the image source?
to explain how headings, images, Demonstrate simple CSS styles to is applied to HTML elements.
and links were used in their change text color, font size, and Level 2 (Skill/Concept)
webpages. background color. 2. Add links to your
Introduce the concept of styling a Activity 1 (20 minutes) webpage that allow users to
webpage using CSS. Activity 1 (20 minutes) Create a basic CSS file and link it navigate between different
Guide learners through creating a to their webpage. sections. How did you
Learners’ will follow along with simple CSS file and linking it to their Experiment with changing the ensure the navigation is user-
the introduction to CSS. HTML document. colour of headings and the friendly?
Show how to apply styles like background color of their
changing the background color and webpage. Level 3 (Strategic Thinking)
adjusting font sizes for different 3. Design a multi-page
Activity 2 (30 minutes)
headings. website that includes images,
Apply margin and padding to their
Activity 2 (30 minutes) links, and a navigation menu.
webpage elements, experimenting
Demonstrate more advanced CSS How would you structure the
with spacing between headings,
properties such as margin, padding, website to ensure optimal
text, and images.
and text alignment. Explain how these user experience?
Use CSS to center align text and
properties improve the visual layout of
images, observing how it changes
a webpage.
the look of the webpage.
Show examples of before and after
using these styles on a webpage.
- **Learner Activities**:
- Share their updated webpages with the class, explaining the styling choices they made.
- Homework: Complete their personal webpage by refining the layout and styles, ensuring it includes headings, text, images, links, and CSS.
Reflection & Remarks
What did I do right in today’s lesson and how can I create more situations?
Which activity did learners enjoy most in today’s lesson?
Were the different subgroups in the class catered for?
What were my challenges in today’s lesson?
What must I do to improve on the challenges in the next lesson?
Activity (10 minutes) Introduction (10 minutes) Introduction (10 minutes) Level 1 (Recall)
Explain the process of prototyping, Take notes on prototyping and ask 1. What is the purpose of a
Review key concepts from the emphasizing how wireframes lead to questions about the tools sitemap in web
previous lesson by asking interactive prototypes. Introduce tools mentioned. development?
students to share what they that can be used for prototyping.
learned about wireframes and Activity 1 (20 minutes) Level 2 (Skill/Concept)
sitemaps. Activity 1 (20 minutes) Follow along as the teacher 2. Create a sitemap for a
Demonstrate how to convert a demonstrates, setting up their blog website with at least
wireframe into a clickable prototype accounts on the prototyping tool if five main sections. What
using a prototyping tool (e.g., Figma, necessary. structure did you use, and
Adobe XD). Show how to link why?
different sections of the wireframe.
Level 3 (Strategic Thinking)
Activity 2 (30 minutes) Activity 2 (30 minutes) 3. Design a sitemap for a
- Guide learners as they work to Create a prototype based on their large company website. How
create their own prototypes from their wireframe, linking the pages and would you organize the
wireframes. Provide tips on adding testing their navigation content to improve
interactivity and testing navigation. functionality. navigation for users?