Lab 1 & 2 Criteria

Lab 1: Intro to HTML5

For this lab, you will create a simple 2-page website (index.html, about.html) describing your favorite vacation spot. The "about" page should follow the format of the index page, but talk about you, and what your goals are for this course.

Using the FTP details we used in CoreFTP/FileZilla, publish these materials to a "lab1" subfolder of your public_html directory on people.ysu.edu, and be prepared to show your work in class, where we will collectively critique your output.

Using semantically-correct HTML5 (use the W3C validator), include the following elements:

1. DOCTYPE directive
2. HTML lang attribute set to "en"
3. meta charset set to UTF-8
4. meta description with a simple 1-sentence summary
5. meta keywords that have high relevance to the body content
6. meta author information that properly identifies yourself
7. each page has a unique document title
8. a header element containing a logo image and navigation
9. clicking the logo or "Home" link will bring you back to the index.html document
10. the navigation items should be a list with anchors
11. at least one skip link that uses an id as the target
12. one anchor on the page somewhere, whose href is a mailto link and set the subject to "Lab1"
13. a section with the ARIA role of "main"
14. an article containing a figure image with a caption label of the place you want to talk about.
15. properly set the alt text atrtribute of the image with a text description
16. an aside with a heading element of appropriate importance (h2 or h3)
17. the aside contains a paragraph and a list of facts about the place you're describing in the article (e.g., most places on Wikipedia that have a sidebar)
18. the aside should contain at least one absolute link that takes you off the site completely
19. a footer with boilerplate info such as copyright or a brief bio (most bloggers do this after every article)
20. appropriate use of generic container elements, e.g., div and span, to make the content easy to style in Lab 2

Lab 2: Intro to CSS3

Continue customizing your site's appearance by creating style rules in the linked file "style.css", editing the head to include this file, and create rules for the following:

1. background and foreground colors: you should use a color combination that is pleasing to the eye and provides enough contrast to colorblind visitors
2. box-model margins, padding, borders, and widths that make content stand out
3. choose a custom Webfont from either Google Fonts or FontSquirrel and use it as the font family for several like-item page elements
4. choose serif fonts for paragraph content
5. provide font alternatives in case the browser cannot render your primary font choice
6. use the :hover pseudo element to make rollovers more dynamic (colors, font weight, text decoration, or otherwise). Hovering should not be distracting or cause content to shift position
7. use the :visited pseudo element to indicate a link has been clicked on already
8. header and footer backgrounds should use a different color than the body or main content
9. at least one element should make use of alpha transparency (rgba or 8-valued hex color)
10. use a border to frame the figure image and separate it from the caption
11. the caption should be smaller in appearance than body text
12. use at least one class and one id selector to apply one or more CSS attributes to the chosen element
13. ensure the footer is flush with the bottom of the page / browser window - there should be no visible gutter (unless your footer is using some other visual decoration, like rounded corners)

BONUS:

Embed a Google Map and pushpin of the location you are reviewing!