Major Projects

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

Project Description

For this project, you will create at least three richly structured 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

  1. 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 7).
  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 (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)
  • 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.) Be sure to use the htmllint linter.
  • A semantically structured navigation area for accessing each of your project’s pages from any other page
  • 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
  • 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 2, 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 pointed at by 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

  1. A three-minute video screen-capture presentation of your work in progress, hosted on YouTube, Vimeo, or another similar service.
  2. 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 12).
  3. Substantive comments critiquing at least three other student projects. (by October 19, 11:59pm CT)
  4. An email to the instructor containing the projects final deliverables (by November 2, 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
  • 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.
  • 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
  • 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
  • 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 7, 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

  1. 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 Thursday, November 16 at 11:59pm.
  2. An email to the instructor containing these three deliverables (by December 7, 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.