Skip to content
Last updated

Some projects may have walkthrough pages - pages that display instructional content side-by-side with content that demonstrates results or provides examples: code snippets, images, or videos.

Typically, the instructional content is displayed in the left panel, and the right panel contains results or examples.

Walkthrough pages can vary significantly in their composition and user interface elements.

Highlight step

A walkthrough can contain step elements in the left panel that are synced with examples in the right panel. A step element highlights when you hover your mouse over it.

Click the step element to have the right panel scroll to the corresponding content and in case of code snippets, highlight the relevant fragment.

Toggle between content variants

Some walkthroughs contain multiple variants of content.

At the top of the left panel, you can use the tabs to switch between the variants of the walkthrough, for example, to change the programming language used in the code files.

The content in the left panel may also include toggle buttons you can use to show or hide optional steps.

Copy code from a file

To copy the contents of a code file:

  • In the bottom-right corner of the screen click the Copy button.

The content of the file is copied to your clipboard.

Download walkthrough files

A walkthrough may allow downloading files used in the right panel. In some cases, additional files may be also included in the archive.

To download walkthrough files:

  • Click the Download button in the top-right corner of the screen.

The file archive is downloaded to your device.

Resources