Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The HTML is just the beginning. Now we're going to use CSS to appropriately size and space content so that it's proportional in the design.
Resources
- Bootstrap 4 Basics: Layout in Bootstrap - Check out this video from the Bootstrap 4 Basics course for some helpful review.
- Bootstrap: Layout - If you need a refresher on how to use the Bootstrap 4 grid system, check out this link to the documentation.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
But HTML is just the beginning.
0:00
Now we're going to use CSS to
appropriately size and space content, so
0:02
that it's proportional in the design.
0:07
When we define content areas in this way,
I like to call this blocking the content,
0:10
because we're going to use CSS
to reserve several major areas
0:15
of the page by marking it with
a colored rectangle or a block.
0:20
The rectangle allows us
to see how different
0:25
parts of the page relate to one another
visually, and we can adjust the columns,
0:28
margins, padding, and other
properties of the layout accordingly.
0:32
Coloring these blocks helps to provide
some contrast between each element,
0:37
because if we were to
use the same color for
0:41
everything, like some gray tone,
it might push us toward design decisions
0:44
we might make if the page was actually
using a monotone color palate.
0:49
However, most pages will likely
have many different colored images,
0:54
so we want to try and
simulate that with the blocks of color.
1:00
Let's get started.
1:04
At the top of this page,
just after the bootstrap CSS,
1:06
we're going to add a new
style sheet called style.css.
1:12
So let's just create that now, and
we'll put this in our CSS folder.
1:17
We'll call it style.css.
1:24
We already have bootstrap
to help get us started,
1:27
but we need to write our own styles too.
1:30
We're including this after the bootstrap
CSS in case we want to override
1:33
any bootstrap styling.
1:38
We'll create that
style.css file in a moment.
1:40
First, there's a few more
things on the page we can style
1:44
just by using bootstrap classes.
1:47
Bootstrap provides some really helpful CSS
that makes basic styling of a page fast,
1:49
in which provides a pretty solid
looking basic design as well.
1:55
The header in particular should have the
name of the website on the left side and
1:59
the navigation on the right side,
when in the desktop layout.
2:05
We can do this by making the header
a flex box container and
2:10
using the content between justification,
2:14
which will stretch the content to fill
the width of the parent container.
2:17
So let's do that now.
2:20
On the header, we'll add some classes.
2:22
First, we'll type d-flex followed
2:26
by justify-content-between, and
2:31
then finally, the class flex-wrap.
2:35
Adding the class d-flex makes
this a flexbox container.
2:41
Then there are classes for
justifying content, and
2:47
then finally we're wrapping the content,
if it's too wide for the container.
2:50
Of course,
we could do this with our own CSS.
2:56
But using bootstrap classes in this way,
2:59
it can be a lot faster when you're
prototyping, especially for a unique
3:02
instance like the header that won't be
repeated anywhere else on the page.
3:06
Check the notes associated
with this video for
3:10
more information about how to use
bootstrap classes to layout a web page.
3:13
So now let's create this style.css file.
3:17
So inside of CSS, we'll say new file,
we'll call it style.css.
3:22
And then let's open it up.
3:30
Right now the header doesn't have
a whole lot of space in the design, and
3:32
it's kinda just flush
against the top of the page.
3:36
And it doesn't have a lot of space
below it to separate the content.
3:39
So the first thing I want to do is add
some padding on the top and bottom.
3:43
So we'll just use,
An element selector on the header.
3:49
And we'll add 2rems of padding
to the top and bottom.
3:56
And then none on the left and right.
4:04
So let's save style.css and
also save the index.html file.
4:08
Now let's preview this in the browser,
see what it looks like.
4:15
And the profile picture is, of course,
still at a ridiculous size.
4:19
But at least the header looks better
with the text on the left and
4:23
our navigation links on the right side,
and some space between the top and bottom.
4:29
Now let's mark the featured area
that goes between the header and
4:36
the profile information, and
we'll mark it with a large block of color.
4:41
We'll do this by giving it an explicit
height, since there's no image there.
4:46
And then we'll assign a color and
4:51
add some space to the top and
bottom to separate it.
4:54
So let's switch back to style.css.
4:58
And we'll select the featured
section using the featured class.
5:03
And we'll just give it an explicit
height of say 500 pixels.
5:11
We'll set the background to a bright red,
and sort of a middle green and blue.
5:15
And then we'll add some margin on the
bottom, just to give it some separation.
5:24
And we'll make that margin the same
as the padding on the bottom and
5:30
top of the header.
5:35
So we're consistent, and
actually before we refresh the browser,
5:36
let's resize that huge profile image.
5:41
So we'll select that with
the profile-info class we added.
5:44
And inside of that remember
is the image element,
5:48
and let's just say it has a max width
5:55
of 6rems, max height of 6rems,
6:00
and let's add some curves to it,
6:04
we'll say border-radius 1rem.
6:09
And often times we wouldn't add these
stylistic touches in a quick mock-up like
6:13
this, but it's really easy to do with just
one line of CSS, so that's fine for now.
6:18
So let's save that and
check it in the browser.
6:25
And now we have this nice featured
area and we could put a large
6:29
image there that we want to
feature on this profile page.
6:34
And then we have the profile image,
6:39
our biotext, and the send message button.
6:43
This is looking a lot better,
6:48
because now there's three clear content
areas just below the featured image.
6:50
However, the profile is
flash against the text and
6:56
we probably look better if
it were center aligned with
7:00
the profile bio and send message button.
7:05
We can do that using negative margin
on the top to put it up a little bit,
7:08
and then some positive margin on
the right side to push the text away.
7:13
So let's switch back, and we'll say
7:19
margin -0.5rem on the top to pull it up,
7:24
1rem on the right side
to push the text away,
7:29
and then 0 on the other sides.
7:35
So let's save that and refresh.
7:38
And now you can see that
the profile image is aligned,
7:43
kind of center vertically with other
elements here, which looks nice.
7:48
And then it pushes the text away, so
it's not right up against the image.
7:53
The bootstrap grid is very helpful in
aligning page elements to a grid, but
7:58
you should also feel free to make
your own adjustments like this.
8:03
That profile photo looked strange
when the top of the photo was aligned
8:07
to the top of the other columns.
8:11
But it feels more natural for its
vertical alignment to be in the middle.
8:13
This is coming together nicely.
8:19
We still need to work on the image gallery
and increase the fidelity of the mock-up,
8:20
but the general shape of
the layout is coming together.
8:26
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up