One of my major teaching responsibilities at The College of New Jersey is a course called, Writing for Interactive Multimedia. For the last 15 years, we have been using that course as a way to introduce our journalism students to basic coding in html and, more recently, css. Initially a course for the journalism and professional writing major, it has also been required for Interactive Multimedia majors since 2003. There are dual challenges in this arrangement, as well as opportunities. One of the challenges is that students come to the class with varied levels of interest in, and affinity for coding. On the other hand, having students with different levels of proficiency creates opportunities for peer mentoring and collaboration in the classroom.

Also, I posit that a systematic and disciplined approach to studying html and css can be helpful for students who might have gaps in their understanding because they are largely self-taught. Finally, because coding is in a constant state of evolution, it is important to establish a culture of continual learning and experimentation – something that might be familiar to students of computing and interactive media, but which tends to be novel for journalism majors.

These are lofty ideals, but are often challenging in practice. In the past, I have taught html through demonstration, having students follow me and practice their initial coding in the class. I have tried a number of online tutorials and physical textbooks. I have spent lots of time assisting students in labs as they practiced coding, and have had more experienced students work with novice students. Currently, I’m using Virginial DeBolt’s Mastering Integrated HTML and CSS.) This approach works well enough to get students to learn some rudimentary skills, but it has not created the kind of cultural change or deep understanding that I was trying to establish.

This semester, I tried something new – I am focusing on html and css as languages that can be translated into English, and vice-versa. Here are some exercises I have created to teach and reinforce fundamental concepts. This is a work in progress, but students tell me that they enjoy these exercises and find them helpful.

1. A conversation in English and HTML

After my students had been introduced to html through readings and class discussion, I suggested to them that we have an oral conversation in which I posed as a web browser and they were the web designer. I told them to initiate a web page. One of the students said, “html.”

I said, ” I am being asked to display a webpage. I expect I will get some information about it soon.”

A student said, “head.”

I said, “This is the header. I will know learn the special rules I need to know to display this page.”

A student said, “title…”

We went on like this until we had described a page with links, text and images. There was a lot of laughter in the process. Then we practiced scripting pages.

2. Translating English to HTML and CSS

I wrote the following sentences on the board and asked the students to pair up to turn the sentences into HTML and CSS:

1. This is the beginning of my webpage.
2. The title of my page is “My resume.”
3. In my page, the headlines will be in the font Verdana.
4. In my page, the body type will be in the font Georgia.
5. The background color of my page will be 255 255  204
6. The content that will be displayed on my page begins here.
7. This page is linked to my homepage.
8. The content to be displayed ends here.
9. This is the end of my web page.

After working on this for 10-15 minutes, I called volunteers up to ask them to write the  appropriate lines of html and css.

3. Commenting out HTML and CSS

A conversation with my computer science colleagues Miroslav Martinovic and Monisha Pulimood led me to the idea of having students use commenting on their webpages. Essentially, I am beginning to tell them to write out what  they are trying to do each line of HTML and CSS as they script. The purpose of this is similar to the purpose of commenting on code generally – so that students can have a record for themselves or other coders of what they were trying to do. I anticipate that this will help me and peer tutors or collaborators be more effective in helping them as well.

I am working on some other exercises, including kinesthetic approaches to teaching about concepts such as relative and absolute links. I have also approached a colleaguein our World Languages and Cultures department about ways in which this might be developed into a more formal system of instruction. If anyone knows of others who are teaching this way, I’m interested in their results.

Teaching HTML and CSS via translation by Kim Pearson is licensed under a Creative Commons Attribution-NoDerivatives 4.0 International License.