With an understanding of HTML and the fundamentals of CSS, 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
Single Column Text
Exploring Simple Layouts
Multiple Columns
CSS Grid Layouts
Newspaper-Style Columns
Causes of Gaps in Layouts
Solving Overflow Issues
Optional
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.