Web Development, Types, Core Technologies HTML, CSS and JavaScript for SS 1

Class: SS 1
Term: First Term
Week: 2
Age: 15 years
Duration: 60 minutes
Subject: Digital Technologies
Curriculum Theme: Web Development and Management
Focal competence: Describing the process and the key components of web development
Key competencies/values: Collaboration; Digital Competencies
Skills:

• explain the functions of core technologies for web development
• state the tools for web development

Previous Lesson: Web Development Products and Examples
Topic: Web Development: Types Of Web Development
Subject Matter: Types of web development

Specific Objectives

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

Cognitive Domain

• explain the functions of core technologies for web development;
• state the tools for web development;
• identify the types of web development;
• describe the tools for building a website.

Affective Domain

• appreciate the importance of collaboration in web development projects;
• value the role of digital competencies in modern careers.

Psychomotor Domain

• participate effectively in group discussions about web development;
• use the internet to research web development tools and technologies.

Social Domain

• collaborate effectively with peers during group research and discussions.

Reference Materials

The following resources were used in planning this lesson:

• 2025 New Revised Senior Secondary Education Curriculum (SSEC)
• Relevant State Unified Scheme of Work
• The HeadTeacher Scheme of work For The New Revised Senior Secondary Education Curriculum (SSEC)
• A suitable Digital Technologies textbook for SS 1

Instructional Materials

The teacher will teach this lesson with the aid of:

• Computers
• Mobile phones
• Internet Access
• Whiteboard and markers
• Projector (optional)

Rationale for the Lesson

This lesson is important because it introduces students to the foundational concepts of web development, a critical skill in the digital age. Understanding the types of web development and the core technologies involved provides a clear pathway for students interested in creating and managing websites. It also equips them with essential digital literacy for future careers and personal projects.

Prerequisite/Previous Knowledge

Students should have basic knowledge of computers, internet usage, and general digital literacy.

Lesson Content/Board Summary

Web Development: Types Of Web Development

Types of Web Development

Web development refers to the work involved in developing a website for the Internet (World Wide Web) or an intranet (a private network). It can be broadly categorised into three main types:

1. Front-End Development: This involves creating the parts of a website that users see and interact with directly. It focuses on the user interface (UI) and user experience (UX), ensuring the website looks good and is easy to use. Front-end developers work with languages like HTML, CSS, and JavaScript to build the visual elements, layouts, and interactive features.
2. Back-End Development: This deals with the server-side of a website, databases, and applications that users don’t see. Back-end developers build and maintain the technology that powers the front-end, handling data storage, security, and server logic. Common back-end languages include Python, Java, PHP, Ruby, and Node.js.
3. Full-Stack Development: A full-stack developer is proficient in both front-end and back-end development. They can handle all aspects of web development, from designing the user interface to managing servers and databases. This versatility allows them to build complete web applications independently.

Functions of Core Technologies for Web Development

Three core technologies form the foundation of most web development:

1. Hyper-Text Markup Language (HTML):
   1. Function: HTML is the standard markup language for creating web pages and web applications. It provides the structure and content of a webpage.
   2. Analogy: Think of HTML as the skeleton or framework of a house, defining where the walls, doors, and windows will be.
   3. Key elements: Headings (<h1> to <h6>), paragraphs (<p>), images (<img>), links (<a>), and lists (<ul>, <ol>).
2. Cascading Style Sheet (CSS):
   1. Function: CSS is used for styling the presentation of a document written in HTML. It controls the colours, fonts, layout, and overall visual appearance of a webpage.
   2. Analogy: CSS is like the interior and exterior design of the house, choosing paint colours, furniture, and landscaping.
   3. Key properties: color, font-size, background-color, margin, padding, display, position.
3. JavaScript (JS):
   1. Function: JavaScript is a programming language that enables interactive web pages. It allows developers to create dynamic content, animations, games, and other interactive features that respond to user actions.
   2. Analogy: JavaScript is the electricity and smart home systems that make the house functional and interactive, allowing lights to turn on, doors to open, and appliances to work.
   3. Applications: Form validation, interactive maps, animated sliders, dynamic content updates without reloading the page.

Web Development Tools

Various tools assist developers in building websites efficiently:

1. Web Builders (Website Builders):
   1. Description: These are platforms that allow users to create websites without manual coding. They typically offer drag-and-drop interfaces, pre-designed templates, and intuitive editors.
   2. Examples: Wix, Squarespace, Weebly.
   3. Use Case: Ideal for individuals or small businesses needing a quick and easy website without technical expertise.
2. Content Management Systems (CMS):
   1. Description: A CMS is a software application or a set of related programs that are used to create and manage digital content. They provide a user-friendly interface for content creation, editing, and publishing.
   2. Examples: WordPress, Joomla, Drupal.
   3. Use Case: Suitable for blogs, e-commerce sites, and corporate websites where content needs frequent updates by multiple users.
3. Text-Based Coding (Code Editors/IDEs):
   1. Description: This involves writing code directly using text editors or Integrated Development Environments (IDEs). These tools provide features like syntax highlighting, code completion, and debugging.
   2. Examples: Visual Studio Code, Sublime Text, Atom, Notepad++.
   3. Use Case: Preferred by professional developers for complex projects, custom functionalities, and full control over the website’s code.

Teaching Methods/Instructional Techniques

Discussion, Demonstration, Guided Practice, Question and Answer, Explanation, Group Work, Research Activity.

Instructional Procedures

Step 1: Introduction

Time: 5 minutes

Teaching Skill: Explaining/Questioning

Teacher’s Activity: The teacher greets the students and asks them what they understand by “website” and if they know how websites are created. The teacher then introduces the topic: Web Development: Types of Web Development.

Pupils’ Activity: Pupils respond to the questions and listen attentively to the introduction.

Learning Point: Introduction to web development

Step 2: Identifying Types of Web Development

Time: 10 minutes

Teaching Skill: Explanation/Discussion

Teacher’s Activity: The teacher explains the three main types of web development: front-end, back-end, and full-stack development, using simple analogies to make the concepts clear. The teacher encourages students to ask questions.

Pupils’ Activity: Pupils listen, take notes, and ask questions for clarification on the different types of web development.

Learning Point: Understanding web development types

Step 3: Group Discussion on Types of Web Development

Time: 10 minutes

Teaching Skill: Group Facilitation

Teacher’s Activity: The teacher divides students into small groups and guides them to discuss the meaning and types of web development, sharing their understanding and examples.

Pupils’ Activity: Pupils participate in group discussions, sharing ideas and clarifying concepts among themselves.

Learning Point: Collaborative understanding of types

Step 4: Introduction to Core Technologies

Time: 10 minutes

Teaching Skill: Explanation/Demonstration

Teacher’s Activity: The teacher introduces the core technologies for web development: HTML, CSS, and JavaScript. The teacher briefly explains the primary function of each, perhaps showing a simple example on a projector if available.

Pupils’ Activity: Pupils listen and observe the examples, trying to grasp the basic roles of HTML, CSS, and JavaScript.

Learning Point: Core web technologies introduced

Step 5: Functions of Core Technologies

Time: 5 minutes

Teaching Skill: Guided Research

Teacher’s Activity: The teacher guides students (in their groups) to use their mobile phones or available computers to search the internet for more details on the functions of HTML, CSS, and JavaScript for web development.

Pupils’ Activity: Pupils actively search the internet for information on the functions of core web technologies.

Learning Point: Researching technology functions

Step 6: Web Development Tools

Time: 5 minutes

Teaching Skill: Explanation/Q&A

Teacher’s Activity: The teacher explains the different web development tools such as web builders, content management systems (CMS), and text-based coding, providing examples for each.

Pupils’ Activity: Pupils listen, take notes, and ask questions about the various web development tools.

Learning Point: Understanding web development tools

Step 7: Evaluation/Review

Time: 5 minutes

Teaching Skill: Questioning/Assessment

Teacher’s Activity: The teacher evaluates the learning by asking the following questions:

1. Mention three types of web development.
2. What is the main function of HTML in web development?
3. How does CSS contribute to a website’s appearance?
4. Name two web development tools.

Pupils’ Activity: Pupils answer orally and in writing.

Learning Point: Assessment of understanding

Step 8: Note-Taking

Time: 10 minutes

Teaching Skill: Guided Writing

Teacher’s Activity: The teacher guides pupils/students to copy the essential Board Summary notes on types of web development, core technologies, and tools into their notebooks.

Pupils’ Activity: Pupils/students copy the notes carefully into their notebooks.

Learning Point: Recording lesson notes

Step 9: Conclusion

Time: 5 minutes

Teaching Skill: Summarising

Teacher’s Activity: The teacher summarises the key points of the lesson, reinforcing the importance of understanding web development types, core technologies (HTML, CSS, JS), and tools for building websites. The teacher encourages students to explore web development further.

Pupils’ Activity: Pupils listen to the summary and prepare for the next lesson.

Learning Point: Lesson consolidation

Continuous Assessment/Further Study

Type: Homework

Instruction: Answer the following questions in your Digital Technologies notebook:

1. Differentiate between front-end and back-end web development.
2. Explain how JavaScript adds interactivity to a webpage.
3. Research and list two advantages and two disadvantages of using a web builder compared to text-based coding for website creation.
4. Give an example of a website you visit regularly and identify which core technology (HTML, CSS, or JavaScript) you think is primarily responsible for its structure, styling, and interactive features, respectively.

Lesson Keywords

• Web Development – The process of creating websites.
• Front-End – The part of a website users interact with.
• Back-End – The server-side of a website, handling data and logic.
• Full-Stack – Development covering both front-end and back-end.
• HTML – Hyper-Text Markup Language, for structuring web content.
• CSS – Cascading Style Sheet, for styling web pages.
• JavaScript (JS) – For adding interactivity to websites.
• Web Builder – Tool for creating websites without coding.
• CMS – Content Management System, for managing digital content.
• Text-Based Coding – Writing code directly using editors.

Differentiation

For learners needing support: The teacher will provide simpler analogies and more direct examples for HTML, CSS, and JavaScript. Group activities will be structured to ensure all members contribute, with stronger students supporting weaker ones. The teacher will provide pre-selected websites for research to simplify the search process.

For learners needing enrichment: Encourage advanced students to explore basic HTML tags and CSS properties using online sandbox environments. They can also research specific frameworks or libraries associated with front-end (e.g., React) or back-end (e.g., Django) development and present their findings to the class.

Suggested Lesson Videos

Search on YouTube for: types of web development for beginners ss1