Your privacy matters: This site uses cookies to analyze site usage and provide social media features. Learn More.

Introduction to RWD

MBL-204 (4 Days)
4.65 out of 5 (199 reviews)  

Request Pricing

Responsive Web Design 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

Most Accelebrate courses are delivered as private, customized, on-site training at our clients' locations worldwide for groups of 3 or more attendees and are custom tailored to their specific needs. Please visit our client list to see organizations for whom we have delivered private in-house training. These courses can also be delivered as live, private online classes for groups that are geographically dispersed or wish to save on the instructor's or students' travel expenses. To receive a customized proposal and price quote for private training at your site or online, please contact us.

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

Responsive Web Design Training 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

Responsive Web Design Training Outline

Expand All | Collapse All | Printer-Friendly

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
  • Responsive layouts
  • Media queries
  • Responsive images
  • Responsive tables
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
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
  • 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: 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
  • 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
  • Introduction to CSS Frameworks
  • Responsive Frameworks
  • Introduction to Bootstrap
  • Browser support for Bootstrap
  • Customizing your version of Bootstrap 4
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
Bootstrap Built-in Styles
  • Introduction to Bootstrap built-in styles
  • Table styles
  • Image styles
Bootstrap Components
  • Introduction to Bootstrap Components
  • Bootstrap components chart
  • Bootstrap Cards
  • Bootstrap Modals
  • Bootstrap Forms
Responsive Typography
  • Introduction to 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
  • Introduction to 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
Request Pricing

Lecture percentage

25%

Lecture/Demo

Lab percentage

75%

Lab

Course Number:

MBL-204

Duration:

4 Days

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.

Training Materials:

All students receive a copy of PACKT's Responsive Web Design with HTML5 and CSS3 and related courseware.

Software Requirements:

  • Windows or Mac OS X with at least 3 GB RAM
  • 2 or more browsers of your choice (recent versions):
    • Google Chrome
    • Mozilla Firefox with the Firebug extension installed
    • Internet Explorer 10 or later [Windows users]
    • Safari 5 or later
  • Web development tool of your choice (should support CSS syntax highlighting)

Contact Us:

Accelebrate’s training classes are available for private groups of 3 or more people at your site or online anywhere worldwide.

Don't settle for a "one size fits all" public class! Have Accelebrate deliver exactly the training you want, privately at your site or online, for less than the cost of a public class.

For pricing and to learn more, please contact us.

Contact Us

Toll-free in US/Canada:
877 849 1850
International:
+1 678 648 3113

Toll-free in US/Canada:
866 566 1228
International:
+1 404 420 2491

925B Peachtree Street, NE
PMB 378
Atlanta, GA 30309-3918
USA

Subscribe to our Newsletter:

Never miss the latest news and information from Accelebrate:

Microsoft Gold Partner

Please see our complete list of
Microsoft Official Courses

Recent Training Locations

Alabama

Huntsville

Montgomery

Birmingham

Alaska

Anchorage

Arizona

Phoenix

Tucson

Arkansas

Fayetteville

Little Rock

California

San Francisco

Oakland

San Jose

Orange County

Los Angeles

Sacramento

San Diego

Colorado

Denver

Boulder

Colorado Springs

Connecticut

Hartford

DC

Washington

Florida

Fort Lauderdale

Miami

Jacksonville

Orlando

Saint Petersburg

Tampa

Georgia

Atlanta

Augusta

Savannah

Idaho

Boise

Illinois

Chicago

Indiana

Indianapolis

Iowa

Ceder Rapids

Des Moines

Kansas

Wichita

Kentucky

Lexington

Louisville

Louisiana

Banton Rouge

New Orleans

Maine

Portland

Maryland

Annapolis

Baltimore

Hagerstown

Frederick

Massachusetts

Springfield

Boston

Cambridge

Michigan

Ann Arbor

Detroit

Grand Rapids

Minnesota

Saint Paul

Minneapolis

Mississippi

Jackson

Missouri

Kansas City

St. Louis

Nebraska

Lincoln

Omaha

Nevada

Reno

Las Vegas

New Jersey

Princeton

New Mexico

Albuquerque

New York

Buffalo

Albany

White Plains

New York City

North Carolina

Charlotte

Durham

Raleigh

Ohio

Canton

Akron

Cincinnati

Cleveland

Columbus

Dayton

Oklahoma

Tulsa

Oklahoma City

Oregon

Portland

Pennsylvania

Pittsburgh

Philadelphia

Rhode Island

Providence

South Carolina

Columbia

Charleston

Spartanburg

Greenville

Tennessee

Memphis

Nashville

Knoxville

Texas

Dallas

El Paso

Houston

San Antonio

Austin

Utah

Salt Lake City

Virginia

Richmond

Alexandria

Arlington

Washington

Tacoma

Seattle

West Virginia

Charleston

Wisconsin

Madison

Milwaukee

Alberta

Edmonton

Calgary

British Columbia

Vancouver

Nova Scotia

Halifax

Ontario

Ottawa

Toronto

Quebec

Montreal

Puerto Rico

San Juan

© 2013-2019 Accelebrate, Inc. All Rights Reserved. All trademarks are owned by their respective owners.