Web Foundations — Lesson 2.5: Display & Layout Basics

Teach one of the most important CSS layout foundations with this printable, classroom-ready worksheet packet + complete Teacher Guide!

This resource walks students step-by-step through the display property, including block, inline, and inline-block elements, plus how to center content using both text-align and margin: 0 auto;.

Designed for Grades 9–12 Web Development, Computer Science, and CTE pathways, this lesson is perfect for beginners and aligns with industry-standard HTML/CSS practices.

💡 What Students Will Learn

Students will build confidence with:

• display: block;
  
• display: inline;
  
• display: inline-block;
  
• Centering text vs centering elements
  
• Real-world layout patterns
  
• Reading & interpreting HTML/CSS
  
• Fixing common beginner mistakes
  

The worksheet breaks everything into clear, approachable sections that help students practice before coding.

📄 What’s Included

✅ Student Worksheet (Full Lesson Packet)

• Title Page with lesson number & theme
  
• Mini-Lesson with simple explanations + real examples
  
• Two code examples per concept
  
• Quick Reference box
  
• Common mistakes to avoid
  
• Vocabulary with word bank + fill-in-the-blank sentences
  
• Guided Practice:
  
  • Short answer
    
  • Code reading & prediction
    
  • Fix-the-code
    
  • Rewrite activity
    

• JDoodle Coding Project:
  
  • Starter template
    
  • Step-by-step directions
    
  • Required features
    
  • Checklist
    
  • Level-Up challenge
    

• Exit Ticket (1–3 reflection questions)
  

👩‍🏫 Teacher Guide (Included!)

Perfect for new CS teachers or long-term subs!
Includes:

• Learning objectives
  
• Estimated time
  
• Materials list
  
• How to introduce the lesson
  
• Full teaching script (simple wording!)
  
• Key misconceptions to watch for
  
• Differentiation (struggling & advanced learners)
  
• Full Answer Key (vocab, guided practice, code predictions)
  
• Complete sample solution for the JDoodle coding task
  

🎯 Why Teachers Love This Resource

• Print-friendly & easy to use
  
• Student-friendly explanations
  
• Great for beginners AND mixed-ability classes
  
• Works for in-person, virtual, or blended classrooms
  
• Fully scaffolded—students build understanding step by step
  

📘 Perfect For

• Introduction to Web Development units
  
• High school Computer Science courses
  
• CTE Web/IT pathways
  
• Sub plans
  
• Extra practice
  
• Review for quizzes or projects

Want to explore more? Check out the full Unit 2 Bundle for all lessons, projects, and resources on CSS Foundations!