Course Introduction

Welcome Back Again

In the previous two courses, we learned how to create a basic AMP site. We learned how to use components to add features to our site and handle user interaction.

Together, we built a site from scratch for the fictional Chico’s Cheese Bicycles shop. We added content such as videos and images, a newsletter subscription form, a slide-out menu, and a more elaborate image carousel.

We’ve done so much already, so what is there left to learn?

For one thing: In the site that we’ve built so far, each visitor sees the same content. What if we wanted to make a site that was different depending on the user that visited the site?

This type of dynamic site is common in today’s Internet. We might each visit the same URL to read our emails, but the emails we see are different. On shopping websites, we see lists of products that are personalized based on our past choices, and we see a shopping cart we've created. On social media, we see targeted content generated by algorithms that determine our interests, as well as content we've created ourselves. On news sites, we read breaking stories and comments from other readers. In each case, the designers of those sites had to develop a page without knowing the exact content that would be shown.

In the final course in this series, we’re going to learn how to change the appearance of or the content on the page based on how users interact with our site. By the end of this course, you will learn how to:

• Store information in application state variables in response to user actions.

• Change the content or appearance of a website when state variables update.

• Retrieve and display server data on your page using templates.

• Dynamically change the content on screen (i.e., filtering and sorting data).

To accomplish these goals and keep developing our cheese bike website, we will continue to refine our image carousel. In the beginner course, we learned how to create the carousel using AMP components. In the intermediate lesson, we expanded the functionality of the carousel by adding an additional thumbnail carousel. When the user changed slides in either carousel, the active slide was updated in both carousels. We accomplished this using AMP events and actions.

In this advanced course, we’re going to change the carousels to run off application state instead. We will store the current slide in a state variable and use bindings to update each carousel whenever the slide value is changed. Then, we’ll discover how easy it is to add a third component that also observes the selected slide value and updates when it changes.

Next, we’re going to add our first products to our Chico’s Cheese Bikes website. In the beginning and intermediate courses, all of the content on our pages was included in our HTML files. However, this list of products will be loaded from a server and then displayed on-screen. Users can also sort products by price and filter using the product category. To do this, we will combine the new concepts of application state, bindings, and retrieving server data, along with the lessons from previous courses about combining components and responding to user input.

In addition to enhancing our bike shop website, we will spend time looking at other genres of websites that you can build with AMP. After this training is complete and you begin building your own sites in AMP, you may find yourself working on a completely different kind of site. Therefore, we will examine popular website examples such as video and e-commerce sites and use the concepts we’ve learned in these courses to understand how they were built. Finally, we’ll recreate basic versions of these sites in AMP to show the flexibility and versatility of the library.

Course Prerequisites

This course is designed for current developers who want to build performant websites and for aspiring developers who are looking to build their first website. Additionally, this course is well-suited for anyone who is maintaining or working on an existing AMP site.

To get the most from these courses, you should have a basic understanding of HTML and CSS. It is enough to be able to recognize and to be able to make minor additions and alterations to existing HTML and CSS. In addition, this course includes a JavaScript-like syntax in the form of AMP event handlers. Understanding how function calls are made in JavaScript or a similar language should be sufficient to complete the requirements of this course.

In the advanced course, the data we retrieve from the server in several examples is in JSON format. The server is already configured to return the correct information, and examples of the JSON data are included with each exercise. For the purposes of this course, it’s important to know how to read data in a JSON object, to reference particular pieces of data in a JSON object using JavaScript, and to be able to make basic JavaScript function calls. If you are unfamiliar with JSON or would like a refresher, you can read this training material.

This course is intended to be a continuation of the beginner and intermediate courses. As such, it assumes an understanding of the concepts we’ve already covered. Those concepts include:

• AMP page structure and boilerplate

• AMP validation

• AMP components and how to combine them together

• How to use the AMP documentation

• The AMP cache

• Handling user inputs using events and actions

If any of these topics are unfamiliar, we suggest reviewing the material from the beginner course found here and/or the intermediate course found here.

Getting Set Up

In this course, we will continue using Glitch to complete our programming exercises. If you completed the beginner and/or intermediate courses, you can continue to use the same Glitch repository to complete the advanced tutorial. If you did not complete the beginner training or if you’d like to start from a new Glitch repository, you can remix this one, which has all of the code from the intermediate training already implemented. If you would like to learn more about Glitch, you can read about it in the appendix.

This course will also require the AMP Validator. The AMP Validator is a tool for detecting errors in our AMP pages. Writing valid AMP pages is an important part of getting AMP’s full performance benefits. The validator is primarily accessed via a Chrome extension. To install the Chrome extension, visit this link here.

Let’s get started!