Building Web Skills
Technology • Year 12th Grade • 480 • Created with AI following Aligned with Common Core State Standards
Building Web Skills
Curriculum Area and Level
Subject: Technology
Grade Level: 12th Grade
US Education Standards: ISTE Standards for Students (International Society for Technology in Education):
- Standard 1: Empowered Learner
- Standard 4: Innovative Designer
- Standard 6: Creative Communicator
Lesson Duration
Total Duration: 480 minutes (8 hours)
Class Size: 10 students
Objectives
By the end of this lesson, students will:
- Understand the basic structure and syntax of HTML.
- Learn and apply CSS for styling web pages.
- Gain an introductory understanding of JavaScript for web interactivity.
- Develop and present a simple web page incorporating HTML, CSS, and JavaScript.
Agenda
Introduction (30 minutes)
-
Welcome and Objectives: (10 mins)
Introduce the goals and objectives of the lesson. Explain the importance of HTML, CSS, and JavaScript in web development. -
Ice Breaker Activity: (20 mins)
Have students share their favorite websites and discuss as a class why they like them, focusing on aspects like design, interactivity, and usability.
HTML Basics (100 minutes)
-
Lecture and Demonstration: (30 mins)
Teach the fundamental tags and structure of HTML.<html>,<head>,<body>- Heading Tags:
<h1> - <h6> - Paragraph Tags:
<p> - Lists:
<ul>,<ol>,<li> - Images:
<img> - Links:
<a>
-
Hands-on Activity: (70 mins)
Students will create a basic HTML page about a topic of their choice. They should include headings, paragraphs, an image, and a list.
CSS Styling (90 minutes)
-
Lecture and Demonstration: (30 mins)
Introduce the basics of CSS.- Inline, Internal, and External CSS
- Selectors: Element, ID, Class
- Properties: color, background-color, font-family, margin, padding
-
Hands-on Activity: (60 mins)
Students will style their HTML page using internal CSS. They should apply colors, fonts, and layout properties.
JavaScript Introduction (90 minutes)
-
Lecture and Demonstration: (30 mins)
Introduction to JavaScript basics.- Variables, Data Types
- Functions
- Events (onClick)
- Manipulating the DOM
-
Hands-on Activity: (60 mins)
Students will add a simple JavaScript function to their web pages. For example, creating a button that changes the content of a paragraph when clicked.
Project Development (120 minutes)
-
Instruction Time: (30 mins)
Explain the project requirements:- Create a multi-page website with navigation.
- Incorporate HTML, CSS, and JavaScript learned earlier.
- Pages should include a home page, about page, and a contact form that includes basic validation.
-
Group Activity: (90 mins)
Students will work in pairs to develop their project. Teachers should walk around to provide individual guidance and support.
Review and Presentation (50 minutes)
-
Review Key Concepts: (20 mins)
Recap the main points of HTML, CSS, and JavaScript. Answer any lingering questions. -
Presentations: (30 mins)
Each pair will present their web project to the class. They should explain their design choices and demonstrate the functionality.
Reflection and Feedback (20 minutes)
-
Reflection Activity: (10 mins)
Have students write a brief reflection on what they learned and how they can apply these skills in the future. -
Feedback Session: (10 mins)
Collect feedback from the students about the lesson and any suggestions for the future.
Materials Needed
- Computers with internet access
- Text Editor (e.g., Notepad++, Visual Studio Code)
- Whiteboard and Markers
Create Your Own AI Lesson Plan
Join thousands of teachers using Kuraplan AI to create personalized lesson plans that align with Aligned with Common Core State Standards in minutes, not hours.
Created with Kuraplan AI
🌟 Trusted by 1000+ Schools
Join educators across United States