Creating websites with Accelerated Mobile Pages (AMP)

Name: Creating websites with Accelerated Mobile Pages (AMP)
Rating: 3.9 (80 reviews)

Learn how to create a real life website with Google AMP, from beginning to end with no prior knowledge of AMP

Created byStefany Newman

Last updated 12/2019

English

English [Auto],

What you'll learn

Create websites with Google AMP

Course content

6 sections • 30 lectures • 2h 53m total length

Introduction1:33
Explore how to create real-world AMP pages with practical examples, including contact forms, carousels, off canvas mobile navigation, logos using images, and embedded YouTube videos, guided by theory and practice.
What is Accelerated Mobile Pages (AMP) ?3:37
Explore accelerated mobile pages (AMP), an open source framework by Google to improve performance. Learn AMP basics from doctype to AMP, canonical, responsive design, and inline CSS with amp-img.
Benefits of using AMP for sites4:08
Amp delivers speed and better search engine ranking, with no custom javascript, optimized libraries, and instant load, while expanding beyond news sites to e-commerce.
Benefits of learning AMP for you2:28
How to overcome AMP's constraints7:25
Navigate amp constraints by avoiding libraries like bootstrap, using amp components and amp bind, and reusing styles to keep csx small. See how amp speeds sites and sharpens skills.

Setting up a dev server with MODx cloud for AMP5:10
We will be setting up our dev server with SFTP connection via our text editor & Filezilla
Output "Hello World" with AMP6:58
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.
How to validate AMP pages6:53
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.
What are AMP components?5:57
AMP components are like jQuery libraries that you include in your project when your client needs a big ass slider or a light-box for the gallery of puppies.
Adding images with AMP part 1 - <amp-img> basics8:06
Adding images with AMP part 2 - responsive images1:07
Learn to add responsive images with the AMP tag, using width, height, and sizes to serve appropriately sized images and save mobile data.

Recreating Furbaby website in AMP1:37
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.
Adding the favicon and logo3:23
Recreate the site header by adding a favicon and a responsive 200x200 logo, adjust padding and layout to maintain header integrity across viewports.
Creating mobile off-canvas menu9:36
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.
Embedding Google maps and iframes4:41
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.
Build a testimonials carousel8:34
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.
AMP compliant contact form5:59
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.
Embedding a YouTube video with AMP7:13
Finishing and testing the AMP site1:13
Feel free to copy any of the code of the site, except the hero image & the social media icons. Play around with it!

AMP forms basics - components, attributes, template engine7:29
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.
PHP code for form submission8:47
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.
Displaying error and success messages13:03
Coding an AMP newsletter subscription form8:59
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.
Processing subscription form submissions7:50

Do not use Bootstrap with AMP3:42
CSS restrictions3:34
AMP bugs in Mozilla Firefox4:32
Do not name your container ".container" and use inline styles for full width images
How to add a sticky header9:17
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 sections with AMP without amp-accordion10:13
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.

Requirements

Students must know HTML, CSS and basic JavaScript

Description

Warning: I am no longer providing help or support for this course.

The most visited websites in the world use AMP in one way or another. Clients and employers are adamant to get their sites first place in Google. Learning how to code with AMP will make you more employable, get your more clients and raise your customer's satisfaction levels.

Imagine being the only person in a web design studio who knows AMP! Imagine getting your client's website on the first page in Google by redesigning it using this course!

Who this course is for:

Web developers who want to expand their knowledge and be more employable

Creating websites with Accelerated Mobile Pages (AMP)

What you'll learn

Explore related topics

Course content

Introduction5 lectures • 19min

Getting started with AMP6 lectures • 34min

Creating a website with AMP8 lectures • 42min

AMP forms5 lectures • 46min

AMP development tricks, tips and miscellaneous info5 lectures • 31min

Bonus section1 lecture • 1min

Requirements

Description

Who this course is for: