Introduction to RWD
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
Responsive Web Design Training Outline
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
The viewport element
What is Modernizr
Understanding how Modernizr works
Using the Modernizr object
Using the Modernizr API
The Modernizr library and the HTML5 shim
CSS Feature Queries
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
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
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
Introduction to the Grid layout
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
Introduction to Bootstrap
Browser support for Bootstrap
Customizing your version of Bootstrap 4
Fundamentals of Layout with Bootstrap
Media queries – responsive breakpoints
The Bootstrap 4 Grid system
How it works
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
Introduction to Bootstrap Components
Bootstrap components chart
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
Introduction to Responsive Images
What are responsive images?
Issues surrounding responsive images?
Basic image terminology
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
Introduction to Responsive tables
Responsive table techniques
Hiding table data
Manipulating the table display
Scrolling table data
All students receive a copy of PACKT's Responsive Web Design with HTML5 and CSS3 and related courseware.
Software needed for each student PC: