Prepare
Before doing this assignment, you should definitely have watched these videos:
The Assignment
Create a new project & call it boor. Do not do this assignment in an already-existing project!
Download the following PDF: How To Be A Boor. I took out the pages we don’t care about, so yes, the PDF’s content jumps around.
View this text file that contains the text of How To Be A Boor & copy it (I did that so you would have the text to work with).
Using the text, style webpages that imitate the textual styling of all but the first page of How To Be A Boor (yes, this means 4 webpages in your project). The first page in the PDF (the one with the pig) is there just to give you an idea about the PDF, so ignore it.
Name your pages boor-1.html, boor-2.html, boor-3.html, & boor-4.html.
For each webpage, do the following:
- For the
<h1>, useHow to be a Boor. - Create a small nav bar with links to all 4 pages. The page you’re on should be bold in the nav bar.
- Think of good class names.
- For the fonts, as near as I can tell, Change This used Georgia for serifs & Interstate Light for sans-serifs. Pick different fonts at Google Fonts & embed them using
@font-face. - Figure out any colors yourself using a color picker (for color pickers, see Recommended Software).
- On the last page, instead of using a graphic of an envelope, use a font. Wha?
- In the
<head>of your webpage, add this line:<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> - Place the icon in your webpage with this (use exactly this & then test!):
<i class="fa fa-envelope-o"></i> - Test it using Live Preview in Brackets (you must do it this way—I will explain why)
- For more info, check out Font Awesome (& yes it is!).
- In the
- What about the GO on the last page? That’s not in Font Awesome, so you need to make it yourself.