Lesson Plan

Coding Intro: Make your own website with HTML

Middle schoolers with no coding experience can learn key HTML tags and use them creatively!
Jonathan F.
Technology coordinator
St. Patrick's Episcopal Day School
Washington, DC
Show More
My Grades Pre-K, K, 1, 2, 3, 4, 5, 6, 7, 8
My Subjects English Language Arts, Math, Science, Social Studies, Arts
EdTech Mentor

This mini course, which takes place in ten to twelve hours of classes over the span of a few weeks, aims to help students build basic coding skills and to help all students in the grade see themselves as people who can build creative things and solve problems using code. By igniting a passion for coding in students and by giving them opportunities to experience early success while also buliding problem-solving skills, we hope to open the door to students' engaging in more coding or engineering-related activities in school or beyond.

The below essential questions for this unit focus on the design process and problem-solving skills. 

  • How do form and function support one another? (Function can include behind-the-scenes mechanics.)

  • What’s working? What’s not? What adjustments should I make?

  • How do I get “unstuck”?

  • When are peers the best resources?

  • How far can videos, reference material, and searching the open internet take me?

Note to readers: Throughout the this lesson flow, look for the tag "#alternative." I will write this in places where I mention alternative technology tools you might consider using to achieve the same goal. 

Grades 6 - 10
All Notes
Teacher Notes
Student Notes

1 Hook

This year, I launched the unit by having the class examine student work from previous iterations of the unit. Students who had taken an earlier version of the course presented their work at a community meeting in which the new group of students was present. 

After discussing the student work and what would be possible,  the students and I reviewed a modified version of this unit overview from Code Avengers and discussed how we could get from where we are with coding to where we would like to go.


2 Instruction and Guided Practice

The goal of this portion of the unit is to help students build basic coding skills and learn how to use web resources and peers to "get unstuck" when they encounter obstacles. This prepares studens for success in the upcoming independent project.

The workflow involves students reading or watching video lessons on the Code Avengers website and then working through the guided practice that Code Avengers provides. The teacher can serve as a "guide on the side" during these blended lessons. 

At the end of each session, students write in a coding reflection journal in which they describe what they did, obstacles they encountered, solutions they attempted and things they learned, and plans for future classes.

The teacher can use students' reflection journal entries as formative assessment information to help the teacher plan how best to support each student in future classes.

#alternative: A blogging tool such as Blogger can be one platform for relfection journals. Another option is to use relfection or discussion tools built into your school's learning management system (LMS). I have had success with the "one-on-one" teacher-student discussion tool offered in the Haiku Learning LMS.  

When students wanted to create artwork for their HTML projects, I encouraged them to create simple drawings using the "drawings" feature of Google Drive. (Note: This also provides a good opportunity to teach students about the fair use of media, because students make be tempted to grab images from the Internet without giving credit to the artist or checking to see if the image is in the public domain.)

Google Docs were also a good place to back up notes that students wrote down during the blended sessions. (Code Avengers provides a built-in note-taking tool.)

My efforts to help students learn to solve problems resourcefully inspired me to create this visual resource.

3 Independent Project

Now that students know some coding, they can create projects to show what they know and apply their coding skills in a way that stretches their abilities. I give students plenty of voice and choice in terms of what type of project they might want to create, although sometimes I provide a general challenge like requiring students to make something that could help another student or adult in our school community.

The reflection journal I describe in the Guided Practice section continues to play an important role as students plan and begin working on their independent projects. In my responses to the reflection journal, I help students develop realistic goals for how sophisticated a project they might aim to create in the time available. I also direct them to resources that might help their specific needs. With a few light reminders from me, students learn to use the “reference” feature of Code Avengers and the tutorials they have already completed as good starting points for getting help.

Notes About The External Resources For This Step

Code Avengers Development Envrironment

Originally, I stumbled upon this resource. Now, I cannot image going without it. When students have learned enough from the tutorials Code Avengers provides, they can follow this specific link to access a less structured space that will permit them to test any HTML code or this specific link to  to run any Javascript code they would like. The space also provides an emulated file manager so that students can upload media (like pictures) and use code to refer to their file paths just as the tutorials have taught students to do. This is ideal for when students are ready to create their own projects.


JSFiddle is a free, no-frills way to paste, test, and share code. I tell students to work in the Code Avengers development environment described above but to paste their work into JSFiddle at the end of every class. This makes it easier for me to review their work. In addition, it serves as a backup. Introducing JSFiddle to students also opens the door to features they may need down the line such as importing libraries. Because JSFiddle provides less structure than the Code Avengers project environment, students interested in combining HTML, Javascript, and CSS may like it best.


4 Wrap Up


When students complete their work, it is time to present and reflect.

The external resource for this step describes how to organize a gallery walk, which I find to be a great way for students to share their work and receive feedback.

Afterwards, students use VoiceThread to create video reflections where they look back on the project and provide an overview of what they have learned. 

I also use SurveyMonkey or Google Forms to collect feedabck form students so that I can continue to improve the unit in future iterations.


Many other video tools work well as alternatives. Students could use WeVideo or the camera app on most mobile devices.