Developing Responsive Web Sites

HTML5 Refresher

• Creating a Document Outline
• Understanding HTML5 Semantic markup
• Using DIVs and sectioning elements

The Document Object Model

• What is the DOM
• Understanding styles
• Introducing Cross browser issues
• Using a HTML5 boilerplate and CSS Normalizer

CSS Basics

• Applying CSS
• Simple selectors
• Working with colour

Selectors and Inheritance

• Understanding default CSS inheritance
• Understanding Computed Styles
• Using CSS resets to create an even playing field
• Working with CSS3 selectors and understanding specificity
• Creating hierarchical based inheritance
• Using pseudo selectors
• Debugging using browser tools

Measurement units and working with Text

• Understanding the measurement options in CSS
• Working with fixed and relative sizing options
• Setting text styles and properties
• Working with line heights and font faces

The Box Model

• Understanding the box models
• Working with margins, borders and padding
• Understanding element widths and document flow
• Creating documents with positional offsets
• Floats and clears

Positioning elements

• Understanding positioning models
• Working with inline, block and other positioning types
• Liquid and fixed positioning

Lists, Links & Tables

• Working with lists style types
• Positioning lists
• Creating menu structures with lists
• Creating dynamic links and hover selectors
• Working with table attributes
• Working with selectors to spruce up tables
• Creating borders

Forms

• Enhancing form usability with CSS
• Selecting and styling form elements

Images and Backgrounds

• Using CSS to position images
• Using images as backgrounds
• Working with backgrounds and images
• Using Sprites to improve load performance

Transitions & Transformations

• Understanding CSS3 transformations
• Working with 2D & 3D transformations
• Introducing the transition
• Working with keyframes
• Creating transformations

Media Types and Queries

• Creating documents for print and other media
• Introducing CSS3 media queries
• Starting on the road to multi-device websites

Mobile First Responsive Design

• Understanding the Mobile First paradigm
• Understanding mobile devices
• Responsive navigation and design patterns
• Understanding the basis of grid based design
• Rethinking content design
• Working with multiple devices and resolution

Rapid Prototyping using Foundation

• Introduction to grid based systems
• Evaluating the benefit of prototyping
• Building prototypes

Building a Mobile First User Experience

• Examining mobile user design patterns
• Understanding how to deal with reduced screen estate
• Build mobile ready navigation and pages

Working with Percentage Based Grids

• Going responsive
• Defining breakpoints
• Using percentages and grids to create structured pages
• Scaling out

Introducing SASS

• Nested Selectors
• Parent References
• Properties
• Processing SASS
• Examining Output
• SASS Variables

Learning to be DRY

• Using SASS to strip the unavoidable repetition from your CSS
• Creating and Referencing SASS Variables
• Variable scope

Mixins

• Reusable SASS programing with Mixins
• CSS Rules and Mixins
• Mixin parameters

Modularization and Reuse

• Using SASS Partials
• Nested Imports
• CSS Imports

Working with Compass

• Installing COMPASS
• Setting up a COMPASS project
• Spriting with COMPASS

Cross Browser Strategies

• Understanding legacy issues
• Implementing IE specific functionality
• Release & Maintenance
• Management and versioning strategies
• Improving your coding practices with LINT tools
• Minimizing, optimizing and reducing header requests