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.

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.

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.

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.

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.

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.

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.

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.

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.

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.