Download the Lab5-starter.zip file. Unzip it, and take a look inside. You will find an index.html file, and a few subfolders. One of the subfolders is named images, and contains an image that you will need to complete the lab. Another subfolder contains a file called lab5.css — that one is a CSS that you will work with in order to complete today’s lab. Refer to files inside the _references subfolder to see a mockup and style guide.
Most of the work for this assignment will take place in the lab5.css file, however you will also have to modify the index.html file to add the <link> elements that will specify the google fonts style sheet. Look at the HTML document source to see what selectors you will need to use, and refer to the mockup.png file to get an idea of the look you are going for.
FOR THOSE SUBMITTING ONLINE: If you submit the assignment (with requisite permission from TA), the only file you will need to upload is your modified lab5.css.
Grading will be on how closely you can make your webpage match the mockup. Each of the following criteria are worth up to two points, depending on how closely (or not) you come to achieving the look in the mockup:
- 2 pts: The fonts match those in the style guide, or look close to the mockup (these fonts are available on fonts.google.com)
- 2 pts: The image is present and positioned as in the mockup
- 2 pts: Margins and padding of the elements are very similar
- 2 pts: Colors match those in the style guide
- 2 pts: Border treatment on the left and right sides of the content matches the mockup
