First of All…
Please download the files for the exercise.
In the downloaded archive, there is one HTML file, a folder of images, and a folder of screenshots.
For this exercise, you are making a front page of a magazine-style site. There are two designs: one for regular marks and one for bonus marks.
The bonus marks design continues from the end of the regular marks design, so do the regular one first, and then decide if you want to do the bonus marks design.
You may not use floats.
Regular vs Bonus…
If you compare the regular full-size and the bonus full-size screen shots, you will see the following differences:
- The Site Header Text Treatment
- The Site Header First Letter Treatment
- The Triangular “Cutting” of Each Feature Image
The differences in the designs are also present in phone view.
In order that you do not take unnecessary risks in a test situation, please do the “bonus” exercise work on an additional stylesheet. That way, if it doesn’t work, you can just delete the link to the bonus styles, and be content with regular marks. Remember, also, that you do not have to do the bonus part.
The HTML
I have given you a lot, but not all, of the HTML required. You will need to write the FORM, for example. Feel free to add to or modify the HTML in any way, but try to get as close to the screenshot designs as possible.
The Form
Firefox has an amazingly full-featured screenshot ability, but it cuts off screenshots above a certain size. For that reason, I have included screenshots of the FORM at Desktop and Phone widths. The form is at the bottom of the page. It has two different layouts (like the rest of the exercise).
Fonts & Colors
Any sans-serif text is the Google font Fira Sans Condensed. You decide which weights from looking at the screenshots.
Any serif text is the georgia font stack.
Try to get the colors and spacing as close to those in the screenshots as possible.
Marking Details
| Phone Layout | 2 |
| Desktop Layout | 8 |
| Form Layouts | 6 |
| Header (including NAV) | 4 |
| Possible Bonus Marks | 5 |