Practical and Powerful
HTML, CSS, and JavaScript

Estelle Weyl

@estellevw

estelle.github.io/development

Table of Contents

  1. Selectors, with selectors API
  2. Specificity
  3. JS without Frameworks
  4. HTML5 elements
  5. Web Forms
  6. CSS Layout
  7. Sass
  8. Mobile Considerations

Division 1

Selectors: Learn how to select any element based on source code order or attributes, without classes or IDs using the JavaScript Selectors API or CSS. Fully covers CSS Selectors level 3 with a bit of level 4

JavaScript: Including the Selectors API and the DOM4 classList Web API Interface

Specificity: There is a w3 specificity spec section, but it's less grokable.

Chapter 2

More (or less) JavaScript: A few features that will enable you to go framework free in many instances. When can you use CSS instead? Also looking at getElementByClassName(), the Selectors API in more detail, classList and dataset.

Act 3

HTML5 elements: what elements are new to HTML5? We'll look at semantic sections, dialogs, details, and templates.

Section 4

<input>: A deep dive into the new HTML5 input types, and other forms features, including native validation, meter, progress and UI selectors that target form elements based on their current state.

Part 5

Flexbox: The CSS3 Flexible Box layout is all the rage. It's time to implement it. We'll also look at calc() and some box model issues.

Sass

We'll cover some basics of Sass, and how it can help improve your work flow. This will be done without a slide deck.

Conclusion

Mobile Performance: Responsive Web Design may be what the cool kids are talking about, but is it the solution to all your mobile woes?

Thanks!

@estellevw

estelle.github.io/development