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