Day 1: Introduction to Web Design & HTML Basics

Time: 35 minutes
Class size: 14 students
Grade: 9-12
Common Core Anchor Standards:

CCSS.ELA-LITERACY.RST.9-10.3: Follow precisely a complex multistep procedure when carrying out experiments, taking measurements, or performing technical tasks.
CCSS.ELA-LITERACY.WHST.9-10.6: Use technology, including the Internet, to produce, publish, and update individual or shared writing products.

Learning Objectives:

Understand the role and components of web design.
Learn basic structure of an HTML document.
Create a personal "About Me" web page using simple HTML tags (<html>, <head>, <body>, <h1>, <p>).

Materials Needed:

Computers with code editors (e.g., Notepad, Visual Studio Code)
Projector/display for demonstration
Printed quick reference for HTML tags

Activities:

Open Discussion (5 min)
- Brief talk: What is web design and why is it important? Introduce terms like HTML, CSS, UX/UI.
- Engage students with questions about websites they use often.
Demonstration (10 min)
- Teacher live codes a basic HTML page from scratch explaining each element.
- Highlight structure: doctype, html, head, body.
Guided Activity (15 min)
- Students create their own "About Me" page with a heading and one paragraph.
- Teacher circulates to provide support and encourage proper tag usage.
Wrap-up & Share (5 min)
- Volunteers share their pages on the projector.
- Brief reflection on challenges faced.

Assessment:

Informal observational assessment during activity.
Collection of HTML files to verify correct structure and tag usage.

Day 2: Adding Style with CSS

Common Core Anchor Standards:

CCSS.ELA-LITERACY.WHST.9-10.6: Use technology to produce and update digital content.
CCSS.ELA-LITERACY.RST.9-10.3: Follow multistep procedures in technical tasks.

Learning Objectives:

Understand how CSS controls the look of a webpage.
Learn syntax for CSS selectors and properties.
Apply styles to the "About Me" HTML page.

Activities:

Quick Review (5 min)
- Recap HTML structure from Day 1.
Introduction to CSS (7 min)
- Explain CSS purpose: colors, fonts, spacing.
- Demonstrate external style sheet linking.
Hands-on Styling (18 min)
- Students write basic CSS to change background color, text color, font size, and margins on their page.
- Use simple selectors like body, h1, and p.
Peer Review (5 min)
- Students pair up to check each other's CSS for correctness and effect.

Assessment:

Review CSS files for correct selector and property syntax.
Peer feedback form to assess understanding and collaboration.

Day 3: Web Page Layout with Box Model & Positioning

Common Core Anchor Standards:

CCSS.MATH.PRACTICE.MP4: Model with mathematics (used for visualizing design layouts).
CCSS.ELA-LITERACY.RST.9-10.3: Follow technical procedures.

Learning Objectives:

Understand the CSS box model (margins, borders, padding, content).
Apply layout techniques using margin and padding to adjust spacing on the page.
Use simple positioning to align elements.

Activities:

Concept Exploration (10 min)
- Visual explanation of box model on projector using diagrams and live code.
- Students sketch box model labeling margins, borders, padding, content on paper for retention.
Application (15 min)
- Students modify their pages by adding borders, adjusting padding and margins to enhance readability.
- Try positioning one element with text-align and explore relative positioning.
Class Discussion (10 min)
- Students explain changes they made and how it altered the page layout.

Assessment:

Collect CSS files to verify correct application of box model properties.
Student sketches collected as formative assessment.

Day 4: Adding Multimedia Content (Images & Links)

Common Core Anchor Standards:

CCSS.ELA-LITERACY.WHST.9-10.6: Use digital tools to produce and publish work.
CCSS.ELA-LITERACY.RST.9-10.7: Translate quantitative or technical information expressed in words into visual form.

Learning Objectives:

Learn how to embed images and hyperlink text in HTML.
Understand alt attributes for accessibility.
Create a navigation bar with links to favorite websites.

Activities:

Demonstration (8 min)
- Teacher shows how to add <img> with src and alt attributes, and <a> for links.
- Discuss best practices for image size and naming.
Student Practice (20 min)
- Add a profile image to personal webpage.
- Create a simple navigation bar with 3 links (school website, personal blog, creative site).
Accessibility Focus (5 min)
- Teach importance of alt text for screen readers.
- Students write alt text for their images.

Assessment:

Evaluate pages for correct image embedding and functional links.
Check alt text for clarity and relevance.

Day 5: Final Project & Presentation

Common Core Anchor Standards:

CCSS.ELA-LITERACY.WHST.9-10.4: Produce clear and coherent writing in which the development, organization, and style are appropriate to task.
CCSS.ELA-LITERACY.SL.9-10.4: Present information, findings, and supporting evidence clearly.

Learning Objectives:

Synthesize knowledge from previous days to produce a multi-section web page.
Apply HTML and CSS principles learned to design a visually appealing page.
Present personal web pages effectively to peers.

Activities:

Project Work (25 min)
- Students create a multi-section personal web page including heading, paragraph(s), styled content, embedded image, and links.
- Encourage creativity but enforce HTML/CSS best practices.
Presentation (10 min)
- Each student presents their webpage (1-2 min each).
- Class provides constructive feedback focused on design and functionality.

Assessment:

Use a rubric assessing structure (HTML correctness), style (CSS application), content (relevance and accessibility), and presentation skills.
Self-reflection journal entry on learning progress and future goals in web design.

Notes for Teachers:

This plan merges technical skills with core literacy standards emphasizing technical reading, writing, and presentation.
Encourage students to use technology responsibly and creatively.
Scaffold instruction progressively to build confidence and independence.
Utilize pair and group work to stimulate collaboration and peer learning.
To "wow" your class, show real-world applications like how big companies structure websites or invite a local web developer (if possible).

This 5-day plan balances technical knowledge with literacy skills as per Common Core, making students both creators and communicators in technology.

Web Design Essentials

Teaching Instructions

Day 1: Introduction to Web Design & HTML Basics

Learning Objectives:

Materials Needed:

Activities:

Assessment:

Day 2: Adding Style with CSS

Learning Objectives:

Activities:

Assessment:

Day 3: Web Page Layout with Box Model & Positioning

Learning Objectives:

Activities:

Assessment:

Day 4: Adding Multimedia Content (Images & Links)

Learning Objectives:

Activities:

Assessment:

Day 5: Final Project & Presentation

Learning Objectives:

Activities:

Assessment:

Notes for Teachers:

Create Your Own AI Lesson Plan

Free Worksheets for Technology