Introduction To Responsive Web Design

Course:  RSPWD1
Duration:  4 Days
Level:  I
Course Summary

This introduction to Responsive Web Design (RWD) course teaches designers and developers the necessary HTML, CSS, and JavaScript skills for building web applications and sites that adapt to a wide array of devices, including desktops, laptops, tablets, and phones.

Rather than coding in proprietary languages, the responsive web design approach uses HTML, CSS and JavaScript. This course aims to provide attendees with a working knowledge of responsive web design. The course begins with a refresher in the Cascading Style Sheet language which is an integral part of responsive web design. Next up is a thorough examination of RWD as a whole. This includes why a developer might choose this strategy as well as comparing a RWD approach to other techniques including server-side solutions. After mastering the fundamental concepts of RWD, the remainder of the course is spent exploring the very latest techniques to achieve responsive layout, responsive images, responsive typography and responsive tables.

« Hide The Details
Topics Covered In This Course

CSS Primer

  • Introduction to CSS
    • What is CSS3
    • Who is responsible for CSS3?
    • Why should I be writing CSS3?
    • When was CSS3 created?
    • CSS frameworks, libraries, and preprocessors
  • CSS Syntax
    • Syntax
    • Optimizing selectors
    • Optimizing CSS

Introduction to Responsive Web Design (RWD)

  • What is responsive web design?
    • Responsive web design vs. responsive web layout
    • Responsive layout vs. adaptive layout
  • Why should I use responsive web design?
  • How does RWD compare with other responsive strategies?
    • Server-Side Device Detection (SSDD)
    • Responsive Web Design with Server Side Components(RESS)
  • Where did RWD come from?
  • Who is responsible for RWD?
  • When should I use RWD?
  • Fundamental techniques of RWD
    • Feature detection
      • Modernizr
      • WURFL
    • The viewport element
    • Responsive layouts
    • Media queries
    • Responsive images
    • Responsive tables
  • Overview of RWD techniques
    • HTML solutions
    • CSS solutions
    • JavaScript solutions
  • Responsive vs. Adaptive vs. RESS
    • Liquid layout example
    • Responsive design examples
    • Adaptive design examples
    • RESS design example
  • Pros and Cons of Responsive Design Techniques
  • Summary

Responsive web design fundamentals

  • Introduction
  • Responsive web design fundamentals
    • Feature Detection
    • The viewport and the media query
    • The CSS box model and the CSS reset
  • Understanding feature detection
    • Using the Modernizr library
  • Understanding the viewport
    • What is the viewport?
    • Viewport properties
    • Viewport meta element example code
    • How is the pixel width of the viewport measured?
  • Understanding the media attribute and media types
    • Where do I specify a media type?
    • Recognized media types
  • Understanding media queries
    • What is a media query?
    • Media query syntax
    • Where can I write media queries?
    • Media queries and the cascade
    • Media query features
  • Understanding the CSS box model and CSS resets
    • What is the CSS box model
    • What is a CSS reset

Responsive Layout Techniques

  • Introduction
  • Fixed layouts
    • What is a fixed layout?
    • How is fixed layout created?
    • Fixed units of measurement
    • Fixed layout pros and cons
  • Fluid layouts
    • What is a fluid or liquid layout?
    • How is a fluid layout created?
    • Relative units of measurement
    • Fluid layout pros and cons
  • Elastic layouts
    • What is an elastic layout?
    • How is an elastic layout created?
  • Adaptive and responsive layouts
    • What is an adaptive layout?
    • What is a responsive layout?
    • How is an adaptive layout created?
    • How is a responsive layout created?
  • Flex-box layout
    • What is a flex-box?
    • The flex-box layout model
    • The flex-box properties
      • Flex-box axis
      • flex-direction
      • flex-wrap
      • justify-content
      • align-items
      • order
      • flex-grow, flex-shrink, flex-basis
  • Grid layout
    • What is grid layout
    • The grid layout model
  • Multi-column layout
    • What is a CSS multi-column?
    • The column properties
    • Column-related design issues
  • Using Responsive Frameworks
    • Twitter Bootstrap

Responsive Typography

  • Introduction
  • What is responsive typography?
  • Font-sizing options
    • Absolute vs. relative font sizes

Responsive Images

  • Introduction
  • What are responsive images?
    • Responsive image example
    • Issues surrounding responsive images
      • Performance
      • Bandwidth
      • Graphic design and art direction
      • Coding conventions
  • Basic image terminology
    • Screen resolution
    • Pixel density
    • CSS pixel or density independent pixel (DIP)
    • CSS pixel ratio
    • Device pixel ratio
    • Asset size
    • Asset resolution
    • Foreground image
    • Background image
  • Responsive image techniques
    • Introduction
    • HTML techniques
      • The <picture> element
    • CSS techniques
    • JavaScript techniques
    • Server-side techniques
  • HTML Techniques
    • Introduction
    • picture element
      • Current status of support
    • srcset attribute
      • Current status of support
  • CSS Techniques
    • Introduction
    • Responsive techniques
      • Resizing images
      • Cropping images
    • Adaptive techniques
      • Resizing images using media queries
      • Cropping images using media queries
      • The image-set() function
  • image-set() vs. media queries
  • Media Query for High Resolution Images
  • JavaScript Techniques
    • Introduction
    • PictureFill.js: an HTML <picture> element polyfill
    • HiSRC: a jQuery plug-in
  • Server-Side techniques
    • Sencha.io src
    • CDN Connect Image API
  • No Images!
    • Introduction
    • Alternatives to downloading images
      • HTML5 element
      • Scalable Vector Graphics
      • Icon Fonts
      • CSS3
  • Summary
    • Responsive Image Chart

Responsive Tables

  • What is a responsive table?
  • Responsive Table Techniques
    • Hide columns
    • Manipulate table display
    • Morph the table
      • Unordered list
      • Chart
    • JavaScript and jQuery solutions
  • Finding your own solutions

Introduction to CSS3

  • CSS3 Backgrounds and Shadows
  • CSS3 Transforms
    • What is a CSS transform?
    • CSS3 2D transforms
    • CSS3 3D transforms
    • CSS Transforms properties and methods
  • CSS3 Transitions
    • What is a CSS transition?
    • How do I execute a transition?
  • CSS3 Animations
    • CSS3 animation code
    • Demo animations
      • 3D animation
      • Cross-Fade
      • Slideshow
What You Can Expect
  • Understand the fundamentals of the Cascading Style Sheet language
  • Write basic CSS
  • Write basic and advanced CSS selectors
  • Understand the different types of responsive web design available today
  • Understand the various techniques currently in development at the W3C and WHATWG standards organizations
  • Understand the concepts required to being building Responsive Design
  • Describe the role of the viewport
  • Describe the role of the CSS Reset and CSS Box model
  • Declare the difference between the media attribute and a media query
  • Write media queries that target different device models (e.g. Tablet, Smartphone, Desktop)
  • Understand the difference between HTML, CSS and JS solutions to RWD
  • Describe the differences between responsive and adaptive web design
  • List the different types of RWD including responsive, adaptive and server-side device detection
  • Implementing feature detection
  • Use the Modernizr JavaScript library
  • Build responsive layouts with CSS
  • Build adaptive layouts with CSS
  • Use the new CSS flex-box
  • Use the new CSS column property
  • Understand the Bootstrap framework
  • Create responsive typography
  • Use the new rem and vp units of measurement
  • Recite some new responsive image techniques
  • Build responsive tables
  • Introduction to CSS3 techniques
  • Introduction to Scalable Vector Graphics
Recommended Prerequisites

Prior to taking this RWD course, attendees should have a working knowledge of HTML (any version), CSS (any version) and JavaScript, or have taken a basic Introduction to HMTL5, Introduction to CSS, and Introduction to JavaScript classes. This RWD course assumes no prior knowledge of mobile development related topics.

« Hide The Details
Related Courses
Code Course Title Duration Level
HTML
Hypertext Markup Language (HTML) - 2 days
2 Days
I
Details
JSCP01
JavaScript Programming Essentials
4 Days
II
Details
CSS
Cascading Style Sheets (CSS)
2 Days
II
Details
HTML5
Web Application Development Using HTML5
4 Days
II
Details
JSAP01
JavaScript Advanced Programming
2 Days
II
Details
WEBAPI
HTML5 Advanced APIs
3 Days
III
Details

Every student attending a Verhoef Training class will receive a certificate good for $100 toward their next public class taken within a year.

You can also buy "Verhoef Vouchers" to get a discounted rate for a single student in any of our public or web-based classes. Contact your account manager or our sales office for details.

Schedule For This Course
There are currently no public sessions scheduled for this course. We can schedule a private class for your organization just a couple of weeks from now. Or we can let you know the next time we do schedule a public session.
Notify me the next time this course is confirmed!
Can't find the course you want?
Call us at 800.533.3893, or
email us at info@verhoef.com