Wireframe with Gliffy | Chris Dixon.io

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Responsive Web Design Academy

Welcome & Getting Started

Welcome to the course (1:56)
What is responsive design? (9:42)
What you will need and useful tools (5:25)
Why mobile first? (2:48)

Fluid Grids & Responsive Essentials

Getting started with the fluid grid (7:51)
Relative units (6:29)
Viewport meta tag (3:10)
Media queries & breakpoints (14:19)

Lets Get Building

Download Project images
Wireframe with Gliffy (4:20)
Setting up the project (15:43)
Header & Navigation (14:34)
Adding the main content (10:01)
Creating the sign up area & footer (10:41)
Mobile first styling (10:43)
Mobile styles continued & adding media queries (11:06)
Finishing our project (9:01)

jQuery Plugins for Responsive Design

Responsive sliding carousel (6:19)
Responsive social share buttons (8:02)

Responsive Images & Improving Page Load Times

Responsive images introduction (2:01)
Reducing image file sizes (3:44)
Important Update- please read
Minification & Page Speed Insights (7:12)
Picture element (12:17)
Adaptive Images (2:23)

CSS Flexbox

Introduction to Flexbox (10:41)
Flexbox Grid (7:32)
Holy Grain Layout using Flexbox (8:43)
Flexbox sticky footer (3:02)

Responsive Frameworks

Bootstrap framework (12:02)
jQuery Mobile part 1 (18:33)
jQuery Mobile part 2 (10:00)
Other popular frameworks (3:11)

Thank You

Final project files
Thank You (1:15)
Keep learning

Teach online with

Wireframe with Gliffy

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock