Major Projects

Project Description

Create three HTML pages, each with one desktop size page-scroll worth of content. One of the pages must be your professional resume. The themes of the other two are your choice.

Deliverables & Milestones (see calender for due dates)

  1. First Deliverable: Create a Basecamp post. Title the post with your name and project number (example Daniel Krieglstein: Project 1). Your post should include:
    • The URL to your Project 1 GitHub repository, and the URL to your index.html Github Pages live link
    • Three screen capture images of successful html validation. One for each website page.
    • Two questions eliciting feedback from fellow students
  2. Second Deliverable: Give constructive comments to help at least three other students. Post a picture of those three comments on your Basecamp folder.
  3. Final Deliverable: You will receive a list on your Basecamp post of required fixes from the professor or TA. Fix your code and edit your original Basecamp post with the words "FINAL TURN IN"

Requirements

  • NO CSS IN YOUR HTML FILE!!! This means no style at all. No spacing, no centering, no color, no italics. Just raw html.
  • Absolutely no br tags or use of tables for layout. This is also considered style.
  • Two spaces indented cascade. Each child element should be indented 2 space right of its parent.
  • Three images of HTML validation, one for each page. W3C HTML validator (-50% if it doesn't validate)
  • Create a bulleted list at the top of each page. The list items will be the file names of all 3 pages. This is your basic navigation.
  • Include at least three HTML images and one other form of media (audio or video)
  • Do not use any pre-build code or frameworks. Write it all from scratch.
  • 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"
  • At least 10 commits to your Github repository; with meaningful commit messages that accurately reflect your changes
  • 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 Description

For this project, you will add CSS to the 3-page website you built for project 1.

Deliverables & Milestones (see calender for due dates)

  1. First Deliverable: Use your Project One directory in Github to create a Project Two directory. You can fork it or just copy and paste. Create a new Basecamp post under "Project Two" with a link to your new directory. Your post should include:
    • The URL to your Project 2 GitHub repository, and the URL to your index.html Github Pages live link
    • Six screen capture images of successful validation. One HTML and one CSS validation for each website page (Use the live link to validate).
    • Two questions eliciting feedback from fellow students
  2. Second Deliverable: Give constructive comments to help at least three other students. Post a picture of those three comments on your Basecamp folder.
  3. Final Deliverable: You will receive a list on your Basecamp post of required fixes from the professor or TA. Fix your code and edit your original Basecamp post with the words "FINAL TURN IN".

Requirements

  • ALL THE REQUIRMENTS FROM PROJECT 1 STILL APPLY!
  • One valid, error-free CSS file with your original code; and one file containing the CSS reset code you used. Both linked from the head of all three HTML files
  • Apply at least five of the same style elements to each of your pages. Example removing the list-style from navigation on all three pages with a single CSS deceleration.
  • Apply at least five different style elements to each of your pages.
  • Centered horizontal-navigation. At the top of and identical on every page.
  • Use one imported font style and one browser native font style.
  • Six screen capture images of successful validation. One HTML and one CSS validation for each website page. Use the live link to validate. (-50% if it doesn't validate)
  • 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
  • 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.
  • A subjective grade will be applied to websites that are not creative and just apply the minimum required style.

Project Description

For this project, you will add 2 media queries and 2 JavaScript tools.

Deliverables & Milestones

  1. First Deliverable: Use your Project Two directory in Github to create a Project Three directory. You can fork it or just copy and paste. Create a new Basecamp post under "Project Three" with a link to your new directory. Your post should include:
    • The URL to your Project 3 GitHub repository, and the URL to your index.html Github Pages live link
    • Eight screen capture images of successful validation. One HTML and one CSS validation for each website page.
    • Two questions eliciting feedback from fellow students
  2. Second Deliverable: Give constructive comments to help at least three other students. Post a picture of those three comments on your Basecamp folder.
  3. Final Deliverable: You will receive a list on your Basecamp post of required fixes from the professor or TA. Fix your code and edit your original Basecamp post with the words "FINAL TURN IN".

Requirements

  • ALL THE REQUIRMENTS FROM PROJECT 1 AND 2 STILL APPLY!
  • Fix any point reductions you received with Project 2:Final Turn in. They will be deducted again if not fixed.
  • Pick one page to make mobile friendly. This means adding 2 CSS media queries with at least 5 CSS style changes under each. Use the min-width media queries.
  • Add a fourth html page for your Google Maps api. The map should have 3 features added beyond the base code.
  • Add one valid, error-free JavaScript file with your original code; linked from the head of all four HTML files
  • Make sure your JavaScript throws no uncaught errors and is loaded unobtrusively. You can check for errors using the console on your browser inspector
  • For the final turn-in, add a JavaScript picture slider to one of your pages.