Easy HTML EditorVisit site

An interactive HTML tutorial that helps you be more creative through a library of sample code fragments and autogenerated line-by-line code explanations.

Link Link (source code) not-ongoing Timeframe: 10th grade Team: mostly me


Problem & solution: Many beginners have trouble bridging the gap between knowing the step-by-step process of a tutorial and the creative process of freely writing their own HTML code. With this in mind, I developed a brief interactive tutorial that is designed to help beginners bridge the gap.

Tactics of tutorial design used to achieve this goal:

  • sequencing of sections so that beginners can get a minimum foundation to start experimenting with website writing as fast as possible (more advanced concepts are taught later)
  • a library of sample code fragments; the user is encouraged to experiment and apply them as building blocks for their own websites
  • automatically generated line-by-line explanations of anything the user writes, helping learners gain a better grasp of the full HTML feature-set and fix issues that result.

Screenshot of tutorial


Tutorial content

There are ~10 pages in the tutorial, which teach the basics of HTML.

Screenshot of tutorial panel

Example code

Tutorials contain example code. The code can be copied to the code editor and the user is encouraged to experiment with it.

Screenshot of examples panel

Line-by-line explanations

Interactive line-by-line explanations are generated for any code the user enters by clicking “show explanation” in the code editor. When an HTML tag is clicked in the explanation, a definition with examples appears in the bottom panel.

Screenshot of interactive explanations feature

  • It’s important to make sure that the website layout is reasonably robust to screensize changes and long pages of content. My previous projects often had major layout bugs, so this time I wrote my own collection of CSS utilities to handle flexbox layout, which is used by marking certain parts of the page as “h-layout”, “v-layout”, etc. This makes the layout cohere much better.
  • I needed to write a clear spec for the project, articulating my ideas clearer than usual.
  • Overall, it required careful planning to make sure that the code architecture during the prototyping stages was extendable to a variety of more advanced tutorial features in the future.