What's the best way to introduce non-majors to HTML / programming?

Question

The following question has been eating at me for the last couple months. After witnessing the quality of the replies here, I'm hopeful that I'll get some great responses here.

I'm TAing a course in the ECE department entitled "Exploring Digital Information Technology", intended for non-majors to get their feet wet with the whole "how computers work" thing. Being a grad student in computer architecture, not only is my background in the subject matter much different from the students (many of them are freshmen with no computer experience beyond Word and YouTube), but my entire mode of thinking seems to be fundamentally different. I've had a large degree of success TAing more technical courses before, where the students didnt necessarily have any background in the exact material, but they were detail-oriented, technical-minded folks that grok'ed things like variables, arrays, indexing, indirection, functions, etc. I've had an extroardinarily difficult time with the first unit of the course, which essentially covers HTML, JavaScript, and the Internet (network topologies, IP addresses, etc.)

My questions to the SO community are many, but I'll start with a few:

• At the highest level, if you were trying to teach someone how to think like a programmer (break down human-level algorithms into simple steps that can be translated into functions, procedural statements, if-then-else statements, and loops), would HTML and JavaScript be your approach? This gives results that are relatable (e.g. a webpage that does useful things) more quickly than other approaches, but the separation and integration of HTML and JavaScript, and the whole "declarative HTML talking to procedural JavaScript" thing seems to be cramming in too many abstract concepts too soon.

• If you did want to teach HTML and JS to a total beginner (somebody who has difficulty thinking algorithmically), what resources would you use, what projects would you assign, etc.? I'm finding that even when I break down concepts like a for loop as far as I think I can, it's still a little much. Is there someplace out there that starts from first principles and can really help a true beginner grok why parentheses and semicolons are necessary, what arguments to a function are, etc?

I honestly have many more questions, but I think this is a good place to start. I'm looking forward to compiling your results into something that can be used not only for future iterations of this course, but also in my personal "tech evangelism" pursuits. I did read through the other "How to Teach a Beginner to Do X" questions on here, but they seem to be targeting an entirely different class of 'beginner': folks who are mathematically-minded and very interested in learning about programming, but don't know where to start. I feel like the answers for that group will be substantially different than for those with a different mindset, and perhaps less intrinsic motivation to learn.

Answer 1

HTML and JavaScript would definitely not be my approach. Markup and programming are two very different things. Throwing JavaScript into the mix goes some way to deal with that, but it also complicates things immensely. You're dealing with two different syntaxes, working with two different conceptual models, and the bridge between them is not transparent. You need to deal with the event model for such basic things as input. The distraction overhead inevitably gets in the way of learning the basics.

How attached are you to HTML/JavaScript? Because dropping HTML altogether, and working with a more traditional programming model seems like a far better approach. There has been a significant amount of work with Python in this area, so you should check out Python in Education.

Answer 2

I per my experience, C++ is an awesome root level language, it's difficult to learn but not as bulky as some of the later gen languages. The logic is raw, it's a great introduction to programming and it's what made me love the science and want to learn more.

Answer 3

I agree with @Jim.

Have you thought about trying something like Lego Mindstorms. You get a very intuitive visual user interface that allows users to create fundamental programming structures without writing a line of code (ie loops, conditionals etc).

Of course the feedback is in the form of working machines/robots. This would certainly reinforce the programming concepts used very well.

Answer 4

My first exposure to the programming world was Visual Basic. I remember creating the neat little forms and buttons on them. I found that pretty interesting and much better than doing C.I still remember making my own Calculator and Notepad in VB and then a Railway Reservation System.

Usually in most cases programming courses start by delving into C. Teaching how to write algorithms and draw flowcharts. It is a good idea to begin with algorithms and flowcharts according to me. It teaches the basics of programming and makes the mind to think logically.

I wouldn't like going into HTML and Javascript too much. Learning to code in HTML is not to helpful to teach any programming structures or logic.

Answer 5

There is a study, discussed here, which is a relevant read to avoid getting too depressed when you realize some of these people will actually be unable to learn to program.

That said, I think that if you'll stay with HTML/JS (not necessarily a good choice), I'd prepare all the HTML they'll work with and make them tweak it through JavaScript. That way they won't have to grok two different models, but those inclined and interested enough can.

Answer 6

I would say the most important thing to do with this group is to make the material fun or at least interesting. Since this is there first exposure to programming or digital computing you may want to shy away from teaching html and javascript together as they are different concepts. You are not going to teach non-programmers to become programmers in a semester but you can spark an interest that could lead to a future in programming or something related. I would try to cover some of the basics of both hardware and software and how they are related and how they interact. Before you can even begin to write code, they should at least understand some of the terminology (compiler, server, client, network, etc.). Then you can work your way up to coding, hopefully something interactive or interesting like a simple game, calculator, or additions to their My Space page.

Answer 7

For the first question:

No I wouldn't use HTML and Javascript to teach programming concepts. I would probably consider a .NET language like C# which hides the pain of memory management while giving the beginner a great framework to start off with. There are plenty of useful things to be done client side, and I feel the stateless nature of the web can actually do more to confuse the beginner. Basic concepts like assignment, typing, logic, looping are what you want to teach, then later OO concepts like classes, polymorphism and inheritance. I feel requiring the student to then worry about markup just gets in the way. Keep it simple up front.

Second question.

Since HTML + JS (and I would add CSS to this pile) is more about presentation initially I would start the beginner off using a tool that provided a split view between a WSYWIG design surface and the XHTML. Obviously the generated XHTML would have to be clean, so careful selection of such a tool is required. Aptana isn't too bad I feel. Then start drilling the student with simple tasks like divs and tables. Get them to study the changes in the markup. Then introduce CSS techniques to pretty things up. They will eventually form a mental map of how XHTML/CSS effects a webpage.

Finally to bring it all together, with some OO techniques under their belt, and a knowledge of XHTML/CS introduce javascript as the icing on the presentation cake to do the trickier things. Teach them about the DOM etc.

Answer 8

If you want to teach people HTML, go with it. If you want to teach them programming, start with some simple procedural language, like Basic or Pascal. If you want to teach OOP - Smalltalk is the way to go.

As for HTML, it's a pretty broad stuff. I would go through following steps:

1) layout
2) forms/basic controls
3) styles
4) scripting

Answer 9

I would give them Head First HTML and let them at it at their own pace. I don't think anything does a better job at introducing technology than this series does.

Answer 10

I cut my teeth on HTML and JavaScript. (Actually it was Saved in a word document as HTML and then trying to decipher what was what but that's a different matter) I think there are some different advantages. First you can put together a basic page easily and progressively build on it. Second most HTML tags are obvious and it's simple to get JavaScript to modify the page and trigger on user events. Teaching and demonstrating recursion, simple OOP functions variables, data types etc. is all pretty simple.

Besides you can write it in notepad just as good as anything else and test it with the refresh button. Instant cause and effect, modify code: refresh page: see whats new!

I'd would keep it simple on the HTML (I wouldn't even mention CSS/AsyncXML/etc.) and build on the basics with JavaScript.

Good Luck.

Answer 11

I do HTML workshops for students who are usually communications majors. It usually starts out with a basic overiew of what web pages actually are. Then I have then whip out notepad and plop down the basic HTML page. It's at this point some people come up with blank stares, but there are also many "AHA!" moments. I only have an hour and a half to cram all the basics in though, so I would probably do more abstract concepts of the web before hand if I had the time.

Probably most important to keep their attention would be to have them execute examples as you teach them, and have them tweak things on their own too. Give them a for loop that prints info to the page repeatedly then have them change things and see what happens. I'm not sure if you're in a lab setting, but that would be ideal. They'll also have samples they can take home.

I think it's definitely valuable to teach the common person HTML so they have some insight as to what goes on behind the scenes of things they interact with daily. Plus they already have everything they need to start creating - text editor and browser. It's also something they're more likely to find useful later in life, for personal sites and even form fields like this one.

Answer 12

If your goal is teach people the basics of programming why not use a visual language such as Alice? It may not be the most traditional, but it may allow you to focus more time teaching if/then and loops as opposed to syntax.

Answer 13

One approach I took when teaching classes was to introduce a little "sand the floor, paint the fence" from Karate Kid. I made them type in (by hand) a two-page web application comprised of HTML and JavaScript, based upon a print-out I gave them.

The exercise frustrated many people because it seemed like such drudgery, especially when I could have just given them the application as files. But because they had to examine every character to see just where they might have made a mistake, they also had to pay attention to every character.

The classes where I assigned this exercise near the beginning of the class term definitely picked up on things more quickly than those where all the resources were provided as files.

Answer 14

I've found it's important to keep them interested the final product of what they're working on. The drudgery and anal-retentiveness of markup and programming can be really frustrating for people who aren't used to it. But if you assign them projects where they can see results quickly, and be proud of what they're doing, you'll likely keep their interest.

Most assignments in (web) textbooks are brain-stabbingly boring and repetitive. I would suggest coming up with your own assignments that introduce important new topics, as well build upon what they've already learned. But try to keep them short and simple so it doesn't feel like total busywork.