Teaching Progression


According to Piaget's theories, students need to start off with simple concepts and build on them layer by layer. This page describes the recommended sequence for teaching web development in the browser using the Forest Chat Wiki.


Each student gets their own account to which they can add and edit content.  They start off building a very simple static web site, a wiki.  No need to know HTML, CSS or Javascript.   Wiki page objects make it trivial for them to create a tree of web pages and edit the HTML content with the WYSIWYG ckEditor The management interface lets them Rename, ReTitle, Cut, Copy, Paste and Delete individual web pages (content objects), or entire branches of the tree.   

Next they can learn how to view the objects’ historic versions, and revert to an earlier version.  Particularly for students, it is very useful to be able to view and revert to previous versions of a software object. 

Once they understand the basics, they can start to learn HTML.  Wiki page objects can also be edited with the syntax checking Ace editor.  At this point, file and Image objects are added to the mix.

Then we introduce  CSS Editing.  We use the syntax checking  Ace CSS editor to edit css objects.  When the CSS objects get too large, they can start to use CSS Folders.

After that it is time for Javascript.  We will use the  syntax checking Ace Javascript editor   to edit javascript objects.   Javascript Folders make it easy to manage large javascript objects.

Having learned the basics, the students are promoted to intermediate level. Intermediate students also get access to CoffeeScript and Pug objects. Coffeescript is like Python for Javascript. Instead of using opening and closing brackets, it uses indentation to determine structure. CoffeeScript gets rid of all of the curly braces and semicolons.  Hurrah!

Pug  is like Python for HTML templating. Pug throws out the ending tags, and the opening brackets and uses indentation to define structure. Pug is particularly useful when editing complex bootstrap menus.

The forest wiki includes a browser-based syntax-checking Python editor It uses the Ace editor for editing the text. It uses the PyOdide compile function to find and report any syntax errors. PyOdide, from Mozilla, is cPython compiled to WebAssembly and running in the browser.

I also offer a separate Python in the browser tutorial based on PyOdide. Once you understand how to use Python in the browser, it is easy to also use Transcrypt.  Transcrypt is Python transpired to Javascript on the server.  The resulting Javascript is downloaded and debugged in the browser with source code maps. Quite a tall software stack, but the whole effect is quite seamless and transparent,

The Forest Chat Wiki also supports chat, making it easy to share information with the students.  One can image a different chat room for every assignment.

For those who are curious about the  Forest Chat Wiki's architecture, every piece of content is a Python object in the ZODB object-oriented database on the server, and supports the Pyramid model of multiple views. (edit, view, history, revert to previous version), The Ace editor provides syntax checking for html, css, Javascript, and Coffeescript. CkEditor provides for WYSIWYG html editing.  MQTT is used for chat.  Chat logs are stored on the file system using the simple topic logger

  Teaching Progression   1 item