Video icon 64
Want to be a web designer? Skill up fast with video courses from Tuts+. Start your free trial.

Using Grids in Web Design

with

Building your website with a grid system is great for a clean and organized layout. This course covers the 'how' and 'why' of using a grid for web design, and will equip you with the skills needed to make your own grid systems. 

1× speed

Free Preview: Using Grids in Web Design

Introduction

00:50

1.Welcome
1 lesson, 00:50

Free Preview
1.1
Introduction
00:50

2.Introduction to Grid Systems
2 lessons, 08:38

Free Preview
2.1
What is a Grid-Based Design?
02:01

2.2
Popular Grid-Based Systems
06:37

3.The 960 Grid System
9 lessons, 58:28

3.1
Exploring the 960 Grid System
05:28

3.2
Coding With the 960 Grid System
09:51

3.3
Exploring Unsemantic
04:16

3.4
Using Unsemantic
11:11

3.5
Twitter Bootstrap
03:24

3.6
Coding Columns in Bootstrap
08:25

3.7
The Bootstrap Fluid Grid
01:48

3.8
Foundation
05:08

3.9
Coding Columns in Foundation
08:57

4.Why Create Your Own System?
6 lessons, 47:40

4.1
Why Create Your Own System?
04:07

4.2
HTML for a Four-Column Layout
09:11

4.3
Calculating Widths
05:55

4.4
Resetting Styles
06:45

4.5
CSS for a Four-Column Layout
15:01

4.6
Creating a Three-Column Layout
06:41

5.Conclusion
1 lesson, 01:09

5.1
Conclusion
01:09


Preview for Using Grids in Web Design
Lessons:
19
Length:
1.9 hours
Craig has been doodling on computers since the first time he opened Paintbrush in Windows 3.0 in 1990. Since then, he has constantly sought new and exciting ways to make beautiful things on computers.
+ Expand Bio- Collapse Bio