From the course: Responsive Layout

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Challenge: The rainbow box

Challenge: The rainbow box - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial

Challenge: The rainbow box

“

- [Instructor] Now that we've wrapped up talking about Grid, here's a challenge for you to try out your new skills. One of the key parts of Grid is placing your grid items in the correct place on the grid. For this challenge, you're gonna take this rainbow of boxes and use Grid to make it look exactly like this. Note that there isn't any complicated sizing going on here. That white square in the corner is one grid item and the entire grid is six by five. Your HTML has a container div which you can see on line 14 here. Below that, you have eight divs. Each has a class of a different color. These are your color boxes. Just add the grid styles that you need to create a grid and put everything in the right place. There's some other styles in the style sheet that just set up the colors and borders, so you can leave the style sheet alone and write your code in the style tags of the HTML file which you see here starting at line eight. We've learned a lot of different properties that can be…

Contents