Development
Web Development
Front End Web Development
Accelerated Mobile Pages (AMP) - The Complete Course
4.5 (38 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,246 students enrolled

Accelerated Mobile Pages (AMP) - The Complete Course

Learn how to create AMP websites, stories, emails and ads
4.5 (38 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,246 students enrolled
Created by Stefany Newman
Last updated 1/2020
English
English [Auto]
Preview this course
Accelerated Mobile Pages (AMP) - The Complete Course
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 6 hours on-demand video
  • 1 article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Develop AMP websites
  • Compose AMP emails
  • Make AMP stories
  • Use AMP ads
  • Add interactivity in AMP pages without JavaScript
Course content
Expand all 57 lectures 06:10:21
+ – Getting started with AMP
4 lectures 23:04
Output "Hello World" with AMP
Preview 06:58
How to validate AMP pages
06:53
Adding images with AMP part 1 - <amp-img> basics
08:06
Adding images with AMP part 2 - responsive images
01:07
+ – AMP attributes
7 lectures 47:59
What are HTML attributes?
Preview 06:08
fallback attribute
08:45
placeholder attribute
11:58
noloading attribute
00:09
media attribute
08:16
width and height
04:00
layout attribute
08:43
+ – Most used AMP components
8 lectures 52:03
What are AMP components?
Preview 05:57
AMP components development pattern
Preview 06:22
amp-accordion
09:01

Create carousels and sliders.

amp-carousel
06:47
amp-lightbox
07:48
amp-image-lightbox
04:39
amp-lightbox-gallery
04:06
amp-youtube
07:23
+ – Add interactivity to AMP pages without JavaScript
7 lectures 49:52
The "on" AMP attribute
Preview 06:07
Events and actions
Preview 05:35
Hide and show elements
08:10
Practical example: Navigate to a URL based on <select> option change
05:17
Practical example: Hero video overlay
04:30
Introduction to amp-bind
07:21
amp-bind practical example: Creating an "Add to favorites" button
12:52
+ – AMP forms
5 lectures 46:08
AMP forms basics - components, attributes, template engine
Preview 07:29
PHP code for form submission
08:47
Displaying error and success messages
13:03
Coding an AMP newsletter subscription form
08:59
Processing subscription form submissions
07:50
+ – Creating an AMP website
7 lectures 46:34
Use external stylesheets with AMP
06:33
Coding the header - adding the logo and phone number
Preview 03:55
Adding a sticky header with CSS
05:05
Adding an image
04:48
Coding a testimonials slider with amp-carousel
12:46
Embedding Google Maps with amp-iframe
06:29
Testing and validating the AMP site before launch
06:58
+ – AMP Stories
7 lectures 49:05
What are AMP stories?
04:09
AMP stories basics - adding the necessary components, elements and attributes
Preview 08:45
Coding the stories layout
07:39
Adding text and images to story slides
09:38
Adding background audio to a story
03:03
Animating the stories with animate-in
04:31
Finishing up our story with bookend.json
11:20
+ – AMP Email
5 lectures 26:09
What are AMP emails?
Preview 04:18
Getting started with AMP Email
03:15
Coding a simple AMP email with a slider
04:02
Fetching JSON with amp-list
05:44
Creating a dynamic email
08:50
+ – AMP Ads
3 lectures 12:10
What are AMP ads?
02:43
Getting started with AMP ads
Preview 04:43
Adding ads on your AMP site
04:44
Requirements
  • HTML
  • CSS
  • JavaScript
  • Basic PHP
  • JSON
  • CORS
Description

Learn AMP from scratch and become awesome at it! After the course, you will be able to offer to your clients to redesign their site in AMP, or add "AMP" in your CV to make you more employable as a front-end developer.

We will start with the absolute basics and progress until we can built stories, emails, ads and websites.

All examples are practical and are projects that I was asked to create by my clients. You will be able to apply your knowledge right away.

We will start by building a landing page for a veterinary hospital, create an AMP story for our history site, compose a dynamic email that updates its content and make a simple AMPHTML Ad.

We will also take a look at how to make our AMP pages interactive with AMP actions & events and amp-bind - we will built a URL navigating drop-down and an "Add to favorites" button.


If you need help, please do not hesitate to contact me and I will do my best to help you.

Who this course is for:
  • Web developers who wants to expand their knowledge of web development and AMP
  • Freelancers
  • Web design studio employees
  • Front-end developers