Project Overview & Structure
Essential Questions
- How can visual elements communicate ideas effectively?
- How do HTML and CSS work together to create web content?
- Why is copyright important in digital creation?
- How can we ethically use and credit digital resources?
📅 5-Session Timeline
| Session | Focus | CodeHS Integration |
|---|---|---|
| Session 1 | Copyright & Image Ethics | Lesson 2.8: Copyright |
| Session 2 | Collage Creation (Part 1) | Design work + copyright practice |
| Session 3 | Collage Completion & HTML Images | Lesson 2.5: Incorporating Images |
| Session 4 | Essay Writing & HTML Links | Lesson 2.4: Links (Enrichment) |
| Session 5 | Webpage Assembly & Publishing | Integration & final project |
📦 Materials Needed (All Sessions)
- Computers with internet access
- CodeHS student accounts
- Digital collage software (Canva, Adobe Express, PowerPoint)
- Word processing software
- Code editor or CodeHS IDE
- Projector for demonstrations
- Copyright handouts/resources
- Project rubric (digital or printed)
💡 General Teaching Tips
- Ensure all students have active CodeHS accounts before Session 1
- Bookmark royalty-free image sites for student access
- Create a shared folder for resource storage and submissions
- Have exemplar projects ready to show students
- Consider pairing students for peer feedback
- Monitor CodeHS progress to identify students needing support
1 Copyright & Image Ethics
Foundation for ethical digital creation
Session 1 Objectives
- Understand copyright law and its importance
- Identify Creative Commons licenses and their uses
- Locate and properly cite royalty-free images
- Recognize ethical considerations in digital creation
🔥 Warm-Up Question (5 minutes)
"If you found the perfect image online for your project, can you just use it? Why or why not?"
Have students discuss in pairs, then share out. Use responses to gauge prior knowledge about copyright.
⏰ Session Timeline
Discuss warm-up question and introduce project overview
Students complete copyright module activities
Practice finding and evaluating royalty-free images
Reflect on learning and assign theme brainstorming
💻 CodeHS Activities - Lesson 2.8
- Video 2.8.1: Copyright
- Check for Understanding 2.8.2: Copyright Quiz
- Example 2.8.3: Citing Sources Example
- Connection 2.8.4: Exploring Creative Commons
- Free Response 2.8.5: Response: Creative Commons
- Free Response 2.8.6: Finding Images
📚 Daily Activities
Students work through video, quiz, and examples. Circulate to answer questions and check understanding.
Students explore Unsplash, Pexels, or Pixabay. Find 3 images on different themes and practice proper citation format.
🎯 Closure (5 minutes)
Exit Ticket: "Name one thing you learned about copyright today and one question you still have."
Homework: Brainstorm 3 possible themes for your collage. Think about topics you're passionate about!
💡 Teaching Tips for Session 1
- Emphasize real-world consequences of copyright violation
- Show examples of proper vs. improper image attribution
- Create bookmarks for approved royalty-free image sites
- Discuss fair use briefly but emphasize using licensed content
- Have students bookmark Creative Commons search tools
2 Collage Creation (Part 1)
Begin visual storytelling
Session 2 Objectives
- Select a meaningful theme for collage creation
- Gather 8-12 properly licensed images
- Apply design principles (balance, contrast, unity)
- Begin collage composition in digital tool
🔥 Warm-Up Question (5 minutes)
"What makes a visual design 'eye-catching'? Think of your favorite poster, website, or advertisement."
Discuss design principles: color, balance, contrast, focal points.
⏰ Session Timeline
Discuss design principles and review copyright basics
Show sample collages and demonstrate chosen design software
Students select themes, gather images, and begin designing
Students save work and share progress with a partner
📚 Daily Activities
Show exemplar collages. Discuss: What makes them effective? Point out balance, color harmony, focal points, and unity.
Walk through Canva/Adobe Express/PowerPoint basics. Show how to upload images, layer elements, add text, and save.
Students work independently. Circulate to provide feedback, check copyright compliance, and assist with technical issues.
🎯 Closure (5 minutes)
Partner Share: Students show their work-in-progress to a partner and get one piece of feedback.
Reminder: Continue working on collages. They should be 75% complete by next session.
💡 Teaching Tips for Session 2
- Have students sketch ideas on paper first if helpful
- Remind students to save work to both computer and cloud
- Create a naming convention for saved files
- Set minimum requirements: 8-10 images, title text, theme clarity
- Encourage creativity within copyright guidelines
3 Collage Completion & HTML Images
Finish collage and learn image integration in HTML
Session 3 Objectives
- Complete and export digital collage
- Understand HTML <img> tag structure and attributes
- Practice adding images to webpages using CodeHS
- Apply proper image file management
🔥 Warm-Up Question (5 minutes)
"You see images on websites every day. How do you think those images get onto the webpage?"
Brief discussion to activate prior knowledge before HTML lesson.
⏰ Session Timeline
Introduce today's dual focus: finishing collages and learning HTML images
Students complete collages, export as image files, and submit
Students complete HTML image module and exercises
Quick check for understanding and preview next session
💻 CodeHS Activities - Lesson 2.5
- Video 2.5.1: Images
- Check for Understanding 2.5.2: Images Quiz
- Example 2.5.3: The <img> Tag
- Example 2.5.4: Using an Image as a Link
- Exercise 2.5.5: Images of Space
- Exercise 2.5.6: Your Favorite Image
- Exercise 2.5.7: Gallery Layout
📚 Daily Activities
Students finalize designs, add finishing touches, export as PNG/JPG with proper naming: "LastnameFirstname_Collage.png"
Students work through video and exercises. Emphasize the importance of file paths, alt attributes, and image dimensions.
🎯 Closure (5 minutes)
Quick Check: "What is the purpose of the 'alt' attribute in an image tag?"
Preview: Next session, you'll write an essay about your collage AND learn how to add links to your webpage!
💡 Teaching Tips for Session 3
- Check that all collages are submitted before moving to CodeHS
- Demonstrate proper file naming conventions
- Help students troubleshoot image file paths in CodeHS
- Emphasize accessibility through alt text
- Keep student collage files organized for later webpage integration
4 Essay Writing & HTML Links
Explain your creation and add interactivity
Session 4 Objectives
- Write an analytical essay explaining collage theme and design choices
- Structure essay with introduction, body paragraphs, and conclusion
- ENRICHMENT: Learn HTML <a> tag to create hyperlinks
- ENRICHMENT: Complete CodeHS link exercises
🔥 Warm-Up Question (5 minutes)
"If you could show your collage to someone who's never seen it, what's the first thing you'd want them to know about it?"
This becomes the foundation for their thesis statement.
⏰ Session Timeline
Discuss warm-up and introduce essay requirements
Model essay structure, show exemplar, discuss thesis statements
Students outline and draft essays (300-500 words)
Quick peer feedback exchange
⭐ ENRICHMENT: CodeHS Lesson 2.4 - Links
For students who finish their essay early:
- Video 2.4.1: Links
- Check for Understanding 2.4.2: Links Quiz
- Example 2.4.3: The <a> Tag
- Exercise 2.4.4: Search Engine Links
- Exercise 2.4.5: Linkbran.ch
- Exercise 2.4.6: Wiki Page
Goal: Students will add a link to their favorite game website or relevant resource on their final webpage.
📚 Daily Activities
Review essay template: Introduction (hook + thesis) → Body paragraphs (explain images, colors, design) → Conclusion (restate message)
Students complete graphic organizer or outline before writing
Students write essays. Circulate for mini-conferences. Provide sentence starters for struggling students.
Partners exchange essays and provide one positive comment and one suggestion
🎯 Closure (5 minutes)
Reflection: "What was the hardest part about explaining your artistic choices in words?"
Homework: Revise essay based on peer feedback. Submit by next class.
💡 Teaching Tips for Session 4
- Provide essay outline templates or graphic organizers
- Display sentence starters on board/screen
- Have students look at their collages while writing
- Set clear word count: 300-500 words
- For advanced students, assign CodeHS links module as enrichment
- Remind students to save their work frequently
5 Webpage Assembly & Publishing
Bring it all together in a final webpage
Session 5 Objectives
- Create an HTML webpage integrating collage image and essay text
- Apply CSS styling for visual appeal
- Add functional hyperlinks to external resources
- Test, debug, and publish final project
🔥 Warm-Up Question (5 minutes)
"What's your favorite website design? What makes it stand out?"
Discuss elements like color, layout, readability. This prepares students to design their own.
⏰ Session Timeline
Review warm-up and show exemplar final webpage
Demonstrate basic webpage structure and provide starter template
Students build webpages: upload images, paste essays, add styling and links
Students test webpages, debug issues, and submit final projects
📚 Daily Activities
Live code demonstration showing: basic HTML structure, adding images, formatting text, applying CSS colors/fonts, creating links
Provide students with starter HTML template. Students copy template and save as "LastnameFirstname_Project.html"
Students customize template: upload collage image, paste essay text, modify CSS styling (colors, fonts, layout), add hyperlink to favorite game/resource website
Students preview webpages in browser, check that images load, links work, and text is readable
🎯 Closure (5 minutes)
Gallery Walk: Students view 2-3 peer projects and leave positive feedback
Celebration: Acknowledge student growth across design, writing, and coding skills!
💡 Teaching Tips for Session 5
- Have an HTML/CSS cheat sheet available for reference
- Prepare a troubleshooting guide for common issues (image paths, syntax errors)
- Encourage students to help each other debug
- Use CodeHS IDE or a simple online editor like CodePen
- Remind students to test their hyperlinks
- Have backup files of student collages and essays in case of technical issues
Assessment & Rubric
📊 Grading Breakdown (100 Points Total)
| Component | Points | Criteria |
|---|---|---|
| Digital Collage | 25 points | Theme clarity (5), Visual composition (8), Design principles (7), Copyright compliance (5) |
| Analytical Essay | 30 points | Thesis statement (5), Content/analysis (15), Organization (5), Mechanics (5) |
| HTML Webpage | 30 points | Proper HTML structure (8), Image integration (7), CSS styling (7), Functional hyperlink (5), Overall presentation (3) |
| CodeHS Completion | 10 points | Lesson 2.5 Images (5), Lesson 2.8 Copyright (5) |
| Process & Effort | 5 points | Participation, time management, revision |
| ENRICHMENT BONUS | +5 points: Complete CodeHS Lesson 2.4 Links and implement advanced features | |
🎯 Success Indicators - What Excellence Looks Like
Exemplary Projects Include:
- Collage: Cohesive theme, balanced composition, 8+ properly cited images, effective use of color and space
- Essay: Clear thesis, insightful analysis of design choices, well-organized paragraphs, 300-500 words, proper grammar
- Webpage: Clean HTML structure, properly embedded image, readable CSS styling, working hyperlink, professional appearance
- Copyright Compliance: All images properly sourced and cited, understanding demonstrated in CodeHS work
- Technical Skill: Completed CodeHS modules with passing scores, applied concepts to final project
💻 CodeHS Completion Requirements
Required Modules (Must be completed with 80% or higher):
- Lesson 2.8 Copyright: All videos, quizzes, examples, and free responses
- Lesson 2.5 Images: All videos, quizzes, examples, and exercises
Enrichment Module (Optional, for bonus points):
- Lesson 2.4 Links: All videos, quizzes, examples, and exercises
💡 Differentiation Strategies
- For Advanced Students: Complete enrichment module, add advanced CSS (animations, gradients), create multi-page website, implement responsive design
- For Struggling Students: Provide more structured templates, allow partnerships, offer additional conferencing time, simplify requirements (fewer images, shorter essay)
- For ELL Students: Provide sentence frames, vocabulary lists, allow bilingual resources, permit use of translation tools
- For Students with IEPs: Adjust requirements per accommodations, provide extended time, allow text-to-speech/speech-to-text tools, offer alternative assessment options
📋 Submission Checklist
Students must submit the following:
- Digital collage image file (PNG or JPG): "LastnameFirstname_Collage.png"
- Essay document (Word or PDF): "LastnameFirstname_Essay.docx"
- HTML webpage file: "LastnameFirstname_Project.html"
- Screenshot of completed CodeHS Lesson 2.5 (Images)
- Screenshot of completed CodeHS Lesson 2.8 (Copyright)
- BONUS: Screenshot of completed CodeHS Lesson 2.4 (Links) - if applicable
All files should be submitted to the designated folder/platform by the deadline.