This lesson's going to be a quick walk through on the developer tools and could be using in the upcoming
lessons, and of course, if you already have an editor, you can use whichever editor you want or if
you want to use the same one I'm going to be using in the course, then you can check out brackets.
It's available at Brackett's, Iowa.
This is an Adobe product that's open source.
And this is the area that I'm going to be using in order to write the code in the upcoming lessons as
well.
I'm going to be using the Chrome browser and every version of Chrome comes with developer tools.
And what developer tools is it allows you to communicate with your script and also do some debugging
in order to open up the panel on a Mac, you could press command option plus C or on a Windows Linux
machine control shift plus C.
And you can also go to the three little icons here, more tools and hit developer tools.
And that's going to open up this popup window, which is going to allow you to write some JavaScript.
And we're going to be communicating with our script while we're writing the script and developing the
code.
Also, I'm going to keep the editor opened on the left hand side windows.
So this is the brackets editor.
I'm going to minimize this and keep the editing window on the left hand side.
And then the preview of the code opened in the browser on the right hand side, as well as the developer
tools open on the bottom right hand side.
So this is going to be the structure going forward as we develop the code.
So we're ready to create our first page and with Brogo to file new and create a brand new file and then
save this one as indexed HTML and make sure that you have a directory that you want to create their
project.
So this is our indexed HTML page and we can start by just simply adding a regular default HTML template.
I've got one in brackets that we've just set up and added in.
So this is our regular HTML template and we're going to link to Stylesheet as well as to a script file
so we can create those as well.
So script and then a source for the script.
And this is going to be our source and we'll just call it source JS.
So that will be our script file.
Create a brand new file and save this one as source James and then also make sure that it's working.
I usually try to get it to make sure it's working by an alert, usually the quickest way to make sure
that you've hooked up your JavaScript file properly before you start coding.
And the way that Brackett's works is as long as you've got an index page and you go to life preview,
this will open up the live preview window.
And that's the live preview window that we've opened.
And we get the hello message.
So it's coming from the JavaScript source.
So that's set up properly.
And then lastly, let's also create a stylesheet creating a link to stylesheet and a type is going to
be text access and the link location.
We're going to create one.
We'll just call it style access.
So this is where all restyling information will go and save that and then create a new file.
And we can just go ahead and we can save this.
And this was style success.
Lesar All the styling for the game is going to go, so it looks like we're ready to move on to the next
lesson.
We're going to set up some basic HTML structure, and then from there, we're going to start getting
into the JavaScript coding and developing the application set up here.
Editor, you've opened up your editor.
You've created the three core files that we're going to need.
HTML, JS and Access are going to be ready to start the project.
So it's coming up next.