By using our website you agree to our use of cookies.

Developing Responsive Web Sites

5 Day Course
Hands On
Code QAWEBCSS

This course has been superseded by the Web Development Fundamentals - HTML and CSS course.

Modules

Collapse all

HTML5 Refresher (3 topics)

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

The Document Object Model (4 topics)

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

CSS Basics (3 topics)

  • Applying CSS
  • Simple selectors
  • Working with colour

Selectors and Inheritance (7 topics)

  • 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 (4 topics)

  • 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 (5 topics)

  • 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 (3 topics)

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

Lists, Links & Tables (7 topics)

  • 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 (2 topics)

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

Images and Backgrounds (4 topics)

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

Transitions & Transformations (5 topics)

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

Media Types and Queries (3 topics)

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

Mobile First Responsive Design (6 topics)

  • 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 (3 topics)

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

Building a Mobile First User Experience (3 topics)

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

Working with Percentage Based Grids (4 topics)

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

Introducing SASS (6 topics)

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

Learning to be DRY (3 topics)

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

Mixins (3 topics)

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

Modularization and Reuse (3 topics)

  • Using SASS Partials
  • Nested Imports
  • CSS Imports

Working with Compass (3 topics)

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

Cross Browser Strategies (6 topics)

  • 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

Prerequisites

Delegates should have a comfortable knowledge of HTML and web development concepts equivalent to Developing Web Applications using HTML5.

Please note: Before attending this class delegates must have a Microsoft account (signing up one is free). The instructions on how to set up a Microsoft account can be found here.

HTML, XHTML and XML Training Courses

Course PDF

Print

Sections