Initial Setup
First please download the required files.
When you unzip that archive file, you should have a folder called GibsonVsFender-History-Players-Gallery-2019-StartingFiles.
Inside that folder is an index file. I have given you some of the HTML (such as the images), but you will definitely need to add more HTML.
In choosing your HTML, make sure that you consider semantics and ease of styling. Avoid unnecessary repetition of effort.
I have also included normalize.css. Make sure that the link to your stylesheet comes after the link to normalize.
NOTE: a logo PNG file is included in each “player” section: since it’s white, it will look invisible at first, but when you change the background of its container, it will be visible.
Resource
For some of the alignments in the later parts of this exercise, consult the CSS Tricks Guide to Grid.
About the Marks
This exercise is sometimes used for a test. The marks breakdown applies only to tests. If this is a weekly lab assignment, please do the entire exercise, including those parts marked bonus. As a weekly exercise, this will be marked out of 1, as usual.
Screenshots: Full Marks
The download contains a folder of screenshots.
For full marks, make the following layouts:
- Small Size: 5 marks
- Medium Size: 10 marks
- Full Size: 5 marks
Total: 20 marks
You choose all the responsive breakpoints.
All type in the document uses the Georgia font stack.
The only links are in the “pink menu” and the “back to top” link. Make sure that the back to top link actually works. The other links can be “testing links.”
Screenshots: Bonus Marks
There are two “Bonus” tasks. As noted, if this is a test, these tasks allow you to score above 100%.
The bonus tasks are shown in the following screenshots:
- Bonus 1: gallery background goes to browser edge. 5 marks.
- Bonus 2: revised layout for each player. 5 marks.
Possible bonus marks: 10
If you are attempting the bonus sections, please do that CSS in another stylesheet. Put the HTML code linking to it after the link to your original stylesheet.
This way, if you run into any problems with the bonus tasks, you can just comment out or delete the link to this additional stylesheet, and still receive the “regular” marks.
When You are Done
Please name your folder gf-2-yourname, then zip it, and hand it in to our course area (Langara: Brightspace; Emily Carr: Moodle).