Skip to main content

✏️ Practice: Using Floats

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​

Meet the goal by completing one of these projects. Make sure to make commits regularly and push to the project's remote repository on GitHub.

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.

Band Website​

  • 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.

Interior Decorator Website​

  • Create a webpage for an interior decorator.
  • Use floats to make columns to display information and pictures for "before", "during" and "after" renovations.