Teach Web Development in the Browser
The Forest Wiki lets your students learn web development without having to install anything on each individual’s computer. Just install the free docker container on the teacher’s laptop, or on your favorite web server. Each student gets their own secure tree of HTML, CSS and javascript objects, and the teacher can inspect them all remotely.
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.
Built using the Forest Map Wiki