Bootcamp
Search…
CSS.2: Layout
CSS Layout refers to creating a web page that is designed with sections that are visually differentiated.
In graphic design layout refers to the two-dimensional laying out each of the content sections in a clear and aesthetically pleasing way. This refers to web pages but also print or anything else that is a flat media.
In this course we won't be concerned much with the aesthetic qualities of a design, but we will be concerned clarity of how each piece of information and/or data is presented.

How to do CSS Layout

When constructing the layout of a webpage, the first task is to break down each section of the page into nested parts. Every website layout breaks down into these nested boxes. Can you find these sets of nested boxes in the web page examples below?
Even if you don't see the clearly defined set of boxes on a given website, CSS / HTML still contains the same structure. There may be hidden lines that separate sections, or tricks to make the lines appear skewed or mis-aligned. But, the underlying structure of every webpage layout is still composed of right-angle boxes.

Exercise

Tribute Page

Use the above technique to divide the page below into its constituent boxes.
No need to do user story #8 because it will be covered later. You may find the text-align: center style rule helpful for this exercise.
Copy link
On this page
How to do CSS Layout
Exercise
Tribute Page