Thomas Wallace

Lectures and Resources

Fluid Grids

The Flexible Grid

The Future of the Grid

Assignment

Read Chapter 3 in Responsive web Design

Create your own grid-based page using the sample HTML we generated in class. You should use different dimensions and gutters for this assignment. Use the approach we covered in class to make sure you understand the process. Please upload the assignment to your hosting. Be sure to link it up from your workspace index. If you need a bit of help here is the general workflow…

  1. Create a directory structure and base HTML. You can use the HTML from the codepen along with boilerplate if you like.
  2. Generate a Grid ( Experiment with Different Tools )
  3. Implement grid on the sample html file using pixels
  4. Convert to a percentage-based grid
  5. Publish and link the assignment from your course index.

In preparation for Thursday’s session, please thoroughly review this article on CSS Media Queries