CSS, HTML

Float-Based Layout Practice Exercises

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… )
Standard