Layouts

Typesetting

In this in-class exercise, you will take a single image and some text, and develop 3 different layouts.

Pull the latest code into the webtype-demos repo via Github Desktop, and copy over the files from week2 folder into your own repository, in a folder called layout-exercise.

• You may want to review some of this week’s suggested tutorials before diving in
• See layouts for technical notes

1. Optimize your assets for web

• Optimize the image circle-of-fifths-scale.jpg for web use, at a maximum of 500px wide
• Consider the appropriate file format to save it

2. Markup the text with semantic HTML

• Use the text in seven-principles.txt to markup in HTML

3. Organize your elements to recreate the following layouts

• Add CSS styling to create 2 different versions
• Choose two from the below three layout options
• It may benefit you to reuse (at least some) of the html from other layouts
• Keep your layouts in their own respective folders for easier management