CSS: Frameworks and Grids

3h 27m – Beginner

Have you wondered if using a CSS framework will speed up your site development? In this course, senior author James Williamson introduces the types of frameworks availableā€”including the most popular choices among working web developersā€”and provides an honest assessment of the pros and cons to using a framework. He guides you through downloading a framework, setting up a directory structure, and building a framework-based site, such as structuring the HTML and working with forms. A separate chapter explores layout grids, often included with CSS frameworks, which provide a simple system for laying out page content.

Topics include:
Understanding boilerplates, grids, and frameworks
Choosing a framework
Building your own framework
Crafting a deployment strategy
Modifying files
Customizing typography and color
Filling in framework gaps
Exploring grid-based syntax
Nesting grids
Using mobile grids

Introduction – 2m 19s
Welcome – 1m 0s
Using the exercise files – 1m 19s

1. Introducing Frameworks – 17m 38s
Boilerplates, grids, and frameworks – 3m 12s
Types of frameworks – 3m 36s
Exploring a minimal framework – 5m 50s
Exploring a comprehensive framework – 5m 0s

2. Choosing a Framework – 21m 43s
Are frameworks right for you? – 4m 46s
Popular frameworks – 10m 2s
What should I look for in a framework? – 2m 37s
Building your own framework – 4m 18s

3. Setting Up a Framework – 44m 12s
Downloading a framework – 11m 40s
Crafting a deployment strategy – 3m 8s
Setting up a directory structure – 11m 56s
Modifying files – 7m 47s
Exploring framework functionality – 9m 41s

4. Building a Framework-Based Site – 1h 19m
Setting up a starter page – 7m 10s
Strategies for modifying styles – 8m 29s
Structuring pages for frameworks – 10m 48s
Customizing typography – 12m 18s
Customizing color – 7m 30s
Working with forms – 10m 41s
Filling in framework gaps – 15m 55s
Utilizing framework capabilities – 6m 56s

5. Building a Grid-Based Layout – 38m 22s
What is a CSS grid? – 2m 40s
Popular CSS grid systems – 4m 35s
Exploring grid-based syntax – 10m 36s
Nesting grids – 7m 20s
Making images responsive – 8m 40s
Using mobile grids – 4m 31s

Conclusion – 3m 37s
Additional resources – 3m 37s

Facebook Comments