Responsive Web Design: Advancing your Design to the Web
4.5 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
70 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Responsive Web Design: Advancing your Design to the Web to your Wishlist.

Add to Wishlist

Responsive Web Design: Advancing your Design to the Web

A fascinating journey into the world of responsive web design
4.5 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
70 students enrolled
Created by Packt Publishing
Last updated 10/2015
Current price: $10 Original price: $75 Discount: 87% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 2.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
What Will I Learn?
  • Get an in-depth knowledge of media queries—the heart of responsive web design
  • Create advanced design strategies for different devices, aspect ratios, and resolutions
  • Work with the Twitter Bootstrap framework to build effective designs
  • Make your design backward-compatible and expand support to IE9 with HTML5shim
  • Enhance the user experience using relative measurement types
  • Stay up to date with all the future developments in web design and discover CSS4 media queries
View Curriculum
  • HTML and CSS

The modern web puts the user at the center of all activities. With 100s of different devices out there, web designers must up their game and develop sites that work for TV, mobile, and print, and large as well as small screens. The modern web is based on responsive websites that adapt to the user and their needs. Today websites reach far and wide from computers, TVs, printers, and e-books to mobile devices. The old way of building websites doesn't work anymore and we need to move to a responsive web design strategy to keep up with the changing world.

This video course walks you through all the steps involved in building responsive designs with ease and will upgrade your skills as a web designer.

We will start off with the basics of media queries, which are the key to responsive design, and creating custom layouts based on output type. You’ll get a deeper understanding of responsive design, how to plan for it, and how to work with various media query expressions and features. You’ll learn how to design for multiple devices and resolutions, and optimize for media types including print, screen, mobile, desktop, and more. In addition, you will also become familiar with central responsive frameworks, such as Bootstrap, and will become able to tackle responsive design challenges using effective design strategies.

Finally, we will look at the future of web design and discuss CSS4 media queries, which were still in the planning stages when this course was being developed. These are not supported yet by browsers, but will give us a glimpse of what lies ahead to help us understand the possible future for media queries.

This video course is the ultimate guide to responsive web design that will give you all the knowledge and skills needed to create fully responsive designs for the modern web!

About The Author

Ben Fhala discovered his passion for data visualization while he was working at Parsons in New York, in their data visualization department, PIIM. He is the owner of the online video training school, 02geekcom, and an Adobe ACP. He enjoys spending most of his time learning and teaching, and has a love for visual programming and visualization in general. Ben has had the honor of developing applications for members of the US Congress, Prime Ministers, and Presidents around the world.

He has built many interactive experiences for companies such as Target, AT&T, Crayola, Marriott, Neutrogena, and Nokia. He has technically directed many award-winning projects and has been part of teams that have won three Agency of the Year awards.

Among Ben's publications are HTML5 Graphing and Data Visualization Cookbook, and three video courses jQuery UI Development, Learning Object-Oriented JavaScript, and Mastering JavaScript, all for Packt Publishing.

Who is the target audience?
  • Are you an existing web developer familiar with HTML and CSS, who is ready to take on the future of web creation using responsive web design? Then this is the course for you!
Compare to Other Responsive Design Courses
Curriculum For This Course
26 Lectures
Getting Started with Media Queries
5 Lectures 25:31

This video will offer the overview of the course.

The Course Overview

Media queries were introduced in HTML4/CSS2 as a way to support the growing ways via which we consume data online. Media queries enable us to serve up the same data but change the way it is presented based on the parameters that are within our control.

What Are Media Queries?

There is no better way to start showcasing media queries than by showing them in action. In this video, we will learn how to define different CSS files depending on the type of media.

Media Queries "Hello World"

There are two ways to define media queries. The first is to define it for a full file, as we explored in the last video. In this video, we will take a look at the second way of defining the CSS media query rules.

Media Queries Within a CSS File with the @media Rule

So far, we have treated every media rule as a standalone independent. There are many scenarios where we will want to define a rule based on a match of a few filters. In this video, we will learn how to create advanced media rules with the help of the "and" operator.

Media Query Rule Combination
Moving into Responsive Design with Media Query Expressions
5 Lectures 29:21

Responsive design is a design that changes and adapts to the user dynamically. This type of design helps us create sites that look great on many devices and has many different usages.

Preview 04:20

CSS media queries enable us to filter out devices based on a set of parameters. We previously saw many parameters that were hard-set as "yes" or "no". We will now move away from Boolean expressions and move into a rich world of values, starting with the width and height expressions. In this video, you will learn how to work with expressions.

Optimizing for a Specific Device

With hundreds of different resolutions and settings, it would be impossible for us to create a specific design for every single device on earth. For us to design a design that doesn't target one specific device or resolution, we need to be able to define ranges of acceptable parameters.

Creating Responsive Designs with Size Ranges

Just by planning and designing your site to make it responsive, it will look better and will be more useful for users. The next step is to customize and improve the flow and layout for mobile output.

Mobile Responsiveness

There is a limit to how far in history we will be able to support our layout, but there are some things that we can do to extend the support to an older browser.

Backward Compatibility
Advanced Design Strategies
5 Lectures 38:37

A good fluid design starts with a good strategy that can be used to pick the measurement types that need to be used in an HTML/CSS project. In this video, you will get to know the different CSS measurement types. We will then showcase a plan on how to make almost any design fluid ready.

Preview 12:28

It's nice to have small elements change, but many times, when users make a screen larger or smaller, they like to see the content size scale as well. Let’s learn how to use the relative measurement types to enhance the users' experience with our site.

Creating a Site That Responds to Itself

When it comes to providing the best experience to users and cutting down on costs of bandwidth on your server, nothing comes close to the topic that we will cover in this video as regards its importance. Instead of reusing assets on all screens, a better strategy would be to provide content based on the resolution.

Optimizing Based on Device Resolution

When we think about web design, we normally think in pixels or even in percentages, but if we really want to take advantage of users' screens, we need to know the aspect ratio of their screens.

Designing by Aspect Ratio

In this course, we mastered the usage of responsive design and media queries. In this video, we’ll spend a few moments talking about all the topics that we didn't practice in this course.

Talking about Color and Grids
Working with Responsive Frameworks
6 Lectures 36:19

Responsive frameworks or web development frameworks cut down the need for developers to build their own starting point. The libraries usually are very rich and provide common developer needs quickly and with limited effort.

Preview 07:36

Let’s get to know the basics of how Twitter Bootstrap works.

The Twitter Bootstrap

At the heart of Twitter Bootstrap is a rules library that enables us to cut down on development time. In this video, we will understand the foundations of how to work with the Twitter Bootstrap CSS rules.

Understanding the Twitter Bootstrap CSS Rules

Twitter Bootstrap has components that enable you to improve and expand the features available in the base library. We will learn how to leverage the Twitter Bootstrap components library. To leverage interactivity, we need to include the JavaScript plugins.

Adding Components

Twitter Bootstrap is a responsive framework that enables you to quickly create grids. We will see the basics of how to work with the grid layout.

An Example of a Grid Layout

Learn how to change the color themes in the Twitter Bootstrap library.

Changing Themes with LESS
Media Queries Level 4
5 Lectures 21:56

Which media types will stay and which media types are likely to leave us? The answer might surprise you, but it will change the way you develop today if you want to be ready for the future.

Preview 04:01

There is a shift in the way CSS is going to manage media types, especially with a long-term goal of getting rid of media types altogether and focusing on media features. Although the list of features is far from finalized at this stage, it can help us understand how to get ready for the future.

Moving into Media Features

In the future, it is very likely that we will be able to create our own media query rules.

Creating Custom Media Queries

You already know how to work with the "not", "only", and "and" operators, but is there any new operator around? You guessed right. There is a high likelihood that a new operator will be introduced—the "or" operator.

Media Query Operators

Until now, when you wanted to define a range, you had to use the min and max parameters, but in CSS4, there is a good chance that ranges will be introduced.

Working with Media Query Ranges
About the Instructor
Packt Publishing
3.9 Average rating
8,197 Reviews
58,896 Students
687 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.