An interactive HTML tutorial that helps you be more creative through a library of sample code fragments and autogenerated line-by-line code explanations.
Overview
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.
Example code
Tutorials contain example code. The code can be copied to the code editor and the user is encouraged to experiment with it.
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.
Learnings
- 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.