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
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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