RWD 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
Accelebrate offers instructor-led enterprise training for groups of 3 or more online or at your site. Most Accelebrate classes can be flexibly scheduled for your group, including delivery in half-day segments across a week or set of weeks. To receive a customized proposal and price quote for private corporate training on-site or online, please contact us.
In addition, some courses are available as live, instructor-led training from one of our partners.
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
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.
Outline
Expand All | Collapse All
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
- Overview of responsive layouts vs. adaptive layouts
- Media queries
- Responsive images
- Responsive tables
Introduction to 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
Understanding 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
Understanding Media Queries
- 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
- Flex-box 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
- The flex grow, shrink and basis properties
- 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
- Responsive Frameworks
- What is Bootstrap?
- Who created Bootstrap?
- Why use Bootstrap
- Important information for users of Bootstrap 3
- The Bootstrap Playground
- Customizing Bootstrap
- Acquiring Bootstrap 4
- Download options
- What you get
- Using the starter template
- Browser support for Bootstrap
- Customizing your version of Bootstrap 4
- Introduction to Bootstrap 5
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
- What’s new in Bootstrap 5
Bootstrap Built-in Styles
- Typographic styles
- Using Bootstrap typographic styles
- Table styles
- Image styles
Bootstrap Components
- Introduction to Bootstrap Components
- Bootstrap components chart
- Bootstrap Cards
- Bootstrap Modals
- Bootstrap Forms
Bootstrap Editors
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
- 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
Training Materials
All RWD training attendees receive comprehensive courseware.
Software Requirements
- Windows or macOS with at least 8 GB RAM
- 2 or more browsers of your choice (recent versions):
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Safari
- Web development tool of your choice (should support CSS syntax highlighting)
