Web Development

Preferred method of contact:

CSS3 for Responsive Web Design



Course Number



4 Days

View Schedule

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

Course Schedule

Attend this live, instructor-led course In-Class or Online via AnyWare.

Hassle-Free Enrollment: No advance payment required.
Tuition due 30 days after your course.

Jul 18 - 21 AnyWare Enroll Now

How would you like to attend?

Live, Online via AnyWare

Aug 1 - 4 Toronto/AnyWare Enroll Now

How would you like to attend?

Live, Online via AnyWare

Aug 22 - 25 New York/AnyWare Enroll Now

How would you like to attend?

Live, Online via AnyWare

Oct 10 - 13 AnyWare Enroll Now

How would you like to attend?

Live, Online via AnyWare

Nov 14 - 17 Herndon, VA/AnyWare Enroll Now

How would you like to attend?

Live, Online via AnyWare

Jan 30 - Feb 2 Toronto/AnyWare Enroll Now

How would you like to attend?

Live, Online via AnyWare

Feb 20 - 23 New York/AnyWare Enroll Now

How would you like to attend?

Live, Online via AnyWare

Guaranteed to Run

Bring this Course to Your Organization and Train Your Entire Team
For more information, call 1-888-843-8733 or click here






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 course exam on the last day of your course and receive a Certificate of Achievement with the designation "Awarded with Distinction."



Call 1-888-843-8733 or click here »

An experienced training advisor will happily answer any questions you may have and alert you to any tuition savings to
which you or your organization may be entitled.

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)
  • Make progress toward one or more Learning Tree Specialist & Expert 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


Please Choose a Language

Canada - English

Canada - Français