The idea here is to make CSS and HTML coding accessible to beginners by building a block language for them, using Droplet.
Droplet is a new open source blocks-and-text program editor created for Pencil Code. It is a unique approach to block editing, because it allows students to edit in either blocks or text and switch modes at any time, without losing any work. (For example, all spacing and comments within text are preserved when going to blocks and back.)
Here is a short paper describing Droplet.
A short video demo of Droplet in action is here:
Droplet implements the block mode by rendering blocks on a canvas. Its rendering of blocks is based on a text-and-markup data model. Each block spans a portion of text, and it contains sockets and indents which span parts of the block. Each of the sockets and indents can contain further blocks, or just plain text. Droplet computes all the geometry of the blocks based on this marked up text model.
The specifics of the language handling of the blocks (for example, where blocks begin and end, and what color they are) is handled in specific language parser adapters.
This project would involve adding additional parser adapters for HTML and CSS. Here are the steps of the project: