Introducing AMP by Example

We’ve just launched ampbyexample.com. A new website to showcase what’s possible with Accelerated Mobile Pages (or AMP). Our goal is to provide practical solutions for problems one might face when creating AMP HTML files. The focus of ampbyexample.com is on code and live samples.

Side-by-Side: Documentation, Code and Demo

If you want to learn more about Accelerated Mobile Pages, you can go to g.co/ampdemo on your mobile device and search for recent news. There is also an excellent introduction by Smashing Magazine.

You can think of AMP HTML as what HTML would look like had it been designed with nothing but mobile performance in mind (..).

Things to come

Our plan for ampbyexample.com is to have working examples for all AMP components. We’ll start with the most commonly used ones and subsequently add more.

The goal here is not to great another reference documentation for AMP. The official documentation is already very good. Instead, we want to capture interesting scenarios for using AMP and to provide working samples for these.

Beyond that, we want to demonstrate how to get the most out of AMP by combining different AMP components. For example, did you know that amp-fit-text works perfectly together with amp-carousel?

Missing anything?

In case we are missing any examples, feel free to let us know. Have you got any good examples you would like to contribute? Check out the README, it’s very easy to add new examples.

A look behind the scenes

With ampbyexample.com we have been eating our own dog food. The website is completely built with AMP. You can find the source code on Github. Every example on the website is generated from a simple AMP HTML file. The idea has been inspired by the fantastic gobyexample.com.

This is how examples are written.
Show your support

Clapping shows how much you appreciated Sebastian Benz’s story.