This tutorial uses a lot of techniques to simplify code without going into code overload. While it makes the document longer, it eases the cognitive load while at the same time adding multiple checkpoints alone the way. For example, it is best to do small steps at a time and see the results then to do many steps at one time and don't understand what's going on behind the scene.
| TECHNIQUE | REASON |
|---|---|
| Create small steps at one time (The law of progression) | avoid code overload |
| Separate "why" code is done from actual steps | explain coding but keep it separated from steps |
| Start with Static and finish with Dynamic content | simplify coding |
| Enhancements separated from main content | better focus on major topics without getting lost in complexity of adding everything all at once. |
| Validation separated from main topics where necessary | better focus of main topics at hand instead of code |
| Tips | save time coding |
| Cautions | avoid error and frustration coding |
| Checkpoints with screenshots | see results of code |
| Optional code | provide code that can be skipped or done later |
| Alternative code | provide an alternative method of writing the code |
| Before and after code in black | ascertain where to place the code easier |
| Highlight new code in blue | know what code to insert or what code was changed |
| Delete code ( |
make code easier to see that have been deleted |
| Keep comments succinct | make code easy to comprehend (Plain language) |
| Define new or unfamiliar terms | reduce cognitive load |
| Pseudo code (or code syntax) than real code | explain code without too much detail at first |
| Highlighted text vs. regular text | emphasis key words or phrases |
| Simplify terms | make concepts easier to read and understand |
| Write code as if it was writing to a blind person | ensure all steps are listed to make code correct |
| Put concepts in logical order | show logical progression |