Photograph of Buen Pastor Church in Ponferrada, Spain
Part of the CSS Reading List

With an understanding of and the fundamentals of , you’re ready to create your first web pages with a sense of design and style.

It’s important to understand that design in web development suggests how pages be displayed. CSS is not a series of ironbound rules. Web pages are fluid by default: content automatically flows inside the browser, scaling and wrapping to fit on any screen. Design may constrain or enhance that behavior, but it is only ever a guide for web content.

Web page layout is very broadly divided into two categories: “fluid” and “fixed”. Fixed layout is the easiest to implement, and what we’ll start with here. Fluid design – also known as responsive design – is more challenging, but we’ll do a little of that too.

Prerequisites: The CSS reading list to this point

Time: 90 minutes

Core Material

  1. Single Column Text
  2. Exploring Simple Layouts
  3. Multiple Columns
  4. CSS Grid Layouts
  5. Newspaper-Style Columns
  6. Causes of Gaps in Layouts
  7. Solving Overflow Issues

Optional

  1. 7 Ways of Centring with CSS
  2. float: center
  3. Balancing Text and Images with Flexbox

Suggested Reading

Read Chapter 15, Layout, from HTML & CSS by Jon Duckett, and Chapter 16, Page Layout With CSS, from Learning Web Design by Jennifer Robbins.

Further Resources

Step through the tutorials in Learn CSS Layout.

When You’re Done

Creating one page is just the beginning: placing your styles in a linked style sheet (as you should be) suggests that you will be making many more pages using the same presentation. In that case, you’ll need navigation – ideally, more than a raw list of links – so styling site navigation is what we’ll look at next.

Photograph of Buen Pastor Church in Ponferrada, Spain by Ángel Sánchez García

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.