/Grid-System---L03handsOn

HandsOn learning the grid system with CSS and different column sizes

Primary LanguageHTML

Grid-System---L03handsOn

HandsOn learning the grid system with CSS and different column sizes

INSTRUCTIONS: Lesson 3 Hands-On19 points Directions Throughout the Responsive Design course, you were introduced to Responsive Design and how it can be leveraged to make your applications function better across multiple platforms. A major key in this capability is the ability to use grid systems. With a grid, you can have your elements organized and displayed proportionally across various devices. In this Hands-On Project, you will be creating your very own grid system that you can use on future projects.

Following the elements you have learned in the previous lessons, create a custom grid using a fluid 12 column grid structure. Then, use that grid to place some items on your page. This will allow you to practice placing items of various sizes on your web page.

Requirements 12 Column Grid A Side Navbar that uses the left-most two columns, accompanied by a header to use the remaining ten columns. Three separate columns of text that each take up four columns in the grid. Two images, each position to take up six columns. A footer to use the full length of 12 columns. Tip! When designing your site, have a theme in mind. This can include everything from a color scheme to the placement of items on the page. For inspiration view your favorite online stores.