Originally published at https://ampire.city

What Will I Learn?

Requirements:

  • AMP for WordPress plugin;
  • Basic CSS & HTML knowledge;

Originally published at https://ampire.city

What Will I Learn?

Requirements:

  • AMP for WordPress plugin;
  • Basic CSS & HTML knowledge;

The Issue


Originally published at https://ampire.city

What Will I Learn?

Requirements:

Shopping Cart Button in AMP-Friendly Theme Example


Originally published at https://ampire.city

What Will I Learn?

Requirements:

Responsive AMP Carousel Example

<!--HTML-->
<amp-carousel id="carouselID" layout="fixed-height" height="120" type="carousel">
<amp-img src="/img/image1.jpg" layout="fill" alt="apples"></amp-img>
<amp-img src="/img/image2.jpg" layout="fill" alt="lemons"></amp-img>
<amp-img src="/img/image3.jpg" layout="fill" alt="blueberries"></amp-img>
</amp-carousel>
<!--CSS-->

Originally published at https://ampire.city

What Will I Learn?

Requirements:

Google Tag Manager for AMP-Analytics Code Example

<!-- AMP Analytics --><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<!-- Google Tag Manager -->
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-XXXXXXX&gtm.url=SOURCE_URL" data-credentials="include"></amp-analytics>

Installing Google Tag Manager on AMP Website


Originally published at https://ampire.city

What Will I Learn?

Requirements:

Using AMP-FX-Collection


Originally published at https://ampire.city

What Will I Learn?

Requirements:

  • Basic CSS & HTML knowledge;
  • Basic AMP knowledge;
  • Basic PHP knowledge;
  • AMP for WordPress (Optional)

Creating AMP-Friendly WooCommerce Website


Originally published at https://ampire.city

What Will I Learn?

Requirements:

  • Google AdSense Account;
  • Basic CSS & HTML knowledge;

Working Example

AMP-AD AdSense Code Example


Originally published at https://ampire.city

What Will I Learn?

Requirements:

AMP-AD AdSense Code Example

<amp-ad width="100vw" height="320" 
type="adsense"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxxxxx"
data-auto-format="rspv"
data-full-width="">
<div overflow=""></div>
</amp-ad>

Originally published at https://ampire.city

What Will I Learn?

Requirements:

  • AMP for WordPress plugin;
  • Basic CSS & HTML knowledge;
  • Working AMP Carousel

Full code of AMP Carousel with dots

Alis Monte

Travel Blogger, Web Designer & AMP Developer | Travel & History Journal: https://www.ctdots.eu | AMP Development & Web Design Tutorials: https://ampire.city

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store