Using Grids in Web Design

Craig CampbellJul 31, 2013Lessons: 19Length: 1.9 hours

HTML/CSS HTML

Next lesson playing in 5 seconds

Cancel

Overview
Transcript

3.3 Exploring Unsemantic

The Unsemantic Grid System is the successor to the 960 Grid System. The biggest difference is that the Unsemantic system has a fluid layout that uses percentages instead of pixels for widths.

1.Welcome
1 lesson, 00:50

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

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.6
Coding Columns in Bootstrap
08:25

3.7
The Bootstrap Fluid Grid
01:48

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.5
CSS for a Four-Column Layout
15:01

4.6
Creating a Three-Column Layout
06:41

5.Conclusion
1 lesson, 01:09

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.

craigsoup

Next lesson playing in 5 seconds

3.3 Exploring Unsemantic

1.Welcome
1 lesson, 00:50

1.1
Introduction
00:50

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

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

Using Grids in Web Design

Next lesson playing in 5 seconds

3.3 Exploring Unsemantic

1.Welcome1 lesson, 00:50

2.Introduction to Grid Systems2 lessons, 08:38

3.The 960 Grid System9 lessons, 58:28

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

5.Conclusion1 lesson, 01:09

1.Welcome
1 lesson, 00:50

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

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

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

5.Conclusion
1 lesson, 01:09