AMP
Something went wrong while trying to load more search results.
We apologize for the inconvenience caused.
Please try again later.

;(

Something went wrong…

…while trying to load the search results.
We apologize for the inconvenience caused.
Please try again later.

Setting up

Prerequisites

Before starting this tutorial, you'll need the following:

  • A basic knowledge of HTML, CSS, and JavaScript
  • A basic understanding of AMP’s core concepts (see "Convert your HTML to AMP" tutorial)
  • A browser of your choice
  • A text editor of your choice

Set up your development environment

Step 1. Download the code

  1. Download the code for the tutorial, which is compressed as a zip file from the following URL: https://github.com/ampproject/docs/raw/master/tutorial_source/amp-pets-story.zip

  2. Extract the contents of the zip file. In the amp-pets-story directory are the images, video, audio, and data files that we'll use to create our story. The pets.html file is our starting point for the story. The completed version of the story can be found in the pets-completed.html file.

Step 2. Run the sample page

To test our sample story, we need to access the files from a web server. There are several ways to create a temporary local web server for the purposes of testing. Here are some options, choose the one that works best for you:

After setting up your local web server, have a look at what our completed story will look like by the end of this tutorial by accessing the following URL:

http://localhost:8000/pets-completed.html

IMPORTANT – Make sure the URL serves from localhost otherwise the AMP story might not load correctly, and you may encounter errors like "source" "must start with "https://" or "//" or be relative and served from either https or from localhost.

Click through the completed story and get a sense of what we'll be creating.