Sunday, December 16, 2018

Web Design Reflections and Subgoal Labeling (Arrays)

We just finished the last week of classes at The Pinnacle and are headed towards finals week for semester 1.  My Exporting Computer Science students have turned in their final projects for the web design unit.  And my AP Computer Science students took their last set of notes on Arrays using subgoal labeling.  If you are mainly interest in subgoal labeling, skip to the end.

Web Design Reflections

This is the second year of teaching a 9-week unit on web design to the Exploring Computer Science class.  I was so impressed with the 3-4 page websites that my students produced.  Some students have a good eye for color and building a website with complementary colors that look good on a page.  They mastered building a set of web pages with a cascading style sheet.  The pages used a common grid layout and navigation bar to move between pages.  All of the students selected topics for their sites that were of interest to them.  Topics ranged from music to anime to sports, and as with all student projects they were of varying quality.

Here are some examples of their work:

Last year I was primarily focused on getting through the material (and honestly, making sure I fully understood how to use HTML and CSS).  This year I added additional opportunities to practice a skill before having students create a project.  As I look back at the end of the unit I am seeing places that need improving for next year.


Many of the students taking this class do not have a great deal of keyboarding experience, and even those that do are not familiar with the keys needed for HTML and CSS.  So the first area that I want to add and improve on for next year is to have a section on finding some of those keys that are not often used in normal typing but come up frequently in HTML and CSS:

  • angle brackets for all of the HTML tags < >
  • slashes  used in ending tags / (and distinguishing them from back slash)
  • braces used in CSS files { }
  • semicolons used in CSS files for the end of each attribute ;
I was talking with one of our ESL teachers and she gave a great suggestion -- why not make a simple Google assignment where students type in the tags along with all of the special characters 3-5 times so they get accustomed to finding these little used keys in a separate activity.  Thanks Taniuska Worsham (if you are interested in learning about what she does teaching English as a second language as a second gig with VIP Kids check out this link and use referral code TANUI0001)!


I gave students a Do Now activity to look at the which has a great section on colors, color schemes and how to use the RGB values in a website.  Most of the students recorded a color scheme in their journals, but this Do Now was early in the unit and at that time they didn't have a good idea on how all of the different colors would be used in a website.  My thought is that students do need to have a lesson dedicated to selecting colors and that it should be near the end of the unit.  I think it will be a nice light lesson to put in between setting up a grid layout and before setting up a navigation bar.


Although we discussed citations in class, I can see from the final products that most of the students did not use royalty free pictures and did not provide citations to where they got their material from.  Similar to colors I have a note that I need to make this a full lesson as well.  Again, I think this will be a lighter lesson that can be inserted between some of the heavier HTML heavy lessons.

Grid Layouts

The section that caused the greatest amount of difficulty for students was setting up a grid layout.  For practice I had students add the text of a grid section to the HTML document and then practice adding a new section to the CSS file, changing the layout, and then adding in the text for the section to an HTML document.  The completion rate on this assignment was not 100% and it did show in some of the final products.  This lesson needs to be improved and I have added a note that I need to have a second set of practice exercises for this lesson.

Subgoal labeling (Arrays)

First, thank you to Alfred Thompson for giving me a plug in his very popular blog!  I was wondering why the readership of this little blog suddenly spiked.

My learning about subgoal labeling continues.  In the set of notes for Arrays, I continued to use the major labels at the top of the notes and then provide the subgoals in each section.  For this set of notes I repeated the subgoals for the second section and had students complete this section after following the steps with me the first time.

The students gave positive feedback that they liked the idea of having a practice on your own section before they were set loose on the practice on the labs.  The full set of completed notes are at this link.  As usual I give my students the file with most of the code removed and we write it together.

I continue to fine tune this, but feel that I have a pretty good format now.  Thanks again to the original CS ED Research conducted by Margulieux, Guzdial and Catrambone on Subgoal Labeling and Worked Examples.

1 comment:

  1. Thanks for sharing what you are doing!

    Glad you saw a bit of a spike. I always wonder if my posts have any influence at all. I do hope that at least it makes posts I link to more easy to find for people doing Internet searches. I added a link to this post to my blog post as well since links in comments are tagged "nofollow" and I want to make sure you show up in searches.