Mar 5: P3 Layout Exercise (In-lab)
As part of your P3 submission, you will be completing a series of in-lab exercises. This exercise has you starting to work with CSS to create a more complex layout.
This exercise is worth 2 of the 10 marks for P3: HTML/CSS.
To help guide you in this process — and to introduce you to the in-lab exercises for the course — we have some basic rules to set up:
- 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 grade is forfeit. A simple solution to this potential problem is to just note where your knowledge is coming from.
For this exercise you will be continuing to work with the HTML and CSS you built as part of the P3 CSS Exercise. Please complete the following before the end of your lab time:
- Open up your submission from P3 CSS Exercise, and make sure you have at least:
- In-text links or navigation buttons.
- A placeholder image.
- At least two levels of heading.
- A couple paragraphs of text.
- An image of your wireframe.
- Style the page to create the following changes in structure:
- Set every element to use the
- As a default, make sure that all elements fit within the browser window. There should be no horizontal scroll bars that appear when you test the page at mobile sizes (approximately 320px wide).
- When the browser window is wider than
32rem, ensure one item becomes positioned next to another — such as the image next to the text, or two paragraphs next to one another. This must be controlled by your CSS, it cannot simply 'happen' because of the sizing of the elements.
- If you have not yet done so, set the meta viewport element in your HTML to ensure your page scales appropriately on mobile devices.
- Set every element to use the
- Add comments through-out the code to indicate what resources you drew upon to complete the exercise.
- Validate the page using the HTML/CSS Validator to find any errors or potential problems in your styling.
If you have trouble uploading your file in lab and you cannot resolve it with the assistance of the TA, please simply submit the required files in a ZIP.
Your submission is due before the end of your lab time.
- 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.
- A Complete Guide to Grid (CSS Tricks): An overview of all CSS grid properties.
- How to Upload to SFU Filespaces Using SFTP: Instructions on uploading files to your SFU filespace.
This exercise will be graded on the following: