Preferred method of contact:

Building Responsive Web Applications with CSS3



Course Number



4 Days

PDF Add to WishList

Learn how to build web pages that are accessible across a wide range of devices, and ensure a great User Experience (UX) for all customers who interact with your website. In this training course, you gain the skills to design responsive and visually engaging content-oriented web pages using CSS3, apply mobile-first design techniques, and build responsive web forms, menus, and columns.

You Will Learn How To

  • Design responsive web content using Cascading Style Sheets (CSS3)
  • Implement new CSS3 syntax into your legacy applications
  • Enhance Responsive Web Design (RWD) with jQuery plugins
  • Position HTML elements with accuracy and consistency
  • Apply best practices that support modern and legacy browsers

Important Course Information


  • HTML experience at the level of:

Recommended Experience:

  • Familiarity with CSS syntax


  • All versions of CSS are covered in this course with careful attention to CSS3 syntax and semantics

Course Outline

  • Introduction to Cascading Style Sheets (CSS)

Employing CSS syntax and semantics

  • Separating content from design
  • Discovering how CSS makes RWD possible
  • Structuring HTML containers with IDs
  • Manipulating CSS color rules

Integrating style sheets

  • Choosing from inline, embedded and external styles
  • Optimizing rules via group selectors
  • Targeting elements with contextual selectors
  • Demystifying the Cascade Inheritance Model
  • Updating browser with CSS developer tools
  • Leveraging the CSS Box Model

Manipulating HTML containers

  • Selecting accessible units of measure
  • Overcoming collapsing CSS margins
  • Moving HTML content with CSS margins
  • Condensing rules with shorthand definitions
  • Distinguishing relative from absolute position

Adopting accessible units of measure

  • Tailoring global style resets
  • Overriding author styles
  • Distinguishing block from inline elements
  • Defining WCAG accessibility obligations
  • Positioning with Accuracy and Consistency

Explicitly rendering any HTML container

  • Replacing HTML align attribute with CSS float and clear
  • Exploiting the default static position rule
  • Extending position with relative relationships

Advanced positioning

  • Creating advanced contextual position with absolute rules
  • Replacing HTML frames with fixed position rule
  • CSS3 Selection Syntax

Making optimized and advances selections

  • Reviewing contextual and combinatory selector syntax
  • Introducing CSS3 semantic pseudo selectors
  • Chaining pseudo selectors for more specific selections

Advanced Selection Techniques

  • Moving beyond selecting by class, ID or HTML elements
  • Exploiting selections by behavior
  • Selecting by HTML attribute content
  • Selecting based on HTML DOM relationships
  • Managing dynamic content using set selectors
  • Designing Responsive Content

Combining the three CSS ingredients to RWD

  • Assessing mobile-specific design theory
  • Incorporating a mobile-first design
  • Exploring liquid dimensions
  • Introducing min and max attributes

Responsive column layout

  • Designing multi-column layouts that fit any device
  • Performing basic calculations with calc()
  • Dealing with browser vendor prefixes

Exploiting CSS3 flexible layout

  • Implementing columns with CSS flexbox
  • Composing parent and child grid styles
  • Extending CSS2 @media directives
  • Detecting viewport height, width and orientation
  • Exploring mobile device support
  • Accessible and Responsive Forms

Web Consortium Accessibility Guidelines

  • Exploring regional interpretations of WCAG
  • Complementing HTML5 form validation
  • Styling WCAG compliant fieldsets, labels and legends

Enhancing RWD with jQuery

  • Animating content with pure CSS transitions and transforms
  • Modifying DOM properties
  • Adding responsive menu toggles
  • Adding responsive and infinite scrolling

Providing legacy browser support

  • Automated prefix and fallback libraries
  • SASS and LESS pre-processors
Show complete outline
Show Less

Convenient Ways to Attend This Instructor-Led Course

Hassle-Free Enrollment: No advance payment required to reserve your seat.
Tuition due 30 days after you attend your course.

In the Classroom

Live, Online

Private Team Training

In the Classroom — OR — Live, Online

Tuition — Standard: $2990   Government: $2659

Nov 14 - 17 (4 Days)
9:00 AM - 4:30 PM EST
Herndon, VA / Online (AnyWare) Herndon, VA / Online (AnyWare) Reserve Your Seat

How would you like to attend?

Live, Online

Jan 30 - Feb 2 (4 Days)
9:00 AM - 4:30 PM EST
Toronto / Online (AnyWare) Toronto / Online (AnyWare) Reserve Your Seat

How would you like to attend?

Live, Online

Feb 20 - 23 (4 Days)
9:00 AM - 4:30 PM EST
New York / Online (AnyWare) New York / Online (AnyWare) Reserve Your Seat

How would you like to attend?

Live, Online

Mar 26 - 29 (4 Days)
9:00 AM - 4:30 PM EDT
Ottawa / Online (AnyWare) Ottawa / Online (AnyWare) Reserve Your Seat

How would you like to attend?

Live, Online

May 15 - 18 (4 Days)
9:00 AM - 4:30 PM EDT
Herndon, VA / Online (AnyWare) Herndon, VA / Online (AnyWare) Reserve Your Seat

How would you like to attend?

Live, Online

Jul 31 - Aug 3 (4 Days)
9:00 AM - 4:30 PM EDT
Toronto / Online (AnyWare) Toronto / Online (AnyWare) Reserve Your Seat

How would you like to attend?

Live, Online

Aug 21 - 24 (4 Days)
9:00 AM - 4:30 PM EDT
New York / Online (AnyWare) New York / Online (AnyWare) Reserve Your Seat

How would you like to attend?

Live, Online

Guaranteed to Run

Show all dates
Show fewer dates

Private Team Training

Enrolling at least 3 people in this course? Consider bringing this (or any course that can be custom designed) to your preferred location as a private team training.

For details, call 1-888-843-8733 or Click Here »




In Classroom or





Private Team Training

Contact Us »

Course Tuition Includes:

After-Course Instructor Coaching
When you return to work, you are entitled to schedule a free coaching session with your instructor for help and guidance as you apply your new skills.

After-Course Computing Sandbox
You'll be given remote access to a preconfigured virtual machine for you to redo your hands-on exercises, develop/test new code, and experiment with the same software used in your course.

Free Course Exam
You can take your Learning Tree course exam on the last day of your course or online at any time after class and receive a Certificate of Achievement with the designation "Awarded with Distinction."


Training Hours

Standard Course Hours: 9:00 am – 4:30 pm
*Informal discussion with instructor about your projects or areas of special interest: 4:30 pm – 5:30 pm

FREE Online Course Exam (if applicable) – Last Day: 3:30 pm – 4:30 pm
By successfully completing your FREE online course exam, you will:

  • Have a record of your growth and learning results
  • Bring proof of your progress back to your organization
  • Earn credits toward industry certifications (if applicable)

Enhance Your Credentials with Professional Certification

Learning Tree's comprehensive training and exam preparation guarantees that you will gain the knowledge and confidence to achieve professional certification and advance your career.

Earn 17 Credits from NASBA

This course qualifies for 17 CPE credits from the National Association of State Boards of Accountancy CPE program. Read more ...

“Since my job entails designing and developing web pages, this CSS course was perfect for enhancing my skills.”

- P. Anglin, Sr. Software Engineer
Freedom Consulting Group

Chat Now

Please Choose a Language

Canada - English

Canada - Français