Accelerated Mobile Pages (AMP) - The Complete Course

Learn to build a valid amp page by adding the amp attribute, including canonical and viewport tags, applying amp-boilerplate and amp-custom styles, and rendering a simple hello world.

Validate every AMP page during development using the AMP validator, Chrome plugin, and in-page console to catch errors early and ensure search engine compatibility.

Add images with the amp-img tag inside a no script element, specify src, width, height, and use the layout attribute for responsive or intrinsic scaling with alt text.

Learn to create responsive images in amp using the amp tag, with width, height, and sizes attributes to serve smaller images when the container is small, reducing mobile data usage.

Explore how HTML attributes use name-value pairs to define element behavior, why some tags work with or without attributes, and how AMP introduces unique attributes for responsive, accessible pages.

Master the fallback attribute inside AMP elements to display alternative content, such as WebP images with JPEG fallbacks, when a browser does not support or fails to load the element.

Explore how the placeholder attribute enhances amp pages by showing a lightweight placeholder while images, videos, or iframes load, enabling lazy loading, accessibility, and graceful fallbacks above the fold.

Learn how the media attribute uses viewport-based conditions to conditionally render elements, enabling art-directed image cropping and responsive heights for faster AMP pages.

Explore how AMP handles image dimensions with width and height, showing when to fix versus allow aspect ratios, and how layout attributes influence responsive behavior.

Explore how the AMP layout attribute sizes assets by aspect ratio, using values such as contain, feel, fixed, flex, intrinsic, responsive, and hidden to control images and place holders.

Learn how amp components replace custom scripts with built-in, hyper-optimized elements to add features like analytics and comments; tag-based, fast, memory-leak-free, and easy to test.

Learn the amp components development pattern using carousels and lightbox, guided by by-example docs and playgrounds, and favor amp components and accessibility over custom JavaScript.

Build an AMP accordion with sections and headers, enabling expandable content and animated transitions. Learn to set expanded sections, enable single-section expansion, and embed varied content like text and images.

Explore how to implement amp lightboxes, including three kinds: an image box and a lightbox gallery, using ember bind to open and close, with layout no display and keyboard navigation.

Explore how to implement the amp-image-lightbox component to open images in a lightbox, enable pan and zoom, and reuse it for multiple images on a page.

Build an accessible amp lightbox gallery by applying the lightbox attribute to images and including the amp lightbox script; pair it with a carousel using slides for looping and escape.

Embed a YouTube video on an amp page using the amp-youtube component, using the video id and a responsive layout. Include a placeholder image and enable lazy loading.

Discover how AMP enables interactive elements without JavaScript by using the on attribute to bind events like tap or click, enabling show, hide, and toggle actions.

Explore amp actions and events to create interactivity with tap to show, hide, or toggle; learn that play targets video, while change events bind to selects to hide text.

Learn to hide and show elements in AMP by using on attributes and tap events, toggle visibility, and hidden attributes for multiple elements like image and text.

Trigger navigation by changing a select option using amp: attach a change event to the select, read the option value, and navigate to that URL with the navigate action.

Create a hero video overlay in AMP by hiding the hero image and, on play button press, show the video and start playback.

Explore amp-bind fundamentals by learning how unbind changes element attributes and text on user actions, and how bind uses variables to update content and attributes with JavaScript-like syntax.

Demonstrates building a front-end add-to-favorites button with amp-bind and amp-state, toggling the button text and a green background based on user actions and simulated server-side state.

Explore how amp forms handle backend validation with the amp mustache template engine and the amp-form component, covering get and post methods, target attributes, and on-page versus new-page messages.

Explore a php-based form submission flow for an amp page, including domain handling, headers for amp cache, input validation, json responses, and post versus get considerations.

Describe implementing amp form validation with client- and server-side checks, using amp-mustache to render verify errors under the submit button and return 400 errors while showing a success message.

Build an amp newsletter subscription form using the amp form component, post submissions, and server-side verification, displaying errors and a success message with mustache templates.

Process subscription form submissions with robust validation, including required email, format check, and duplicate prevention, returning json errors with 400 status or a success message via 200 in amp forms.

Explain how to use external stylesheets with AMP through server-side embedding, using PHP or other languages, and template engines like Handlebars for chunk inclusion, with caching and size considerations.

Code an AMP header with a logo using intrinsic layout, size 150 by 90, link to the home page, and keep the phone number visible in a responsive two-column header.

Create a CSS sticky header using position: sticky, with semantic header and main elements, and adjust via a vertical media query for tall viewports to improve small device usability.

Add a responsive image to your amp page inside a two-column grid, ensuring it fills the container without distorting its aspect ratio, with a caption and accessible alt text.

Learn to build a responsive testimonials slider using amp-carousel that overlays captions on images, centers the slider, and ensures accessibility and responsive behavior.

Learn how to embed google maps in an amp-iframe for an amp site, using sandbox attributes, copying the iframe source, and enabling javascript, popups, and same-origin for a functional map.

Validate and optimize your AMP site before launch by using the Chrome plugin, running Lighthouse audits, and testing in the AMP cache, Google search previews, and form functionality.

Explore how AMP stories combine animation, audio, video, and concise text into visually engaging slides for mobile and desktop, with progress bars and cover pages.

Develop a valid amp story by adding boilerplate, the amp-story element as the parent of all story pages, and amp-story-page elements with an id and a template.

Build AMP story layouts using the story grid layer and templates to arrange images, text, and bylines. Explore template types and layering, and adjust contrast with default colors for readability.

Learn to add text and images to AMP story slides by building multiple story pages with a story grid layer, vertical templates, and layered text over full-width images.

Add background audio to AMP stories by using the background audio attribute on a story page, specifying an audio location and testing playback; host audio externally to reduce server load.

Learn to apply the animate-in attribute to AMP stories, making images fade in and text slide from bottom, with delay and duration options.

Finish your amp story by adding the bookend page as bookend.json, declare version 1.0, include social share icons, attribution, and read-more links, and test with jsonlint.

Explore how AMP emails enable dynamic content and interactive components inside emails, from live sale pricing and a slider to polls, while using CSS and whitelisted AMP components for safety.

Learn to set up and test AMP emails by enabling dynamic email in Gmail, applying the AMP boilerplate, and using the AMP playground for sending test emails.

Design and code a simple AMP email with a five-slide, responsive carousel that showcases latest trucks, includes left-right controls, and validates AMP markup for reliable delivery.

Learn to fetch JSON data on the front end with amp-list, render item titles via a mustache template, and use placeholders and fallbacks to improve loading experiences.

Build dynamic AMP emails powered by JSON data to populate truck listings with names, prices, and images, enabling live price updates and template-driven content.

Discover how to implement amp ads using the ad component, supporting different networks and ad slots, including iPad and HDMI ads, with fast self-contained app ads that boost revenue.

Learn to set up AMP ads with boilerplate code, select ad sizes, and validate. Explore responsive ad layouts, ad runtime configurations, and validator checks for a compliant AMP page.

Add ads to your AMP site using the amp-ad component, set mandatory attributes like type, width, height, and layout, and configure fallback and network-specific requirements while respecting AMP runtime security.