Bootcamp
Search…
📅
Course Schedule
0: Language and Tooling Teaching Guide
1: Frontend Basics Teaching Guide
2: Backend Basics Teaching Guide
3: Backend Applications Teaching Guide
4: Backend Structure Teaching Guide
5: Full-Stack Applications Teaching Guide
6: Frontend Infrastructure Teaching Guide
7: React Teaching Guide
8: Advanced React Teaching Guide
9: Advanced Topics Teaching Guide
🧮
Algorithms Teaching Guide
💼
Interview Prep Teaching Guide
☺
User Experience Teaching Guide
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.
Last modified 2mo ago