Creating websites with Accelerated Mobile Pages (AMP)

Build a valid AMP page by adding the AMP attribute, canonical link, viewport, and boilerplate, then create a hello world example with AMP custom styles.

Validate your amp pages as you go using online validators and the amp chrome extension, catching errors early to ensure Google indexing benefits and consistent performance.

Explore how to add images with amp-img in AMP pages, using no-script wrappers, proper src, width, height, alt attributes, and layout values like responsive or intrinsic to keep images responsive.

Learn to add responsive images with the AMP tag, using width, height, and sizes to serve appropriately sized images and save mobile data.

Recreate the furbaby website in amp using m components, validate them, and build a responsive home page with an off-canvas mobile menu and testimonials carousel.

Recreate the site header by adding a favicon and a responsive 200x200 logo, adjust padding and layout to maintain header integrity across viewports.

Develop a mobile off-canvas navigation with the AMP sidebar and hamburger toggle, learning to open the sidebar via on tab and keep content accessible.

Embed Google Maps in AMP using the amp-iframe component, configure a responsive aspect ratio, enable scripts with sandbox, and test sizing across breakpoints for a full-width map on the page.

Learn to implement a testimonials carousel in an AMP page using the built-in carousel component, featuring three text bubbles and responsive sizing with media queries for clean presentation.

Build an amp compliant contact form using post method, top action, amp form extensions with mustache for user feedback, and client-side email validation, avoiding bootstrap with amp.

Embed a YouTube video in an amp page using the amp-youtube component, supplying only the video id and a responsive layout to preserve a 16:9 aspect, with a loading placeholder.

Learn to build AMP forms with get and post methods, use the AMP mustache template engine for validation, and implement AMP-form with action-xhr and clear error or success messaging.

Learn how to implement a secure PHP form submission for AMP by validating inputs, configuring access-control headers, and returning JSON responses for success or errors.

Explore implementing robust amp form validation with server-side checks, display errors under the submit button using the amp mustache component, and show a success message when submissions go through.

Learn to code an amp newsletter subscription form by importing the amp form component, configuring post actions, server-side verification, and mustache templates to display errors and success messages.

Validate subscription input by checking presence, format, and duplicates during amp form submissions, and return json errors with a 400 header, or show a success message on valid submission.

avoid using bootstrap with AMP due to bulky JavaScript and jQuery, as AMP aims for speed and constrains you; opt for lightweight CSS and custom code for mobile pages.

Master AMP CSS rules, including allowed and disallowed CSS, comments, grayscale, and the 50 kilobyte limit, plus gateway pages with handlebars for conditional loading.

Learn to create a sticky header with position: sticky and semantic markup, ensuring the header sticks to the main content and uses a 500px height media query for small screens.

Open and close a section in AMP without an accordion using a button with toggle visibility and up and down arrows, while using aria labels and hidden attribute for accessibility.

Subscribe to the newsletter to receive a free copy of my book, coupons, and the latest news, with free US shipping for subscribers and big discounts.