Designing with HTML & CSS

Overview

Curriculum Area and Level:

Subject: Technology
Grade Level: 12th Grade
Curriculum Area: Front-End Web Development (HTML & CSS)
Duration: 10 minutes

Learning Objectives

Understand the importance of front-end design in web development.
Recognize and use basic HTML elements.
Apply CSS styling to HTML elements to improve website aesthetics.

Materials Needed

Laptops or computers for each student
Internet access
Text editor (e.g., Visual Studio Code)
Projection screen (optional for teacher demonstration)

Lesson Plan

Introduction (1 minute)

Teacher: Briefly explain the significance of front-end design, emphasizing the role of HTML and CSS in structuring and styling web pages.

Activity 1: Basic HTML Structure (3 minutes)

Teacher: Guide students to create a simple HTML file.

Explanation: Describe the basic structure of an HTML document, including , , , and tags.

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple paragraph.</p>
</body>
</html>

Students: Type the given HTML code into their text editor and save the file as index.html.

Activity 2: Applying CSS (4 minutes)

Teacher: Introduce basic CSS and how it can be used to style HTML elements.

Explanation: Show how to link a CSS file to the HTML document and demonstrate a few simple CSS styles.

<link rel="stylesheet" type="text/css" href="styles.css">

/* styles.css */
body {
    font-family: Arial, sans-serif;
}

h1 {
    color: blue;
    text-align: center;
}

p {
    font-size: 16px;
}

Students: Create a styles.css file and add the provided CSS code.

Execution (2 minutes)

Teacher: Instruct students to open their index.html file in a web browser to view the changes.
- Task: Ask students to modify the CSS file to change the color of the
  tag to red and the text-align to left.
```
h1 {
    color: red;
    text-align: left;
}
```

Conclusion (1 minute)

Teacher: Recap the significance of HTML and CSS in front-end design. Encourage students to explore further by adding more HTML elements and styling them with CSS.

Assessment

Observation: Walk around the room and observe the students' ability to follow instructions and apply basic HTML and CSS.
Review: Quickly review the students’ web pages to ensure the completion of tasks.

Extension Activity

Challenge: For students who grasp the content quickly, challenge them to add a new section to their webpage with a unique style, such as a list or a styled button.

Notes for Teachers

Engagement: Keep the session interactive to maintain engagement in a short time.
Support: Provide immediate support and clarification as students are working hands-on.

This lesson plan aims to provide a concise yet impactful introduction to HTML and CSS, demonstrating the immediate possibilities of front-end web design.

Designing with HTML & CSS

Designing with HTML & CSS

Overview

Curriculum Area and Level:

Learning Objectives

Materials Needed

Lesson Plan

Introduction (1 minute)

Activity 1: Basic HTML Structure (3 minutes)

Activity 2: Applying CSS (4 minutes)

Execution (2 minutes)

tag to red and the text-align to left.

Conclusion (1 minute)

Assessment

Extension Activity

Notes for Teachers

Create Your Own AI Lesson Plan

Free Worksheets for Technology