The changing way in which we access the web means that there has never been a greater range of screen sizes and associated user experiences. With these trends driving changes in design, typical desktop-only websites fail to meet even minimum expectations when it comes to style and usability, which can be vital when your website is central to yours or your client's brand.
A responsive web design provides a single solution that looks great on a phone, desktop, and everything in-between, providing the best experience possible for both today's and tomorrow's devices. This course covers every essential aspect of RWD and broader front-end development best practices.
With this course, we have created the definitive guide for all things responsive. We cover the entire gamut of HTML5 and CSS3's new features that help to effortlessly create modern, responsive web designs.
We'll focus heavily on applying the latest techniques provided by HTML5 and CSS3, all in the context of real-world examples.
Learning Objectives
- The Essentials of Responsive Web Design
- Media Queries – Supporting Differing Viewports
- Fluid Layouts and Responsive Images
- HTML5 for Responsive Web Designs
- CSS3 – Selectors, Typography, and Color Modes
- Stunning Aesthetics with CSS3
- Transitions, Transformations, and Animations
- Conquer Forms with HTML5 and CSS3
- Using SVGs for Resolution Independence
The Essentials of Responsive Web Design
- Defining Responsive Web Design
- Our First Responsive Example
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
Fluid Layouts and Responsive Images
- Converting a Fixed Pixel Design to a Fluid Proportional Layout
- Flexbox
- Responsive Images
HTML5 for Responsive Web Designs
- HTML5 Markup
- Semantic HTML5
- HTML5 Media Elements
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
Stunning Aesthetics with CSS3
- Shadows with CSS3
- Gradients
- Background Images
- CSS Filters
Transitions, Transformations, and Animations
- CSS3 Transitions
- CSS3 2D Transforms
- CSS3 3D Transformations
- Animating with CSS3
Conquer Forms with HTML5 and CSS3
- HTML5 Forms
- The HTML5 Input Element
- Styling HTML5 Forms with CSS3
Using SVGs for Resolution Independence
- Introducing SVGs
- Inserting SVGs
- Extra SVG Capabilities and Oddities
- Web Designers
- Web Developers
- Front-End Developers
Prerequisites
- Basic knowledge of CSS
- Basic knowledge of HTML