Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Meditation Personal Transformation Life Purpose Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Google Analytics
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Modeling Data Analysis Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Blogging Freelancing Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development Front End Web Development

Accelerated Mobile Pages (AMP) - The Complete Course

Learn how to create AMP websites, stories, emails and ads
Rating: 4.2 out of 54.2 (51 ratings)
1,315 students
Created by Stefany Newman
Last updated 1/2020
English
English [Auto]
30-Day Money-Back Guarantee

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

12 sections • 57 lectures • 6h 10m total length

  • Preview01:12
  • Preview05:10

  • Preview06: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

  • Preview06: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

  • Preview05:57
  • Preview06:22
  • amp-accordion
    09:01
  • amp-carousel
    06:47
  • amp-lightbox
    07:48
  • amp-image-lightbox
    04:39
  • amp-lightbox-gallery
    04:06
  • amp-youtube
    07:23

  • Preview06:07
  • Preview05: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

  • Preview07: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

  • Use external stylesheets with AMP
    06:33
  • Preview03: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

  • What are AMP stories?
    04:09
  • Preview08: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

  • Preview04: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

  • What are AMP ads?
    02:43
  • Preview04:43
  • Adding ads on your AMP site
    04:44

Requirements

  • HTML
  • CSS
  • JavaScript
  • Basic PHP
  • JSON
  • CORS

Description

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

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.


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

Instructor

Stefany Newman
Web Accessibility Specialist, Advocate, and Trainer
Stefany Newman
  • 4.3 Instructor Rating
  • 837 Reviews
  • 6,401 Students
  • 5 Courses

Meet Stefany

In my free time, I like to read books (history, historical fiction, philosophy, classics), knit, decoupage, re-watch Star Trek, learn languages (programming and human). I like board games (Go, 1775, Exploding Kittens) and computer ones (Age of Empires, Final Fantasy, Bioshock) I am also a karaoke superstar :-)


I started as a full-stack developer - wanted to learn everything from Java to database design. As time passed, I realized I can’t be everything all at once so I switched to front-end development.


AMP Journey

I had to learn AMP for a project and I fell in love with it. Fast and accessible, and you could build complex websites without JavaScript, which was great for me since I wanted to focus on semantics and presentation.


I became an AMP developer, reading and practicing AMP all the time.


Accessibility Journey

Like every other web developer, I had a lot of misinformation about accessibility, thinking that it was only needed if your target audience is disabled. When I found out that most of the websites are inaccessible and that accessibility is the last thing on our minds, I read more about it and realized how vital it is for a good web experience.


Since then, I concentrate on creating accessible AMP websites.


MODx Journey

Like every other developer, my first CMS websites were made with WordPress. I disliked how easily they could be hacked and as I continued freelancing, I’d get requests from new clients to “clean their WordPress website from malware”. Almost every WordPress developer / webmaster I met had one or more websites hacked.


I also disliked how error prone WP was and how one little mistake can shut down your website.

Then I discovered MODx!


MODx is my favorite CMS and I use it when clients need to update the content themselves. It is so secure and fast!


For clients who don’t need to update their content themselves, I build static sites.



You can contact me in English, Bulgarian and Dutch. I can also understand Russian.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.