Exercise Wednesday

Goal: In the Laying out with floats lesson, we learned how to use floats to:

  • Wrap text around an image
  • Create sidebars
  • Create pages with multiple columns

In this exercise we'll practice these concepts by creating new webpages, and utilizing floats to organize their layouts.

Warm Up

  • What different options are available when using floats?
  • What can be accomplished with floats?

Code

Floats Practice

Practice using floats to position images, create sidebars, and make column layouts. Again, don't forget to create a separate folder for each project below, make commits regularly and push all changes to a remote repository on GitHub.

  • Create a website for your favorite band.
  • Add a sidebar for upcoming shows and style it so it stands out on the page.
  • Add images to the webpage and float them either to the left or right.
  • Create a webpage for an interior decorator. Use columns to display information and pictures for "before", "during" and "after" renovations.