off original price!

The coupon code was not applied because it has already been redeemed or expired. Please click on "My Courses" to see if the course is already on your account.

off original price!

The coupon code was not applied because it has already been redeemed or expired. Please click on "My Courses" to see if the course is already on your account.

Mobile First & Responsive Web Design: Build modern websites!

Create Websites That Always Look Great on Mobile

What's Inside

Considering how many people browse the Web on a mobile device, and how many different phones and tablets exist on the market—it’s imperative for you learn mobile-first, responsive Web design. Ensure your websites and apps look great on any device by mastering use of fluid grids, adding responsive features like carousels, and much more.

Understand what responsive design is & why it’s important w/ 5 hours of content
Work w/ fluid grids to craft responsive web pages
Build your website by wireframing designs, configuring site organization & more
Use jQuery plugins to implement responsive carousels & social share buttons
Use CSS Flexbox to easily map out & build responsive layouts
Utilize the Bootstrap framework, jQuery Mobile & more
Optimize your site’s images so that they conform to the needs of a responsive website

Course Curriculum

Welcome & Getting Started

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

Fluid Grids & Responsive Essentials

Getting started with the fluid grid - 7:51
Start
Relative units - 6:29
Start
Viewport Meta Tag - 3:10
Start
Media Queries & Breakpoints - 14:19
Start

Lets Get Building

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

jQuery Plugins for Responsive Design

Responsive Sliding Carousel - 6:19
Start
Responsive Social Share buttons - 8:02
Start

Responsive Images & Improving Page Load Times

Responsive images introduction - 2:01
Start
Reducing image file sizes - 3:44
Start
Important update- please read
Start
Minification & Page Speed Insights - 7:12
Start
Picture Element - 12:17
Start
Adaptive images - 2:23
Start

CSS Flexbox

Introduction to Flexbox - 10:41
Start
Flexbox grid - 7:32
Start
Holy grail layout using Flexbox - 8:43
Start
Flexbox sticky footer - 3:02
Start

Responsive Frameworks

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

Thank You

Final project files
Start
Thank you - 1:15
Start

off original price!

The coupon code was not applied because it has already been redeemed or expired. Please click on "My Courses" to see if the course is already on your account.

Get started now!