Social Icons

How to Create Your Own Tutorial

Guidelines

Write up your tutorial as a text or html file. If you don't feel comfortable using HTML, creating your own .txt file is fine. But please do not use google docs or a word doc. It's too difficult to cut and paste content from those formats into HTML files.

You'll need to download the attached template link as an html file. Right click on the link then select "Save link as..." to download the template html file to your computer.

Once you have downloaded the file, you'll need a text editor to edit it. Here are links to free text editors that you can use:

Images

We'll upload and link the images for you but you can specify which image to use by including the name of the image in every img tag which look like <img src="NAMEOFIMAGE">.

HTML Reminders

Here are some quick reminders on HTML:

  • Every tag should have a closing tag
  • Anything that starts with <!-- is a comment and will not show up in your tutorial. We've added several comments to help you create your tutorial.
  • To make a new paragraph, include your text in the <p> <\p> tags.
  • Links should be put in tags like this <a href="NAMEOFURL"> NAMEOFLINK </a>
  • There are several sizes of headers and can be tagged by <h2> This is my header </h2> The 2 can be replaced by other numbers depending on what the size of your header should be.

    • This is an h1 header

    This is an h2 header

    This is an h3 header

    This is an h4 header

    This is an h5 header
    This is an h6 header

For a more thorough guide on HTML, check out http://www.w3schools.com/html/default.asp

Steps

Tutorials should include:

  1. A 1-line description of the tutorial.
  2. A list of tags that identify, e.g., CS Principles or AI concepts that it addresses.
  3. A link to the .apk compiled app WITH QR CODE image
  4. A link to the .zip file so that users can load the app into App Inventor, view the blocks, and remix it
  5. At least one screenshot of the design window (a screenshot of the app’s screen layout). This can be taken from the Designer OR from the running app.
  6. Several relevant screenshots of the blocks (or sections of blocks). Also, take a final screenshot of the completed blocks. Label these images so that we can figure out what each one is.
  7. Then when you've finished, send everything as a single .zip file to the curriculum team by emailing

Other tutorial examples

The following links are good examples of well-written "advanced" tutorials. Rather than giving explicit step-by-step instructions, they use a table format for showing the user how to set up the design and the blocks, and they give just enough information to explain how/why the app does what it does. Most importantly, they give suggestions for further development at the end.

A multi-step tutorial for a game app with a lot of events and logic:
http://appinventor.mit.edu/explore/content/minigolf.html

A longer tutorial for a quiz app with lots of lists and logic:
http://appinventor.mit.edu/explore/content/quizme.html

A short tutorial for a more simple app:
http://appinventor.mit.edu/explore/content/alertme.html

A standard advanced app layout:
http://appinventor.mit.edu/explore/content/videowall.html

More advanced tutorials to use as examples: http://appinventor.mit.edu/explore/tutorials.html (scroll down to “Advanced” section)