1
00:00:00,970 --> 00:00:05,650
All right, let's get going here now, the first thing we want to do is change this.

2
00:00:05,650 --> 00:00:06,470
Hello to.

3
00:00:06,720 --> 00:00:09,730
Well, the biggest startup event of the year.

4
00:00:09,910 --> 00:00:11,120
Very dramatic, I know.

5
00:00:11,380 --> 00:00:12,240
So let's do that.

6
00:00:12,250 --> 00:00:19,960
I'm just going to say the biggest startup event of the year.

7
00:00:21,210 --> 00:00:21,810
That's right.

8
00:00:21,930 --> 00:00:30,010
OK, let's save so I'm doing commands or if you're on Windows controls and then refresh commander or

9
00:00:30,030 --> 00:00:32,730
if you're on Windows control, are.

10
00:00:33,800 --> 00:00:35,100
All right, there we go.

11
00:00:35,150 --> 00:00:39,580
That's great, we also seem to have a button that says find out more.

12
00:00:39,650 --> 00:00:41,120
So let's do that as well.

13
00:00:41,270 --> 00:00:45,890
We'll say button, find out more.

14
00:00:47,510 --> 00:00:48,080
There we go.

15
00:00:48,860 --> 00:00:55,940
If I refresh here, there you go are startup landing page is, well, frankly, still looking fairly

16
00:00:55,940 --> 00:00:56,310
ugly.

17
00:00:57,050 --> 00:01:02,510
Now, the next thing we want to do is we want to have this background image.

18
00:01:03,380 --> 00:01:10,160
But before we get to that, I want to talk a little bit about how we can set up our HTML page so that

19
00:01:10,160 --> 00:01:12,600
we have a good, responsive design.

20
00:01:12,980 --> 00:01:15,560
So right now, nothing much is going on.

21
00:01:15,560 --> 00:01:21,920
You can see here that I can adjust the screen size, but we don't have much happening on our page.

22
00:01:23,640 --> 00:01:30,090
So if we go back to the bootstrap documentation in the QuickStart guide, if I scroll all the way to

23
00:01:30,090 --> 00:01:33,030
the bottom, you see that I get a starter template here.

24
00:01:33,630 --> 00:01:39,930
And you might notice here something that we haven't seen before, which is this part over here called

25
00:01:39,930 --> 00:01:41,670
a required Medhat tag.

26
00:01:42,610 --> 00:01:49,720
And you can see here that this is actually something that we can copy and paste and place right below

27
00:01:49,720 --> 00:01:51,670
our title here, just like that.

28
00:01:52,360 --> 00:01:54,640
Now, let's make this a little bit bigger so we can see.

29
00:01:55,820 --> 00:01:59,670
And I'll make the writing smaller, just so you can see over here exactly what's happening.

30
00:02:00,470 --> 00:02:04,910
So this meta tag allows us to.

31
00:02:06,120 --> 00:02:13,530
Add new information to our e-mail page, and there's different things that we can provide now in most

32
00:02:13,530 --> 00:02:17,820
websites, you'll actually see these two lines very often.

33
00:02:17,880 --> 00:02:20,610
As a matter of fact, it's recommended that you always add them.

34
00:02:21,510 --> 00:02:23,190
Now, what exactly do they do?

35
00:02:24,870 --> 00:02:30,420
Well, if we scroll down here, you'll see that we have the responsive MEDITECH.

36
00:02:32,160 --> 00:02:39,930
Essentially, this line here, which says viewport allows us to create web pages that are developed

37
00:02:39,930 --> 00:02:40,830
mobile first.

38
00:02:41,930 --> 00:02:50,240
That is, we let the page know or the browser know that this page should work on mobile devices and

39
00:02:50,240 --> 00:02:58,160
things like scrolling or touching or zooming on a mobile device is going to work with this debt.

40
00:02:59,220 --> 00:03:03,870
Now, this is something I'm going to leave for you to learn more about, and it's something we'll talk

41
00:03:03,870 --> 00:03:05,100
about later in the course.

42
00:03:06,960 --> 00:03:13,870
But these attacks are just useful things to add to our projects any time we create a new page.

43
00:03:13,890 --> 00:03:18,420
And then finally, this top meta tag uses UTF eight encoding.

44
00:03:18,420 --> 00:03:25,140
Essentially, it's saying, hey, we're going to use this form of encoding to write text on our pages.

45
00:03:25,800 --> 00:03:29,550
Again, something that, if you're curious, you can read up on your own.

46
00:03:30,690 --> 00:03:32,340
But now that we've set this up.

47
00:03:33,410 --> 00:03:39,980
So that it's good for mobile as well, let's try to include this background image into our page.

48
00:03:41,290 --> 00:03:47,710
Now, when it comes to background images on a website, that's a very common thing, you'll see a lot

49
00:03:47,710 --> 00:03:52,540
of people adding background images to a website or maybe patterns or some sort of.

50
00:03:54,390 --> 00:04:01,410
And when a common problem happens, I always like, well, Googling, and one of the first things that

51
00:04:01,410 --> 00:04:08,290
you'll encounter is this perfect full page background image by Strix, which we've seen before.

52
00:04:09,030 --> 00:04:10,890
Now, if you scroll all the way down.

53
00:04:12,320 --> 00:04:20,180
It tells us a way for us to make sure that we use the image in a full page background so that it stretches,

54
00:04:20,180 --> 00:04:23,120
it flexes as the view port changes.

55
00:04:24,490 --> 00:04:29,880
Now, over here, it actually gives us a copy and paste way that we can use it ourselves.

56
00:04:30,400 --> 00:04:32,290
So I'm going to just copy this.

57
00:04:34,650 --> 00:04:35,760
Go to my style page.

58
00:04:37,130 --> 00:04:38,480
And just add this.

59
00:04:42,290 --> 00:04:48,320
Now, you'll see over here that we're using background over here with the euro, so we want to adjust

60
00:04:48,320 --> 00:04:53,360
it to heter jpeg because that's the part of the header.

61
00:04:54,380 --> 00:05:01,010
And the key here is these lines, it's saying, hey, we don't want to repeat the image, we want you

62
00:05:01,010 --> 00:05:04,610
to keep it centered and we want you to keep it fixed.

63
00:05:04,610 --> 00:05:12,080
And by using this line, it stretches or at least it fills the entire page with our image.

64
00:05:13,210 --> 00:05:18,910
And as long as we have background size as cover, well, let's see what happens.

65
00:05:19,120 --> 00:05:20,410
I'm going to refresh.

66
00:05:21,860 --> 00:05:25,400
Hey, and look at that now I have this image.

67
00:05:28,180 --> 00:05:29,980
Adapts to our page.

68
00:05:30,010 --> 00:05:38,200
But the cool part is if I open the developer tools here, let's say view developer tools.

69
00:05:39,450 --> 00:05:47,070
You'll notice that the image actually bumps up so that the center of the image wall is always centered.

70
00:05:47,820 --> 00:05:48,510
How cool is that?

71
00:05:49,460 --> 00:05:54,680
So this is a very useful trick to have your background very flexible.

72
00:05:57,660 --> 00:05:59,280
All right, so we have our background.

73
00:06:00,150 --> 00:06:04,820
Unfortunately, our writing right now is hard to see the button still kind of ugly.

74
00:06:05,130 --> 00:06:08,150
So let's fix a few things in our e-mail page.

75
00:06:09,180 --> 00:06:12,930
Now, remember, we have bootstrapped so we can start using some bootstrap classes.

76
00:06:12,960 --> 00:06:22,890
Now, one thing that I want to do is with this one that I want to maybe use a strong element to emphasize.

77
00:06:24,450 --> 00:06:31,920
The header, so make sure we close this and I'm going to make this bigger, just so you can see and

78
00:06:31,920 --> 00:06:32,730
if I refresh.

79
00:06:33,970 --> 00:06:36,010
All right, that's emphasized a little bit more.

80
00:06:36,730 --> 00:06:41,890
We also want to make sure that this H1 tag we can actually see so we can go into our Stolle.

81
00:06:43,210 --> 00:06:50,860
And just create a new each one style that will have, let's say, a font size.

82
00:06:55,220 --> 00:07:02,270
Of, let's say, three RTM, and then we'll give it a color of what should we do here?

83
00:07:03,760 --> 00:07:08,890
Well, one thing that I always like to do when I'm trying to figure out what color I want is to.

84
00:07:10,230 --> 00:07:16,710
Go to a page, let's say, like the start up over here, open up the developer tools.

85
00:07:19,940 --> 00:07:26,300
Make sure this is a little bit bigger so we can see and then find some more on the page where you have

86
00:07:26,300 --> 00:07:30,050
this color palette, if I actually click on this and among Chrome.

87
00:07:30,970 --> 00:07:38,110
Look at that, it opens up a little color palette for us so I can actually move around things and grab

88
00:07:38,110 --> 00:07:40,900
the hacks of the color that I want.

89
00:07:42,190 --> 00:07:47,770
In our case, I want the color to be well, let's find out how can I copy the color of this page?

90
00:07:48,310 --> 00:07:53,110
I can just click on select an element, this little icon here.

91
00:07:53,290 --> 00:07:56,410
And then if I hover over this, look at that.

92
00:07:56,410 --> 00:07:59,920
It shows me exactly what color this element has.

93
00:08:00,290 --> 00:08:02,820
You can see over here that this is the hex color.

94
00:08:03,040 --> 00:08:06,940
So I'm just going to copy that, come back and paste it in.

95
00:08:07,780 --> 00:08:11,200
Now, if I save both of these files and refresh.

96
00:08:12,400 --> 00:08:13,360
That's much better.

97
00:08:13,510 --> 00:08:14,290
I like that a lot.

98
00:08:14,830 --> 00:08:17,910
All right, we're making progress with our page.

99
00:08:18,010 --> 00:08:20,410
It's getting closer, but we still have a lot to do.

100
00:08:20,630 --> 00:08:23,020
So let's take a break and I'll see you in the next video.