CSS3 Responsive Web Design Training
Course 522
4 DAY COURSE

Attend this CSS3 Responsive Web Design course & learn how to build accessible and responsive web applications featuring a rich UI that adapts to the widest possible range of internet-capable devices. You will gain the design skills to create collapsible navigation, liquid layout content, accessible data tables and forms, all while adhering to WCAG level A, AA and AAA checkpoints.

You will employ modern, mobile-first design techniques leveraging typography, flexbox, CSS3 functions and pseudo-selectors/elements, and explore CSS integration with modern JavaScript frameworks like Angular and jQuery.

CSS3 Responsive Web Design Training Benefits

• In this CSS training, you will learn how to:

  • Design Accessible Web Sites using industry standard Accessibility Guidelines.
  • Create Responsive Layouts that adapt to any device size or operating system.
  • Leverage Web Typography and modern, responsive units of measure.
  • Capture user input with responsive and accessible forms and data tables.
  • Implement SASS via Ruby CLI and create a Bootstrap 4 design template.
  • Manage CSS within popular MVC and DOM frameworks like Angular and jQuery.

• Prerequisites

  HTML Experience

Responsive Web Design Training Outline

Module 1: Introduction to Cascading Style Sheets

• Formalize relationship between HTML, JavaScript and CSS
• Define Modern Browser and Web Accessibility
• Develop reusable classes
• Leverage the CSS Inheritance Model
• Optimize your code with Embedded and External CSS
• Update your browser with development assets

Module 2: Styling the CSS Box Model

• Style HTML container box properties
• Leverage differences between block and inline elements
• Manipulate color and transparency
• Develop global and consistent style resets

Module 3: Selecting DOM Elements and Attributes

• Target DOM elements and attributes for style
• Make selections based on DOM hierarchy
• Select based on DOM element behavior
• Chain selections and apply CSS functions

Module 4: Positioning with Accuracy and Consistency

• Manipulate static, absolute, relative and fixed position rules
• Float and clear floated containers
• Apply flexible box model techniques
• Explore CSS columns and grids

Module 5: Web Typography

• Distinguish font from typeface and apply font properties
• Apply text, letter and line properties
• Employ web fonts

Module 6: Accessible and Responsive Forms and Data Tables

• Explore regional interpretations of Accessibility
• Create accessible and responsive forms based on WCAG
• Leverage and extend HTML5 for validation
• Build accessible and responsive data tables based on WCAG

Module 7: Templating with SASS, LESS and Bootstrap

• Qualify strengths of CSS preprocessing frameworks
• Install Ruby and SASS on Windows and create a SCSS document
• Compile SCSS to CSS and investigate alternative pre-processing tools
• Leverage Bootstrap 4 CSS library

Module 8: Styling DOM and MVC JS Frameworks

• Animate DOM content with pure CSS
• Add menu toggles with JavaScript
• Manage CSS selector syntax with jQuery and Angular
• Implement responsive and infinite scrolling