ITMD 361: Fundamentals of Web Development

Projects

Project One: Valid, Responsive-Ready HTML

Due Thursday, September 27 by 11:59pm CT

Project Description

For this project, you will create at least three well-formed, valid semantic HTML pages that will form the foundation of your professional web presence. One of the pages must be your professional resume.

Project Goals

Produce modern standards-compliant HTML pages
Write valid, well-formed semantic HTML
Effectively comment on, format, and lint source code for maximum readability
Track the development of a project over time using version control

Deliverables & Milestones

A Basecamp post showcasing your work in progress. Your post should include the URL to your Project One GitHub repository. Include in the text of your post one or two things you would like feedback on from the instructor and other students in the class (due no later than September 13 at 11:59pm CT).
Substantive comments critiquing at least three other student projects (by Thursday, September 20 at 11:59pm CT).
An email to the instructor containing the projects two final deliverables (by Thursday, September 27 at 11:59pm CT):
1. A 4-5 sentence self-critique memo of your project and your progress in class to this point (write in the body of the email; no attachments in this class, ever)
2. The https:// link to your project’s GitHub repository

Requirements

All source files in UTF-8/Unicode character encoding with Unix-style line endings (LF), entabbed with spaces (two spaces per tab)
Well-formed, valid semantic HTML5. Projects whose HTML does not validate with the W3C HTML validator will receive a zero-point, failing grade. In the unlikely event that you discover a validation error or warning that is a genuine bug in the validator, you must acknowledge that bug in the memo that accompanies your project, and point to the relevant documentation, such as specifications or an existing reputable bug report, that your source is in fact correct. Get in the habit of validating and linting your HTML before you commit to Git.
Only structural, semantic uses of HTML elements and attributes. Absolutely no table markup, break tags, or any other use of HTML to achieve a particular page layout. (All layout and design will be handled via CSS in the next project. For this project, I urge you not to spend much time at all looking at your pages in a browser. Stick close to your source code and the HTML validator.) Be sure to use the htmllint linter.
A semantically structured navigation area for accessing each of your project’s pages from any other page
Organized, readable source that is hand-written and original (no WYSIWYGs or code-generators, no Bootstrap or other off-the-shelf frameworks)
Directory-based URLs with use of the default-served index.html file, so that you can point to, for example, example.com/resume/
A Git repository with frequent commits and meaningful commit messages that accurately reflect each set of changes that you make
Do not attempt any visual design in this project; choose your HTML tags for semantics. The next project will add in CSS, which will handle all visual design features
Git repository must contain only the files and commits from this project

Project Two: Responsive, Relative-Unit CSS

Due Thursday, November 8 by 11:59pm CT

Project Description

This project builds on Project One, which you will further revise and fully style with CSS to provide a basic typographic treatment and responsive design that makes judicious use of media queries and relative units (em/rem, vw, %). You will deploy your pages to a server behind a domain name under your control.

Project Goals

Produce modern standards-compliant, mobile-first CSS
Establish site typography with a modular scale, and set type on a consistent baseline grid
Execute responsive design with flexible media and fluid grids, expressed as percentages
Continue to write and revise valid, well-formed semantic HTML
Effectively comment on and format source code for maximum readability
Track the development of a project over time using version control
Deploy web pages to a public server (can be GitHub pages, configured with your own domain name or subdomain)

Deliverables & Milestones

A three-minute narrated or closed-captioned screen-capture video presentation of your work in progress, hosted on YouTube, Vimeo, or another similar service.
A Basecamp post showcasing your work in progress. Your Basecamp post should include:
1. Your name in the subject of the post so it’s easier to track discussions; e.g., Karl Stolley: Project Two Draft
2. the URL to the video of your work in progress
3. the URL to your Project Two GitHub repository
4. and the live URL to your project if you’ve established one by then.
Include in the text of your post one or two specific things you would like feedback or help on from the instructor and other students in the class (due no later than October 25).
Substantive comments critiquing at least three other student projects (by November 4, 11:59pm CT).
An email to the instructor containing the projects final deliverables (by November 8, 11:59pm CT):
1. A 4-5 sentence self-critique memo of your project and your progress in class to this point (write in the body of the email)
2. The public http:// or https:// link pointing to your live project
3. The https:// link to your project’s GitHub repository

Requirements

Multiple linked valid, well-formed semantic HTML files (Project 1, essentially)
All source files in UTF-8/Unicode character encoding with Unix-style line endings (LF), entabbed with spaces (two spaces per tab)
Your HTML and CSS files should all be indented with 2 spaces per level of indent; indent all CSS style rules inside the declaring block, and further indent all rules and blocks inside your media queries
Make use of both the validators and linters to ensure the quality of both your HTML and CSS
Include at least one form of media (image, audio, video) in your project
Semantically structured text-based content to accompany all media elements (image, audio, video). Make use of the <figure> and <figcaption> tags
One single valid, linted, error-free CSS file called screen.css. Do not create more than one CSS file for your project; all styles should be in the same file. Use an id value on <html> or <body> and leverage that in a CSS descendant selector if you need a special style on a particular page.
Directory-based URLs with use of the default-served index.html file, so that you can point to, for example, example.com/resume/
The opening lines of your screen.css file should be the Eric Meyer reset CSS styles
Use of only relative units (em, rem, vm, %) in your CSS; no px, pt, or other absolute units are permitted in your CSS except in media queries
Use at least two min-width media queries to enhance your mobile-first styles for larger screens
Organized, readable source that is hand-written and original (no WYSIWYGs or code-generators, no Bootstrap or other off-the-shelf HTML or CSS frameworks)
A Git repository with frequent commits and meaningful commit messages that accurately reflect each set of changes that you make
Your GitHub repository must contain only the files and commits from this project; you are encouraged to use and further improve your HTML files from Project 1, but create a brand-new repository on your computer and on GitHub

Project Three: Substantial Revision of Your Web Presence

Due Thursday, December 6 by 11:59pm CT

Project Description

For this project, you will substantially revise, refactor, and improve your web presence from Project Two and write some kind unobtrusive JavaScript component to progressively enhance your site.

Project Goals

Revise a previous project based on instructor feedback and any additional knowledge that you have gained since its original submission

Deliverables & Milestones

A reply to your original Project Two (yes, Project Two) draft post on Basecamp that includes your list of planned revisions for Project Three, including the JavaScript component you plan to develop and include. Post this after you’ve received feedback from the instructor on your final Project Two but before Saturday, November 17 at 11:59pm.
An email to the instructor containing these three deliverables (by December 6, 11:59pm CT):
1. A 5-8 sentence self-critique memo describing the specific revisions that you made to your project, and how it improves your work over Project Two
2. The https:// link to your project’s GitHub repository, containing both your original commits and the commits for your project revisions
3. The public http:// or https:// link pointing to your live project

Requirements

Multiple linked valid, well-formed semantic HTML files (Project 1, essentially)
All source files in UTF-8/Unicode character encoding with Unix-style line endings (LF), entabbed with spaces (two spaces per tab)
Your HTML, CSS, and JavaScript files should all be indented with 2 spaces per level of indent; indent all CSS style rules inside the declaring block, and further indent all rules and blocks inside your media queries. Indent inside of all blocks in JavaScript.
Make use of both the validators and linters to ensure the quality of HTML, CSS, and JavaScript
Semantically structured text-based content to accompany all media elements (image, audio, video). Make use of the <figure> and <figcaption> tags
One single valid, linted, error-free CSS file called screen.css. Do not create more than one CSS file for your project; all styles should be in the same file. Use an id value on <html> or <body> and leverage that in a CSS descendant selector if you need a special style on a particular page.
The opening lines of your screen.css file should be the Eric Meyer reset CSS styles
Use of only relative units (em, rem, vm, %) in your CSS; no px, pt, or other absolute units are permitted in your CSS
Use at least two min-width media queries to enhance your mobile-first styles for larger screens
Use JavaScript only for progressive enhancement. All site content and basic functionality (e.g., clicking links, viewing images and other media, and scrolling) must still be available even in the absence of JavaScript.
Absolutely no on- or other deprecated event attributes in your HTML. Handle all events via event listeners in your JavaScript. The only element of your HTML that should contain any references to JavaScript should be a <script> element that loads your JavaScript file, and possibly also your DOM-manipulation framework. In other words, keep your JavaScript unobtrusive to progressively enhance your HTML.
Avoid using JavaScript to manipulate your CSS whenever possible. Limit JavaScript to manipulating the DOM, including adding and removing state classes, and keep style information and transitions where they belong: in your CSS file.
Organized, readable source that is hand-written and original (no WYSIWYGs or code-generators, no Bootstrap or other off-the-shelf frameworks). A JavaScript framework for basic DOM manipulation is permissible, such as jQuery or a lightweight alternative such as Umbrella JS or Shoestring.
Directory-based URLs with use of the default-served index.html file, so that you can point to, for example, example.com/resume/
A Git repository with frequent commits and meaningful commit messages that accurately reflect each set of changes that you make
Your GitHub repository must contain the files and commits from both this project and Project Two. You are welcome to create a new remote for Project Three, but be sure that it includes your Project Two commits, too.