Challenge 6: Solution

[00:00:00]
>> We're gonna go through the solution to the last exercise of this course, where we're building our own AMP page. So the first thing I'm gonna do is because this is a new exercise a new folder in our exercises folder, I'm gonna start by making sure I set my Heroku up so that it's serving from the right place.

[00:00:24]
This one is just called AMP. So it's restarting and in fact, we can just take a look at what we're seeing by default. Thank you. And it's pretty fugly here because we've got images but they're huge. And if you look at our console here, so we do see powered by AMP.

[00:00:53]
So that's a good sign. Let's try to validate this HTML see what's going on. So we're gonna go to the AMP validator, just paste it in there, and well the first thing I'm getting yelled out here for is that image tags are not allowed here unless there descendant tag of no script.

[00:01:18]
Did I mean AMP image? So in this case, I'm going to convert to AMP image. I don't know what the descendant of no script case is. We won't worry about that. So here, I'm just gonna change image to AMP image. And here's my source. And I'm actually gonna define the size of this image as being a little smaller than what the database says the original size of the image is.

[00:01:48]
So we're just gonna do like 64 pixels. Let's run this locally. On localhost 3000 and see where this gets us. Looks like it didn't take, refresh, few source. So there's my image tag interesting, I'm in the wrong project, fantastic. [LAUGH] All right, here we go. AMP image, Source equals that.

[00:02:39]
The alt is what it should be. We have this course image class although of course we can't bring in a style sheet. We'll have to do some inline styles later. With equals 64, save, refresh. And now we can see we've got AMP image. Let's see if our results are better.

[00:03:03]
Pass, interesting. So now we've got our first qualifying AMP page. However, it looks like awful. So let's make it better. So we'll do style and we have to add AMP custom to this style tag. And here we can just say course, course image is 64 pixels. Interesting that it chose to render it, so huge maybe it's not reading these attributes because their numbers.

[00:03:42]
Wonder what's going on there. There we go. So I don't know let's, let's take the style away and see if that changed anything. It did. All right, so that was the issue there. I should have had those values in quotes. Not as regular numbers now it's honoring those.

[00:04:01]
I can just clean it up a tiny bit just to put some styling here. Style none, save and get rid of our bullet points. And let's leave it at that. So just so we can have some style and we should see that some style and we should also see that this passes our test, copy, paste and pass, you got to pass.

[00:04:32]
So, that is those are the very basics of an AMP page. It is, to be determined how well this intersects with the other directions that modern web technology is going like progressive web apps. There are some ideas about how you can have an AMP page that is progressively enhanced.

[00:04:53]
Into a PWA, which is it's the more rich app like experience. Obviously, we have no client side JavaScript here. And so this is sort of a couple steps back in terms of our capability of providing, the rich features that users expect. However, it is really really fast in terms of single articles being loaded from search results.

[00:05:15]
Some people end up building sort of an AMP version of their articles and then they have their main application, that is sort of a more rich web experience as a fully independent app, maybe on its own separate domain now. So that's AMP and congratulations on building your first AMP page.