checklist

Webpage Checklist

Qualities to look for in a well-designed webpage or website

This isn't an exhaustive list but it does provide a set of things to check before you release your page, based on common novice mistakes and omissions.

It's best to use an IDE to do your development, such as VSCode or Adobe Dreamweaver.

Attention!

This list is still being developed and enhanced...keep checking back for additional guidelines!
For instance:

Overall Structure & Features

  1. doctype, html (with language attribute), head, body; all with proper alignment and indentation
  2. HTML Comments (<!-- -->):
    1. Header Comments:
      1. Coder initials
      2. Date
      3. Site
      4. Filename
      5. General Documentation including possible attributions if necessary
    2. Organizational/Documentation Comments:
      • Mark end of large blocks of code (especially divs)
      • Contextual attributions/clarifications
  3. Uniform indentation showing clear parent, child, sibling relationships
  4. Use lowercase when creating elements and using attribute names: for example: <body>, not <BODY>
  5. Whenever possible use semantic HTML markup. For example: <header>, <main>, <nav>, <main>, <footer>
  6. Meaningful identifier names (like class or id names):
    • Self-documenting
    • Consistent casing
    • Avoid 'reserved word' type names
  7. Date stamp of last page update (a likely JavaScript feature) often in the <footer> area
  8. HTML and CSS Validation

Head

slap
No 'Untitled Documents" or body content in head...EVER!
  1. Meaningful <title> content
  2. Organizational commments and groupings
  3. charset and responsive <meta> tags
  4. Bootstrap CSS <link>s
  5. Developer Styles CSS <link>s
  6. Favicon code
  7. Google Fonts: 2-4 per site
  8. Page-level <style> block
  9. Possible <script> block for JavaScript
  10. There should never be web page content in the webpage document head!

Body Content

Many issues we list here are addressed when you make sure you page validates

  1. Responsiveness is an important, yet illusive design goal. Bootstrap assists greatly with its implementation.
  2. Review basic formatting standards
  3. Let's say it again: use semantic markup whenever possible. More examples: <ul>, <ol>, <blockquote>, <form>, <details>, <summary>, <section>
  4. Use predominantly sans-serif fonts; serif fonts are ok for accents
  5. Avoid the heavy use of 'boxing' content
  6. Spel chek your content!, (wink)
  7. CSS Borders can be a useful alternative to <hr> tags (horizontal lines)
  8. General layout:
    • It would be unusual not to have the bulk of a web page's content centered in browser and styled for a reasonable width
    • Showcase page content by using a muted background/pattern/gradient for the HTML background
  9. Images:
    • Typically should have a meaningful, contextual, unique id (for styling and/or programmatic purposes)
    • Must have an alt attribute for validation
    • Should only be sized with CSS, not width or height attributes
      mona lisa
      Quite a figure!
    • Consider putting them in a figure tag for additional control and the ability to add captions
    • title attributes can convey additional content without cluttering the page (screen tips aka tool tips)
  10. Links:
    • Avoid underlining: use other styling techniques to draw attention to them
    • Don't forget to use pseudo classes for additional attention-getting techniques
      sausage
      We love links!
    • Rely heavily on title attributes to convey additional information about what the link does
    • The target="_blank" attribute can open a link in a new page. This is preferred when directing traffic to a webpage that is 'off-site.'
    • Copy/paste URLs into your hyperlinks and always double-check that a link takes you to the proper location
    • Contextual hyperlinks can educate and provide additional resources to keep your page from being cluttered. See the example below about using Bootstrap5 to style tables
    • Did you see what we did in the previous list item? We inserted a page-level link to other content within the page. In this case we linked to: href="#bst" which 'warped' us to a list item with that specific id: id="bst". Wow! Just use a '#' in front of an id in an href and you're in business!
  11. Lists:
    • Ordered lists provide their own numbering; don't put any in yourself
    • Nested lists must be a part of a specific nested list item (an <li>) otherwise the page won't validate
    • You can provide your own bullets in an unordered list. Here's a grave example if you're brave enough to dig around for it
    • Unordered lists are often styled to provide masthead and/or footer navigation. In a masthead, they are often nested in a <nav> tag
    • Remember: people skim webpages like billboards - they don't read them like books. Lists can simplify content
  12. Tables:
    • Study and follow basic HTML table anatomy at W3Schools
    • Tables are rarely used for structuring/arranging elements on a webpage. CSS is used to do that
    • Bootstrap5 offers lots of help with styling tables
  13. <div>s:
    • If you are able to implement a <div> without a class or id, you should question whether you really needed it
    • Ask: "Can I use a semantic element rather than a <div>?"
    • Remember: Bootstrap relies heavily on <div>s with classes
  14. Preformatted content:
    • The <pre> tag is a powerful yet underutilized tag for forcing content to have a particular layout. See an example in this page (green code block), and it was used to showcase the lyrics of 'Old MacDonald had a Farm' in our tribute to that song
  15. Flair:
    • <span> elements, styled with CSS classes
    • HTML Entities such as 'curly quotes' can add nice touches and programmatic stability with alternatives for symbols that are used in code (like, <)
    • The <abbr> tag can reduce 'bloat' in a page by providing information about an acronym with a hover, using the title attribute. It can be styled according to your preferences.

Coding

  1. General:
    • When copy/pasting source code, take pains to eliminate 'orphaned' code: If you wind up not using something in your application, get rid of it
    • Err on the side of attributing your sources with internal documentation
    • Find a syntactual coding style that works for you and stick with it: camelCase? under_score? Stick with conventional syntax however, that is respected by the coding community
    • If When you copy/paste content, make sure you change what needs to be changed!
    • DWR! Sometimes copy/pasted code in VSCode inserts an extra closing tag in the document
  2. HTML: Write this content first, obviously, since it forms the structure of the webpage
    • The HTML Style Guide from W3Schools offers useful tips on creating managable pages. Some of the big-ticket items:
      • Quote attribute values
      • Separate attributes by a single space
      • Avoid spaces between the '=' in an attribute
      • Be consistent in your structure
      • For readability, add blank lines to separate large or logical code blocks
    • A given element can only have one class attribute. If multiple classes are needed, they are simply separated by spaces in a single attribute.
    • Remember, title can be a tag (in the head) or an attribute (in the body of the page, within a tag element).
  3. CSS: This content follows HTML since it provides the style for the structure
    • CSS is a powerful framework for making webpages look nice; it's an art and a science and takes some time to learn
    • Generally, CSS should be used for styling rather than using HTML style attributes. Those have their place but can be limiting and inflexible.
    • During development, it's sometimes convenient to do all the styling on the HTML page in a style block and then port the styles to an external style sheet at a later time
    • There are vast number of CSS 'selectors' that let you target what you want to style. Watch a helpful video to learn more and while there, download the CSS selector cheat sheet.
    • It's common to style away all default HTML styling with a wildcard selector (*) and then put in the style choices you want
    • Use this format for most CSS rules: 
      body{
    background-color: lightgrey;
    font-family: "Arial Black", Helvetica, sans-serif;
    font-size: 16em;
    color: black;
}
    • Multi-word properties are hyphenated
    • One-liners are acceptable in CSS for short rules
    • Separate rules by a blank line
    • CSS Templates can accelerate your project development!
  4. JavaScript: This content provides behavior for the page and creates a dynamic, rather than a static feel for the page