Video Tutorial Responsive Web Design: Advancing your Design to the Modern Web with CSS, Bootstrap


  • Course duration : 2h31m
  • Lifetime access
  • 30 days money back guarantee
  • Source files included
Responsive Web Design: Advancing your Design to the Modern Web

add to your wishlist remove this course from wishlist

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!

CSS, Bootstrap training table of contents (duration : 2h31m)

  • Getting Started with Media Queries
    • The Course Overview free 00:02:00
    • Media Queries "Hello World" 00:06:56
    • Media Queries Within a CSS File with the @media Rule 00:03:58
    • Media Query Rule Combination 00:08:30
  • Moving into Responsive Design with Media Query Expressions
    • What Is Responsive Design? free 00:04:20
    • Optimizing for a Specific Device 00:07:32
    • Creating Responsive Designs with Size Ranges 00:07:23
    • Mobile Responsiveness 00:06:28
    • Backward Compatibility 00:03:40
  • Advanced Design Strategies
    • Thinking Fluid 00:12:29
    • Creating a Site That Responds to Itself 00:07:57
    • Optimizing Based on Device Resolution 00:07:58
    • Designing by Aspect Ratio 00:05:38
    • Talking about Color and Grids 00:04:39
  • Working with Responsive Frameworks
    • What Are Responsive Frameworks? 00:07:36
    • The Twitter Bootstrap 00:03:58
    • Understanding the Twitter Bootstrap CSS Rules 00:05:32
    • Adding Components 00:06:02
    • An Example of a Grid Layout 00:05:56
    • Changing Themes with LESS 00:07:16
  • Media Queries Level 4
    • The Future of Media Types 00:04:02
    • Moving into Media Features 00:11:39
    • Creating Custom Media Queries 00:02:24
    • Media Query Operators 00:01:51
    • Working with Media Query Ranges 00:02:04
    • What Are Media Queries? 00:04:08

Instructor : Packt

Packt has published 45 tutorials and has sold 10 coursess. See others courses from Packt

  • With which software version is this tutorial compatible with?
  • What is the required level to follow this tutorial ?
Access to more than 19 free tutorials

no, I don't want to learn for free !

see our data protection policy