Personal Home Page (20% of total grade)
Due date: October 14, 2020
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/Glitch, 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.
The following are minimal requirements. Students are strongly 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.
Requirements:
-
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 a 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 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, or another similar tool. (We will demonstrate one or more of these services service and how to use it in class.) Other file hosting options are also available if students want to try self-hosting or other means.
A suggestion on how to start:
- First create a plan for the pages you'd like to include, along with an outline of what will appear on each page
- Create a basic, valid HTML5 template, and save a version for each of those pages
- Then, link those pages together
- Then, add basic content to the pages using block elements
- Then, add images to the pages
- Then, style the pages as you'd like, adding attributes to the HTML elements and controlling how they are styled--across all pages--using an external style sheet
- From there, make sure the other details and requirements for specific pages are in place
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.