You can try following the guide for Create Responsive AMP Pages.
Here is the list of some components being used in Amp Development.
- amp-access Provides AMP paywall and subscription support.
- amp-accordion Provides a way for viewers to have a glance at the outline of the content and jump to a section of their choice at will.
- amp-analytics Captures analytics data from an AMP document.
- amp-anim Manages an animated image, typically a GIF.
- amp-audio Replaces the HTML5 audio tag.
- amp-brid-player Displays a Brid.tv player.
- amp-brightcove Displays a Brightcove Video Cloud or Perform player.
- amp-carousel Displays multiple similar pieces of content along a horizontal axis.
- amp-dailymotion Displays a Dailymotion video.
- amp-dynamic-css-classes Adds several dynamic CSS class names onto the HTML element.
- amp-facebook Displays a Facebook post or video.
- amp-fit-text Expands or shrinks font size to fit the content within the space given.
- amp-font Triggers and monitors the loading of custom fonts.
- amp-iframe Displays an iframe.
- amp-image-lightbox Allows for an “image lightbox” or similar experience.
- amp-instagram Displays an Instagram embed.
- amp-install-serviceworker Installs a ServiceWorker.
- amp-lightbox Allows for a “lightbox” or similar experience.
- amp-list Dynamically downloads data and creates list items using a template.
- amp-mustache Allows rendering of Mustache.js templates.
- amp-pinterest Displays a Pinterest widget or Pin It button.
- amp-reach-player Displays a Beachfront Reach video player.
- amp-soundcloud Displays a Soundcloud clip.
- amp-springboard-player Displays a Springboard Platform video player
- amp-twitter Displays a Twitter tweet.
- amp-user-notification Displays a dismissable notification to the user.
- amp-vimeo Displays a Vimeo video.
- amp-vine Displays a Vine simple embed.
- amp-youtube Displays a YouTube video.
How do I check if my page is valid AMP?
The AMP validator comes bundled with the AMP JS library, so it is available on every AMP page out of the box. To validate:
- Open your page in your browser
- Add
“#development=1”
to the URL, for example, http://localhost:8000/released.amp.html#development=1
.
- Open the Chrome DevTools console and check for validation errors.
How do I fix validation errors?
Most validation errors are easy to address and fix. Consider this error:
Here is an image from their document.

- The first line of the error does its best to estimate where the error happened. Clicking on it should locate the general area.
- The second line, The part in red is the actual name of the error. In this case, MANDATORY_ATTR_MISSING signals that we’ve used a tag and forgot an important attribute.
- The third line points to the piece of the AMP HTML Spec that talks about the limitation or feature in question.
NOTE:
Valid AMP documents must not inlude any validation errors. The purpose of this document is to help you better understand and fix any validation errors you encounter when you validate your AMP pages. For a complete overview of the validation errors, see the AMP validator specification.