This course will be retired on July 12, 2021. We recommend "Mobile-First CSS Layout" for up-to-date content.
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
You've done a great job learning about inline, inline-block, and floats. At this point in the course you know enough about CSS layout to build a layout on your own! Now it's time to challenge your new skills and put them to use by completing a CSS layout project.
The next step provides a recap of the CSS layout project with step-by-step instructions. Also, if you get stuck, feel free to watch the follow-up videos where you will learn one solution.
[MUSIC]
0:00
>> You've done a great job learning
about inline, inline block, and floats.
0:04
At this point of the course you
know enough about CSS layout
0:08
to build a layout on your own.
0:11
So, now it's time to
challenge your new skills and
0:14
put them to use by completing
a CSS layout project.
0:16
So here's the project.
0:20
You've been asked to redesign the layout
of The Best City guide website.
0:21
And the final design was just approved.
0:25
You've already written most of the html
and the base styles for the site, but
0:28
you'll need to apply
display properties and
0:32
floats to layout the new content for
both small and large screens.
0:34
So, let's take a closer look
at the project details.
0:38
You'll have all the files you need for
0:42
this project when you launch
the workspace on this page.
0:43
Once you launch the workspace,
0:47
open the file bestcityguide.png to
see an example of the final layout.
0:49
So now,
let's take a look at the project files.
0:56
In index.html, you'll see a header
element with the class main-header.
1:00
And below that,
a new div element with the class banner.
1:07
So right below main-header and
banner, you'll see the secondary,
1:11
primary, and tertiary content columns.
1:17
Notice how they each share the class col.
1:21
And at the bottom of the file,
1:27
you'll see a footer element
with the class main-footer.
1:29
The workspace has some base
CSS styles to get you started.
1:34
As you can see, the normalized CSS
reset is already linked to the page.
1:38
And in style.css, there are some
base styles for global box sizing,
1:43
and elements like the body,
headings, paragraphs, and images.
1:48
There's also some base styles for
1:53
some of the elements on the page,
like the navigation, banner and footer.
1:55
So let's take a look at
the final layout in the browser.
2:01
So, first in small screens,
notice how the site name and
2:05
navigation appear stacked in one column.
2:10
And in large screens they're laid
out horizontally on the same line.
2:15
And the navigation links are laid out side
by side with some margins in between them.
2:19
The middle section of the page
has a centered content area.
2:26
Now, the center column here is
the primary content column.
2:31
Notice how it's slightly wider
than the other two columns.
2:36
You can make the columns any width you
want as long as all three columns combined
2:39
add up to a total width of 100%.
2:44
So, for example, you can make
the middle column 40% wide and
2:46
the other two columns 30% Wide.
2:50
The layout is a fluid one column
layout and small screens,
2:52
then a two column layout
in medium screens, and
2:58
a fluid,
three column layout in large screens.
3:02
It's using the mobile first approach
you learned about in an earlier lesson.
3:06
So, this time you'll use two media
query break points in the layout.
3:10
The break point at 769 pixels,
then you'll determine at which resolution
3:15
you need the next break point to lay
out the three columns on the same line.
3:20
You'll also notice the full width header,
footer, and
3:25
the large banner element below the header.
3:30
The header has a centered
content area inside it.
3:34
While the content and the banner and
footer is center aligned.
3:38
Finally, the centered layout
containers should be 80% wide
3:46
on large screens and
should be no wider than 1,150 pixels.
3:51
This is another great challenge
that will help you practice and
3:57
retain the layout concepts
you've learned in this course.
4:00
If you feel stuck at anytime during
this challenge, you can always refer
4:03
back to the code you wrote in
the previous lessons for some help.
4:07
Coming up in the following videos,
4:11
I'll show you the layout methods I use
to build the best city guide page.
4:12
You need to sign up for Treehouse in order to download course files.
Sign up