CSS Exercise (Sept 14)
This exercise is required.
This week's exercise has you styling a portion of your style guide using CSS.
Using your last week's exercise deliverables or the style guide template as a starting point, apply the following styling to the guide using a linked CSS file.
- Change the default font.
- Add space between
- Add a different hover and focus state styling to the in-text link.
- Add a different hover and focus state styling to the image as a link.
- Shorten the default width of the
<p>element, but ensure it is still responsive when the viewport shrinks.
- Style the
<label>using Building Forms (Shay Howe) as a guide. Add HTML as necessary to allow further control of the styling, and make sure:
- The label and text input look visually related.
- The text input shows us when it has been interacted with, both on hover and focus.
Once done styling the guide, please:
- Add comments through-out the code to indicate what resources you drew upon to complete the exercise.
- Validate the page using the CSS Validator (W3C) to find any errors or potential problems in your markup.
- Please upload your file to your SFU filespace and submit the URL to the Canvas assignment.
If you have trouble uploading your file in lab and you cannot resolve it with the assistance of the TA, please simply submit the HTML and CSS files in a ZIP.
Your submission is due before the end of your lab time.
Please remember the rules for this exercse:
- You can use online resources, course materials, your TA, and lab-mates for support. This being said, others are not allowed to do your work for you. Also, if you are drawing from online resources, course materials, your TA or peers, you must;
- Cite any knowledge that is not yours in a comment in the code. The internet is a glorious repository of information and you are welcome to draw on it, but you must let us know when something does not originate from your own knowledge.
- If work has been copied without citation the entire exercise portion of the final grade is forfeit (it totals to 5% of the final grade). A simple solution to this potential problem is to just note where your knowledge is coming from.
- CSS-101: An interactive introduction to the basics of CSS.
- CSS Reference (Mozilla Developer Network): An overview of available CSS properties and selectors as well as links to their definitions.
- CSS Validator (W3C): A CSS validator to help you find errors in your stylesheet.
- Building Forms (Shay Howe): A good introduction to building forms.
- How to Upload to SFU Filespaces Using SFTP: Instructions on uploading files to your SFU filespace.