FREELessons: 19Length: 1.9 hours
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.Welcome
1.1Introduction00:50
1.1
Introduction
00:50
2.Introduction to Grid Systems
2.1What is a Grid-Based Design?02:01
2.1
What is a Grid-Based Design?
02:01
2.2Popular Grid-Based Systems06:37
2.2
Popular Grid-Based Systems
06:37
3.The 960 Grid System
3.1Exploring the 960 Grid System05:28
3.1
Exploring the 960 Grid System
05:28
3.2Coding With the 960 Grid System09:51
3.2
Coding With the 960 Grid System
09:51
3.3Exploring Unsemantic04:16
3.3
Exploring Unsemantic
04:16
3.4Using Unsemantic11:11
3.4
Using Unsemantic
11:11
3.5Twitter Bootstrap03:24
3.5
Twitter Bootstrap
03:24
3.6Coding Columns in Bootstrap08:25
3.6
Coding Columns in Bootstrap
08:25
3.7The Bootstrap Fluid Grid01:48
3.7
The Bootstrap Fluid Grid
01:48
3.8Foundation05:08
3.8
Foundation
05:08
3.9Coding Columns in Foundation08:57
3.9
Coding Columns in Foundation
08:57
4.Why Create Your Own System?
4.1Why Create Your Own System?04:07
4.1
Why Create Your Own System?
04:07
4.2HTML for a Four-Column Layout09:11
4.2
HTML for a Four-Column Layout
09:11
4.3Calculating Widths05:55
4.3
Calculating Widths
05:55
4.4Resetting Styles06:45
4.4
Resetting Styles
06:45
4.5CSS for a Four-Column Layout15:01
4.5
CSS for a Four-Column Layout
15:01
4.6Creating a Three-Column Layout06:41
4.6
Creating a Three-Column Layout
06:41
5.Conclusion
5.1Conclusion01:09
5.1
Conclusion
01:09
