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:
software.png(i.e., the one that reads "How the customer explained it")
The entire image
software.png is 640px x 480px.
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:
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
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 firstname.lastname@example.org:tuftsdev/comp20-firstletteroffirstnamelastname.git;
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
<!DOCTYPE HTML> <html> <head> <title>Software Development</title> <link rel="stylesheet" href="responsive.css"/> <meta charset="utf-8" /> </head> <body> <div class="software"></div> </body> </html>
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
Each lab shall include a
README file that describes the work. This description must:
README.txt) or in Markdown (
README.md). Markdown is preferred. No other formats will be accepted. Please use all capital letters for
README.md file must be directly in the folder of the lab.
Push all your files (the image
software.png, the stylesheet
responsive.css, the HTML
index.html, and your
README.md) 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
# 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.
responsive.cssstyle sheet following all the instructions above