CSS: Responsive Design

Name: CSS: Responsive Design
Author: Cliff Brozo

How to ensure your webpage displays properly on any device.

Preview the first lesson free — get full access to all 4 lessons.

Course: On-Demand

(light music) Welcome back to Knowledge City's course on cascading style sheets. I'm Cliff Brozo, I'm your professor. And in today's lesson, we're going to talk about Responsive Design, how things are going to change as the Viewport changes. We'll learn about the different Viewports. We'll figure out what do we mean by Grid view and how do we put it to work. We'll explore media queries and we'll look at containers and how to use them. Let's look at the Viewport. It's the users visible area. Depending upon the device that the user is looking at, it could be a phone, it could be a tablet, it could be a desktop, it could be a laptop. And what we do is we code our HTML to pay attention to which device the user is using. And then we can style our code to fit that device perfectly. A responsive grid view allows us to put together rows and columns and divide the page into pieces. And we can then identify each of those pieces and style them differently. Media queries lets us take a look at that Viewport and test the user's device to see which one he or she is using. We then get to set our width and height to maximize our pages on their device. Responsive images scale, and there's different ways of having the image scale to fit the device. We certainly like to keep our aspect ratio so the picture doesn't distort, which means that we rarely want to stretch an image to fit a content area that is the wrong size. Responsive images have three possibilities. They can be contained in a certain area as you can see, the London Bridge is perfectly contained in this square box. If we ask the browser to fit the London Bridge using 100% of the picture size, we lose part of the image. The rest of it doesn't fit and as you can see, it gets distorted. And finally, if we ask the browser to cover the entire area, well, that's not just the plain box if you look very, very closely in the bottom right hand corner, there's the top of the London Bridge because that is this part of the picture right there. Media queries allow us to put different images on different screens. So depending upon the user's device, the user will see a very different picture of essentially the same stuff. Containers let us create Excel like boxes and then place things in those boxes. We can have normal rows and columns that may or may not be of the same size, or we can get fancy and create a different grouping of rows and columns with overlays and areas that are not the same size. So let's look at how all this works.

Intermediate Provider : Cliff Brozo 4 Lessons · 22m in Arabic, German, English, Spanish, French, Portuguese, Chinese

Course Description

This course discusses responsive design techniques with CSS. This ensures webpages will fit on the screen of whatever devise you’re using: phone, tablet, or desktop. You’ll learn what the viewport is and how you determine what device is being used. It’ll also examine grid view, media queries, containers, and how to use CSS to layout pages.

What You'll Learn

Navigate the viewport and determine which device is being used
Apply media queries and containers to adapt layouts across devices
Put CSS grid view to work for page layout
Use CSS to lay out pages so they fit phone, tablet, and desktop screens
Build responsive web designs with responsive HTML and CSS frameworks

Key Takeaways

Responsive design with CSS ensures webpages fit the screen of whatever device is being used, including phone, tablet, or desktop.
The course explains what the viewport is and how to determine which device is being used.
It examines grid view, media queries, and containers as tools for laying out pages.
The course covers using CSS to lay out pages responsively.

Frequently Asked Questions

What does this course cover?

It covers responsive design techniques with CSS, including the viewport, determining which device is being used, grid view, media queries, containers, and using CSS to lay out pages.

What will I learn to do?

You will learn to navigate the viewport, explore media queries and containers, and put grid view to work.

Why is responsive design important?

Responsive design ensures webpages fit on the screen of whatever device you are using: phone, tablet, or desktop.

How is the course structured?

The course is divided into four lessons: Responsive Design Part 1 through Part 4.

What skills does this course build?

It builds skills in CSS Codes, CSS Frameworks, CSS Grid, Object Oriented CSS, Responsive HTML, and Responsive Web Design.