WEBVTT FILE





1
00:00:05.130 --> 00:00:10.170
now this um pursued the structure of a website and you are aware of the

2
00:00:10.170 --> 00:00:14.520
difference components that's built up the skeleton of a webpage you are ready

3
00:00:14.520 --> 00:00:20.880
to build your very first website so as you know the HTML code behind a webpage

4
00:00:20.880 --> 00:00:27.930
consists of text only so all we need to have to build a website is a text editor

5
00:00:27.930 --> 00:00:32.820
so that you can write some code there are plenty of text editors that you can

6
00:00:32.820 --> 00:00:39.059
choose from my favorites is brackets or you can choose other ones like atom

7
00:00:39.059 --> 00:00:44.879
which is quite popular or notepad plus plus if you are on Windows or sex

8
00:00:44.879 --> 00:00:50.879
wrangler if you're on a Mac or any other text editor that you like now i really

9
00:00:50.879 --> 00:00:56.789
suggest using brackets as i'm gonna be using it for most of the course brackets

10
00:00:56.789 --> 00:01:02.850
comes with many nice features which will make your coding experience really easy

11
00:01:02.850 --> 00:01:08.729
so for example the live preview will allow you to see live changes as you are

12
00:01:08.729 --> 00:01:17.280
typing HTML code also you can install extensions which come with some really

13
00:01:17.280 --> 00:01:25.020
really nice features all right so now to download rockets you just need to go to

14
00:01:25.020 --> 00:01:29.579
brackets those io and click on the download button then you just need to

15
00:01:29.579 --> 00:01:33.329
keep clicking through the installation process and you will get the brackets

16
00:01:33.329 --> 00:01:37.170
downloaded on your computer so once you do this you can open it and you will get

17
00:01:37.170 --> 00:01:42.359
something like this you may have a few files right there so you don't have to

18
00:01:42.359 --> 00:01:46.100
worry about them and you don't have to worry about the project folder for now

19
00:01:46.100 --> 00:01:53.070
so now let's you've got brackets you are ready to build your website but before

20
00:01:53.070 --> 00:01:57.630
we do that we're going to need to structure our work so that everything is

21
00:01:57.630 --> 00:02:04.369
well organized so what we need to do we're going to go to the desktop and

22
00:02:04.369 --> 00:02:11.220
we're going to create a folder for our course so inside this folder we're gonna

23
00:02:11.220 --> 00:02:17.000
have the different files that we're going to be building during the course

24
00:02:17.000 --> 00:02:24.380
so let's name it the complete web development course so you can use this

25
00:02:24.380 --> 00:02:32.420
wall that later on if you want to revise course material when preparing for a job

26
00:02:32.420 --> 00:02:38.300
interview for example or as a reference when you are creating or working on a

27
00:02:38.300 --> 00:02:44.270
project for a client or for your employer so let's create a new folder

28
00:02:44.270 --> 00:02:50.200
inside our produce folder for our first chapter and I'm gonna call it HTML

29
00:02:50.200 --> 00:02:55.880
they're gonna have a folder for every single chapter so inside HTML we're

30
00:02:55.880 --> 00:02:59.510
gonna build what we're gonna have the different files we're gonna be building

31
00:02:59.510 --> 00:03:04.700
during this chapter alright so now what we need to do we need to open this

32
00:03:04.700 --> 00:03:14.000
folder inside brackets so what you can do you can just drag the folder inside

33
00:03:14.000 --> 00:03:19.040
brackets like that and it's gonna get opened automatically so now you've

34
00:03:19.040 --> 00:03:27.019
caused the folder opened in rockets now to build our very first website we need

35
00:03:27.019 --> 00:03:34.100
to create a new file so just click right and choose new file so let's name its

36
00:03:34.100 --> 00:03:42.890
hello world now in order for the browser to recognize your file as a webpage you

37
00:03:42.890 --> 00:03:47.660
will need to give it an exemption so for a website the extension is dot HTML so

38
00:03:47.660 --> 00:03:55.549
now if you go back to your folder you'll find the file right there and if you

39
00:03:55.549 --> 00:04:00.739
click right you can go for open with and you can choose Google Chrome for example

40
00:04:00.739 --> 00:04:08.750
and here we go we've got a blank web page so at the moment we are using the

41
00:04:08.750 --> 00:04:17.450
file protocol because the file is sitting on our computer so now let's go

42
00:04:17.450 --> 00:04:25.550
back to rockets and populate our web page with some content so

43
00:04:25.550 --> 00:04:33.680
you would always need to start with a block type like this so it says in the

44
00:04:33.680 --> 00:04:41.000
book type 2 HTML which refers to html5 the latest HTML as we are talking then

45
00:04:41.000 --> 00:04:47.690
everything inside our web page is gonna go inside the HTML tags so we're gonna

46
00:04:47.690 --> 00:04:55.669
have the head elements and then the bobby elements so inside the head

47
00:04:55.669 --> 00:05:02.090
elements we can place different elements like meta data so the character encoding

48
00:05:02.090 --> 00:05:10.940
for example which will set to utf-8 a title so it is how a title for our page

49
00:05:10.940 --> 00:05:20.270
my first web page and then inside the body we're gonna have the content that

50
00:05:20.270 --> 00:05:25.879
we would like to display on our web page so we could write text directly here I'm

51
00:05:25.879 --> 00:05:29.930
gonna place text inside a paragraph so you don't have to worry now about the

52
00:05:29.930 --> 00:05:34.219
syntax or paragraphs it's pretty easy actually we just need to use the P tag

53
00:05:34.219 --> 00:05:42.050
so inside the P tag we're gonna write some text hello world for example all

54
00:05:42.050 --> 00:05:48.560
right and now we will need to save so to do that you just go to file and then

55
00:05:48.560 --> 00:05:55.190
save otherwise you just do command S or ctrl s on windows so now let's go back

56
00:05:55.190 --> 00:06:03.889
to our web page and refresh and now you can see our content that congratulations

57
00:06:03.889 --> 00:06:08.289
you have just created your very first web page