LD08: Philip Fonts and Gimp due Tue 19 Oct 13:20

Preparation for Lab Day

In preparation for lab day, do these actions:

1. In your webspace create a directory named hw08 and work in it.
2. Inside the hw08 directory create a subdirectory called css and another one called images.
3. Copy all the JPG and PNG files from https://josephus.hsutx.edu/classes/w1/philip/images/ into hw08/images.
4. Download the normalize.css file from https://necolas.github.io/normalize.css/ and install it into hw08/css.
5. Create main.html and have it load normalize.css in the head.
6. In the body of main.html display on the page one of the images in the images directory.

On Lab Day

1. Begin by showing the instructor the source of main.html.

2. Create a new CSS document in your css directory that will hold your custom CSS commands for the default view of the page. In this document set the box-sizing property on all elements to border-box as usual.

3. In your HTML document load your new CSS file after loading normalize.css.

4. Visit https://fonts.google.com/ and look for a font that you consider to be interesting. Click on the “+” beside the font name (which will create black box at the bottom of the screen). Click on the black box and look at the HTML snippet used to import the font on your page. Copy the html font and paste it into the head of main.html.

5. Modify your CSS document to utilize the new font and then add a paragraph of Lorem Ipsum to verify the font is being used on your page.

6. Read the font specifications for the homework assignment found in:

   https://josephus.hsutx.edu/classes/w1/homework/hw08/

   Replace the font you selected in the previous steps with the required font and verify that your page is using the font properly.

7. Take time to look at the wide target image for this assignment:

   https://josephus.hsutx.edu/classes/w1/philip/design_files/Assessment-wider.png

   Draw a quick sketch of the boxes you see on the page and draw an appropriate wireframe.

8. Now imagine what breakpoints you think might make sense and create wireframes for those.

9. Use GIMP (the GNU Image Manipulation Program) to load Assessment-wider.jpg and use the measurement tool to determine widths of various elements being displayed as well as for various margins. Annotate your wireframe with these values.

10. Add the various boxes and CSS commands to main.html to provide a skeleton of the site you will be creating for homework.

11. Show your work to the instructor. If you finish early you can start work on the homework assignment.