1
00:00:00,300 --> 00:00:04,920
This lesson's going to be a quick walk through on the developer tools and could be using in the upcoming

2
00:00:04,920 --> 00:00:10,020
lessons, and of course, if you already have an editor, you can use whichever editor you want or if

3
00:00:10,020 --> 00:00:13,860
you want to use the same one I'm going to be using in the course, then you can check out brackets.

4
00:00:13,860 --> 00:00:15,450
It's available at Brackett's, Iowa.

5
00:00:15,450 --> 00:00:17,640
This is an Adobe product that's open source.

6
00:00:17,820 --> 00:00:23,130
And this is the area that I'm going to be using in order to write the code in the upcoming lessons as

7
00:00:23,130 --> 00:00:23,400
well.

8
00:00:23,400 --> 00:00:29,010
I'm going to be using the Chrome browser and every version of Chrome comes with developer tools.

9
00:00:29,010 --> 00:00:34,950
And what developer tools is it allows you to communicate with your script and also do some debugging

10
00:00:34,950 --> 00:00:41,640
in order to open up the panel on a Mac, you could press command option plus C or on a Windows Linux

11
00:00:41,640 --> 00:00:44,250
machine control shift plus C.

12
00:00:44,580 --> 00:00:50,850
And you can also go to the three little icons here, more tools and hit developer tools.

13
00:00:51,000 --> 00:00:55,740
And that's going to open up this popup window, which is going to allow you to write some JavaScript.

14
00:00:55,830 --> 00:01:00,990
And we're going to be communicating with our script while we're writing the script and developing the

15
00:01:00,990 --> 00:01:01,380
code.

16
00:01:01,590 --> 00:01:06,420
Also, I'm going to keep the editor opened on the left hand side windows.

17
00:01:06,420 --> 00:01:08,040
So this is the brackets editor.

18
00:01:08,310 --> 00:01:13,290
I'm going to minimize this and keep the editing window on the left hand side.

19
00:01:13,470 --> 00:01:19,230
And then the preview of the code opened in the browser on the right hand side, as well as the developer

20
00:01:19,230 --> 00:01:21,980
tools open on the bottom right hand side.

21
00:01:22,350 --> 00:01:25,680
So this is going to be the structure going forward as we develop the code.

22
00:01:25,890 --> 00:01:32,940
So we're ready to create our first page and with Brogo to file new and create a brand new file and then

23
00:01:32,940 --> 00:01:38,970
save this one as indexed HTML and make sure that you have a directory that you want to create their

24
00:01:38,970 --> 00:01:39,420
project.

25
00:01:39,720 --> 00:01:47,050
So this is our indexed HTML page and we can start by just simply adding a regular default HTML template.

26
00:01:47,070 --> 00:01:50,920
I've got one in brackets that we've just set up and added in.

27
00:01:51,330 --> 00:01:58,620
So this is our regular HTML template and we're going to link to Stylesheet as well as to a script file

28
00:01:58,800 --> 00:02:00,200
so we can create those as well.

29
00:02:00,450 --> 00:02:03,480
So script and then a source for the script.

30
00:02:03,720 --> 00:02:08,940
And this is going to be our source and we'll just call it source JS.

31
00:02:08,940 --> 00:02:10,350
So that will be our script file.

32
00:02:10,450 --> 00:02:17,350
Create a brand new file and save this one as source James and then also make sure that it's working.

33
00:02:17,610 --> 00:02:23,670
I usually try to get it to make sure it's working by an alert, usually the quickest way to make sure

34
00:02:23,670 --> 00:02:27,690
that you've hooked up your JavaScript file properly before you start coding.

35
00:02:27,960 --> 00:02:34,440
And the way that Brackett's works is as long as you've got an index page and you go to life preview,

36
00:02:34,470 --> 00:02:36,930
this will open up the live preview window.

37
00:02:37,080 --> 00:02:39,150
And that's the live preview window that we've opened.

38
00:02:39,330 --> 00:02:40,860
And we get the hello message.

39
00:02:40,860 --> 00:02:42,600
So it's coming from the JavaScript source.

40
00:02:42,870 --> 00:02:44,310
So that's set up properly.

41
00:02:44,580 --> 00:02:51,540
And then lastly, let's also create a stylesheet creating a link to stylesheet and a type is going to

42
00:02:51,540 --> 00:02:55,380
be text access and the link location.

43
00:02:55,410 --> 00:02:56,340
We're going to create one.

44
00:02:56,400 --> 00:02:58,210
We'll just call it style access.

45
00:02:58,560 --> 00:03:03,330
So this is where all restyling information will go and save that and then create a new file.

46
00:03:03,360 --> 00:03:05,100
And we can just go ahead and we can save this.

47
00:03:05,100 --> 00:03:06,810
And this was style success.

48
00:03:06,840 --> 00:03:11,700
Lesar All the styling for the game is going to go, so it looks like we're ready to move on to the next

49
00:03:11,700 --> 00:03:12,060
lesson.

50
00:03:12,270 --> 00:03:17,610
We're going to set up some basic HTML structure, and then from there, we're going to start getting

51
00:03:17,610 --> 00:03:21,590
into the JavaScript coding and developing the application set up here.

52
00:03:21,600 --> 00:03:23,160
Editor, you've opened up your editor.

53
00:03:23,400 --> 00:03:26,400
You've created the three core files that we're going to need.

54
00:03:27,230 --> 00:03:30,930
HTML, JS and Access are going to be ready to start the project.

55
00:03:31,050 --> 00:03:31,950
So it's coming up next.