We don't use any high level design tools. Rather, we start with the low level elements. We use HTML and CSS. We start with a simple text editor, and migrate to a simple IDE about halfway through the unit (usually at least three weeks in.) By the time we change to the IDE about half the class is ready to revolt over the fussiness of dealing with the code in a bare text editor. It's interesting, though, that even after we've been using the IDE long enough to become competant, about 20% of students still prefer using a bare text editor for most coding tasks.
Creating web pages has a tremendous appeal for the students, so this is a popular unit in the class. When we're getting started, there are sometimes complaints about how we're going about things from students who have already used site-building tools. Sometimes this is a response to the unfamiliarity of the command line and a general feeling that we're doing things the hard way for no good reason. Within a few classes these complaints usually end as these students see the value of learning things from the bottom up. If they've had a chance to use high level tools, they've also had the chance to be frustrated by them. As we get to where we're expanding on the tags and styles we're using, rather than just learning the process and tools, they begin to see how they can do things they couldn't do with the high level tools, or get a better understanding of why the high level tools behave as they do.
Before we get started with HTML and CSS, we've had a short segment on command line use. We cover both Windows and Unix command lines with the basic commands for directory navigation and file manipulation. Usually the information hasn't really sunk in yet. But when we start using the command line for practical purposes in the HTML/CSS unit, it sticks and makes sense. This prepares the students for performing the same tasks when we get to programming in the second semester in a way that the command line segment alone would not.
We also get everyone familiar with using a simple text editor. I allow everyone to choose whether they use a command line editor (like Windows' edit) or a graphical editor (like Notepad or TextEdit.) If I had more time I'd have everyone spend a week on vi, but there isn't time enough (I do allow the use of vi or emacs, if the student wants to take it on on their own.)
Using a basic editor like this not only brings a high degree of concentration on the syntax of the language being programmed, but it also forces awareness of other items like where files are being saved, when they were most recently saved, and so on. If we skip this step and go straight to an IDE with autosave features and project management features like project directory management, I find that the students often don't get what's going on, and if something goes odd with the IDE they're left flat-footed wondering what to do. If they start with the simple editors, I notice they watch the autobackup notices and likewise pay attention to the directory structure created and maintained by the IDE.
Working with HTML/CSS itself teaches a good array of basic programming concepts:
- dealing with syntax
- using and remembering command names and keywords
- developing a conceptual design
- implementing to that design
- comparing the implementation against the design
- correcting problems (debugging)
- iterative design refinement
- dealing with "platform" issues (browser differences)
- interdependencies between different code sections
- low barriers to entry
- familiar concepts
- fast turnaround
- browser "test environment" is already familiar
- complexity can be added incrementally, with good results available at all levels
- no extra cost for tools--editors and browsers are already there, many IDEs are free
Posts
Webomator.com: Backward into the