Notes

DOM Tree - Document Object Model - Nested structure - "structural representation of the elements in the doc and their relationships."

For each element, identify:

-Nature

-Properties

-Purpose

-Relationships

Schema & Microformats?

ARIA?

Accessibility is IMPORTANT! Regardless of tool used to access. Making things accessible today means making them accessible for future devices. FUTURE PROOF.

Game Plan

1. Make it accessible
2. Make it fancy
3. Don't break accessibility

Day to Day

1. Start with compliant HTML
2. Run accessibility tests (what r these?)
3. Fix issues before moving forward
4. Bring in consultants?
5. Make accessibility part of the maintenance plan

Tools

1. Web Browser - read and view web docs, nav between web docs - code must be tested in many browsers, many versions - device labs? - What is BrowserStack - Accessibility and web standards - not built for the web browser
2. Code editor - tools needed to make writing as simple as possible - sync editor to browser?
   1. syntax highlighting
   2. code hinting - autocomplete
   3. Project mgmt
3. Browser dev tools - what happens behind the scenes - right-click > inspect - in nearly all browsers

Languages

1. HTML - content
2. CSS - style
3. JavaScript - interactivity

HTML

• Human + Code Editor
• Human + Server-side App
• Human + JS Framework

How code is created is changing

CSS

Browsers have pre-defined CSS rules. CSS you write for an HTML doc overrides these defaults.

• Cascade - from the top down - general to specific
• Inheritance - descendant elements inherit CSS properties.

JavaScript

Interactive layer - sits on top of HTML and CSS - executes in browser, not on server like some coding languages.

"Runs small programs in browser that interact with the DOM by targeting DOM nodes and reacting to browser events..."

DOM

Each HTML element in a doc is a DOM object (node).

Next Steps

Look into editors with built-in web servers like ATOM or Visual Studio.

Look into BrowserSync.