1
00:00:00,730 --> 00:00:01,300
Welcome back.

2
00:00:01,690 --> 00:00:06,550
So how are we going to build this from scratch based on what we've learned so far?

3
00:00:07,450 --> 00:00:11,200
Well, we're going to use bootstrap for this because we just learned it.

4
00:00:11,680 --> 00:00:15,340
And I actually gave you some starter files attached to the last lesson.

5
00:00:16,880 --> 00:00:17,870
If we take a look.

6
00:00:18,880 --> 00:00:26,650
That's right, we had a header image, we had an index, AsIam Alpha, and then a style dot successful.

7
00:00:27,280 --> 00:00:28,580
So you can open these.

8
00:00:29,530 --> 00:00:32,170
Make sure they're all in the same folder I called mine.

9
00:00:32,350 --> 00:00:36,040
Start up with an exclamation mark because this is an exciting project.

10
00:00:36,850 --> 00:00:39,340
And in our case, we'll use sublime text.

11
00:00:39,940 --> 00:00:42,010
We should have something like this.

12
00:00:44,130 --> 00:00:50,670
So we have our index animal file, our stall that counts and then our header image.

13
00:00:51,910 --> 00:00:55,330
Now, I filled in a few things for you just to get us started.

14
00:00:55,780 --> 00:00:57,320
Nothing too crazy, though, don't worry.

15
00:00:58,210 --> 00:01:05,140
One is we've used some Google fonts so that we can use this Monserrat font, which I think is kind of

16
00:01:05,140 --> 00:01:06,850
nice from the Google fonts.

17
00:01:07,540 --> 00:01:11,500
And we enable that in our style sheet by saying body and HTML.

18
00:01:11,650 --> 00:01:15,070
I want to make sure that the font family has this setting.

19
00:01:15,550 --> 00:01:17,470
If not, we'll use sans serif.

20
00:01:18,010 --> 00:01:21,070
I've also set width and height for one hundred percent.

21
00:01:21,370 --> 00:01:27,100
That's always something good to have to make sure that the body in HTML cover one hundred percent of

22
00:01:27,250 --> 00:01:28,710
whatever we see on the screen.

23
00:01:30,330 --> 00:01:37,870
Next, we have our bootstrap success from a CDN or a content delivery network.

24
00:01:38,430 --> 00:01:44,730
And the reason I've added this year is that so you don't have to actually include a bootstrap file yourself.

25
00:01:45,670 --> 00:01:52,330
If I actually go to the bootstrap page and I go to quicksort, you'll see that right here, we can just

26
00:01:52,330 --> 00:01:58,650
copy and paste this just like here with the bootstrap successful.

27
00:01:59,380 --> 00:02:05,150
So that way right away, as soon as we copy and paste this line, we have bootstrap available to us.

28
00:02:05,740 --> 00:02:11,960
Now, notice here how we have versions of Bootstrap in this case has four point three point one.

29
00:02:12,460 --> 00:02:19,450
Now, this number, as the time passes, is going to get bigger and bigger because bootstrap is a constantly

30
00:02:19,450 --> 00:02:22,840
evolving library as developers make updates.

31
00:02:23,350 --> 00:02:28,620
But as long as you use a number higher than this, everything in this project should work.

32
00:02:28,660 --> 00:02:33,580
Like I said, most of the time, no matter when you're watching this video, as long as you copy this

33
00:02:33,850 --> 00:02:36,660
or you use my starter files, everything should work.

34
00:02:38,770 --> 00:02:43,390
And then finally, we have our stylesheet nothing new here, right, because we've already seen this

35
00:02:43,390 --> 00:02:49,120
before, we have hardstyle that successful and our style file just has this for now.

36
00:02:50,040 --> 00:02:56,970
We also have our header image, which again, is a nice little laptop image for our start landing page.

37
00:02:57,570 --> 00:03:03,060
Now, this is the website over here that is completely blank because we have nothing in the body.

38
00:03:03,090 --> 00:03:05,070
So let's just have a header.

39
00:03:05,080 --> 00:03:08,610
Wanda says hello right here.

40
00:03:08,850 --> 00:03:10,390
Save it and refresh.

41
00:03:11,190 --> 00:03:11,700
Look at that.

42
00:03:12,000 --> 00:03:12,600
We have.

43
00:03:12,840 --> 00:03:13,540
Hello.

44
00:03:14,190 --> 00:03:16,590
Now, notice here how fast I did that.

45
00:03:16,590 --> 00:03:21,690
I just pressed command are on my laptop, which is a Mac.

46
00:03:21,690 --> 00:03:25,800
If you have windows, its control are to refresh the webpage.

47
00:03:26,070 --> 00:03:32,820
And you notice here that the font is being applied once again because we have our font family access

48
00:03:33,030 --> 00:03:33,450
set.

49
00:03:34,230 --> 00:03:40,520
So there's our page, our setup, and there is what we want to get to.

50
00:03:40,830 --> 00:03:46,860
Now, if you want, you can go off on your own and try to attempt to build this from scratch yourself.

51
00:03:47,460 --> 00:03:53,910
Otherwise, I'll see you in the next video to actually get our page to look a little bit more like this

52
00:03:53,910 --> 00:03:55,890
and less like this.

53
00:03:56,410 --> 00:03:58,260
I'll see in the next one by.