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
- Instead of lines of code, create handouts with visual code blocks, such as Scratch, for students to explore and manipulate.
- 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.
- 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?
- 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.
- Replit offers templates that let you easily build your own sample web pages and programs for students.
- CSS: Cascading Style Sheets. CSS can be used in conjunction with HTML to change the way a website acts or looks.
- 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.