In this video we are gonna download and install vs code. We're also gonna download and install X amp. We are gonna spend a little bit of time configuring X amp  and we're also gonna talk about why we need it in the first  place and the differences between front end  and backend code. Okay, so if you haven't already, you'll need to download  and install each of these apps. I've done this already while planning out the course. If you have any problems, feel free to leave a comment  and I can help out.

So for Chrome, we've just got a, uh, download button here  for VS code. Um, there's two download buttons, one up here, one here. There's also a dropdown. So you can choose, um, choose  what operating system you're using  and pretty much the same with X Amp or Z. I'm not too sure which one of those is correct,  but we have downloads for each  of the operating systems that you might be running. So once you've got those downloaded  and installed, let's go ahead  and open them up for VS code,  you're just gonna see a welcome screen.

That's okay, just leave it here. I'm not going to install any packages  or update any settings. Actually, the only setting that I've updated  is the font size. I've just bumped it up to 16  to make the tutorial a little bit easier to read. And if we open up X amp, we'll see,  um, this little screen here to manage your server. So the first thing that um, we want  to do is hit the start button  and we'll just give that a few seconds for it  to do its thing in the background.

It's probably installing your virtual machine. Okay, so once it's finished,  you're gonna see an IP address here. Go over to services. And we want to start each of these up. Go over to the network tab. Let's just enable the, um, local host 80 80.

And when we go to volumes, we want  to click the mount button. Once we click that mount button, if we come over to Finder,  what that's gonna do is add this IP address,  which we saw on the general tab,  and this is gonna be the file system for your server. And out of all of these, the only folder  that you are really interested in is the HT docs. And this is where we are gonna put all of our  Projects and websites. Now that we've got our server up  and running, let's talk about why we actually need a  server in the first place. So if you go to your exercise files  and you'll see a server example,  and what we're gonna do is just grab that  and drag it onto our VS code.

And that should open those files up for us. And let's have a quick look at each one. So let's have a look at the front end example first. This isn't very exciting. It's just a, a basic HGML page. Just got a quick style in here just  so we can see that working.

And also just a little snippet of JavaScript two,  if we go back to Finder,  and if you click on the front end example file  and right click, you can go open with Google Chrome  and we can see that Google Chrome can open the file,  read it, and return the H TM L and it, and it works. We get some red text and we get a button that we can click  and it and does some stuff. That's the JavaScript snippet. If we have a look at the backend example,  we can see that this is using some PHP  and there's a little snippet up there,  and then it's outputting each of those in place  of the heading and the paragraph text. We also have the same style and snippet of JavaScript,  but if we go back to Finder  and do the same thing, we can see that, first of all,  it doesn't even give us an option to open it  with the browser, but if we just change frontend example  to backend example PP  and try to run that, we can see that  all the browser's doing is just reading the file  and returning the text. It doesn't know what to do with these PHP snippets.

It, it breaks it and it, it doesn't return a webpage. So if we grab our same server examples  and copy those over to the HT docs file in our  X amp server, and if you can't find that, just remember  that you click on the IP address lamp HT docs. And what I've done is just added a little, um, folder here  for, for any projects and examples. So if you just copy that over to projects  and go back to our exam. And if we go, actually let's just go to Chrome  and go to local host 80 80, and that's gonna take us to  The, to the dashboard for exam. And if we go to projects, which is the folder  that we created before, and we can see our server example,  and if we go to, let's check out the front end example first  and we can see that that works as expected.

If we go back and also go to our backend example. So this is also running now is  because Amp is, is reading the PHP  and actually returning it in a format  that the browser can understand and display.