"My Major" Web Page

---

This project will give you further practice with HTML, but the real challenge will be carefully using CSS to render the style for the page.

---

For this project you will create a webpage about your major. It will look very similar to the example, shown here.

Warning: This project requires a significant amount of time. Please start working on the project immediately. Office hours get busy during the few days before the project is due, and you may not get the help you need if you wait too long. As always, we will not grant project extensions due to technical problems on your end.

---

We strongly recommend creating a folder (visible within Komodo Edit) called "Project2". All of the work you do on this project should go in this folder. This includes the HTML page that you will create, which you should call "index.html", the CSS file that you will create, which you should call "project2.css", and the four photos that go along with your page.

---

• You must create two files, named: index.html and project2.css. The HTML file will link to the CSS file, as usual.
• All of your style properties must be defined in the CSS file. You will lose points for any style properties defined in the HTML file.
• Your webpage must look exactly like the sample page (same elements rendered with the same style), except:
  • You must change the text to be about yourself and your major.
  • You must include photos and captions that are relevant to your major.
  • You may use any colors that you want.
  • You must find a small image to use for the background. The image should be "tiled" (repeated) so that it fills the entire background, both horizontally and vertically.
• The images of "historical figures" should be rendered as squares of size 140px by 140px. (Be sure these sizes appear in your CSS file, not in your HTML file!)
• The only fonts you may use are arial and impact. You must use these fonts in the same way that we have, and incorporate the same stylistic features that we have including underlining the heading and making the first letter appear very large in the two sub-headings.
• Items that appear centered in the example must be centered in your page.
• IMPORTANT: The page must look correct when it is resized.
  • Here is a screenshot of how it should look when the page is made very narrow.
• You must use the same style and width that we have used for borders.
• Both your html and your CSS must validate according to these validators:
  • HTML validator: http://validator.w3.org/#validate-by-upload
  • CSS validator: http://jigsaw.w3.org/css-validator/#validate_by_upload
• You must use proper indentation in your code (both in the HTML file and the CSS file).
• Be sure to test your project with the Chrome browser -- that is how we will test it.
• You may not use any authoring tool (Dreamweaver, Frontpage, Word, etc.) that generates the HTML for you.
• You must implement this project by yourself.
• When referencing your images, be sure to use just the name of the image, not a complete path name.
• We do not accept email submissions of projects under any circumstances. See the instructions below for the proper procedure for submitting your work. If you are not sure how to create a zip file and how to submit this zip file, it is your responsibility to visit TA office hours before the due date to ask for help. We will not grant extensions on the project due date because you were not able to submit the project successfully.
• This project is to be done individually. Students who are found to have collaborated on the project will be prosecuted for academic dishonesty.
• We have limited space on our submission server. Please be sure that none of your photos are more than 1MB (1 megabyte) in size, and that the total size of your project (including all of your photos) will not take up more than 8MB. The server will reject submissions that are too large.
• DO NOT POST YOUR SOLUTION TO THIS PROJECT ON ANY WEB SERVER.

---

• The easiest way to create the main layout is to use a table inside of another table.
• Notice that the margin at the top, left, and right of the page stay the same size, even when the webpage is resized.
• If you are having trouble getting an element to align either at the top or the bottom of its container, you might try setting the "vertical-align" property instead of adjusting margins/borders.

---

You will be submitting a zip file. Please be sure that all of your work (your HTML file, your CSS file, and your photos) are in a folder called "Project2". Create a zip file that includes this folder, as follows. On Windows, right-click the folder, then choose "send to, compressed (zipped) folder". DO NOT USE A UTILITY LIKE 7-ZIP OR WINRAR. The procedure is similar on a Mac.

You will not receive credit for submitting a file that is not a standard "zip" file. In particular, "rar" files or "7z" files will not be graded. Submit the zip file to the submit server, by logging in, selecting Project 2 (My Major), and uploading the zip file to the server. You may submit as many times as you like -- we will only grade the last submission. Late submissions received up to 24 hours beyond the deadline will be accepted, but will be penalized 20 points. No submissions will be accepted more than 24 hours past the deadline.

After you have submitted the project, we strongly recommend downloading your submission from the submit server. It will give you a zip file. Unzip this file and verify that the contents are as they should be. It should contain your HTML file, your CSS file, and all of your photos.