-
AMP is a web component framework to easily create user-first websites.
-
AMP is an open-source HTML framework that provides a straightforward way to create web pages that are fast, smooth-loading and prioritize the user-experience above all else.
-
AMP Tutorial Playlist - https://www.youtube.com/playlist?list=PLXTOW_XMsIDS45GB-eBV5s_M9EGIXMjI_
-
Documentation - https://amp.dev/documentation/guides-and-tutorials/start/create/?format=websites
-
AMP Boilerplate Generator - https://amp.dev/boilerplate/
-
Supported CSS in AMP - https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/
-
List of AMP Components - https://amp.dev/documentation/components/
-
Example:
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport" content="width=device-width">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<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><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>
-
Live Website - https://tall-verbena-baritone.glitch.me
- Chrome Extension URL - https://bit.ly/2GcUrcG
-
Basic AMP Website
-
Product AMP Website
-
AMP Components - https://amp.dev/documentation/components/
-
Component Types
-
Carousel Example
-
Events and Actions
-
Intializing and Changing the AMP State
-
AMP Bindings Allows elements to mutate in response to user actions or data changes via data binding and simple JS-like expressions. In Below example when state changes, the content inside the paragraph tag also changes
In Below Example when state changes, the paragraph tag will be hidden
-
Binding Expressions
-
Binding Expressions Example with Password input field
-
Shopping Site with AMP
-
Video Site
-
Dynamic Amp List
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent