CSE 154

Lab 2: Page Layout Techniques with CSS

Today's Lab Exercises

Today you'll get practice with styling pages specifically for layout.

  1. Arrange Your Page into Sections
  2. Spacing With Padding and Margins, Backgrounds
  3. Float, Alignment and Clear
  4. Flexbox

Reminder: practice using your browser's page inspection resources! You can review slides from Lab 1 if needed.

Exercise 1: Layout a skeleton (20 minutes)

  • Download this skeleton HTML file with this support image and open the webpage in your text editor (Sublime, Atom, Notepad++, etc.). Recall that you can download an HTML file by either right-clicking the link and selecting "Save As..." to save in a local folder of your choice, and you can download an image by right-clicking the image and selecting "Save As..." in the same manner (as you'll see in example.html, the path to the support image assumes it is in the same directory as the HTML file).
  • Follow the instructions in the HTML page to add page sections, and change the layout.
  • To start out, you'll need to create and link in a CSS file.
  • From there, the HTML elements explain what to do.
  • See the next slide for a sample output.

Sample output (click to view in full size):

Note that your browser window size will definitely affect how the page is rendered. The sample image was generated on a wide screen, so it is possible that your page will flow differently.

Exercise 1: Solution

You can find our solution to Exercise 1 here.

Exercise 2: Flexbox

Flexbox is a set of CSS properties useful for aligning block level content into various layouts.

Flexbox can help manage how the elements should be sized relative to each other.

Like the position property, you have to think about your content in terms of the elements themselves, and the containers they are in.

The most complicated thing about flexbox is that the content can "flex" in either direction: horizontally into rows, or vertically into columns.

Basic properties for the flex container

display: flex;
makes an element a "flex container", items inside automatically become "flex items"
justify-content: flex-end; (flex-start, space-around,...)
indicates how to space the items inside the container along the main axis
align-items: flex-end; (flex-start, center, baseline,...)
indicates how to space the items inside the container along the cross axis
flex-direction: row; (column)
indicates whether the container flows horizontally or vertically

Basic properties for the flex items

flex-basis: 20%; (3em, 50px,...)
indicates the default size of an element before the extra space is distributed among the items
align-self: flex-end; (flex-start, center, stretch,...)
indicates where to place this specific item along the cross axis

Exercise 2: Flexbox Froggy (30 minutes)

There are great tutorials out in the world to help learn flexbox. This CSS-Tricks one goes into a deeper explanation of the flex properties and has some great examples to compare each - it's a great bookmark resource to reference for this class!

For the remainder of the lab, you are to work on Flexbox Froggy, which is CSS game for learning the basics of Flexbox. It's fairly self-contained, but feel free to talk to your neighbor with any questions or let your TA know if you run into anything you're not sure about along the way!

Flexbox Froggy