Introducing the Practice2:11 with Guil Hernandez
See an overview of the grid you'll create.
[MUSIC] 0:00 Hi everyone Guil here, it's time for some practice. 0:04 Practice is a good thing. 0:07 It helps make what you've learned stick and last longer. 0:08 But also helps you become a faster and better developer. 0:11 CSS grid layout can be challenging at times, so 0:14 let's practice the basics of CSS grid to make sure your knowledge sticks. 0:17 This practice session covers creating rows, columns and gutters with Grid. 0:21 It's a great follow up to the first stage of my CSS Grid Layout course. 0:25 So if you haven't taken that yet, and find this practice session too difficult or 0:29 realize that none of the Grid concepts sound familiar, 0:33 than take this course first. 0:36 I've posted the link in the teacher's notes of this video. 0:38 To get started launch the workspace with this video. 0:41 I've included HTML and CSS files for this exercise. 0:44 One of the style sheets linked to the HTML page.CSS already includes the base 0:48 styles for the page which you can see when you preview index.html in the browser. 0:52 Now let's walk through what you'll need to do. 0:58 In the file grid.css, you'll see 1:01 five comments with instructions on the CSS selector and styles you'll need to write. 1:05 So first, you'll need to determine which HTML element is the grid container, then 1:10 target it by replacing this placeholder selector with the grid container selector. 1:16 Then in the grid container rule, 1:22 you'll need to write the declaration that turns on the grid in the browser. 1:24 Once you've established the grid formatting context, 1:29 you will declare three row tracks in the following order, 100px, 400px and 200px. 1:32 Then you'll declare three column tracks and 1:39 make sure they're each 320 pixels wide. 1:42 Finally, you'll create separation between the columns and rows by applying 1:46 a 20 pixel gutter to rows, and a 15 pixel gutter to columns. 1:51 The goal is to get your layout to look like this. 1:57 This exercise is a great way to practice what you've learned so far about CSS Grid. 2:00 So, good luck, have fun. 2:05 And in the next video, I'll walk you through the solution. 2:06
You need to sign up for Treehouse in order to download course files.Sign up