Introduction to Responsive Web Design (RWD)

199 Ratings

Course Number: MBL-204

Duration: 4 days (26 hours)

Format: Live, hands-on

RWD Training Overview

Accelebrate's Introduction to Responsive Web Design (RWD) training 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. After mastering the fundamental concepts of RWD, students explore the latest techniques to achieve responsive layout, images, typography, and tables.

Location and Pricing

Accelebrate offers instructor-led enterprise training for groups of 3 or more online or at your site. Most Accelebrate classes can be flexibly scheduled for your group, including delivery in half-day segments across a week or set of weeks. To receive a customized proposal and price quote for private corporate training on-site or online, please contact us.

In addition, some courses are available as live, online classes for individuals. See a schedule of online courses.

Objectives

  • Understand the benefits and the fundamentals of using RWD
  • Learn responsive layout techniques including liquid and adaptive layouts
  • Use responsive typography techniques
  • Incorporate responsive images using HTML, JavaScript, and CSS
  • Learn how to present images in different resolutions adaptively across a wide array of devices
  • Display data cleanly on multiple devices using responsive tables
  • Learn to use CSS3 for transforms, transitions, and animations
  • Use Bootstrap layout techniques
  • Create responsive tables

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 Accelebrate's Introduction to HMTL5, Introduction to CSS, and Introduction to JavaScript classes. This RWD course assumes no prior knowledge of mobile development related topics.

Outline

Expand All | Collapse All

Introduction to Responsive Web Design
  • What is responsive Web design?
  • Why should I use RWD?
  • Where did RWD come from?
  • Who is responsible for RWD?
  • When should I use RWD?
  • How do I implement RWD?
Fundamental Techniques of RWD
  • Feature detection
  • The viewport element
  • Overview of responsive layouts vs. adaptive layouts
  • Media queries
  • Responsive images
  • Responsive tables
Introduction to Feature Detection
  • What is Modernizr
  • Using the Modernizr JavaScript library
  • Understanding how Modernizr works
  • Using the Modernizr object
  • Using the Modernizr API
  • The Modernizr library and the HTML5 shim
  • CSS Feature Queries
  • CSS @supports
  • CSS.supports() method
Understanding the Viewport
  • What is the viewport?
  • How is the pixel width of the viewport measured?
  • Understanding the viewport meta tag
Media Attribute and Media Queries
  • How do I specify a media type?
  • Recognized media types
  • Understanding the HTML media attribute
Understanding Media Queries
  • What is a media query?
  • Media query syntax
  • Media query repositories
  • Where can I write a media query?
  • About respond.js
  • About css3-mediaqueries.js
  • Media queries and the cascade
  • Media query features
  • A media query strategy
  • Understanding the media query
The CSS Box Model
  • Understanding the CSS box model and box size
  • What is the CSS box model?
The CSS Reset
  • Why use a CSS reset?
  • Understanding the CSS reset
The Display Property
  • Introduction to the display property
  • Inline vs. block
  • Important display properties
Overview of RWD Layout Techniques
  • Fixed layout vs. liquid layout
  • A word about elastic layouts
  • Responsive
  • Adaptive
  • New CSS Properties: Flexbox and Grid
Understanding Flexbox Layout
  • Flex-box layout: New feature of Bootstrap 4
  • Creating a flex box
  • What is a flex box?
  • The flex box model
  • Flex display properties
  • Understanding the flex layout model
  • The flex grow, shrink and basis properties
  • Practice your flex property knowledge
  • Creating a responsive flex box layout
  • Flex box layout
Grid Layout
  • Introduction to the Grid layout
  • Grid Glossary
  • Grid terminology and behavior
  • Using grid properties
  • Create a grid and use grid properties
  • Use named grid lines
  • Memorizing grid properties
Introduction to CSS Frameworks and Bootstrap
  • Responsive Frameworks
  • What is Bootstrap?
  • Who created Bootstrap?
  • Why use Bootstrap
  • Important information for users of Bootstrap 3
  • The Bootstrap Playground
  • Customizing Bootstrap
  • Acquiring Bootstrap 4
  • Download options
  • What you get
  • Using the starter template
  • Browser support for Bootstrap
  • Customizing your version of Bootstrap 4
  • Introduction to Bootstrap 5
Fundamentals of Layout with Bootstrap
  • Containers
  • Media queries – responsive breakpoints
  • Z-index
The Bootstrap 4 Grid System
  • How it works
  • Grid options
  • Controlling alignment
  • Working with columns
  • Build a simple layout with the Bootstrap 4 grid
  • Bootstrap 4's new media feature
  • Build a complex layout with the Bootstrap 4 grid
  • What’s new in Bootstrap 5
Bootstrap Built-in Styles
  • Typographic styles
  • Using Bootstrap typographic styles
  • Table styles
  • Image styles
Bootstrap Components
  • Introduction to Bootstrap Components
  • Bootstrap components chart
  • Bootstrap Cards
  • Bootstrap Modals
  • Bootstrap Forms
Bootstrap Editors
Responsive Typography
  • What is responsive typography?
  • Font Sizing options
  • Working with ems
  • Working with rems
  • Working with viewport widths
  • Creating type with the optimal characters per line
Responsive Images
  • What are responsive images?
  • Issues surrounding responsive images
  • Basic image terminology
  • HTML techniques
  • CSS techniques
  • Responsive techniques
  • Adaptive techniques
  • Scaling foreground images with CSS
  • Using the max-width property
  • Scaling background images with CSS
  • Cropping foreground images with CSS
  • Cropping background images with CSS
  • Server-side solutions
  • Other solutions
Responsive Tables
  • Introduction to Responsive tables
  • Responsive table techniques
  • Hiding table data
  • Manipulating the table display
  • Scrolling table data
Conclusion

Training Materials:

All RWD training attendees receive comprehensive courseware.

Software Requirements:

  • Windows or macOS with at least 8 GB RAM
  • 2 or more browsers of your choice (recent versions):
    • Google Chrome
    • Mozilla Firefox
    • Microsoft Edge
    • Safari
  • Web development tool of your choice (should support CSS syntax highlighting)

 



Learn faster

Our live, instructor-led lectures are far more effective than pre-recorded classes

Satisfaction guarantee

If your team is not 100% satisfied with your training, we do what's necessary to make it right

Learn online from anywhere

Whether you are at home or in the office, we make learning interactive and engaging

Multiple Payment Options

We accept check, ACH/EFT, major credit cards, and most purchase orders



Recent Training Locations

Alabama

Birmingham

Huntsville

Montgomery

Alaska

Anchorage

Arizona

Phoenix

Tucson

Arkansas

Fayetteville

Little Rock

California

Los Angeles

Oakland

Orange County

Sacramento

San Diego

San Francisco

San Jose

Colorado

Boulder

Colorado Springs

Denver

Connecticut

Hartford

DC

Washington

Florida

Fort Lauderdale

Jacksonville

Miami

Orlando

Tampa

Georgia

Atlanta

Augusta

Savannah

Hawaii

Honolulu

Idaho

Boise

Illinois

Chicago

Indiana

Indianapolis

Iowa

Cedar Rapids

Des Moines

Kansas

Wichita

Kentucky

Lexington

Louisville

Louisiana

New Orleans

Maine

Portland

Maryland

Annapolis

Baltimore

Frederick

Hagerstown

Massachusetts

Boston

Cambridge

Springfield

Michigan

Ann Arbor

Detroit

Grand Rapids

Minnesota

Minneapolis

Saint Paul

Mississippi

Jackson

Missouri

Kansas City

St. Louis

Nebraska

Lincoln

Omaha

Nevada

Las Vegas

Reno

New Jersey

Princeton

New Mexico

Albuquerque

New York

Albany

Buffalo

New York City

White Plains

North Carolina

Charlotte

Durham

Raleigh

Ohio

Akron

Canton

Cincinnati

Cleveland

Columbus

Dayton

Oklahoma

Oklahoma City

Tulsa

Oregon

Portland

Pennsylvania

Philadelphia

Pittsburgh

Rhode Island

Providence

South Carolina

Charleston

Columbia

Greenville

Tennessee

Knoxville

Memphis

Nashville

Texas

Austin

Dallas

El Paso

Houston

San Antonio

Utah

Salt Lake City

Virginia

Alexandria

Arlington

Norfolk

Richmond

Washington

Seattle

Tacoma

West Virginia

Charleston

Wisconsin

Madison

Milwaukee

Alberta

Calgary

Edmonton

British Columbia

Vancouver

Manitoba

Winnipeg

Nova Scotia

Halifax

Ontario

Ottawa

Toronto

Quebec

Montreal

Puerto Rico

San Juan