1
00:00:00,510 --> 00:00:06,900
OK, so first we need to do a few basic set ups, this just means we're going to implement so greater

2
00:00:06,900 --> 00:00:11,670
integration and we're going to create a style here says while we're also going to implement font awesome.

3
00:00:12,180 --> 00:00:13,830
Which we'll use for icons.

4
00:00:13,830 --> 00:00:19,660
And we will also use a bit of bootstrap, actually, only for the bottom line.

5
00:00:19,670 --> 00:00:23,630
I want to style the buttons, the just two buttons, but I'm too lazy to start them.

6
00:00:23,640 --> 00:00:29,490
As I said, we will only concentrate on using blackspot as the main focus of this project.

7
00:00:29,940 --> 00:00:31,710
OK, so let's get into our setup.

8
00:00:32,040 --> 00:00:38,370
So I just created a folder on my desktop called a Flex Box website.

9
00:00:38,670 --> 00:00:44,400
And within here, let's create the index, that e-mail and our staff access file.

10
00:00:48,890 --> 00:00:53,180
OK, you know, Starchier says we're going to do our general reset margin.

11
00:00:55,790 --> 00:00:57,320
Zero padding, zero.

12
00:01:03,010 --> 00:01:04,420
Boxes in the box.

13
00:01:09,140 --> 00:01:17,270
And take out the lifestyles of the stars none and also text declaration none.

14
00:01:18,130 --> 00:01:19,720
Don't have any on the lines.

15
00:01:20,170 --> 00:01:24,970
Another thing I want to do is to set the scrolled behavior to smooth.

16
00:01:27,900 --> 00:01:32,110
Now, what this will do is when we click on it, we show this again.

17
00:01:32,130 --> 00:01:36,480
So, for example, I want to go through about page and click on about this scroll smoothly down to my

18
00:01:36,480 --> 00:01:42,830
about section if I go to contact, which is the last section for scroll through everything and go without

19
00:01:42,950 --> 00:01:43,290
context.

20
00:01:44,010 --> 00:01:50,220
So this is just a neat trick and it's actually implemented in success without using JavaScript.

21
00:01:50,490 --> 00:01:56,490
But this is will this will get extremely annoying when we are constantly saving and editing.

22
00:01:57,040 --> 00:02:01,680
So I'm going to comment it out and you can come with it back in when you're finished with the project.

23
00:02:02,430 --> 00:02:04,840
Now, let's go back into our e-mail.

24
00:02:05,310 --> 00:02:08,250
Let's start off shift exclamation mark boilerplate.

25
00:02:09,330 --> 00:02:12,540
And at first I hear a link up.

26
00:02:16,210 --> 00:02:24,130
Austin, Texas, and then above us, Tulsa says actually go back here, if you don't have an account,

27
00:02:24,130 --> 00:02:30,670
you can create one or you can use the city and just searching Google for fonts and see, then I have

28
00:02:30,670 --> 00:02:30,930
one.

29
00:02:31,390 --> 00:02:32,260
I have an account.

30
00:02:32,260 --> 00:02:33,700
I have just have a free account.

31
00:02:33,700 --> 00:02:37,990
You can use a free kit and you need to link it up in order to.

32
00:02:39,090 --> 00:02:40,800
To get your font awesome styles.

33
00:02:42,740 --> 00:02:44,930
Now, for this, you just need to go to your account.

34
00:02:46,160 --> 00:02:47,480
Click on your kids.

35
00:02:48,890 --> 00:02:50,090
And get your kit.

36
00:02:51,490 --> 00:02:54,650
And you go complicate as go back to.

37
00:02:56,740 --> 00:02:58,790
Reached out and pasted it in here.

38
00:02:59,440 --> 00:03:05,970
Another thing we need to link up and actually let me try this out, so let's very quickly search for

39
00:03:05,970 --> 00:03:06,020
it.

40
00:03:06,030 --> 00:03:07,630
I can't see Facebook.

41
00:03:09,760 --> 00:03:13,210
Actually, actually a search for an icon that will also use envelope.

42
00:03:19,710 --> 00:03:26,910
OK, there's our envelope, which would actually use this mall type bulk click on it and this would

43
00:03:26,910 --> 00:03:29,460
open up the envelope, so this will open up the link.

44
00:03:29,490 --> 00:03:30,690
Just need to copy this.

45
00:03:30,690 --> 00:03:33,120
You can see copy ASML, click on it.

46
00:03:33,120 --> 00:03:37,380
And I was copied, copied to clipboard and now pasted in here.

47
00:03:37,980 --> 00:03:38,720
It's safe.

48
00:03:39,330 --> 00:03:47,960
Open up our project using like server and I'm trying to do that will and a there there it is up there.

49
00:03:48,300 --> 00:03:49,350
Don't worry, I'm going to fix that.

50
00:03:49,650 --> 00:03:56,310
We will also use a direct dimensionless so we could style them using access by going to use the director

51
00:03:56,310 --> 00:04:03,180
mentioned starting from here, typing in F a free X and this will just give me the icon free times its

52
00:04:03,180 --> 00:04:05,370
size so that there's the icon right here.

53
00:04:05,860 --> 00:04:09,990
I think I'm also going to zoom in to 150 percent.

54
00:04:10,800 --> 00:04:12,480
And it is this.

55
00:04:13,680 --> 00:04:21,450
OK, next up, we so we have often something, as I say, this is working, if this is not working for

56
00:04:21,450 --> 00:04:25,590
you, then either your kid is wrong or something else went wrong.

57
00:04:25,590 --> 00:04:31,650
But you this the book, you just need to grab your kit, put it in here and try it out with an icon.

58
00:04:32,830 --> 00:04:34,900
OK, next up, we need.

59
00:04:36,600 --> 00:04:42,380
Seems like you just going to show the symbol right here, if you go to private schools, you will find

60
00:04:42,380 --> 00:04:47,570
all the e-mail symbols and I'm going to use for copyright this at the copy.

61
00:04:47,950 --> 00:04:51,170
This will be enough water just for you to know.

62
00:04:51,170 --> 00:04:55,580
This is where I'm going to where I know how to use these symbols and what they mean.

63
00:04:55,760 --> 00:04:58,310
You see here, there are a lot of symbols.

64
00:04:58,760 --> 00:05:01,230
A, I think that we will use is bootstrap.

65
00:05:01,250 --> 00:05:03,650
So let's go to this, actually.

66
00:05:04,910 --> 00:05:07,490
Our project, let's open up another fund.

67
00:05:08,860 --> 00:05:09,820
Another tab.

68
00:05:10,920 --> 00:05:17,610
Let's go to bootstrap now, if you never use bootstrap, normally you would use bootstrap if your JavaScript

69
00:05:17,610 --> 00:05:23,700
developer to just throw out a quick Web page, but both Web pages are extremely.

70
00:05:24,730 --> 00:05:27,340
Easy to recognize because they all look the same.

71
00:05:28,000 --> 00:05:29,650
That's why I'm not using bootstrap.

72
00:05:29,680 --> 00:05:32,090
I was trying to style my own pages.

73
00:05:32,110 --> 00:05:35,340
OK, so I just copied from getting started.

74
00:05:35,440 --> 00:05:39,790
The CSC got a copy of the JavaScript if wish, and.

75
00:05:39,790 --> 00:05:41,590
Well, we we're not going to use this.

76
00:05:41,590 --> 00:05:43,090
I don't want to overcomplicate things.

77
00:05:43,390 --> 00:05:44,950
I just copied this link.

78
00:05:46,040 --> 00:05:52,010
And paste it into my e-mail up here and everything will be loaded up in this sequel, bootstrap, then

79
00:05:52,010 --> 00:06:02,300
font awesome and then my stylesheet and now I can name our website with, uh, flexible text books,

80
00:06:03,860 --> 00:06:06,770
web page, website.

81
00:06:08,860 --> 00:06:11,480
All right, now this is taking care of.

82
00:06:12,350 --> 00:06:14,130
Let's see what what else do we need?

83
00:06:14,150 --> 00:06:14,960
What else do we need?

84
00:06:17,190 --> 00:06:21,700
I think we have everything that we need, though, right until now.

85
00:06:22,470 --> 00:06:26,320
Yeah, so just taking care of, uh, seeing the next one.

86
00:06:26,610 --> 00:06:27,060
Bye bye.