Learn to Write AMP HTML Quickly


Since we announced the AMP developer preview in October, more than 5,200 developers have engaged with the project and more than 16,000 new AMP pages have been created each day.

To make it easier to join the community of AMP authors, we’ve recently expanded with extended and freshly written documentation, with the goal of helping you learn to write AMP pages quickly.

Most importantly, we want to thank you for your early feedback. Your requests in the AMP HTML source code repository and questions in Stack Overflow helped us figure out which docs were needed the most, and we will continue to use these resources to write more docs.

Read on to learn more about how we built the site, what’s new in the docs, what we learned creating our own AMP pages, and how you can continue to help keep the momentum going.

How we built the site

While we were writing about AMP, we realized one of the best ways to test our knowledge and assumptions of how AMP works was to implement the AMP site in AMP. The beauty of the underlying code is that it generates AMP HTML content for this updated website using web development best practices.

As the technical writer on the project, my main focus was to create content. Google Developer Advocate Paul Bakaus created docs site code that uses templating and preprocessing to make it as easy as possible for me to focus on writing the docs.

Want to dive a little deeper to see what I mean? Check out the markdown for our about AMP page. Now right-click and view source on this page in to see a living, breathing example of an AMP page.

What we learned

Having built the site in AMP, we learned what it really feels like to be AMP page creators. As early AMP page creators, we were part of helping the project evolve. It’s easy to get started creating AMP pages, but you still might discover things you need are still in development, for example, amp-analytics.

You may also stumble over things that we, who work on the AMP project, haven’t considered before. For example, how does one create a responsive hamburger menu in an AMP page without JavaScript? We’re working on it in this feature request!

What’s new in the docs

With our doc expansion, we wanted to build a guide so that anyone who has produced web content before can get up and running with AMP in under an hour. If you understand basic mark-up, it’s easy to learn how to create your first AMP HTML page.

Ease-of-use is one of my favorite things about AMP HTML. It’s straight-forward to style your pages, control layout, validate your AMP content, and make your pages discoverable.

The site also pulls in the reference docs straight from the AMP specification so that the reference is always up-to-date. And there’s more docs to come in the new year.

In addition to new how-to guides on analytics and monetization, we’re also adding docs that show how to create and test AMP components, which can then be reused by other developers in their AMP pages.

Help us!

We are all in this together. The AMP project including the AMP docs is a community effort. We welcome your feedback in the docs issue tracker. Even more importantly, we’d love your contributions. The docs are open-source. Send us pull requests. You can also fork the docs and use them to get started on your own AMP site.

Posted by Meggin Kearney, lead technical writer for AMP