An Introduction to HTML & CSS (Slides & Lesson Plan)

For many students, learning how to code can be extremely challenging. While visual coding languages like Scratch are good at teaching some fundamentals, many students struggle when they begin to code in a text-based language.

An Introduction to HTML and CSS was developed to give teachers a way to familiarize students with how to type computer code in a supportive, structured environment. By focusing on HTML and CSS, two of the most beginner-friendly coding languages, this module helps students build confidence with syntax, structure, and problem-solving. It also gives them the satisfaction of creating something visual and functional.

Because the outputs of HTML and CSS are visible, this makes it easy for students to “debug” their code. Errors are easy to spot – if something doesn’t appear as expected, students can quickly trace the issue back to a missing tag, incorrect attribute, or misplaced bracket. This immediate visual feedback helps reinforce cause-and-effect thinking and encourages students to experiment, make mistakes, and learn through iteration.

Learning Objectives:

• Understand how internet browsers turn computer code into a webpage
• Appreciate how hyperlink technology has changed how humans communicate
• Gain familiarity with text-based coding and debugging procedures
• Learn how to use HTML elements like paragraphs, headers, and hyperlinks
• Develop basic competencies in web design

Lesson Plans Included:

1. Introduction to HTML
2. Hyperlinks & Images
3. Introduction to CSS
4. Div Elements
5. Final Assignment