To teach their ninth and tenth grade students to better visualize code, Matt Boyle and Sean Pawelec don’t distribute laptops, they hand out paper. Each sheet contains all the snippets of code necessary to build a basic webpage in HTML and CSS. Students physically cut and paste the code snippets onto a colored sheet of paper in order. Engaging with code in a tactile way helps students move beyond basic memorization to see how each snippet fits together and creates a functioning website.
WHEN TO USE
Try this activity in a middle or high school classroom when introducing new syntax or a new programming language. If students are struggling to master code, you can also try this lesson to reinforce previous lessons and give them a break from staring at screens.
This activity is also an example of Universal Design for Learning, offering kinesthetic and visual modalities to students who may identify as ELL or Students with Disabilities.
HOW TO IMPLEMENT
> BEFORE CLASS
- Gather supplies such as worksheets, scissors, glue sticks, construction, or colored paper.
- Print out worksheets—either one per student or one per group.
> IN CLASS
- Have students work independently or in small groups to cut up and assemble code in the correct order.
HOW TO ADAPT
> EXPLORERS
- Instead of lines of code, create handouts with visual code blocks, such as Scratch, for students to explore and manipulate.
> CREATORS
- Work with Matt and Sean’s lesson plan to introduce new programming languages, such as HTML, CSS, or Javascript.
> INNOVATORS
- Ask students to approach this exercise as a team-building activity to map out the work they will complete together at the start of a long-term project.
> CITIZENS
- Have students pick an existing website or app and create a code collage that identifies key blocks of code. Ask students to consider: Are there some blocks of code that exist across many popular apps and websites?
PRO-TIPS
- Use your students. When they first started teaching this lesson, Matt and Sean pre-cut the code themselves into units as small as individual characters. “All we were doing was cutting!” says Matt. Now, the pair print slightly longer units onto the code bank sheets of paper—and have students cut the code themselves at the start of the lesson.
RESOURCES
- Replit offers templates that let you easily build your own sample web pages and programs for students.
KEY TERMS
- HTML: Hypertext Markup Language. HTML is the backbone of webpages, and can be used alone to create the most basic pages. It is used in conjunction with JavaScript, CSS, and other languages to make more powerful and beautiful websites and web applications.
- CSS: Cascading Style Sheets. CSS can be used in conjunction with HTML to change the way a website acts or looks.
- JavaScript: The most popular popular online scripting language. JavaScript is used on almost all modern webpages to change their behavior and make them interactive.
- Syntax: Syntax is the specific set of keywords and structure provided by a programming language. Just like English sentences have a subject and predicate, programming languages have rules that dictate how keywords and symbols are interpreted. Often, code will be useless unless it is syntactically correct.
- Universal Design for Learning: A way of thinking about teaching and learning that helps give all students an equal opportunity to succeed.
Resource content by Matt Boyle and Sean Pawelec, with the assistance of the CS4All team. Video by Rook Productions. Consultation by Tythe Design and Tiny Panther. Published by CS4All.