Major Projects

Project One: Valid, Responsive-Ready HTML

Project Description

Create three HTML pages, each with a good amount of content. One of the pages must be your professional resume. The themes of the other two are your choice.

Project Goals

  • Write standards-compliant HTML-5
  • Use HTML validator to assure compliance (-50% if it doesn't validate)
  • Track the development of a project over time and collaborate with others using Basecamp

Deliverables & Milestones

  1. First Deliverable: Create a Basecamp post describing your work in progress. Title the post with your name and project number (example Daniel Krieglstein: Project 1). Your post should include:
    • The URL to your GitHub repository, and the URL to your Github Pages live link
    • Two questions eliciting feedback on from fellow students
  2. Second Deliverable: Give constructive comments to help at least three other students.
  3. Third Deliverable: Edit your original Basecamp post under Project 1 by fixing your code based on feedback from the professor and fellow students. Additionally, add the following:
    • Add a 3-4 sentence self-critique memo of your project and your progress in class to this point

Requirements

  • NO CSS IN YOUR HTML FILE!!! This means no style in your content page
  • Two spaces indented cascade. Each child element should be indtned 2 space right of its parent.
  • Valid, well-formed semantic HTML5. Projects whose HTML does not validate with the W3C HTML validator will receive a -50% point loss.
  • Absolutely no br tags, use of tables for layout, 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 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
  • No code-generators like WYSIWYGs, Bootstrap, or other off-the-shelf frameworks
  • Directory-based file structure for links and media. Do not use full URLs when linking to your own content. Example: "css/screen.css" vs. "https://dkriegls.github.io/itmd-361-spring2018/css/screen.css"
  • 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. Each website you make for this class should have its own repository.

Project Two: Responsive, Relative-Unit CSS

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 using GitHub Pages.

Project Goals

  • Produce modern standards-compliant, mobile-first CSS
  • 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. First Deliverable: Fork your Project One directory in Github to create a project two directory. Create a new Basecamp post under "Project Two" with a link to your new directory. Include in the text of your Basecamp post one or two specific things you would like feedback or help on from the instructor and other students in the class.
    • At least four of the same style elements to each of your pages.
    • At least four different style elements to each of your pages.
    • Centered or right justified horizontal-navigation
  2. Second Deliverable: Give constructive comments to help at least three other students.
  3. Final Deliverable: Execute the corrects suggested in my Basecamp feedback. Update to your Basecamp post with the following
    1. A 4-5 sentence self-critique memo of your project and your progress in class to this point (write in the body of post)
    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 valid, error-free CSS file with your orginal code; and one file containing the css reset code you used.
  • Your HTML and CSS files should both be indented with 2 spaces or one tab per level of indent; indent all CSS style rules inside the declaring block, and further indent all rules and blocks inside your media queries
  • You must use relative units (em, rem, vm, %) in your CSS to make your pages fluid. You may use px units to put a maximum size or within content areas.
  • Create at least one fluid layout page using relative units (em, rem, vm, %) and one fixed width layout page.
  • Organized, readable source that is hand-typed 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: JavaScript

Project Description

For this project, you will polish up your CSS and add a little JavaScript.

Project Goals

  • Understand and execute JavaScript
  • Work with an open API, learning how to hit its endpoints in response to user input

Deliverables & Milestones

  1. Polish up your CSS based on feedback recieved from the professor. Create a Basecamp post that includes a world-viewable URL of your project, in addition to 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.
  2. Give constructive comments to help at least three other students.
  3. Final update to your Basecamp post with the following
    1. Javascript: Inclusion of either a google maps api utilizing at least three javascript features, or a javscript based rotating picture display.
    2. A 5-8 sentence self-critique memo of your project and your progress in class this semester
    3. The https:// link to your individual GitHub repository

Requirements

  • Valid, well-formed HTML5 and standards-compliant CSS and JavaScript
  • One valid, error-free CSS file with your orginal code; and one file containing the css reset code you used.
  • JavaScript that throws no uncaught errors and is loaded unobtrusively
  • 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
  • GitHub repository must contain only the files and commits from this project