Given the above image named
ralphy.gif (it is an animated GIF) 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:
ralphy.gif(e.g., "Now you listen to me!...")
ralphy.gif(e.g., "And the only reason I gave...")
The entire image
ralphy.gif is 500px x 560px.
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 email@example.com: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>Ralphy</title> <link rel="stylesheet" href="responsive.css"/> <meta charset="utf-8" /> </head> <body> <div class="ralphy"></div> </body> </html>
Caveat: you are NOT allowed to modify the HTML body!
You must also save the
ralphy.gif 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 assignment and 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 file must be directly in the folder of the lab or assignment.
Push all your files (the image
ralphy.gif, 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