Coding Intro: Make your own website with HTML

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.

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.

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

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.

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.

#alternative

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