Examples

This is a collection of examples in order to quickly test/demo different functionality.

Edu Info

• simple HTML page: double click on any elements or attributes on the page to learn what they do.
• CSS properties, values, etc: double click on different pieces of the CSS code to learn what they do.
• CSS selectors: double click on any of the comlex CSS Selectors to get a plain English description of which elements on the page they will effect
• JS info: double click on various parts of the JavaScript code to see it's edu info/references

Friendly Errors

HTML

• missing doctype
• old-school doctype
• attribute casing
• attribute doesn't exist
• attribute misspelled
• attribute repeated
• attribute extra spaces
• attribute single quotes
• attribute missing value
• missing alt attribute
• avoid trailing slashes
• avoid mixing tabs and spaces
• closing tag missing
• element/tag does not exist
• opening tag misspelled
• element/tag casing
• missing src value
• id value repeated
• avoid using "ad" in class/id values
• avoid inline styling
• avoid inline scripting
• HTML basic template: missing language attribute
• HTML basic template: missing charset
• HTML basic template: missing title element

CSS

• missing closing bracket
• missing opening bracket
• missing semicolon
• missing parentheses
• missing colon
• double colon
• colon missing space
• colon extra space
• type selector must be standard HTML element
• hex color errors
• space between ! important
• missing space between value and !important
• empty CSS rule block
• repeated selector
• uppercase selector
• shorthand property accidentally overriding
• repeated property
• invalid property
• uppercase property
• uppercase function name
• bad gradient syntax
• specificity error
• referencing missing animation
• avoid single quotes