reelyActive Web Style Guide for Tutorials

This page serves as a basic skeleton for tutorials such as those found at reelyactive.github.io.

Example tutorial hero image

The TL;DR (Too Long; Didn't Read)

Summarise the content in a few words using friendly terms.

Perhaps another sentence here as a more robust summary.

What's the expected result?
Answer what a reader can expect as a result of reading this.
What's the alternative?
Answer what they might be looking for instead.
Is this for me?
Comment on the target audience, level of detail, etc..

Prerequisites

Sometimes there are prerequisites, sometimes there are not.

Title of a step in a tutorial   Step 1 of X

Summarise the step in a few words using friendly terms.

Why use a bg-light card?
Because it provides a clear break in the content and makes the title stand out.
Why use badges for step numbers?
Because badges stand out nicely. Moreover, the badge serves as a local hyperlink (#) for visitors to easily link that step.
960px wide and not too high

First sub-step title Part 1

This is an example of a warning to the user.

Content goes here.

  1. An ordered list
  2. Combine explanations and code

Second sub-step title Part 2

This is an example of some did-you-know info for the user.

Content goes here. 

// This is <code> in a <pre> block
if(isMultipleLines) {
  console.log('This can be handy as it respects code indentation nicely!');
}

Third sub-step title Part 3

Consider nav-tabs for steps where the user can choose between various options, or should repeat similar steps.

Content of the first tab.

Content of the second tab.

Content of the third tab.

Do you like this document template?

It's based on Bootstrap 5   MIT and Font Awesome 5 (Free)   MIT. Our Web Style Guide   MIT has all the details. Sharing and feedback are encouraged!

  reelyActive's Web Style Guide

Where to next?

Continue exploring our open architecture and all its applications.