[MUSIC]

>> You've done a great job learning about inline, inline block, and floats.

At this point of the course you know enough about CSS layout

to build a layout on your own.

So, now it's time to challenge your new skills and

put them to use by completing a CSS layout project.

So here's the project.

You've been asked to redesign the layout of The Best City guide website.

And the final design was just approved.

You've already written most of the html and the base styles for the site, but

you'll need to apply display properties and

floats to layout the new content for both small and large screens.

So, let's take a closer look at the project details.

You'll have all the files you need for

this project when you launch the workspace on this page.

Once you launch the workspace,

open the file bestcityguide.png to see an example of the final layout.

So now, let's take a look at the project files.

In index.html, you'll see a header element with the class main-header.

And below that, a new div element with the class banner.

So right below main-header and banner, you'll see the secondary,

primary, and tertiary content columns.

Notice how they each share the class col.

And at the bottom of the file,

you'll see a footer element with the class main-footer.

The workspace has some base CSS styles to get you started.

As you can see, the normalized CSS reset is already linked to the page.

And in style.css, there are some base styles for global box sizing,

and elements like the body, headings, paragraphs, and images.

There's also some base styles for

some of the elements on the page, like the navigation, banner and footer.

So let's take a look at the final layout in the browser.

So, first in small screens, notice how the site name and

navigation appear stacked in one column.

And in large screens they're laid out horizontally on the same line.

And the navigation links are laid out side by side with some margins in between them.

The middle section of the page has a centered content area.

Now, the center column here is the primary content column.

Notice how it's slightly wider than the other two columns.

You can make the columns any width you want as long as all three columns combined

add up to a total width of 100%.

So, for example, you can make the middle column 40% wide and

the other two columns 30% Wide.

The layout is a fluid one column layout and small screens,

then a two column layout in medium screens, and

a fluid, three column layout in large screens.

It's using the mobile first approach you learned about in an earlier lesson.

So, this time you'll use two media query break points in the layout.

The break point at 769 pixels, then you'll determine at which resolution

you need the next break point to lay out the three columns on the same line.

You'll also notice the full width header, footer, and

the large banner element below the header.

The header has a centered content area inside it.

While the content and the banner and footer is center aligned.

Finally, the centered layout containers should be 80% wide

on large screens and should be no wider than 1,150 pixels.

This is another great challenge that will help you practice and

retain the layout concepts you've learned in this course.

If you feel stuck at anytime during this challenge, you can always refer

back to the code you wrote in the previous lessons for some help.

Coming up in the following videos,

I'll show you the layout methods I use to build the best city guide page.