1
00:00:00,510 --> 00:00:02,610
But HTML is just the beginning.

2
00:00:02,610 --> 00:00:07,365
Now we're going to use CSS to
appropriately size and space content, so

3
00:00:07,365 --> 00:00:10,069
that it's proportional in the design.

4
00:00:10,069 --> 00:00:15,890
When we define content areas in this way,
I like to call this blocking the content,

5
00:00:15,890 --> 00:00:20,213
because we're going to use CSS
to reserve several major areas

6
00:00:20,213 --> 00:00:25,370
of the page by marking it with
a colored rectangle or a block.

7
00:00:25,370 --> 00:00:28,320
The rectangle allows us
to see how different

8
00:00:28,320 --> 00:00:32,860
parts of the page relate to one another
visually, and we can adjust the columns,

9
00:00:32,860 --> 00:00:37,270
margins, padding, and other
properties of the layout accordingly.

10
00:00:37,270 --> 00:00:41,840
Coloring these blocks helps to provide
some contrast between each element,

11
00:00:41,840 --> 00:00:44,280
because if we were to
use the same color for

12
00:00:44,280 --> 00:00:49,440
everything, like some gray tone,
it might push us toward design decisions

13
00:00:49,440 --> 00:00:54,970
we might make if the page was actually
using a monotone color palate.

14
00:00:54,970 --> 00:01:00,100
However, most pages will likely
have many different colored images,

15
00:01:00,100 --> 00:01:04,400
so we want to try and
simulate that with the blocks of color.

16
00:01:04,400 --> 00:01:05,090
Let's get started.

17
00:01:06,850 --> 00:01:12,172
At the top of this page,
just after the bootstrap CSS,

18
00:01:12,172 --> 00:01:17,737
we're going to add a new
style sheet called style.css.

19
00:01:17,737 --> 00:01:24,495
So let's just create that now, and
we'll put this in our CSS folder.

20
00:01:24,495 --> 00:01:27,809
We'll call it style.css.

21
00:01:27,809 --> 00:01:30,949
We already have bootstrap
to help get us started,

22
00:01:30,949 --> 00:01:33,427
but we need to write our own styles too.

23
00:01:33,427 --> 00:01:38,274
We're including this after the bootstrap
CSS in case we want to override

24
00:01:38,274 --> 00:01:40,780
any bootstrap styling.

25
00:01:40,780 --> 00:01:44,640
We'll create that
style.css file in a moment.

26
00:01:44,640 --> 00:01:47,260
First, there's a few more
things on the page we can style

27
00:01:47,260 --> 00:01:49,690
just by using bootstrap classes.

28
00:01:49,690 --> 00:01:55,415
Bootstrap provides some really helpful CSS
that makes basic styling of a page fast,

29
00:01:55,415 --> 00:01:59,550
in which provides a pretty solid
looking basic design as well.

30
00:01:59,550 --> 00:02:05,720
The header in particular should have the
name of the website on the left side and

31
00:02:05,720 --> 00:02:10,060
the navigation on the right side,
when in the desktop layout.

32
00:02:10,060 --> 00:02:14,310
We can do this by making the header
a flex box container and

33
00:02:14,310 --> 00:02:17,000
using the content between justification,

34
00:02:17,000 --> 00:02:20,920
which will stretch the content to fill
the width of the parent container.

35
00:02:20,920 --> 00:02:22,710
So let's do that now.

36
00:02:22,710 --> 00:02:26,300
On the header, we'll add some classes.

37
00:02:26,300 --> 00:02:31,068
First, we'll type d-flex followed

38
00:02:31,068 --> 00:02:35,836
by justify-content-between, and

39
00:02:35,836 --> 00:02:41,440
then finally, the class flex-wrap.

40
00:02:41,440 --> 00:02:47,110
Adding the class d-flex makes
this a flexbox container.

41
00:02:47,110 --> 00:02:50,530
Then there are classes for
justifying content, and

42
00:02:50,530 --> 00:02:56,350
then finally we're wrapping the content,
if it's too wide for the container.

43
00:02:56,350 --> 00:02:59,790
Of course,
we could do this with our own CSS.

44
00:02:59,790 --> 00:03:02,100
But using bootstrap classes in this way,

45
00:03:02,100 --> 00:03:06,126
it can be a lot faster when you're
prototyping, especially for a unique

46
00:03:06,126 --> 00:03:10,353
instance like the header that won't be
repeated anywhere else on the page.

47
00:03:10,353 --> 00:03:13,139
Check the notes associated
with this video for

48
00:03:13,139 --> 00:03:17,577
more information about how to use
bootstrap classes to layout a web page.

49
00:03:17,577 --> 00:03:22,780
So now let's create this style.css file.

50
00:03:22,780 --> 00:03:30,310
So inside of CSS, we'll say new file,
we'll call it style.css.

51
00:03:30,310 --> 00:03:31,700
And then let's open it up.

52
00:03:32,750 --> 00:03:36,070
Right now the header doesn't have
a whole lot of space in the design, and

53
00:03:36,070 --> 00:03:39,600
it's kinda just flush
against the top of the page.

54
00:03:39,600 --> 00:03:43,820
And it doesn't have a lot of space
below it to separate the content.

55
00:03:43,820 --> 00:03:49,540
So the first thing I want to do is add
some padding on the top and bottom.

56
00:03:49,540 --> 00:03:56,120
So we'll just use,
An element selector on the header.

57
00:03:56,120 --> 00:04:02,950
And we'll add 2rems of padding
to the top and bottom.

58
00:04:04,310 --> 00:04:08,472
And then none on the left and right.

59
00:04:08,472 --> 00:04:15,586
So let's save style.css and
also save the index.html file.

60
00:04:15,586 --> 00:04:19,790
Now let's preview this in the browser,
see what it looks like.

61
00:04:19,790 --> 00:04:23,880
And the profile picture is, of course,
still at a ridiculous size.

62
00:04:23,880 --> 00:04:29,141
But at least the header looks better
with the text on the left and

63
00:04:29,141 --> 00:04:36,101
our navigation links on the right side,
and some space between the top and bottom.

64
00:04:36,101 --> 00:04:41,165
Now let's mark the featured area
that goes between the header and

65
00:04:41,165 --> 00:04:46,890
the profile information, and
we'll mark it with a large block of color.

66
00:04:46,890 --> 00:04:51,770
We'll do this by giving it an explicit
height, since there's no image there.

67
00:04:51,770 --> 00:04:54,318
And then we'll assign a color and

68
00:04:54,318 --> 00:04:58,237
add some space to the top and
bottom to separate it.

69
00:04:58,237 --> 00:05:01,616
So let's switch back to style.css.

70
00:05:03,882 --> 00:05:11,070
And we'll select the featured
section using the featured class.

71
00:05:11,070 --> 00:05:15,151
And we'll just give it an explicit
height of say 500 pixels.

72
00:05:15,151 --> 00:05:22,690
We'll set the background to a bright red,
and sort of a middle green and blue.

73
00:05:24,835 --> 00:05:30,558
And then we'll add some margin on the
bottom, just to give it some separation.

74
00:05:30,558 --> 00:05:35,248
And we'll make that margin the same
as the padding on the bottom and

75
00:05:35,248 --> 00:05:36,605
top of the header.

76
00:05:36,605 --> 00:05:41,612
So we're consistent, and
actually before we refresh the browser,

77
00:05:41,612 --> 00:05:44,561
let's resize that huge profile image.

78
00:05:44,561 --> 00:05:48,592
So we'll select that with
the profile-info class we added.

79
00:05:48,592 --> 00:05:55,254
And inside of that remember
is the image element,

80
00:05:55,254 --> 00:06:00,012
and let's just say it has a max width

81
00:06:00,012 --> 00:06:04,612
of 6rems, max height of 6rems,

82
00:06:04,612 --> 00:06:09,053
and let's add some curves to it,

83
00:06:09,053 --> 00:06:13,840
we'll say border-radius 1rem.

84
00:06:13,840 --> 00:06:18,900
And often times we wouldn't add these
stylistic touches in a quick mock-up like

85
00:06:18,900 --> 00:06:25,120
this, but it's really easy to do with just
one line of CSS, so that's fine for now.

86
00:06:25,120 --> 00:06:29,441
So let's save that and
check it in the browser.

87
00:06:29,441 --> 00:06:34,758
And now we have this nice featured
area and we could put a large

88
00:06:34,758 --> 00:06:39,776
image there that we want to
feature on this profile page.

89
00:06:39,776 --> 00:06:43,667
And then we have the profile image,

90
00:06:43,667 --> 00:06:48,474
our biotext, and the send message button.

91
00:06:48,474 --> 00:06:50,564
This is looking a lot better,

92
00:06:50,564 --> 00:06:56,178
because now there's three clear content
areas just below the featured image.

93
00:06:56,178 --> 00:07:00,594
However, the profile is
flash against the text and

94
00:07:00,594 --> 00:07:05,215
we probably look better if
it were center aligned with

95
00:07:05,215 --> 00:07:08,825
the profile bio and send message button.

96
00:07:08,825 --> 00:07:13,925
We can do that using negative margin
on the top to put it up a little bit,

97
00:07:13,925 --> 00:07:19,450
and then some positive margin on
the right side to push the text away.

98
00:07:19,450 --> 00:07:24,105
So let's switch back, and we'll say

99
00:07:24,105 --> 00:07:29,488
margin -0.5rem on the top to pull it up,

100
00:07:29,488 --> 00:07:35,015
1rem on the right side
to push the text away,

101
00:07:35,015 --> 00:07:38,809
and then 0 on the other sides.

102
00:07:38,809 --> 00:07:41,300
So let's save that and refresh.

103
00:07:43,777 --> 00:07:48,099
And now you can see that
the profile image is aligned,

104
00:07:48,099 --> 00:07:53,970
kind of center vertically with other
elements here, which looks nice.

105
00:07:53,970 --> 00:07:58,864
And then it pushes the text away, so
it's not right up against the image.

106
00:07:58,864 --> 00:08:03,114
The bootstrap grid is very helpful in
aligning page elements to a grid, but

107
00:08:03,114 --> 00:08:07,190
you should also feel free to make
your own adjustments like this.

108
00:08:07,190 --> 00:08:11,490
That profile photo looked strange
when the top of the photo was aligned

109
00:08:11,490 --> 00:08:13,860
to the top of the other columns.

110
00:08:13,860 --> 00:08:17,900
But it feels more natural for its
vertical alignment to be in the middle.

111
00:08:19,100 --> 00:08:20,890
This is coming together nicely.

112
00:08:20,890 --> 00:08:26,050
We still need to work on the image gallery
and increase the fidelity of the mock-up,

113
00:08:26,050 --> 00:08:29,160
but the general shape of
the layout is coming together.