1
00:00:00,300 --> 00:00:01,770
Hi, welcome to the course.

2
00:00:02,160 --> 00:00:06,210
This lesson, we're going to set up our web development environment, so that means that we need to

3
00:00:06,210 --> 00:00:07,770
have an HD him el-Fadl.

4
00:00:08,070 --> 00:00:11,250
So I've opened up Brackett's, which is the editor that I'm going to be using.

5
00:00:11,520 --> 00:00:15,720
You can use any editor that you want if you're interested in using it, using Brackett's as well.

6
00:00:15,960 --> 00:00:17,190
It's available at brackets.

7
00:00:17,670 --> 00:00:19,550
It's a free additive that you can download.

8
00:00:19,560 --> 00:00:21,990
It's an adult B product and it's pretty good editor.

9
00:00:22,290 --> 00:00:27,450
If you're looking to try something new or if you want to use the exact same one that I'm using within

10
00:00:27,450 --> 00:00:31,890
the course, we're also making use of a browser in the browser that we're going to be using in the upcoming

11
00:00:31,890 --> 00:00:34,140
lessons is going to be Chrome.

12
00:00:34,380 --> 00:00:40,140
Chrome comes with dev tools and dev tools, provide a little bit more functionality and give you more

13
00:00:40,200 --> 00:00:42,690
insights into what's happening within the Web page.

14
00:00:42,960 --> 00:00:50,070
You can open up dev tools on a Mac by pressing command option plus C or on a Windows machine control

15
00:00:50,130 --> 00:00:56,440
shift C, or you can go to the top right hand corner under more tools, developer tools and that will

16
00:00:56,440 --> 00:00:59,490
help open up and pop up the developer tools window.

17
00:00:59,700 --> 00:01:02,370
By default, it's going to be docked to the right hand side.

18
00:01:02,610 --> 00:01:08,160
You can also press the three dots once you've opened up developer tools and dock it to the bottom.

19
00:01:08,400 --> 00:01:13,740
So for most of the course I will have dev tools docked at the bottom of the page and it gives you a

20
00:01:13,740 --> 00:01:17,760
lot of really useful tools where you can toggle different device modes.

21
00:01:18,060 --> 00:01:24,390
You can get insights into the elements, the styling, and also communicate your JavaScript functionality

22
00:01:24,390 --> 00:01:27,480
within the console if you have any JavaScript errors and so on.

23
00:01:27,760 --> 00:01:30,300
So we're going to start by creating an index page.

24
00:01:30,540 --> 00:01:33,810
So open up your editor and create a brand new file.

25
00:01:34,260 --> 00:01:36,300
And then you can just call this file index.

26
00:01:36,760 --> 00:01:37,500
H.T., Amelle.

27
00:01:37,770 --> 00:01:45,780
So this is going to serve as a core file for our index content and our application and start by creating

28
00:01:45,810 --> 00:01:51,120
setting up the DOCTYPE and the duct tape is just going to be each team will then each team all tags

29
00:01:51,180 --> 00:01:58,890
open enclosure, each to male tags open and close your head tags open and set up your title tags.

30
00:01:58,950 --> 00:02:02,610
So call it JavaScript, JavaScript, Black Jack game.

31
00:02:02,940 --> 00:02:06,000
And then within the body, set up the body types.

32
00:02:06,280 --> 00:02:12,300
And with inside the body you can setup a div and give the div an I.D. and just call that game.

33
00:02:12,510 --> 00:02:15,020
So this is where all of the game content is going to go.

34
00:02:15,360 --> 00:02:21,900
And as well, we're going to link out to each JavaScript file as well as a style file.

35
00:02:21,960 --> 00:02:23,910
So we're gonna set those up in the next lesson.

36
00:02:24,330 --> 00:02:28,560
And once you've set up your base HD, Himelfarb, you can be ready to move on to the next lesson.