Introducing the Project

[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