1
00:00:01,260 --> 00:00:06,450
The case of first steps would be to set up our environment and put this we're just going to go through

2
00:00:06,450 --> 00:00:08,920
and also set up a few technologies that we're going to use.

3
00:00:09,360 --> 00:00:12,430
So we need a font awesome for our icons.

4
00:00:12,430 --> 00:00:18,080
So for you also, this icon right here, this book icon and for this icons down here.

5
00:00:18,960 --> 00:00:20,370
So you need to go to font.

6
00:00:20,370 --> 00:00:20,780
Awesome.

7
00:00:20,790 --> 00:00:23,070
Create a account.

8
00:00:23,070 --> 00:00:26,520
If you don't happen, you could also go to Google and search for font.

9
00:00:26,520 --> 00:00:27,060
Awesome.

10
00:00:27,070 --> 00:00:34,250
See the city and, uh, link and actually link it up without creating account.

11
00:00:34,890 --> 00:00:37,920
Sometimes that works, sometimes it doesn't.

12
00:00:38,430 --> 00:00:40,110
But I would suggest to create the font.

13
00:00:40,110 --> 00:00:46,110
Awesome free kit and you just go to your account right here and then click on your name across and give

14
00:00:46,110 --> 00:00:46,590
it the name.

15
00:00:47,100 --> 00:00:49,020
Let's give it the name, its name it.

16
00:00:51,010 --> 00:00:52,990
Q The name of my kit.

17
00:00:58,700 --> 00:01:07,160
And yeah, so actually, all that you need to do, so ten years ago, he changes have been saved and

18
00:01:07,310 --> 00:01:08,660
this is your link right here.

19
00:01:08,660 --> 00:01:10,370
OK, so you just need to copy this.

20
00:01:11,090 --> 00:01:15,230
And I already created the empty folder in our project.

21
00:01:15,230 --> 00:01:17,810
And I'm just going to create an index that each demo.

22
00:01:18,810 --> 00:01:27,250
Now, shift exclamation mark boilerplate and right above our title, I'm going to paste in our kit.

23
00:01:27,690 --> 00:01:32,970
So this is just a short link which will link up font awesome to our Web page that each time we're going

24
00:01:32,970 --> 00:01:38,120
to use a a icon, this is how it's going to communicate with it.

25
00:01:39,620 --> 00:01:43,460
Next up, let's go to our next technology, which will be Google fonts.

26
00:01:43,510 --> 00:01:45,120
We're going to use from Google fonts.

27
00:01:45,120 --> 00:01:51,630
I actually used the font of one serried the search for it up here.

28
00:01:51,680 --> 00:01:54,360
Going to just search one T.

29
00:01:55,320 --> 00:02:04,650
And one third click on it, and I chose I have chosen this thing, start right here, so click on Selected

30
00:02:04,660 --> 00:02:08,620
Style, then this will pop up and we need to import it all.

31
00:02:08,630 --> 00:02:11,580
You could also use the link, but I usually import this.

32
00:02:11,580 --> 00:02:14,520
So I think that is between the style brackets.

33
00:02:15,520 --> 00:02:20,410
The style tags, we can just copy this, like click copy.

34
00:02:21,410 --> 00:02:30,800
Go back to our project and we need to pace it now into a ceasefire, so let's get the style, the ceasefire

35
00:02:33,170 --> 00:02:39,350
link pasted in right here and also link up access.

36
00:02:39,680 --> 00:02:46,100
So let's go down here right above our title and type in link and style that access.

37
00:02:48,440 --> 00:02:49,850
Now, let me also open this up.

38
00:02:49,850 --> 00:02:56,120
So I'm using lipservice just right click open with, like, server on our index and we'll have this

39
00:02:56,120 --> 00:02:56,790
blank page.

40
00:02:57,740 --> 00:03:00,020
Now, let me actually rearrange them.

41
00:03:00,020 --> 00:03:01,850
So I want you to be there by.

42
00:03:02,860 --> 00:03:11,290
Now, let's type in here the actual title, each one titles just show that this is working now another

43
00:03:11,290 --> 00:03:11,980
type of tag.

44
00:03:13,630 --> 00:03:19,940
H1 and New Peterloo, whatever, just focus on purpose.

45
00:03:19,960 --> 00:03:24,640
OK, so they we have a low and if I were to comment out.

46
00:03:25,970 --> 00:03:30,110
M. o, we also need to import it after we imported.

47
00:03:30,130 --> 00:03:31,400
We also need to.

48
00:03:32,470 --> 00:03:36,700
Tell it where to be applied, so you see this one firmly on the right side.

49
00:03:37,620 --> 00:03:44,890
You could either copy this or just type it into etched into our success, going to copy it, and I'm

50
00:03:44,890 --> 00:03:46,510
going to apply this to the entire body.

51
00:03:46,520 --> 00:03:50,510
So I'm going to take the body tag and tell it to your fun.

52
00:03:50,530 --> 00:03:51,800
Family should be monitored.

53
00:03:52,120 --> 00:03:54,670
So we do this and go back to our Web page.

54
00:03:56,120 --> 00:03:58,150
Is this your Hadlow?

55
00:03:58,160 --> 00:03:59,980
OK, so the style just change.

56
00:04:01,290 --> 00:04:11,210
Right, so let's move on and, um, yeah, next up, we need to take a look now at the images we're

57
00:04:11,220 --> 00:04:16,920
going to use on Splash that this is just a free image, depositary, some sort.

58
00:04:17,790 --> 00:04:23,670
We are not going to use the images but down and then we are actually going to use their links.

59
00:04:23,940 --> 00:04:27,030
So try to link up a image through this website.

60
00:04:27,390 --> 00:04:29,280
And for this, we're going to use this URL.

61
00:04:29,280 --> 00:04:35,730
So you're going to need to go to source dot on splash dot com, which actually going to compare this

62
00:04:35,740 --> 00:04:37,680
in a case against hit.

63
00:04:38,370 --> 00:04:49,230
So images would be from the storm hit a comment source for images is this one source source dot and

64
00:04:49,230 --> 00:04:50,190
splash dot com.

65
00:04:51,300 --> 00:04:53,700
And from here we just need to copy.

66
00:04:55,010 --> 00:04:58,820
This you are exactly as I did right here.

67
00:05:01,540 --> 00:05:09,550
So this is the euro and let's say I'm going to this just example, I'm going to take that image, take

68
00:05:09,550 --> 00:05:15,350
paste this euro in, and as soon as I do this, we're going to go to a Web page.

69
00:05:15,380 --> 00:05:19,410
OK, we already have now an image to just check.

70
00:05:19,900 --> 00:05:20,710
One hundred fifty.

71
00:05:20,710 --> 00:05:21,190
That's good.

72
00:05:21,820 --> 00:05:23,130
Now, this is a random image.

73
00:05:23,140 --> 00:05:26,170
If I refresh, it's going to change your case.

74
00:05:26,170 --> 00:05:28,720
Each time we refresh, we're going to get a different image.

75
00:05:29,690 --> 00:05:37,370
So if he wants some specific images, let's go now to splash dot com and we can search here for.

76
00:05:37,970 --> 00:05:46,160
Just think I searched for media media made up of maffia media.

77
00:05:46,170 --> 00:05:49,550
OK, and here, for example, one of our images which we have in our.

78
00:05:50,510 --> 00:05:54,470
Finnish website and this actually this image, so how can you obtain this image?

79
00:05:54,500 --> 00:05:59,540
Well, we can click on it and we could either download it and use it as an image.

80
00:05:59,540 --> 00:06:02,480
Vibora said that we are going to use a link.

81
00:06:02,490 --> 00:06:03,770
So this right here.

82
00:06:04,850 --> 00:06:12,710
After the photos is the I.D., I'm going to copy this, go back into our code and instead of random,

83
00:06:12,710 --> 00:06:19,250
I'm going to replace it with our I.D. So as soon as I hit Save, go back to our images.

84
00:06:20,520 --> 00:06:25,170
To our website, there we go, there's our image, and each time I refresh, it's going to stay the

85
00:06:25,170 --> 00:06:29,130
same because now it has decided it's all always going to use this image.

86
00:06:30,510 --> 00:06:31,050
All right.

87
00:06:31,050 --> 00:06:38,190
So next up, let's go into our access and do try to do some general resets.

88
00:06:38,340 --> 00:06:39,840
So let's do star.

89
00:06:42,910 --> 00:06:48,940
And I said, let's reset the margins and actually I want to not only the general reset, but I want

90
00:06:48,940 --> 00:06:49,780
to reset everything.

91
00:06:49,780 --> 00:06:52,870
That's, for example, using a pseudo satellite before and after.

92
00:06:52,900 --> 00:06:58,120
So before comma after.

93
00:07:00,970 --> 00:07:02,740
I don't need this right here.

94
00:07:05,230 --> 00:07:10,660
So everything will be reset with a margin of zero and padding of zero.

95
00:07:15,840 --> 00:07:22,020
Now, we already have a body done, so the last thing I want to do is take out all of our anchor tags

96
00:07:22,020 --> 00:07:26,220
and our ally tags and set their lifestyle to none.

97
00:07:28,230 --> 00:07:29,730
And our tax declaration

98
00:07:32,580 --> 00:07:33,040
to none.

99
00:07:34,200 --> 00:07:40,170
And as you may know, not just means that I'm going to use a list item in an order the ordered list,

100
00:07:40,470 --> 00:07:42,930
it will not have those Dischord numbers.

101
00:07:43,500 --> 00:07:50,130
And also when I create a link tag, so I'm going to use the anchor tag, it will not be on the line.

102
00:07:50,130 --> 00:07:52,140
And actually the color will be different.

103
00:07:52,140 --> 00:07:55,690
But I can manipulate Baydon, put that on the line will not happen.

104
00:07:55,710 --> 00:07:58,790
Okay, so that's almost it.

105
00:07:58,800 --> 00:08:04,010
I just want to create in our e-mail a bit of a map of what we're going to do.

106
00:08:04,020 --> 00:08:05,520
So we're going to create a main

107
00:08:08,280 --> 00:08:10,890
this is going to also have a idy.

108
00:08:12,540 --> 00:08:13,800
I think they're in their.

109
00:08:15,030 --> 00:08:24,750
Of men and women, I mean, we have a weather section and I'll know after I had a section, will have

110
00:08:24,750 --> 00:08:29,760
the images or the sections four for our section right here for our services.

111
00:08:29,940 --> 00:08:37,170
OK, OK, so let's do this by creating a song right after Heather, we're going to create a section

112
00:08:38,340 --> 00:08:41,700
and we're also going to create a list of our section.

113
00:08:41,850 --> 00:08:46,760
And I'm going to give this the idea of Section nine after our section.

114
00:08:46,770 --> 00:08:55,920
I'm just going to type in here title with each to and this is going to have the idea of Section Desh

115
00:08:55,920 --> 00:08:56,370
title.

116
00:08:57,920 --> 00:08:59,660
Not here, but here.

117
00:08:59,890 --> 00:09:00,520
OK.

118
00:09:02,040 --> 00:09:05,910
So this is actually where all of our services will live.

119
00:09:07,070 --> 00:09:13,010
And after all, services will have to actually I mean, we'll have our photo section now, as I said,

120
00:09:13,010 --> 00:09:18,770
and within a photo, we're also going to have our contacts are hoping that the photo will contain it

121
00:09:18,770 --> 00:09:20,050
will be just a contact session.

122
00:09:20,060 --> 00:09:23,540
We're going to give this the idea of contact.

123
00:09:27,390 --> 00:09:31,020
All right, so that's it for this video throw out out.

124
00:09:31,370 --> 00:09:32,760
I want to do next up.

125
00:09:32,760 --> 00:09:34,050
So let's go to the next one.

126
00:09:34,200 --> 00:09:34,820
See you soon.

127
00:09:34,830 --> 00:09:35,240
Bye bye.