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.