Responsive Web Design: Advancing your Design to the Modern Web
Playing problem
This video does not seem to be available
00:00
00:00

VIDEO TUTORIAL Responsive Web Design: Advancing your Design to the Modern Web

Packt
68,00€

Unlimited download & streaming

Satisfied or refunded

100% secure payment

A fascinating journey into the world of responsive web design

About This Resonsive Design video course

  • Polish your skills to design highly responsive websites for the modern web
  • Learn how to plan your design for print, web, mobile, and even TVs
  • Gaze into the future of web design with CSS4 features!

Course In Detail

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!

What will you learn in this course?

Course plan
Chapter 1
Getting Started with Media Queries
Chapter 2
Moving into Responsive Design with Media Query Expressions
Chapter 3
Advanced Design Strategies
Chapter 4
Working with Responsive Frameworks
Chapter 5
Media Queries Level 4

Detailed course plan

Chapter 1 : Getting Started with Media Queries
21m24s
 
Lesson 1The Course Overview
Lesson 2Media Queries "Hello World"
Lesson 3Media Queries Within a CSS File with the @media Rule
Lesson 4Media Query Rule Combination
Chapter 2 : Moving into Responsive Design with Media Query Expressions
29m23s
 
Lesson 1What Is Responsive Design?
Lesson 2Optimizing for a Specific Device
Lesson 3Creating Responsive Designs with Size Ranges
Lesson 4Mobile Responsiveness
Lesson 5Backward Compatibility
Chapter 3 : Advanced Design Strategies
38m41s
 
Lesson 1Thinking Fluid
Lesson 2Creating a Site That Responds to Itself
Lesson 3Optimizing Based on Device Resolution
Lesson 4Designing by Aspect Ratio
Lesson 5Talking about Color and Grids
Chapter 4 : Working with Responsive Frameworks
36m20s
 
Lesson 1What Are Responsive Frameworks?
Lesson 2The Twitter Bootstrap
Lesson 3Understanding the Twitter Bootstrap CSS Rules
Lesson 4Adding Components
Lesson 5An Example of a Grid Layout
Lesson 6Changing Themes with LESS
Chapter 5 : Media Queries Level 4
26m08s
 
Lesson 1The Future of Media Types
Lesson 2Moving into Media Features
Lesson 3Creating Custom Media Queries
Lesson 4Media Query Operators
Lesson 5Working with Media Query Ranges
Lesson 6What Are Media Queries?

Your questions about the course

With which software version is this tutorial compatible with?

CSS

What is the required level to follow this tutorial ?

intermediate

Wait ! 🤗

Access more than 19 free tutorials

Our data protection policy