Last updated June 9, 2016
Community8.9.x/9.0.x

This tutorial teaches you everything you need to know about using the new tutorials on Drupalize.Me.

A tutorial is a collection of text, videos, in-line code samples, and step-by-step instructions intended to help you learn a concept or perform a task. Everything you need in one handy location. And, while we hope things are pretty self explanatory (let us know if you think they're not), we couldn't help but get excited about the opportunity to try it all out and create a new tutorial. So without further ado, here's how this all works.

In order to make the best use of tutorials on Drupalize.Me there are a few things you'll want to know:

  • What a tutorial is composed of
  • How to expand and watch an embedded video
  • How to navigate to another tutorial in a series

The components of a tutorial

Each tutorial is composed of one, or more, of the following building blocks arranged in whatever order makes the most sense when attempting to convey the concept or task at hand.

Written text: Blocks of text, much like this one, that provide definitions, explanations, and other free-form textual content.

In-line code snippets: Example code demonstrating a particular technique or concept.


<div class="twig-example"> Hello {{ user.name }}, welcome back! </div>

Step-by-step instructions: A set of instructions outlining how to perform a specific task. Follow them in order to complete the task yourself.

Embedded videos: Expand a video and watch. Videos can be used to explain concepts, demonstrate tasks in the UI, or anytime it provides the opportunity to create a better explanation.

Watch an Embedded Video

Navigate to another tutorial

Scroll down

Any tutorial that is part of a collection or series will display a list of other tutorials in the same collection at the bottom of your browser's viewport. This list isn't visible when the page first loads and requires users to scroll down to expose it.

Open the list

Once the list header is visible you can click anywhere on the dark blue bar to expand the list and view the other tutorials in the collection.

Locate another tutorial

If the list of tutorials expands beyond 10 or so you may have to scroll within the list to find the tutorial you're looking for. Note: the tutorial you're currently viewing is highlighted in green.

Click or tap

Once you've located the next tutorial you want visit simple click the item in the list and you'll be whisked away to learn.

Example

Animated example of playlist being exposed.

Armed with this information you should be more than ready to start navigating around our site and learning Drupal. But just to ensure you've understood the content of this tutorial here are a few questions you can use to quiz yourself.

  • What type of component would be appropriate for displaying an example of a Drupal API implementation?
  • How many videos can be embedded into a tutorial?
  • Explore further: If you were creating a tutorial are there any components that you think are missing from the ones available? If so, what do you think should be added?

Let us know if you've got any questions, or feedback on our new tutorials.