Most schools and colleges have highly controlled IT access and this naturally means that useful tools for teaching development are limited. One of my particular areas of interest is in teaching web design, but often we are left with Notepad. This makes it difficult to integrate CSS files, frontend JavaScript and images effectively.
So, of course, I wrote a solution. Here is cm-html which can be found on the Exeter College free resources site: Https://html.toolsforteaching.co.uk
The App displays an in-memory project which can be edited and the changes instantly visible. This makes it fast and suitable for guided modelling and project work. Projects can be imported as zip files and CodePen exports (also a zip) can be imported for copying and pasting into a student’s own project. Exports for work submission or transferring to another machine is also via a zip file.
The code editor is a version of the Monaco editor used in the widely used VSCode. It even incorporates colours for keywords.
Did I mention it was free?
Released under a Creative Commons Licence BY-NC-SA 4.0 it all runs in a local Chrome or Edge or Safari browser.
Below is the User Manual
Documents
cm-html is a full-featured teaching editor that lets students write, preview, and save real web pages entirely inside their browser. Built on the same code editor engine as Visual Studio Code, it gives Level 2 and Level 3 students an authentic development experience without installing any software.
How It Works
Students open the app and are immediately presented with a working three-file starter project:
- index.html — a valid HTML5 page ready to edit
- style.css — a linked stylesheet
- script.js — a linked JavaScript file
As students type, changes are saved automatically and the live preview updates instantly. They can add new files, rename or delete files, and switch between projects — all without leaving the browser.
Key Features
- Monaco Editor: The same engine as VS Code — syntax highlighting, autocomplete, and bracket matching for HTML, CSS, and JavaScript
- Live Preview: A sandboxed iframe updates as students save their work, showing exactly what the browser renders
- Built-in Reference Drawer: Select any HTML tag, CSS property, or JavaScript method in the editor to see an instant explanation with syntax, values, and a code example — no need to leave the app
- MDN Integration: The help drawer also searches MDN Web Docs live so students can explore beyond the bundled reference
- Mobile Preview: Switch the preview to a simulated mobile viewport to test responsive designs
- Project Management: Multiple named projects stored in the browser; switch between them instantly
- Zip Export/Import: Download a full project as a .zip file to submit work or move it between devices
What Students Learn
- HTML Structure: Writing valid, semantic HTML5 documents with correct nesting and attributes
- CSS Styling: Applying styles, understanding the box model, flexbox, and responsive design
- JavaScript Basics: DOM manipulation, event listeners, variables, and functions
- File Organisation: Linking stylesheets and scripts, managing a multi-file project
- Professional Workflow: Using a real code editor with autocomplete and instant feedback — the same tools used in industry
- Self-directed Research: Using the built-in reference and MDN links to look up unfamiliar properties independently
Teaching Applications
- Ideal for Level 2 and Level 3 Creative Digital Media, IT, and Computing units covering website creation
- Set as a classroom or homework task — students save progress automatically and can resume any time
- Use the zip export for assignment submission without needing a VLE file upload plugin
- Demonstrate HTML, CSS, and JavaScript concepts live in front of the class using the preview pane
- The mobile preview mode supports lessons on responsive design and media queries
- No account creation, no data sent to a server — fully GDPR-friendly for student use
Practical Details
- Works entirely offline after the page has loaded — ideal for rooms with unreliable internet (MDN live search requires internet; the built-in reference does not)
- No installation required — opens in any modern browser (Chrome, Edge, Firefox, Safari)
- Projects are stored in the browser’s localStorage — students should export a zip before clearing browser data
- Adjustable editor font size, font family, and colour theme (dark and light)