As an example of iterative SDLC, students will create and improve their creative website through each Part of the course (HTML5, CSS3 and JS). For Part D of the project, create, validate, and submit the following website:*

* You can continue to work with vertical website or do a combination of “traditional and vertical. +10 points extra credit. Make sure all your code works. Remember, each project should be more sophisticated than the last.

Components

1. Use HTML5 in all that you do. Do NOT use deprecated tags or techniques.
2. Web Convention
   1. A true website ( a collection of interconnected web pages with a common purpose and theme and anchored by a home page.)
   2. Home page
   3. Header-Banner with SITE title
   4. Main navigation- above the fold
   5. Page title for every page (not the same as the title tag in the head section of your web page.)
      • Page title should “match” link title
   6. Use of headings and other appropriate tags to control paragraphs and other content and to promote Accessibility and usability.
   7. Readable content
   8. Footer with email link
   9. Highly accessible and usable
   10. Appropriately named files

1. A 6 page site (or sections) based on your theme.

Make sure your website looks different – it should not be a copy of the exact same website as you turned in for project C. Use CSS to change the menus, color theme, layout etc..

1. Home page of your website, the index.html which must include:
   • Basic DOC TYPE for HTML5
   • Basic tags including, but not limited to, web page title, body, address, horizontal rule
2. Table with table attributes – accessible – create coding source table as described above. Do NOT use tables for layout for content OR navigation.
3. Images (15) – accessible. Remember images can be SVG, Canvas, jpg, pngs, CSS controlled, and can be in an array controlled by JavaScript.
4. Videos (Use HTML5 to control)
5. Audio
6. List – lists of three or more other relevant sites or concepts
7. Form – that validates/self-verifies – this form is a part of the interactive web page user’s feedback. Use at least five different types of form fields.
8. Hyperlinks to sources, citations, resources.**
9. HTML5 semantic tags are used appropriately
10. HTML Comments
11. Create a responsive website. All your measurements should be relative.

    To evaluate your responsiveness, I will look at your website in Firefox View Source Mobile view (look for the two little boxes over there on the right in the tool bar.)

12. Use JavaScript from JavaScript Part 1 & Part 2. (You will be using what you learned in lesson 7 & 8.) The code “assignments” below are in the W3 schools and are done with a combination of JavaScript and CSS for the most part. Look at the W3 How-to. Strive to Change the script 50% to earn full credit.
    • Complete four JavaScript Projects to do that fit in with your web purpose and theme. These JavaScripts should be “useful” and “substantial” e.g., no 3 form field controlled by JavaScript. You can do any of the following:
      • Modal box with image or graphics, form or text
      • Dropdown Menu
      • Other type of Menu controlled by JavaScript & CSS (You can use JavaScript to change CSS for a menu )
      • Accordion
      • Canvas controlled by JavaScript (You can do the clock or create a rotating business card OR ? Your choice.)
      • JavaScript Image Array
      • Control a 6 field form with JavaScript.** (show completion of form by changing CSS, create an output window, etc.)
      • HTML APIs (geolocation, drag.drop, local storage, App Cache, Web Workers, SSE)
    • • Have an idea you want to try? Check with the instructor.
13. Put COMMENTS in everyday English in the code to summarize and explain what you are doing. Why are you using particular coding statements? What does this code help you accomplish? Be specific!
14. Use 350 words minimum of text for entire site.
15. Make sure your website project is aesthetic and highly usable and accessible in all aspects (except I do not expect you to caption, just be aware that it is the right thing to do!).