Web Workshop 🚧

Craft handmade websites in their natural habitat (your web browser).

Web Workshop was born as a teaching tool for web development classes, with the goal of making web publishing more accessible, especially to those who have never written code before.

By stripping away complexity and focusing on the basics, Web Workshop turns website building into something playful and toylike – a creative playground where you can experiment, break things, and watch your ideas materialize in real-time.

Recently, Web Workshop has become an editor of choice for HTML Day, an annual celebration of handmade websites and the creative web.

Built with Web Workshop

Hunter's Club-Mate Fan Club - A shrine to the beloved hacker beverage
Hunter's Trinket Collection - A virtual museum to house five cherished tchotchkes
SNAKE - The classic game, reimagined for the modern era
Jenno's Picnic World - An interactive digital collage

How to Play

Open index.html in your web browser (click here!)
Type some HTML in the editor pane
- The preview pane will rerender when you're done typing
- Your work is automatically saved, and restored when you reload the page
Press ⌘ + S to export your work as an HTML file (⌘ + O to open an existing file)

Stock Images

A library of stock images is included for your convenience. To browse them, type <img src="?"> anywhere in the editor pane, then click to select an image from the resulting table.

Alternatively, if you know the name of the image you'd like to use, you can add it to your project like so: <img src="coffee.gif">.

Boilerplate

Type <!> to insert the following starter HTML:

<!DOCTYPE html>
<html>
  <head>
    <style>

    </style>
  </head>
  <body>

  </body>
</html>

Options

to toggle line numbers, press F1 (disabled by default)
to toggle line wrapping, press F2 (enabled by default)

Installation for Offline Use

Wanna make websites on your phone? Try installing Web Workshop as a Progressive Web App! (You can install it as a desktop app, too...)

web_workshop