If you want to practice float-based layout techniques, here are a few exercises. There are some very useful techniques contained in these exercises.
If we have not yet covered a technique or tag yet in class, google it.
Berlin Photo Gallery
Go to this page and download the files and follow the setup instructions. This exercise has a lot of hints in the instructions. It also has a highly annotated (HMTL & CSS) solutions file to download, if you want.
Upside Down Mag
Go to this page and download the files and follow the setup instructions. This exercise has a lot of hints in the instructions. It also has a highly annotated (HMTL & CSS) solutions file to download, if you want.
The other exercises, below, are arguably harder, and they have much less hints. Try them if you like a challenge.
Gibson Vs Fender 1
Download these files. Read the included Instructions file. Build the various responsive layouts shown in the included screenshots.
Techniques Required
- Floats
- Clears
- Clearfix
- “CSS Math”
- Border-radius
- Position (for the heading / border trick… )
Gibson Vs Fender 2
Download these files. This package does not include an instructions file. Just build the various responsive layouts shown in the included screenshots.
Techniques Required
- Floats
- Clears
- Clearfix
- “CSS Math”
- Nested Elements
PedalMania
Download these files. Read the included Instructions file. Build the various responsive layouts shown in the included screenshots.
Techniques Required
- Floats
- Clears
- Clearfix
- “CSS Math”
- Background Images
- Background Color
- Tables
- Hover
- Position (for the heading – border trick… )