Website Design
& Implementation

Update the index.html file for your igme230 GitHub repository to include the following:

• your name (and, optionally, the course name)
• a (recognizable) picture of yourself (If for privacy reasons you do not want to make your name or photo public, please contact me and we'll work out an alternative for you.)
• placeholders for links to your in-class exercises and class projects (keeping in mind that the list of exercises will have at least 20 items, and probably more, before the end of the semester).

Do your best to use the principles of design you learned in prior classes; I want to see the best you can do. (That does not mean putting in every type of bell and whistle you can imagine; keep it simple and clean!) This is your opportunity to make a good first impression :)

Remember to design for your audience–which in this case is me. I’ll be using this page throughout the semester for two tasks: associating your face with your name, and reviewing the work you do in this class. Keep in mind that while sometimes I’ll be viewing your work on a high-res 15.6" ASUS laptop running Chrome on Win 10, I’ll also often be using my 9.7" iPad Pro with mobile Safari, or my 12" MacBook. To ensure that your page works in all of these environments, I recommend testing in a 1024x768 screen layout. (Later this semester you'll learn how to build responsive sites that adapt to the browser window size.)

Your page should use standards-compliant HTML for structure and CSS for presentation. It should be entirely your own work--while it is fine to take design inspiration from other websites, you must write your own HTML and CSS for this assignment. (In other projects, you will have the opportunity to work with existing frameworks and/or templates of code.) I use the W3C's online validators to check your pages:

• W3C Markup Validation Service
• W3C CSS Validation Service

All of your CSS should be in a separate .css file. It should be commented, with explanations as to what the style is accomplishing, so that I know you understand the code you’re using. Here’s an example:

 /* This puts my photo on the right side of the page, 
 adds a thin black border to the image, 
 and leaves 15px of space between the text and the image. */

 #portrait {
   float: right;
   padding: 0px;
   border: 1px solid black;
   margin-left: 15px;
   }
                

I strongly recommend doing frequent commits to your local GitHub repository, and syncing the files regularly, as well. This allows me to see your progress (the web equivalent of "showing your work"), as well as making it easy to move between computers while working, and to roll back changes that you're unhappy with.

I will use this rubric for grading your pages:

Requirement	Possible Points
Located at specified URL (githubusername.github.io/igme230)	1
Recognizable photo and name	1
Placeholders for exercise and project links	1
Uses valid HTML & CSS	2
CSS used for formatting and layout	2
CSS annotated	1
Demonstrates understanding of design principles	2