Teaching cPython and Web Development in the Browser
Teaching Web Development in the Browser

Teaching Web Development in the Browser

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 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.