Lesson 1: The Essentials of Responsive Web Design

• Defining Responsive Web Design
• Our First Responsive Example

Lesson 2: Media Queries – Supporting Differing Viewports

• Media Query Syntax
• Combining Media Queries
• Using Media Queries to Alter a Design
• Media Queries Best Practices
• The Viewport Meta Tag
• Media Queries Level 4

Lesson 3: Fluid Layouts and Responsive Images

• Converting a Fixed Pixel Design to a Fluid Proportional Layout
• Flexbox
• Responsive Images

Lesson 4: HTML5 for Responsive Web Designs

• HTML5 Markup
• Semantic HTML5
• HTML5 Media Elements

Lesson 5: CSS3 – Selectors, Typography, and Color Modes

• Introduction to CSS
• Facilitating Feature Forks in CSS
• New CSS3 Selectors and Their Use
• CSS3 Structural Pseudo-classes
• More About CSS
• New CSS3 Color Formats and Alpha Transparency

Lesson 6: Stunning Aesthetics with CSS3

• Shadows with CSS3
• Gradients
• Background Images
• CSS Filters

Lesson 7: Transitions, Transformations, and Animations

• CSS3 Transitions
• CSS3 2D Transforms
• CSS3 3D Transformations
• Animating with CSS3

Lesson 8: Conquer Forms with HTML5 and CSS3

• HTML5 Forms
• The HTML5 Input Element
• Styling HTML5 Forms with CSS3

Lesson 9: Using SVGs for Resolution Independence

• Introducing SVGs
• Inserting SVGs
• Extra SVG Capabilities and Oddities

This Responsive Web Development with HTML and CSS course provides skills to web developers who are looking to build modern responsive websites using HTML5 and CSS3.

Before attending this course, you should have a basic knowledge of HTML and CSS and should know how to work with browser developer tools.

Hardware

This course will require a computer system for the instructor and one for each student. The minimum hardware requirements are as follows:

• Processor: i3
• Memory: 2 GB RAM
• Hard disk: 10 GB
• Projector
• Internet connection

Software

For this course, we will use the following software:

• A system with 64-bit Windows 8
• Atom
• The latest versions of Google Chrome and Mozilla Firefox