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
What is Accelerated Mobile Pages (AMP) ?3:37
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

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

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
Embedding Google maps and iframes4:41
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
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

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: