2.1 Getting Started

Hey, this is Kezz, welcome to the first lesson in Up and Running With AMP. What we're going to get started on is by taking the boilerplate card it provides you and just getting you set up with the index.html file that will be the sole file that comprises a project that we're going to be creating. Basically, the deal with AMP is it gives you a whole bunch of different optimization techniques, and it gives them to you in a way that you could pretty much deal with them hands-free. All you have to do is pretty much follow the sequence that AMP gives you, follow the rules that they layout, and you're gonna have pretty well-optimized site. It's gonna run fast and it's gonna take care of a lot of things behind the scenes for you that you would otherwise have to put a fair bit of time into setting up and organizing manually. So, the first of those rules is that you need to always use the boilerplate card that AMP provides you. This here is the boilerplate code that you need to start with. So, let's just have a quick touch on each of the lines here and explain what they do for you. The first important thing here is you can see that we're loading in this v0.js file. That's the main JavaScript file that powers AMP. AMP is a completely JavaScript driven system. If you don't have that main JavaScript file, pretty much nothing that AMP does is going to work for you. There are also some extra JavaScript files that you can add in later to give you extra functionality. I'm going to be doing that in some of our subsequent lessons, but this is the main one. The next thing that you need to have in here is this link role canonical. So when you work with there's two ways to go about it either. You can have an app version of a web page and a regular version or you can just have an amp vision. If you have two versions, then you need to put the URL to the regular version of your web page in this age ref attribute. So, then and know which URL is out there to connect this one to and needs to be able to say okay, so this is the end of that page there. Now if you're not setting up a regular version and an ant The agent then all. You'll need to do is put the URL of your amp version In this itrip attribute instead. After that we've got the viewport meta tag, that just makes sure that scaling and layout and everything happens as it should on a mobile device. And then after this you can see we have a script tag in here with some JSON dotter in it. Now this is actually optional, you don't have to use this but if you're wanting to use schema.org Then this is how you go about using it with an AMP page. So if you not sure what schema.org is, just head over to schema.org and you'll be able to get a lot of information there on one of these and how you can use it. But if you don't wanna use it, you can actually delete the script tag. and then finally we've got this ample boilerplate C.S.S. basically what that does is hides the content of your page until it's fully rendered and then it gives you a nice smooth animation to show you the content so that just makes for a nice and loading experience for users when they visit your site All right so now that you know what everything does let's go ahead and copy all of this code. Now going to a Systems file explorer in we're gonna need to create a new folder to hold the project that we're working on. So just call it anything you like and then in that folder, we're going to need to create a new document and we're going to call it index.html. Now open that up for editing. You can use whatever your favorite code editor is but, in this course, we're gonna be using Atom editor. And I'm also gonna show you a way to use it, just set up a live preview, So even if you don't normally use it, you may wanna use it for this course. Now paste in your code and save it. And just by doing that, that's the essential foundation that you need for any Amp website. All Right, so next up what we're gonna do is install a package into Atom that's going to allow us to create a local server. So it's gonna give you that HTTP protocol to work with. Now this makes it look to AMP as though this is an online website and everything is running As amp expects it on the other hand if you just try to load up an amp file destroyed if your hard drive then it's not going to see the H-T-T-P protocol that it's expecting and it's gonna think that it's a security issue so that it's gonna throw up on air and it's not going to last things to work properly. So that's what you want to have some type of local service set up when you are testing your amp files. So we're using atom in this but you can also use preprocess or you can use browser sync or MAMP or examp or anything you like to install our local preview package we're going to go to packages settings for you and then click install packages And then in the search field here, we're gonna type in adam-live-server and click Enter. And that's gonna search for the package we're looking for. So here it is. And to install it, we just need to hit this blue Install button and it'll take care of the installation for us automatically. So just wait a little while while that downloads and sets itself up. Now up in the packages list we have a new menu item that says Live Server. And if we choose start on port 3000 it's going to spin up that live server for us and it's going to ripen up the URL of that live server in your default browser. So there is. I'm just gonna put the browser over the right here and the editor on the left so that you can see when we get in and we just make a little change. I just add in test. [BLANK AUDIO] And then we save, automatically the page refreshes itself, and you see changes instantly. So on top of making sure that amp doesn't think you have a security issue, you also get that convenience while you developing. Now, we've got just one more thing to do as part of getting started and that is to activate developer mode for AMP. AMP actually has a really cool inbuilt validation tool. Because if your AMP Lite doesn't pass validation, then you never gonna get that little green lightning tick of approval. That can show up in Google search results indicating to people that your site is and compatible. So you really want to stay on top of this fella data and make sure that you doing everything according to the rules that are gonna give you that. validation. So the way you do that is you just go up to the URL of your previous site and you just type hash Development equals one. So now develop a mode is active and if there are any problems you gonna see them come up in the console of the developer tools for your browser. So it's going to bring up the developer tools by just going inspect element in then if we switch into the console you can see that we have a little notice that says powered by amp so that tells us that everything is running with possum validation and that the validator is working. All right, so that's all your setup done. And you're ready to start actually putting content and styling into your AMP page. So in the next lesson, we're gonna start looking at CSS. Now because AMP pages have to be very performant, there are some relatively strict rules about what you can and can't do with CSS. So we're gonna go over what those are And then we're gonna get some basic styling code into the template to start controlling how it's looking. So I'll see you in the next lesson.