Accelerated Mobile Pages (AMP) - The Complete Course

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 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.

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.

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.

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.

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.

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.

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.

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.

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.