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.