Personal Home Page (25% of total grade)
Due dates:
- Starter page: October 05, 2022
- Final project: October 19, 2022
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:
- A one-page self-contained HTML starter page that can serve as a template for your other HTML pages.
- Complete at least the steps on slides 36, 37, and 38 here: https://hadro.github.io/info654fa22/slides/class_4.html#36
- Either email Repl.it (or other tool) example to Josh, or show Josh in class the completed self-contained HTML starter page
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 [email protected]
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.