Part 1 (5 points)

Demonstrate that your container web server is functioning. To do this, take a screenshot of the container running on your system. The screenshot should contain:

  1. A web browser displaying a page hosted by your container
  2. A terminal window showing the directory listing of your public_html directory from within the container

Part 2 (15 points)

Create a web page that is your electronic resume. Style the website to match this screenshot of the website we started in class. The website is going to look outdated (we will fix that in part 3), but the goal of this portion of the homework is to help you practice using various CSS rules.

Information on your web page might include:

Some additional details:

  1. Don't spend your time filling out the resume with content. Create just enough to demonstrate the styling that is required by this assignment.
  2. You should demonstrate all of the styling used in the reference screenshot.
  3. The image in the header is 200px tall. Your image should also have this height.
  4. Except for the image in the header, the dimensions of elements don't need to be exactly the same as in the screenshot, but your submitted page should be fairly similar.
  5. The main header font is called Lobster. It is from Google fonts and not a font that would normally be installed on a client machine. You will need to research how to use a downloadable font and incorporate it into your page. The headings for the resume sections use Oswald, and the body of the page uses Lora.
  6. The various lines are drawn by setting borders.

Part 3 (10 points)

Re-style your resume using the Bootstrap theme. This portion of the assignment is intentionally vague. Take some time to look through the provided documentation, and set up a page that you like.

This part of the assignment will be graded using the following criteria:

  1. Did you use appropriate Bootstrap classes for each part of your page?
  2. Is the page usable? Is information easy to find on the page?
  3. Did you use a variety of Bootstrap elements? Use more than just the styling for div elements. There are lots of things to try out on the "CSS" and "Components" pages. Be creative, and try some of these out!

Note: Your content and layout do not need to be the same as in the previous part.

What to submit

In addition to the files required by the parts above (screenshot, at least 2 html files, and supporting resources), submit a text file named references.txt. In this file, provide a citation for each resource you used (excluding class notes, and assigned readings) to complete the assignment. For example, if you found a Stack Overflow answer helpful, provide a link to it. Additionally, provide a brief description of how the resource helped you. Your file should look something akin to:

uvaid: mst3k

http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
Helped me to use a glyphicon correctly.

Also provide a readme.txt file that includes your UVA computing ID and directions identifying which files are associated with each part of the assignment. For example:

uvaid: mst3k

Homework 1

part_1.png -> screenshot for part 1

part_2.html -> main page for part 2
requires "kevin.png" and "uva.png"

part_3.html -> main page for part 3
requires "kevin.png" and "uva.png"

Make a zip archive named with your UVA computing ID and "hw1" that includes all of the required files (zip -r [zipfile.zip] [directory_to_zip]). Upload this to the submission website.