WebDev for LiaScript: Run HTML, CSS, and JavaScript Live in Your Course

Teaching front-end web development means students need to experiment. They need to change a CSS rule and see it take effect, add a button and wire it up, break something and fix it.

The WebDev template makes HTML, CSS, and JavaScript code blocks in your LiaScript courses directly executable. Students edit code, click the run button, and see the result — all without leaving the course.

Quick Start

<!--
import: https://raw.githubusercontent.com/liaTemplates/WebDev/master/README.md
-->

Four macros are available: @WebDev.HTML, @WebDev.JS, @WebDev.HTML_CSS, and @WebDev.HTML_JS.

Macro 1: @WebDev.HTML — Live HTML Preview

Attach @WebDev.HTML to a single HTML code block. The block becomes editable; clicking run renders the HTML inline.

```html
<h2>My First Heading</h2>
<p>This is a <strong>live</strong> HTML block.</p>
<ul>
  <li>Edit me</li>
  <li>Run me</li>
</ul>
```
@WebDev.HTML

Macro 2: @WebDev.JS — Execute JavaScript

Attach @WebDev.JS to a JavaScript code block to evaluate it and print the result. Console output is shown below the block.

```js
let sum = 0;
for (let i = 1; i <= 10; i++) {
  sum += i;
  console.log(`i=${i}, sum=${sum}`);
}
console.log("Final sum:", sum);
```
@WebDev.JS

Macro 3: @WebDev.HTML_CSS — HTML + CSS Together

Use two consecutive code blocks — first HTML, then CSS — and attach @WebDev.HTML_CSS. The CSS is scoped and rendered in an iframe so it does not affect the course page.

```html
<div class="card">
  <h2>Styled Card</h2>
  <p>Hover over me!</p>
</div>
```
```css
.card {
  padding: 20px;
  background: #3498db;
  color: white;
  border-radius: 8px;
  display: inline-block;
  transition: transform 0.2s;
}
.card:hover {
  transform: scale(1.05);
  background: #2980b9;
}
```
@WebDev.HTML_CSS

Macro 4: @WebDev.HTML_JS — HTML + JavaScript Together

Use two consecutive code blocks — HTML first, JavaScript second — and attach @WebDev.HTML_JS. The JavaScript is evaluated after the HTML is rendered, so document.getElementById() and DOM manipulation work.

```html
<h3 id="title">Original Title</h3>
<button onclick="changeTitle()">Change Title</button>
<p id="counter">Clicks: 0</p>
```
```js
let count = 0;
function changeTitle() {
  count++;
  document.getElementById('title').textContent = 'Updated ' + count + ' times!';
  document.getElementById('counter').textContent = 'Clicks: ' + count;
}
```
@WebDev.HTML_JS

Full Template Demo

Use Cases

HTML fundamentals — Make every HTML example in your course runnable. Students see immediately how <h1> vs <h2>, block vs inline, or semantic tags affect the page.

CSS exercises — Let students experiment with colors, typography, flexbox, and grid layouts without a code editor. The HTML+CSS macro keeps both panes visible and synchronized.

DOM manipulation — Introduce JavaScript event handling with live, interactive examples. Students write document.getElementById(), click a button, and see their code work.

Quick prototyping exercises — Ask students to build a small component — a card, a navigation bar, a form — directly in the course. No project setup, no file management.

Technical Facts

Try It

Related Templates

• JSCPP — C++ interpreter in the browser for systems programming courses
• p5js — creative coding and generative graphics with p5.js
• TinyTurtle — turtle graphics to teach JavaScript basics
• CodeRunner — server-side execution for Python, Java, C, and 20+ more languages