Two days ago I started developing my first AMP project for a mobile web site.

Obviously I’m still a beginner, but I thought it would be helpful for other people if I document some of my experience from a developer’s perspective.

AMP is simplified, but highly regulated HTML

One such example is CSS. You can only use one internal stylesheet in the header: <style amp-custom>

External CSS files are not allowed, neither are Inline style attributes in tags.

<link href="css/bootstrap.min.css" rel="stylesheet"> (Not allowed) <div style="margin-left:30px;"> (Not allowed)

Validation is easy, but the error messages aren’t

You can append #development=1 to your URL, and then go to Chrome DevTools console to see the validation results. As simple as that.

However, the error messsages can be very confusing. Some examples are:

If you have <amp-img src="/logo.png" />, you will get The implied layout 'CONTAINER' is not supported by tag 'amp-img'. where the actual cause is the missing height attribute, which is mandatory for the <amp-img> tag. (You use <amp-img> instead of <img>, by the way.)

If you mistakenly added an external stylesheet file as in <link href="css/bootstrap.min.css" rel="stylesheet">, you will be presented with a mysterious The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'css/bootstrap.min.css'. That’s because <link ref> can only be used for fonts.

How do I see AMP in Google search results

It’s not live in regular Google search yet. Currently you can view the demo at http://g.co/ampdemo

Search for some popular keywords, such as one of my favourite, “Electric car”.