Advanced Web Design - SSS 3 Plan

LESSON PLAN

SECOND TERM: ADVANCED WEB DESIGN

Item	Details
Subject	Digital Technologies
Class	SSS 3
Term	Second Term
Week	1
Topic	Advanced Web Design
Duration	80 Minutes (Double Period)
Date	________________

1. Learning Objectives

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

1. Explain the role of JavaScript in web development.
2. Identify ways JavaScript can make web pages interactive.
3. Demonstrate simple JavaScript interactions on a webpage.
4. Explain the meaning of responsive web design.
5. Identify the importance of designing websites for different screen sizes.
6. Apply basic responsive design techniques using CSS media queries.

2. Previous Knowledge

Students have previous knowledge of basic HTML and CSS and have learnt how webpages are structured and styled. This lesson builds on that knowledge by introducing JavaScript interactivity and responsive web design.

3. Instructional Materials

• Computers or laptops.
• Web browser.
• Text editor or code editor.
• Projector or display screen, where available.
• Sample HTML/CSS/JavaScript webpage.
• Whiteboard and markers.

4. Teaching Methods

Explanation, discussion, demonstration, questioning, guided practical activity and project-based learning.

5. Presentation

Stage / Time	Teacher's Activities	Students' Activities
1. Introduction 8 minutes	Reviews students' knowledge of HTML and CSS. Asks students how a webpage can respond when a user clicks a button or enters information. Introduces the topic Advanced Web Design.	Respond to questions and describe examples of interactive webpages they have seen or used.
2. JavaScript 12 minutes	Explains JavaScript and its role in adding behaviour and interactivity to webpages. Demonstrates simple JavaScript syntax and functions.	Listen, take notes and identify examples of actions JavaScript can perform on a webpage.
3. Web Interactivity 12 minutes	Demonstrates how JavaScript can respond to events such as button clicks and change webpage content. Explains common events such as onclick, onchange and onsubmit.	Observe the demonstration and identify different events that can trigger JavaScript actions.
4. Responsive Web Design 12 minutes	Explains responsive web design and why websites should work properly on desktops, tablets and smartphones. Demonstrates how a layout can adapt to different screen sizes.	Explain responsive web design and mention different devices used to access websites.
5. Media Queries 12 minutes	Introduces CSS media queries. Demonstrates a simple media query using max-width to change webpage styling on smaller screens.	Observe the demonstration and write a simple media query in their notebooks or code editor.
6. Practical Activity 16 minutes	Guides students to create or modify a simple webpage containing a heading, paragraph and button. Students add JavaScript to make the button respond and use a media query to adjust the page on smaller screens.	Create or modify the webpage and test the JavaScript interaction and responsive layout.
7. Conclusion 8 minutes	Reviews the main points of the lesson and asks students questions about JavaScript, interactivity and responsive design.	Answer questions and summarise what they have learnt.

Total Duration: 80 Minutes

6. Evaluation

1. What is JavaScript?
2. State three uses of JavaScript in web development.
3. What is a JavaScript event?
4. Mention three examples of JavaScript events.
5. What is responsive web design?
6. Why should websites be designed for different screen sizes?
7. What is the purpose of a CSS media query?
8. Mention three problems that may occur when a website is not responsive.

7. Assignment

Create a simple webpage containing a heading, a paragraph and a button. Use JavaScript to make the button display or change a message. Add a CSS media query that changes at least one aspect of the webpage when the screen width is 600 pixels or less.

8. References

• SSS 3 Digital Technologies Scheme of Work, Second Term, Week 1.
• Digital Technologies class notes and practical materials.