💻 HTML & CSS Quick Reference Guide

Web Design Unit | Student-Friendly | Editable | Middle School Coding

Help your students confidently navigate the basics of web design with this clear, easy-to-use HTML & CSS Quick Reference Guide! This resource was designed with middle school learners in mind and provides simple explanations, visual examples, and step-by-step support that students can actually understand.

🔗 Curriculum Alignment:

This resource is designed to align with the Code.org Web Development Unit, making it a perfect companion for students working through lessons and projects.

✨ What’s Included:

• HTML basics (paragraphs, lists, headings, spacing)
• CSS essentials (colors, fonts, alignment, backgrounds)
• Step-by-step instructions for adding images
• Easy-to-read code examples
• Visual supports to guide student understanding
• Organized, student-friendly reference pages

🎯 Why Teachers Love This:

• ✔️ No prep—just print and go
• ✔️ Supports independent work
• ✔️ Reduces frustration during coding projects
• ✔️ Great for centers, sub plans, or review
• ✔️ Keeps students on track without constant teacher help

💛 Real Classroom Impact (Special Education Friendly)

I created and used this resource in my own classroom with students who have autism and learning disabilities, and it made a huge difference.

Many of my students struggle with:

• processing large amounts of information
• remembering multi-step directions
• keeping up during whole-class instruction .

This guide gave them a consistent, easy-to-follow reference they could rely on independently.

Because of that, my students were able to:

• stay engaged during lessons
• follow along with coding tasks
• participate more confidently
• work alongside their general education peers

It helped bridge the gap so they weren’t constantly relying on adult support—and that was huge.

🧠 Best For:

• Middle school web design units
• Intro to coding classes
• Technology or STEM courses
• Beginners learning HTML & CSS
• Inclusive classrooms and co-teaching settings

✏️ Editable Canva Version Included!

A link is included for you to access this resource in Canva. Simply click the link and make a copy to customize it for your classroom. You can easily edit text, formatting, and content.

Please note: A free Canva account is required.

📌 Topics Covered:

• Paragraphs & formatting
• Lists (ordered & unordered)
• Headings
• Line breaks & spacing
• Adding images
• Font color, size, and style
• Backgrounds
• Text alignment & effects
• Image formatting & sizing

⚠️ Terms of Use:

This resource is for personal classroom use only. Please do not share with others.

💡 From CC’s Classroom:

Created by a middle school special education teacher to make coding more accessible, engaging, and achievable for all learners.