Personal Home Page (25% of total grade)
Due dates:
Background As a web-conversant 21st century information professional, a familiarity with common site-creation principles and techniques isn't just important, it's essential. In contributing to the profession, you will likely be called upon to create or manipulate any variety of web-based sites, pages, and templates, in addition to potentially helping users create and maintain sites and profiles of their own. Likewise, a web-savvy 21st century information professional ought to have a web presence of their own creation and under their control. This assignment is designed to serve as a first milepost on the road toward both of these goals.
Scope Building on skills, tools, and technique introduced in class, students will create from scratch a linked series of web document featuring biographical information, images, and outbound links relevant to student interests. Required elements will include: a home page, three additional linked pages, an external style sheet, hidden commented code in both HTML and CSS documenting sections and style choices, at least one web-optimized image on each page, inclusions of alt tags on images for accessibility, and at least one HTML table element. The personal homepage should demonstrate the cumulative knowledge of coding and design skills covered in the course, as well as the integration of design considerations from other sites and examples discussed in class. Students will host code on Repl.it, or another service of their choosing.
N.B.: This assignment is going to take trial and error, and a good amount of outside reading, research, and reference tool use—so get started early.
Likewise, checking your work on multiple computers and in multiple browsers before turning in the project will head off a lot of potential errors.
The Tech Tutor is available to help you with specific questions.
Keep in mind, the following are minimal requirements. Students are encouraged to include more than the elements listed here, and to experiment with more advanced markup and coding concepts, but everything noted below must be present.
If students don’t want to put personal information of any kind on the web, it’s acceptable to use a made-up name and/or made-up details for things like the resume page, interest, etc., as long as Josh knows that the work is yours when you turn it in.
Due on or before October 5:
Due October 19:
A home page with linked navigation to at least three other pages on the site
Homepage should be labeled "index.html"
One of the other pages must be a résumé page, including brief descriptions of recent professional activity
One of the other pages must be a personal interests or "inspirations" page
The character of the third additional page is at the student's discretion, but may usefully be used as a showcase of student work, links and excerpts to student's writings on the class blog, etc.
All pages must validate without error flags according to the HTML5 doctype using the W3C validator: http://validator.w3.org/ (Validator “Warnings” will not count against you, but formal errors will result in deducted points)
All pages must include:
Correct HTML5 header information
A properly constructed page Title in an HTML <head> element
Properly nested HTML elements within the <body> element
Proper use of both block-level elements and in-line HTML elements
CSS styling governed by a linked external style sheet labeled "style.css"
At least one web-optimized image (GIF, JPG, or PNG) on every page
Images must have explicitly defined dimensions
All images must include ALT text
Images are to be stored within a folder labeled "assets"
Links to the other required site pages using the html5 nav element
Other requirements:
At least one HTML file must be inside of another folder
The homepage and the linked external CSS style sheet must both feature at least one comment in the code (i.e., HTML comment on homepage, CSS comment in stylesheet)
Students must use at least one correctly constructed HTML table; student contact information on the homepage would be one good way to accomplish this
At least one valid use of the html5 aside element
At least one valid use of the html5 footer element
To turn the project in, students will send a single link to the homepage of the linked set of pages hosted online. To do this students will need to host their code somewhere accessible to the instructor. The simplest way to do this is to use repl.it; Glitch (https://glitch.com/), Codepen, and other tools are available if desired but clear it with Josh first if you’re not going to use Repl.it. Likewise, other file hosting options are also available if students want to try self-hosting or other means.
Email a link to your assignment to josh.hadro@gmail.com
A suggestion on how to start:
Sites that you may find helpful, in addition to those listed among the class readings:
http://www.w3.org/MarkUp/#tutorials
http://www.w3.org/Style/CSS/learning
And many other resources on the web.
A variety of HTML and CSS reference materials are also available at the Pratt Manhattan Library.