It is the end of the school year. My students have been working in Scratch and a bit in APPInventor. Students want to code because it’s cool; however, they don’t know what they want to code.

To code or not to code, that is the question?

My computer science colleague and I talked about the skills that were needed to enter his programming classes in the upcoming school year. I asked myself: would students benefit from typing lines of code, and was it important to their development as future computer scientists?

This past school year, my students learned problem solving, iteration, and a little bit about patience in my introductory Exploring Computer Science (ECS) course. I wondered if they would be able to demonstrate the ability to think critically, problem solve effectively, and articulate their programming goals. Would basic skills in hyper text markup language (HTML) be sufficient? Practically, were my students ready to take on the challenge of typing lines of code after dragging and dropping blocks for weeks? I wanted to prepare students for the programming classes in JavaScript, C+, and Python. Now, I reflected upon my decision to focus on HTML programming the last few weeks of school. Would this bridge the gap between the Scratch blocks and “real” programming? 

For their final assignment, I asked students to construct an HTML website from scratch.

Using some material from a CTEonline.com lesson on “Monetizing WordPress-Niche Selection” by Jeffrey Newton, I told students to choose topics of interest—things they had a passion for and information they wanted to share with others. I urged students to think about their hobbies, Boy Scout and Girl Scout merit badges, and sports. In pairs, students researched and shared their favorite websites with one another, comparing and contrasting design and content. As important to the discussion about content was crafting their voice and being aware of the audience. I asked a few of my English teacher colleagues to supply me with a few simple writing outlines and rubrics. These outlines would prove beneficial to students as they built content.

The kids were antsy. They wanted to start programming. I explained to them that before we could start to think about programming, we had to think about organizing the content. I handed out sheets of paper, colored pencils, and markers. I asked them to consider the steps their audience would take to interact with their websites. I modeled the activity by deconstructing our school’s website and created a simple storyboard on the whiteboard. Students followed suit creating storyboards to help organize their websites.

I had my IT department install Brackets. Training wheels off and we went for a deep dive into HTML. The challenge was on! We reviewed HTML and CSS concepts as I went over syntax and structure of the HTML programming language. Linda Newberry’s lesson on the “Introduction of Web Design” on CTEonline.org provided a good re-introduction to the use of basic HTML tags and the history of the World Wide Web.

I used a good majority of the ECS curriculum for the foundation of the final. The students were given a list of strict parameters they needed to satisfy for a passing final grade. I reviewed image editing for the web, styling of fonts, page color, and structure with cascading style sheets. Students explored W3Schools.com, using it as a reference. They quickly applied the HTML they learned to their sites with confidence. When they hit a snag, they powered through it, asking each other for help and searching Google for answers.

My classroom was abuzz with students helping one another solve problems with the HTML/CSS. I could hear conversations about the content as well. The students created sites about baseball legends, non-GMO foods advocacy, intricacy of winning football plays, video games reviews, and even an edible plants guide. Then I discovered that they were figuring out what they needed to copy and paste. They were not concerned with typing code. One student said that finding the code online that worked was just like dragging and dropping blocks in Scratch. She told me that she reverse engineered web pages, taking pieces of what she needed to satisfy the assignment.

Had they mastered the ability to think critically, problem solve effectively, and articulate clearly?

The students were proud to share their work during the final presentations. They were engaged, leaned in, and applauded one another’s work. I must admit… the websites functioned and looked good. School is out now and kids are off to their next adventure. Perhaps there are a few new computer scientists among them.

 

Gayle Nicholls-Ali is a high school CTE Photography and Graphic Communication teacher in La Cañada, CA. She has been teaching Exploring Computer Science (ECS) for a few years. She is always piloting new programs and seeking learning opportunities for students.​

All pictures were taken by Gayle.

Comments

Alison Derbenwick Miller's picture

Posted: 07/5/17 - 11:51am ET by Alison Derbenwi...

Thanks for the post, Gayle.  I loved reading it, and applaud your students for taking the initiative to “code” their pages efficiently - and you for seeing this as successfully teaching problem solving and critical thinking.  If you’re looking for other IDEs to help students transition from Scratch to “real” coding, you might also check out Greenfoot (www.greenfoot.org) and Alice (www.alice.org).  We’ve seen good success with both.

Barbara Ericson's picture

Posted: 07/5/17 - 11:51am ET by Barbara Ericson

I just wanted to correct a common misconception in this.  HTML is a document markup language, not a programming language.  However, it sounds like your students were very engaged and learned a good deal.  I am glad that you encouraged them to create a web page about something they care about.

If you want to introduce programming in web development then you could use JavaScript. 

Gayle Nicholls-Ali's picture

Posted: 07/5/17 - 11:51am ET by Gayle Nicholls-Ali

HTML is nota programming language but the closest they will come to typing lines of “code” in my intro class at the end of the school year. I think now they feel more confident about moving forward with being able to problem solve in the future.