1) Know CSS Concepts

  • Cascading Inheritance
    • Styles defined at the parent level cascade to child elements.
  • Reset CSS - Browsers provide a default set of styles, which you can 'reset' using a Reset.css
    • User Agent Stylesheet provides the defaults for the user.
    • In Chrome, about://version, shows where the user agent stylesheet is located
  • CSS Box Model - The edges of elements on the page are defined by a box.
  • CSS Selectors
    • Styles apply from least specific match to most specific. (ex. element overrides *, #id overrides .class)
    • Knowing how to use selectors is extremely beneficial for jQuery, since jQuery uses the same selector syntax.
    • :not selector. Example li:not(ul#menu li)
  • Responsive Web Design
    • Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)
      ref: http://en.wikipedia.org/wiki/Responsive_web_design