• HTML5 Features
  1. Implement HTML5 structural elements, including header groups to group html headers.
     • header group
     • footer
  2. Use of anchor references.
     • anchor reference
  3. Links to appropriate resources, additional info ... pertaining to the nature of the business.
     • Link to Wikipedia Private Investigator
  4. Use of hotspots, image maps or bookmarks to skip to a location on a given page, as well as to another page on your site and to an external related web site(s).
     • Bookmark same page, return to top
     • Bookmark another page
     • Bookmark external page
  5. Insert inline images and line breaks.
     • Inline image The question mark
     • Line break In the signature
  6. Mark page headings, paragraphs, block quotes and addresses appropriately.
     • Headings Text overlay on banner
     • Paragraphs paragraphs
     • Block Quotes Letter from owner
     • Addresses In footer
  7. Create appropriate ordered, unordered and description lists.
     • Ordered This cross reference list
     • Unordered This cross reference list
     • description list the entire faq
  8. Insert special characters from extended character sets.
     • Dots in footer
  9. Implement HTML5 meta character set, meta name as author and content with the business name, meta name as description and content describing the nature of the business in one short simple sentence, meta name as keywords and content with at least five keywords that would describe the nature of the business in words.
     • meta tags in home page source code
  10. Your home page must have a footer when the web site was last updated or modified.
      • Footer with last updated date
• CSS Features
  1. Create one example on your home page that would show that you know how to style a single element using an inline style for your first h1 heading on your home page.
     • H1 heading with inline style
  2. Style your home page using embedded style sheet.
     • Home page source code with embedded style
  3. For the remaining pages create styles using external CSS file(s).
     • FAQ Page with external css style
  4. Use CSS3 to format the appearance of paragraphs, lists, headers, background images, tables, forms. Use the following CSS3 contextual selectors (e1, e2, e3; e f; e > f; e
     • main.css file: various locations
  5. Use of CSS3 styles for color (RGBA and HSLA) and show one instance of progressive enhancement for colors.
     • main.css line 244
  6. Use of CSS3 styles to format the appearance of web pages text, including at least the following: font-family, font-size, kerning, tracking, leading, text-indent, font-weight, font-style, text-decoration, text-transform and font-variant.
     • main.css file: various locations
  7. Use of the following pseudo-classes to highlight hyperlinks states of link, visited, active, hover; focus pseudo-classes and one appropriate structural pseudo-class.
     • main.css lines 50-55
  8. Use of CSS3 background styles (background size, background-clip, background-origin, padding, margins, borders, use of an appropriate border style, use of rounded corners and the use of an outline style.
  9. Your home page should have a drop cap created with CSS3.
     • Drop cap first letter of letter from owner
  10. Define document content with the class and id properties and create styles for them.
  11. Mark document content with the div and span tags and create styles for them.
  12. Use cascading styles to control page layout by using float attribute and positioning.
  13. Use of a Web Font.
      • All fonts are a web font
  14. Use of CSS3 text and box shadows.
      • Header text and background
  15. Use of CSS3 transform rotate feature.
  16. Use of CSS3 opacity applied to two images to appear semi-transparent.
      • Question mark inline image
      • "page" icon inline image
• Web Form Features
  1. Use of appropriate form elements including some of the new HTML5 form elements.
     • Contact Us form
  2. Apply appropriate styles to Web Forms.
     • Contact Us form
  3. Validate form data using the required attribute.
     • Contact Us form message is required
  4. Apply inline form validation by using the focus pseudo-class to appropriate form elements.
     • Contact Us form
• Multimedia Features
  1. Use of object tag to enhance a web page with sound and video.
     • Youtube Video A day in the life of a PI
• Creating a Well-Formed, Valid Document
  1. Your home page should be well formed, valid web page under either transitional, strict XHTML DTD or HTML5.
     • W3 HTML5 validator Document is HTML5 valid EXCEPT for hgroup tags (now obsolete but required by assignment)
• JavaScript Features
  1. Use of variables, arithmetic, comparison and logical operators, subroutines, functions, array, conditional statements, conditional operators, running time commands.
     • Clock JS JavaScript features
  2. Display system date on the home page of the web site.
     • System time in footer
  3. Validating form input by using appropriate JavaScript functions.
  4. Use of JavaScript alerts for validation purposes.