ahandrewh teaches IAT-339web design & development

Introduction

To practice working with positioning in CSS, this week's code task has you practicing placing and positioning elements in different ways to resolve a given layout problem.

Instructions

For this exercise you will be starting with a pre-built set of HTML and CSS files. Please download the starter files.

When you open up the index.html file, you will see there is already some HTML content and CSS styling pre-built for you. Please add classes and CSS styling to the existing structure as necessary to position the content as requested below.

1. Using a combination of relative and absolute positioning the pink overlay on top of the image.
2. Set the pink overlay to fill up the entire container by setting the top, right, bottom, and left properties on the overlay.
3. Using absolute positioning, place the title in the top right corner of the image.
4. Using the z-index property, place the title overtop of the pink overlay.

Once done positioning the content

1. Add comments through-out the code to indicate what resources you drew upon to complete the exercise.
2. Validate your CSS to find any errors or potential problems in your additional styling.
3. Please create a new repository for your exercise on SFU GitHub. Add your files to the repository and push the changes to the remote repository.
4. Submit the URL to the Canvas assignment.

Your submission is due before lecture on Oct 27.

Grading rubric

This code exercise is worth 1% (1 point) of your final grade.

• 0.75 points for completing the exercise.
• 0.25 points for validated code.

Recommended resources

• Guide to CSS Viewport Units: vw, vh, vmin, vmax (Hongkiat): An overview of how viewport units work.
• Learn CSS Positioning in Ten Steps: A good overview of different positioning options in CSS and how to make use of them.
• Uniquely Positioning Elements (Shay Howe): A detailed breakdown of different positioning properties and their application.
• z-index (CSS Tricks): An explanation of how z-index (the CSS layer property) works.

Exercise rules reminder

Please remember that the exercise rules still apply:

1. 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;
2. Cite any knowledge that is not yours in a comment in the code. The internet is a huge repository of information and you are welcome to use it, but you must let us know when something does not originate from your own knowledge.
3. If work has been copied without citation the exercise grade will be zero. Please make sure to include comments indicating where you had assistance or learned.