AP CSP Day 5 - Web Technologies

Course Information

• Course: AP Computer Science Principles
• Unit: Big Idea 2 - Computer Systems and Networks (CSN)
• Lesson: Day 5 (50 minutes)
• Learning Objective: CSN-1.E - Understand web technologies

Learning Objectives

Primary Goals

Students will be able to:

1. Define what web technologies are
2. Understand key web technologies like HTML, CSS, and JavaScript
3. Test and refine their understanding of web technologies
4. Analyze real-world scenarios involving web technologies

AP Exam Alignment

• Big Idea 2: Computer Systems and Networks (16-20% of AP Exam)
• Essential Knowledge: CSN-1.E.1, CSN-1.E.2, CSN-1.E.3
• Computational Thinking Practice: 2.A - Develop algorithms for solving problems

Lesson Structure (50 minutes)

Opening Hook (10 minutes)

1.1 Welcome & Lesson Preview (5 minutes)

Teacher Activities:

• Recap previous day's content on internet fundamentals
• Introduce today's topic on web technologies

Student Activities:

• Think about: "What are some examples of web technologies in daily life?"

1.2 Web Technology Examples Challenge (5 minutes)

Activity: "Identify the Web Technology"
Instructions:

• Groups of 4-6 students
• Identify web technologies in given scenarios
• Discuss the importance of web technologies

Purpose: Activate thinking about web technologies

Core Content Instruction (20 minutes)

2.1 What are Web Technologies? (10 minutes)

Definition (CSN-1.E.1):

Web technologies involve creating and maintaining websites using languages like HTML, CSS, and JavaScript.

Key Concepts:

• HTML: Structure of web pages
• CSS: Styling of web pages
• JavaScript: Interactivity on web pages

Case Study: Building a simple webpage

• Process: Writing HTML for structure, CSS for styling, JavaScript for interactivity

2.2 Common Web Technologies (5 minutes)

Examples:

• HTML: <h1>Hello World</h1>
• CSS: body { background-color: lightblue; }
• JavaScript: alert('Hello World');

Discussion Questions:

1. What makes good web technology usage?
2. Can you think of an example where web technologies are used in daily life?
3. Why are web technologies important in computing?

2.3 Advanced Web Technology Concepts (5 minutes)

Why is it important?:

• User experience: Enhancing website usability
• Accessibility: Making websites accessible to all users

Discussion Questions:

1. How can we enhance user experience with web technologies?
2. Why is accessibility important in web development?

Hands-On Activity (15 minutes)

3.1 Group Project: Create a Simple Webpage (15 minutes)

Activity: "Design a Webpage"
Instructions:

• Groups of 3-4 students
• Create a simple webpage using HTML, CSS, and JavaScript
• Present the webpage to the class

Materials:

• **Webpage design worksheet
• **Web technology checklist

Learning Goals:

• **Understand web technologies
• **Create simple webpages
• **Test webpage functionality
• **Present ideas effectively

Assessment:

• **Group participation
• **Webpage quality
• **Testing thoroughness
• **Presentation clarity

Closure & Preview (5 minutes)

4.1 Key Concepts Review (2 minutes)

Today's Learning Highlights:

1. ✅ Defining what web technologies are
2. ✅ Understanding key web technologies
3. ✅ Testing webpage functionality
4. ✅ Analyzing real-world scenarios

AP Exam Connection:

• These concepts will appear in AP exam multiple choice questions
• Understanding web technologies is crucial for the Explore Performance Task

4.2 Next Class Preview (3 minutes)

Day 6 Topic: "Cybersecurity Basics"

• Learning Objective: CSN-1.F - Understand cybersecurity basics
• Activity: Practicing secure coding practices
• Homework: Think about a recent website you visited. What web technologies were used?