Project in progress (working panel)

Working panel

Based on the style guide of wireframe, the main parts of the working panel page includes HTML editor, CSS editor, Validator (error box) and a preview page. The source code of the HTML editor is referenced from the online work by rio206 on CodePen (http://codepen.io/rlo206/pen/ClEti). The reference was added inside the html files of the page.

Screenshot of the Pen made by rio206

As the editor only contains the HTML editor along with the preview. An extra CSS editor is still required. However, the inline css would still work for current version of the editor, so although the css editor might still need more time to make, at least in the next week's demonstration, we could use the website with inline style to be shown in the preview page.


To amend the editor to be consistent with the style of whole web site. Changes are required mainly in the CSS file. The "Editor Control" section was completely removed, as the options of "bold", "italic" and "underline" for the text are not that necessary for a code editor.


A CSS dummy editor was made beneath the functional HTML box.

Based on the feedback on paper prototyping, the Save and Public buttons are moved to the button (more sensible to the work flow). Also, a Help button was added into the page for allowing users find out useful instructions.

The finished page screenshot (without title bar) :

To do next:
- Make the CSS editor functional
- Adding the title bar using Bootstrap (to be consistent with other page)