Major Projects

Project One: Valid, Responsive-Ready HTML Due Wednesday, September 21, 11:59pm CT

Project Description

For this project, you will create at least three richly structured HTML pages that will form the foundations of a professional web presence for yourself. 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 and format source code for maximum readability
  • Track the development of a project over time and collaborate with others using version control

Deliverables & Milestones

  1. A Basecamp post describing your work in progress. Your post should include the URL to your 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 9).
  2. Substantive comments critiquing at least three other student projects. (by September 14, 11:59pm CT)
  3. An email to the instructor containing the projects two final deliverables (by September 21, 11:59pm CT):
    1. A 4-5 sentence self-critique memo of your project and your progress in class to this point
    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)
  • Valid, well-formed 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 early of validating 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.)
  • A semantically structured navigation area for accessing each of your project’s pages from any other page
  • Include at least two different forms of media (image, audio, video) in your project
  • Semantically structured text-based content to accompany all media elements (image, audio, video)
  • 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
  • Git repository must contain only the files and commits from this project

Project Two: Responsive, Relative-Unit CSS Due Monday, November 14, 11:59pm CT

Project Description

This project builds on Project One, which you will 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 pointed at by your personal domain name, or a subdomain if you have an existing professional web presence.

Project Goals

  • Produce modern standards-compliant, mobile-first CSS
  • Organize site typography with a modular scale, and set type on a 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 and collaborate with others using version control
  • Deploy web pages to a public server (can be GitHub pages, set up with your own domain name or subdomain)

Deliverables & Milestones

  1. A video presentation of your work in progress, hosted on YouTube, Vimeo, or another similar service and posted to Basecamp. Your Basecamp post should include the URL to your GitHub repository, 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 12).
  2. Substantive comments critiquing at least three other student projects. (by October 19, 11:59pm CT)
  3. An email to the instructor containing the projects final deliverables (by November 14, 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)
  • HTML-based fallbacks for any media elements (image, audio, video) that you include
  • One single valid, error-free CSS file. Do not create more than one single screen.css file for your project
  • Your HTML and CSS files should both 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
  • Open your CSS file with a set of reset styles (such as the minified Eric Meyer resets from class demos)
  • Use of only relative units (em, rem, vm, %) in your CSS; no px, pt, or other absolute units allowed
  • 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
  • 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

Project Three: Progressively Enhanced JavaScript Due Wednesday, December 7, 11:59pm CT

Project Description

For this project, you will work in teams of two or three students to develop a single-page site that is progressively enhanced with JavaScript and that pulls in data from an open JSON API that does not require authorization.

Project Goals

  • Understand and execute progressively enhanced, unobtrusive and asynchronous JavaScript
  • Work with an open API, learning how to hit its endpoints in response to user input
  • Process JSON-formatted data and present it in valid well-formed semantic HTML, styled with CSS
  • Learn to work within a team-based workflow on GitHub, via pull requests and code reviews

Deliverables & Milestones

  1. A video presentation of your group's work in progress, hosted on YouTube, Vimeo, or another similar service and posted to Basecamp. Your Basecamp post should include a world-viewable URL of your project, plus the URL to your 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 November 28).
  2. Substantive comments critiquing at three other groups’ projects (by December 3)
  3. An email to the instructor containing the project’s final deliverables (by December 7, 11:59pm CT):
    1. A 5-8 sentence self-critique memo of your project and your progress in class this semester
    2. A 3-4 sentence critique of each of your group members
    3. The https:// link to your individual GitHub repository
    4. The https:// link to your group’s shared GitHub repository

Requirements

  • Valid, well-formed HTML5 and standards-compliant CSS and JavaScript
  • One single HTML file, one single CSS file, and one single JS file (not counting any libraries your project requires, such as jQuery)
  • JavaScript that throws no uncaught errors and is loaded unobtrusively (no JavaScript event attributes in your HTML, in other words; attach events to any elements requiring interaction)
  • JavaScript that uses function closures and other techniques to avoid polluting the global window namespace
  • JavaScript that uses asynchronous methods and callbacks for any fetched or user-submitted data
  • The use of at least one HTML <form> element, with appropriate inputs and a submit button (<input type="submit" />)
  • The use of an open API (one that does not require POST-based authentication or SSL) that returns data in JSON format; search a site such as Programmable Web’s directory of APIs
  • HTML-based fallbacks for any media elements (image, audio, video) that you include
  • Organized, readable source that is hand-written and original (no WYSIWYGs or code-generators, no Bootstrap or other off-the-shelf frameworks)
  • A personal Git repository with frequent commits and meaningful commit messages that accurately reflect each set of changes that you make
  • A shared Git repository with commits from all group members
  • GitHub repository must contain only the files and commits from this project

Project Four: Project 1 or 2 Revision Due Wednesday, December 7, 11:59pm CT

Project Description

For this project, you may revise either your Project 1 or Project 2 (not both) in to improve your project and raise your grade. If you submit the complete deliverables (see below) for your revision, you will automatically receive the 10 points for Project 4. Your grade for Project 1 or 2 will improve, based on the requirements for those projects. Your grade will for the project will not be any lower than what you earned originally.

Students not opting to revise Project 1 or Project 2 will simply receive the same percentage of 10 points (Project 4's total) as they received on Project 1 or 2 combined.

So, for example, imagine that Student X got 10 points on Project 1 (15 possible points) and 18 points on Project 2 (20 possible points), for a total of 80% (28/35). If Student X decides not to revise either project, Student X will receive 8 points for Project 4 (80% of 10 points), leaving her grade for the class unchanged. However, if Student X submits the deliverables for revising Project 1 or 2, she will receive 10 points for Project 4, plus any additional points for the improvements made for the project she revised.

Project Goals

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

Deliverables & Milestones

  1. An email to the instructor containing these two deliverables (by December 7, 11:59pm CT):
    1. A 5-8 sentence self-critique memo describing the which project you revised (1 or 2) and the specific revisions that you made to your project, as well as what Stolley as an instructor might have done to help you do better on the project the first time around
    2. The https:// link to your project’s GitHub repository, containing both your original commits and the commits for your project revisions

Requirements

  • The requirements are the same for Project 1 or Project 2, whichever one you choose to revise.