Now-a-days, if anyone browse a website on mobile, everyone expect rich and HD graphics, smooth scrolling, fast animations, transitions to load quickly. Google introduces a new technique known as AMP. It\u2019s a technique to build static content web pages that render fast. Its basic structure consists of three different layers:<\/p>\n
So AMP Project = AMP-HTML + AMP JS Library + Custom Styling + AMP Cache<\/p>\n
Goals of AMP Project<\/p>\n
Create first AMP Page:<\/strong><\/p>\n Basic structure for AMP Page is below:<\/p>\n [java] <\/head> <\/body> Code inside head tag:<\/p>\n [java] <style amp-boilerplate> <noscript> <style amp-custom> <script async src="https:\/\/cdn.ampproject.org\/v0.js"><\/script> Code inside body tag:<\/p>\n [java] Note:<\/b> Some extended HTML tags:<\/strong><\/p>\n Styling\/ Presentation<\/strong><\/p>\n Styling is done by using common CSS, by using starting tag <style amp-custom>:<\/p>\n [java] Make sure there should be only one amp-custom style tag for styling. And even AMP page can have a single embedded stylesheet.<\/p>\n Validate AMP Page: <\/strong><\/p>\n AMP is providing a validator built in browser only. No need to validate your code from other online validators. Just open your document in any browser through local server: XAMP\/WAMP. Congrats you have created first AMP Page and tested locally.<\/p>\n You can explore more about this.<\/p>\n","protected":false},"excerpt":{"rendered":" Now-a-days, if anyone browse a website on mobile, everyone expect rich and HD graphics, smooth scrolling, fast animations, transitions to load quickly. Google introduces a new technique known as AMP. It\u2019s a technique to build static content web pages that render fast. Its basic structure consists of three different layers: AMP HTML: HTML extended with […]<\/p>\n","protected":false},"author":231,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":3,"footnotes":""},"categories":[3429,1],"tags":[3830,398,3831],"class_list":["post-38518","post","type-post","status-publish","format-standard","hentry","category-front-end-development","category-technology","tag-amp","tag-google","tag-page-optimization"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t
\n<!doctype html>
\n<html amp lang="en">
\n<head><\/p>\n
\n<body><\/p>\n
\n<\/html>
\n[\/java]<\/p>\n
\n<head>
\n<meta charset="utf-8">
\n<title>First AMP Page<\/title>
\n<link rel="canonical" href="http:\/\/ampproject.org\/article.html" \/>
\n<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><\/p>\n
\nbody{-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}
\n@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
\n@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
\n@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
\n@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
\n@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
\n<\/style><\/p>\n
\n<style amp-boilerplate>
\n body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
\n<\/style>
\n<\/noscript><\/p>\n
\n amp-img.grey-placeholder {
\n background-color: grey;
\n }
\n<\/style><\/p>\n
\n<\/head>
\n[\/java]<\/p>\n
\n<body>
\n <h1>This is my First AMP Page<\/h1>
\n<\/body>
\n[\/java]<\/p>\n
\n<!doctype html> is required at the top.
\n<html amp> to tell browser that we are using amp.
\n<link rel=”canonical” href=”_canonical-url_” \/> it points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists.
\n<script async src=”amp-js-library”><\/script> it includes AMP JS library.<\/p>\n\n
\n<style amp-custom>
\n body {
\n background: white;
\n }
\n amp-img {
\n border: 1px solid black;
\n }
\n<\/style>
\n[\/java]<\/p>\n
\nAdd #development=1 after the url in address bar.
\ne.g http:\/\/localhost:8000\/first-amp-page.html#development=1
\nOpen Dev tool console in chrome browser and check validation errors.<\/p>\n