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
-
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
-
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 web 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 web 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 web 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.
-