Amp Hello World Example

Now that Google recommends you to enhance your webpages for mobile devices, you would need to customize your website to render AMP as well, here is a Hello World! boilerplate code to get started!

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <meta name="description" content="Hello World AMP!">
    <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
	
    <style amp-custom>
     .message {
	  margin:10px;
	  padding:10px;
	  border:1px solid #ccc;
	 }
    </style>
	
    <style amp-boilerplate>body {
	-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
	-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
	-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
	animation: -amp-start 8s steps(1, end) 0s 1 normal both
}

@-webkit-keyframes -amp-start {
	from {
		visibility: hidden
	}
	to {
		visibility: visible
	}
}

@-moz-keyframes -amp-start {
	from {
		visibility: hidden
	}
	to {
		visibility: visible
	}
}

@-ms-keyframes -amp-start {
	from {
		visibility: hidden
	}
	to {
		visibility: visible
	}
}

@-o-keyframes -amp-start {
	from {
		visibility: hidden
	}
	to {
		visibility: visible
	}
}

@keyframes -amp-start {
	from {
		visibility: hidden
	}
	to {
		visibility: visible
	}
}</style></noscript>

    <title>AMP: Hello World Code!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
	<p class="message">This is a hello world example using html5 page customized with AMP!</p>
  </body>
</html>

More Posts related to AMP,

More Posts: