Skip to content

HTML 2 – Scannable Text

Your task is to fix this text, so that it is:

  • cut by at least half
  • formatted for the screen
  • easy to scan
  • written for the web.

You can edit the text down as much as you’d like. Keep in mind all the points we talked about in the lecture. You can edit this directly in HTML. To download the page, right-click and save as html or source into your root folder.

Typography

Once you’ve rewritten it and marked up the HTML, your goal is now to make this visually interesting using type. Pick a typeface (or two) from Google fonts and embed it in your page.

Mark up the CSS so that you’re using a percentage/rem-based method of measuring your text.

Help with column width

As it stands, the column is too wide for comfortable reading, so we will need to add some CSS to control that. In the <style></style> tag, add the following:

#box {width: 700px; padding: 25px; margin: 0 auto;}

Now, within the <body></body> tag, you’ll need to add one more tag and an attribute. This goes right after the opening <body> tag:

<div id="box">

And this goes right before the closing </body> tag:

</div>