Classroom Activities for your Web Design Classroom

Hi!

The following classroom activities have proven to very helpful in StudioWeb web design classes. These ideas come from our StudioWeb QuickStart Guide for teaching web design.

#1. Note taking:

StudioWeb’s video lessons make heavy use of pop-up note takers: have students take handwritten notes while watching the video lessons for improved retention. Teachers could require that students hand in notes at the end of each week for extra marks.

#2. Student collaboration with paired programming:

Have students work in teams of two, where for each chapter, one student acts a ‘co- pilot’, while the other is answering quiz questions and code challenges. They rotate roles every chapter. This is an industry practice call ‘paired programming’ and is a part of the agile software development technique.

#3. Student collaboration with group projects:

Have students work in teams of 2-3 on the provided assignments.

#4. Student peer-to-peer tutoring:

Encourage advanced students to assist others with both the formative quizzing and projects. It is common to see StudioWeb classrooms with students helping each other out as they learn the material.

#5. Breaking the code:

A great way to learn how to code, is to break it once you have it working. It is very instructive to see how a web browser reacts to broken code, and in the case of JavaScript programming, to see the error message the browser displays in the browser’s console.

Have the students download the project files for each course (found on the homepage of each course) and have them make changes to the provided code and then break it to see what happens. For example:

1. Have them mess up tags in a web page, and then fix it.
2. Have students change values in the CSS code such as font colors and sizes. Have them move around braces to break the CSS code … and then fix it.
3. Have students remove semicolons in JavaScript and change the case of variable names.

Breaking code after you get it working, is an excellent way to accelerate students understanding of code.

#6. Using the provided classroom assignments:

Within the ‘Course Documents’ download found under each course in the Teacher’s Dashboard, you will find a set of assignments/projects that you can assign to individual students or groups. These assignments are bound to chapters in each course.

#7. Using the provided video source files:

On the homepage of each course, you will find a download link to all the files (html pages, CSS pages, images etc) that are built in the videos. These are the files that students can use in classroom activity #5: ’Breaking the Code.’

If you want to use StudioWeb in your classroom, feel free to contact us!

Thanks!
Stefan Mischook