Project 2: Static Site

Due: Monday, Apr 14th

For this second milestone, you will work with your team to create the beginning of your "app" as a static website. Follow the design you proposed, incorporating the feedback you've received and lessons you've learned since then.

Overall Requirements

1. You must use the git repository your professor created for the project.
   • Each team member must make incremental commits to the project over time.
2. You must publish the site to the w3.cs.jmu.edu server.
   • Each student will individually deploy the site to https://w3stu.cs.jmu.edu/USERNAME/project, where USERNAME is your JMU username.
3. Your site must support distinct layouts for large and small screens using media queries. Use comments to note where you completed this requirement.
   • You may do this in a variety of ways. For example, you can move images or switch blocks between rows (for large screens) and columns (for small).
4. Your site must contain at least five separate pages, each having a meaningful purpose. The main page must be named index.html. Your pages must link to each other in a logical and meaningful way.
5. Your site must include some sort of header.
6. Your site must include some sort of navigation links.
7. Your site must include images, and their alt attributes must adequately describe the image content to users of screen readers, users with images disabled, and web crawlers.
8. Each page and stylesheet of your site must validate without any warnings or errors using the Nu HTML Checker and WAVE Accessibility evaluator.
9. Your site must use at least two different font faces. For example, headings are often rendered in a sans-serif font, and paragraphs in a serif font.
10. Your site must include at least one form. The form need not do anything at this point, but it must be present. Like all content, it must be neatly aligned.
11. Your site must include links to external sites.
12. You site must make at least two network requests (using fetch()) to an external API. The resulting data must be processed and rendered in a meaningful way.

Project 2 Report Page

Your site must include a page named report.html accessible from root of your site. (This does not count as one of the five pages.) Your report.html must include an ordered list where you briefly explain how your site meets the above requirements. If you aren't going to meet a requirement, you need to explicitly write that you did not meet that requirement.

Example

1. This is the url to our github repo: https://github.com/...
2. This is the url to our deployed site: https://w3.cs.jmu.edu/...

…

12. We used the GIPHY API and the Spotify API. Explanation of how/why…

Feel free to write additional comments below the ordered list that describe other progress you have made on the project.

Professional Practices

Your project will be graded on both the functionality and quality of the code. Use this list of practices as a guide:

1. Your source code must be formatted using a consistent standard. We recommend using the built-in support in VS Code for formatting HTML and CSS (other options like Prettier may not default to producing valid HTML).
2. Your site's non-HTML resources must be organized:
   1. Images should be placed in a directory named images.
   2. CSS files should be placed in a directory named styles.
   3. JS files should be placed in a directory named scripts.
   4. Design sketch files should in a directory named design.
3. Your interface must demonstrate good aesthetics, including good choices for color schemes, layout (using grids and/or flexboxes, along with non-static positions), and dynamic effects.
4. Your site must maintain a coherent style across its pages. Repeated style rules must be placed in a shared external stylesheet. Style rules not shared between pages must be placed in separate external stylesheets.
5. The content should be neatly aligned. The axes of alignment should be clearly visible. Favor left- and right-alignment over centering—as centering does not produce a strong axis of alignment.
6. The content should have adequate and consistent spacing. Text should not overflow the surrounding box.
7. Your source code must be readable, using conventional and consistent formatting and meaningful names for classes and IDs. Use kebab-case (preferred) or camelCase identifiers.
8. Your source code should use semantic and structural elements to support accessible usage. You should also use ARIA features as appropriate. In particular, you must adhere to the Level A recommendations in the WCAG Checklist.
9. The names of your files must be entirely lowercase and contain only alphanumeric characters.
10. You should write meaningful comments.