Project One: Valid, Responsive-Ready HTML

Due by Monday, September 28, 2020

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.

Deliverables and Deadlines

1. Due by Thursday, September 17: Post draft project-repository GitHub link to the Project Showcase Basecamp Create a new message thread with your name and Project One, something like “Scarlet Hawk: Project One.” The post should include:
   • The https:// link to your project’s GitHub repository
   • A few questions for peer and instructor feedback
2. Due by Monday, September 21: Respond with helpful feedback to at least 3 other student projects on the Project Showcase Basecamp.
3. Due by Monday, September 28: Email instructor with final project deliverables. The email should contain:
   • The https:// link to your project’s GitHub repository
   • A 4-5 sentence self-critique of your project and your progress in class to this point (write in the body of the email; do not attach a Word document or a PDF)

Project Requirements

1. All source files in UTF-8/Unicode character encoding with Unix-style line endings (LF), entabbed with spaces (two spaces per tab)
2. 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 email that accompanies your final 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.
3. 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 any 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.
4. A semantically structured navigation area for accessing each of your project’s pages from any other page
5. Organized, readable source that is hand-written and original (no WYSIWYGs or code-generators, no Bootstrap or other off-the-shelf frameworks)
6. Directory-based URLs with use of the default-served index.html file, so that you can point to, for example, example.com/resume/
7. A Git repository with frequent commits and meaningful commit messages that accurately reflect each set of changes that you make
8. 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
9. Your Git repository must contain only the files and commits from this project

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

Project Two: Responsive, Relative-Unit CSS

Due by Thursday, November 19, 2020

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 a mobile-first responsive design that makes judicious use of media queries and relative units (em/rem, vw, %). You will deploy your pages to a public server, optionally behind a domain name under your control.

Deliverables and Deadlines

1. Due by Thursday, October 29: Post draft project repository, video, and GitHub Pages or other public link to the Project Showcase Basecamp. Create a new message thread with your name and Project Two, something like “Scarlet Hawk: Project Two.” The post should include:
   • The https:// link to your project’s GitHub repository
   • The public link to your project on a world-facing server
   • A three- to five-minute video walkthrough of your project where you capture your site displayed on your computer and where you speak aloud describing your progress and challenges
   • A few questions for peer and instructor feedback
2. Due by Thursday, November 5: Respond with helpful feedback to at least 3 other student projects on the Project Showcase Basecamp.
3. Due by Thursday, November 19: Email instructor with final project deliverables. The email should contain:
   • The https:// link to your project’s GitHub repository
   • The public link to your project on a world-facing server
   • A 5-7 sentence self-critique of your project and your progress in class to this point (write in the body of the email; do not attach a Word document or a PDF)

Project Requirements

1. Include multiple (at least three) linked valid, well-formed semantic HTML files (Project One, essentially)
2. Include only 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 specific page
3. Use only directory-based URLs containing the default-served index.html file, so that you can point to, for example, example.com/resume/
4. Prepare all source-code files in UTF-8/Unicode character encoding with Unix-style line endings (LF), entabbed with spaces (two spaces per tab)
5. Indent all HTML and CSS files with 2 spaces per level of indent. Indent HTML only to show nested tag relationships; indent all CSS style rules inside the declaring block, and further indent all rules and blocks inside of your media queries
6. Your project repository must contain the ITMD 361–style .htmllintrc and .stylelintrc linter configuration files
7. Make use of both the validators and linters to ensure the quality of both your HTML and CSS
8. Include at least one form of media (image, audio, video) in your project
9. Include semantically structured, accessible text-based content to accompany all media elements (image, audio, video). Make use of the <figure> and <figcaption> tags
10. Open your screen.css file with the ITMD 361 House-Style modified, minified Eric Meyer reset CSS styles (if loading externally hosted typefaces via an @import statement, that must be your first line of CSS, before the reset styles)
11. Use only relative units (em, rem, vm, %) in your CSS; no px, pt, or other absolute units are permitted in your CSS, including in media queries, which should be calculated as 16px ems, regardless of what your actual html em-value is
12. Use at least two min-width media queries to enhance your mobile-first styles for larger screens
13. Completely avoid max-width media queries, which are not allowed (they are not mobile-first)
14. Present source code that is hand-written and original (no WYSIWYGs or code-generators, no Bootstrap or other off-the-shelf HTML or CSS frameworks); no presentational classes
15. Prepare a Git repository with frequent commits and meaningful commit messages that accurately reflect each set of changes that you make
16. 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 One, but create a brand-new repository for Project Two on your computer and on GitHub

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, optionally configured with your own domain name or subdomain)

Project Three: Targeted Revision of Your Web Presence

Due by Thursday, December 10, 2020

Project Description

For this project, you will make a targeted revision of or enhancement to your Project Two. You will do that work on a feature branch named for the emphasis of your revision. For example, if you want to work on your site’s colors, you would create and checkout a feature branch called colors (git checkout -b colors) and write all of your commits on that branch. Targeted revisions to your CSS and HTML are acceptable for this project, but you may also elect to write an unobtrusive JavaScript component to progressively enhance your site.

Deliverables and Deadlines

1. Due by Thursday, December 10: (Firm deadline.) Email instructor with final project deliverables. The email should contain:
   • The https:// link to your project’s GitHub repository
   • The https:// link to your feature branch on GitHub
   • A 4-5 sentence self-critique of your project and your progress in class this semester (write in the body of the email; do not attach a Word document or a PDF)

Project Requirements

1. All the requirements for Project Two
2. Your targeted revision should appear on a feature branch in your repository; if you like the work enough to merge the commits from the feature branch into your main branch, that’s fine, but preserve the feature branch for submitting your project.
3. The feature branch should be descriptive of your targeted revision. If you work on colors, colors is a great branch name. Working on layout? Go with layout. And so on.
4. 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.
5. Do not use on- or other deprecated event attributes in your HTML. Handle all events via *event listeners in your JavaScript, with addEventListener. 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.
6. Avoid using JavaScript to manipulate 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.

Project Goals

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