This tutorial uses a lot of techniques to simplify code without goinging 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 |
|---|---|
| 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 topic | better focus of topic at hand instead of code |
| Validation separated from main topic where necessary | better focus of topic 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 |
| Highlighted code in blue | know what code to insert or what code was changed |
| Deleted code ( |
make code easier to see that have been deleted |
| Keep comments succint | make code easy to comprehend (Plain language) |
| Define new or unfamilar terms | reduce cognitve 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 writting to a blind person | ensure all steps are listed to make code correct |
| Put concepts in logical order | show logical progression |