Assignment 1
This assignment is intended to get us familiar with HTML and CSS. You may not use any HTML, CSS
preprocessors or libraries to complete this assignment.
Markup
Write an HTML5 file that displays the images in the img.zip file similar to the figure below:
Technical Requirements:
- You must use proper HTML tags, try to incorporate the meaning of the element as much as
possible
- Valid HTML structure (it must be valid HTML5)
- You do not need to add functionality to any of the links
Assignment 1 – due Oct 3 (midnight)
Stylesheet
Add style in a CSS file to create the appearances and behaviours below. A quick demo of the final
product can be found here: https://www2.cs.sfu.ca/CourseCentral/470/bobbyc/a/demo.mp4
- Hovering over the individual pictures will make a “see MORE” button’s opacity transition into
view. It does not need to redirect anywhere.
- Pictures should be displayed four per row, with some space between them. When resizing the
window and the width of the window is less than or equal to 770px, only two pictures per row
should be showing
- The colors and spaces should somewhat match the demo.
- Requirements that are not stated here are up for interpretation.
Technical Requirements:
- You may make reasonable assumptions about text or colors.
- You may only use CSS (no CSS libraries such as Bootstrap or preprocessors such as SASS),
- No JavaScript is allowed for this assignment.
Submission
For this assignment, you will not need to deploy to Google Cloud. You may submit a zipped file to
coursys: courses.cs.sfu.ca before the due date. Unfortunately, no late assignments will be accepted.
