Standards Checklist

Use this list to validate page structure, naming, and compliance. Some rules demonstrate examples in subbullets. These rules apply to all pages you build; your course site has additional requirements.

1. Site
   • All images are in an images folder, with clear names that say what they are (sunset_beach.jpg, not img7.jpg or DSC0042.jpg).
   • Every page has at least one image — the favicon does not count, no matter how it's included.
   • Linked stylesheets (other than font services like Google Fonts) live in a styles folder, and the site's stylesheet is called default.css — if there are several, default.css must be first. A single page using only embedded styles needs neither the folder nor the file.
   • All scripts are in a scripts folder.
   • Any unused files sit in a folder called z_archives
   • re-usable code is in a components folder
   • Absolute URLs are for any site that's not part of the site you are linking from.
   • Relative URLs are for any page that is part of the same site you are linking from. Standard navbars should all be relative. An absolute URL that points back into your own webspace (links, images, stylesheets, or scripts) is a failure — make it relative.
   • Relative links should NOT open in new windows/tabs — unless they point into another directory (a separate site or subproject).
   • An href contains only the link itself — no spaces before or after it (stray spaces make hover and underlines look wrong).
   • Any divider — like | or • or ~ — has a space between itself and the things it separates, everywhere on the page.
2. File name is meaningful, has no capital letters or spaces, and is consistent with other pages in site (if applicable).
   Examples:
   • introduction.html
   • course_contract.html
   • crap_website_evaluations.html
3. Title combines the h1 (name of site) with the h2 (name of page) with a divider between. Close/clear page-name variants are fine — Home vs. Welcome, About vs. About Us.
   Examples:
   • Billy Jean's Emporium | Contact
   • Wilber Jackson's Wild Jackal | ABC123 | Course Contract
   • Foggy Bottom Enterprises ~ Welcome
4. There is a legible favicon that matches the site name and/or theme, when viewed on the browser tab. The favicon file lives in the images folder, unless it's embedded (a data URI).
5. Page Validation with the script from Accumulus (cloud)

   <script src="https://lint.page/kit/4d0fe3.js" crossorigin="anonymous"></script> 

   • Script is last line within head element
   • Every page also carries the Vicunadator script before the end of body — both validators, on every page, while you code.
   • Cloud appears on web page all green
   • Manual check of cloud -> WCAG shows no warning/errors
6. General Page Layout/Structure
   • Page has header/main/footer in body.
   • Header and footer match across entire site, to the pixel
   • Header
     • Starts with one h1 containing the site name only (an image before the h1 is fine)
     • Includes navbar with site navigation
     • Two or more similar/related links belong in a nav element.
     • Any navigation leading outside of site is a secondary navbar
     • Ok to put navbar between header and main if it's standalone and not part of header (i.e off to side)
   • Main
     • Starts with one h2 containing the page name — an image before the h2 is fine. (SPA-style pages may have multiple h2s, one per page name.)
     • If appropriate, includes subsections with h3 as section titles
     • If further divisions are needed, use article elements with h4 as article titles
   • Footer
     • A site tagline in italics or quotes (but not both) appears in the header or the footer.
     • Footer goes from widest to narrowest to avoid xmas tree effect.
7. Styles
   1. Do not use white or black without good reason — explain the reason in a CSS comment.
   2. Use at least 2 fonts (check google fonts) and avoid using complex/serif fonts for small text
   3. override default link colors and styles — no blue, purple, green, or red links, and visited links stay the same color as unvisited ones
   4. Use a color palette that is cohesive and not jarring (check coolors)
   5. Do not align paragraphs, unless you intend for them to be one line (it's ok to for small devices), but not for normal screens.
8. Test, test, test — readability, different browsers and devices, and someone who didn't build it (your grandma counts).
9. Comments & Justifications — each of these, when present, needs a comment explaining why it's necessary. One comment on the first of a same-reason group is sufficient.
   1. divs and spans
   2. classes and ids
   3. inline styles
10. Apply CRAP Design Principles
    1. Contrast: Text and important elements have sufficient contrast with background and other elements.
    2. Repetition: Design elements (colors, fonts, spacing, etc.) are used consistently across the site to create a cohesive look.
    3. Alignment: Elements are aligned in a way that creates a clear visual connection between them, improving readability and organization.
    4. Proximity: Related items are grouped together, while unrelated items are spaced apart to create a clear structure and hierarchy.
11. DO NOT
    1. DO NOT use divs or spans when a more semantic element is available. For example, use header for the page header, nav for navigation, main for the main content area, and footer for the page footer. The litmus test should be - "Is there a more specific element that could be used here instead of a div or span?" If the answer is yes, use that element instead of a div or span. If not, make the div or span meaningful by adding appropriate classes or attributes, but be ready to justify why you are using a div or span instead of a more semantic element.
    2. DO NOT use inline styles instead of CSS classes for styling unless there are only two or less instances of said styling. This logic is similar to that of avoiding divs and spans - if there is a more efficient way to apply the styling across multiple elements, use that instead of inline styles.
    3. DO NOT add classes you are not using. Avoid things like main class = "main".
    4. DO NOT use code that serves little purpose, or that you just pulled from an example or AI without need.
    5. DO NOT use more than one h1 and one h2 on any page with the h1 as the site name and the h2 as the page name. The exception is a multipage site (aka SPA Single Page Application) where you might use a section to deliniate each page and then use an h2 for the page name within each section.
    6. DO NOT overcomplicate your CSS and HTML; you can build a nice page with only about 10 lines of CSS, and no classes or divs or spans or ids whatsoever. Start out with that, and begin to add those other items as NECESSARY to achieve the design you want. If you find yourself adding a lot of code, stop and ask if there is a more efficient way to achieve the same result.
    7. DO NOT use black or white, or Times New Roman, or Comics Sans or Papyrus. Doing any of these shows ignorance, or laziness, or both.
    8. DO NOT use colors that clash or are too similar to each other. If you are not sure about your color choices, use a tool like Coolors to generate a palette for you, and then adjust as needed.
    9. DO NOT center paragraphs. Centering is generally hard to read and should be reserved for very specific use cases, such as a short tagline or a call to action. For normal paragraphs of text, left-aligning is usually the best choice for readability. If you want to center text on smaller screens, you can use media queries to apply center alignment only on those devices, but be cautious about using it too much as it can still affect readability.
    10. DO NOT center bullets. Centering bullets can make them harder to read and can disrupt the visual flow of the content. It's generally best to left-align bullet points to maintain readability and a clean layout. If you want to create a more visually interesting design, consider using other styling techniques such as indentation, custom bullet icons, or spacing, rather than centering the bullets themselves.