COMP 20: Web Programming

Lab: Responsive Design

Lab Objectives

  1. Practice reading HTML.
  2. Practice writing CSS.
  3. Understand what responsive design is.
  4. Understand the engineering technique of using sprite sheets.


The image

Given the above image named software.png and using only one HTML file named index.html and only one CSS file named responsive.css, create a web page where if you resize the browser screen width, a different part of the image will be rendered. That is:

The entire image software.png is 640px x 480px.

Getting Started

This is the first lab / assignment that you are required to use the private GitHub repository I created for you. One reason why am I requiring you to use a private GitHub repository is to prevent academic dishonesty. Another reason for the private GitHub repository is so myself or the TA can pinpoint mistakes and make comments directly. There is also a third reason. To access you private GitHub repository I created for you:

  1. Log into GitHub (the website)...
  2. ...then go to You can accept invitation to your private repo there.

On your workstation, create a new folder that is exactly the same name as the private GitHub repository I created for you. For example, if your private GitHub repository is named comp20-firstletteroffirstnamelastname, run mkdir comp20-firstletteroffirstnamelastname. Please replace firstletteroffirstnamelastname with your username I gave you (first letter of your first name followed by your last name). Then run the following commands:

cd comp20-firstletteroffirstnamelastname; #the folder that you created
git init; #make the folder into a Git repository
mkdir responsive;
git remote add origin;

I am going to give you the HTML so you do not have to write it! Copy and paste the following HTML below into an index.html in your responsive folder:



  <title>Software Development</title>
  <link rel="stylesheet" href="responsive.css"/>
  <meta charset="utf-8" />

  <div class="software"></div>

Caveat: you are NOT allowed to modify the HTML body!

You must also save the software.png image in the same location as your index.html folder. Right-click on the image (see above) and do a "Save Image As..."

Your job is to write responsive.css.

Readings and References


Each assignment and lab shall include a README file that describes the work. This description must:

  1. Identify what aspects of the work have been correctly implemented and what have not.
  2. Identify anyone with whom you have collaborated or discussed the assignment.
  3. Say approximately how many hours you have spent completing the assignment.
  4. Be written in either text format (README.txt) or in Markdown ( Markdown is preferred. No other formats will be accepted. Please use all capital letters for README

Submitting Your Lab

Push all your files (the image software.png, the stylesheet responsive.css, the HTML index.html, and your to a folder named responsive inside of the private GitHub repo I created for you. Say that your private repository is named comp20-mchow, make sure all the files are pushed to comp20-mchow/responsive.

# Inside your private GitHub repo folder (e.g., comp20-mchow)
git add .
git commit -m "Some good commit message here"
git push


This lab is worth 4 points.