Responsive Design

Loading...

Do curso por The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

1329 classificações

Explore Related Videos

At Coursera, you will find the best lectures in the world. Here are some of our personalized recommendations for you

The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

1329 classificações

Curso 1 de 4 em Specialization Full-Stack Web Development with React

This course will give you an overview of client-side web UI frameworks, in particular Bootstrap 4. You will learn about grids and responsive design, Bootstrap CSS and JavaScript components. You will learn about CSS preprocessors, Less and Sass. You will also learn the basics of Node.js and NPM and task runners like Grunt and Gulp. At the end of this course, you will be able to a)Set up, design and style a web page using Bootstrap 4 and its components, b) Create a responsive web page design, and c) Make use of web tools to setup and manage web sites. This course also includes an honors track that enables you to work on your own project developing a website using Bootstrap 4. Students enrolling in this course should have prior good working knowledge of HTML, CSS and JavaScript.

Na lição

Front-end Web UI Frameworks Overview: Bootstrap

This module gives you a quick introduction to full-stack web development and the outline of the course. Then you will learn the basics of Bootstrap, setting up a web project using Bootstrap. You will learn about responsive design and the Bootstrap grid system. At the end of this module, you need to complete your first assignment.

Responsive Design9:13

Bootstrap Grid System27:02

Exercise (Video): Responsive Design and Bootstrap Grid System Part 120:25

Exercise (Video): Responsive Design and Bootstrap Grid System Part 214:54

Conheça os instrutores

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

[MUSIC]

These days in web development world, we often hear people

mentioning the terms responsive design and mobile first approach.

Let's try and understand what is meant by these terms, and

how they affect the way you design your websites and your web applications.

Your obvious question is going to be why consider responsive design?

To help us understand this, let's consider how people access websites these days?

Traditionally, when websites were first designed, you could pretty much assume

that people will be browsing your websites from a computer.

These days your websites could be visited from a smartphone, a tablet or

a computer with different screen sizes and screen resolutions.

How do we render our websites consistently on devices of different screen sizes?

The one size fits all approach that traditional

website designers have taken no longer fixed bill.

We need a better approach, an approach that will automatically

adapt your website to the size of the screen on which it is being viewed.

This is where we have to take an approach to adapt to the user's view port.

This has to be built into your website design and development so

that it will automatically adapt to the viewport of the user's device.

To help you better appreciate the need for

addressing devices of different screen sizes.

I am taking the help of the developer options that might Safari browser

provides that enables me to view the website with screens of different sizes.

So that hopefully will convince of you of why we made responsive web design.

So here you see that Coursera website being

rendered on a 1920 by 1080 screen sites.

This would be a typical large desktop or a high resolution laptop screen.

Then let's consider the same website being viewed using a smaller screen such.

So you see automatically your screen layout is slightly

adjusting to the size of the viewport of your device,

same thing at 800 by 600.

So let's go down in screen sizes, this is an iPad close view of the same site.

This is an iPad Air 2 size, this is an iPad Mini 4 size,

note the transition from an iPad Mini 4

size to an iPhone 6S Plus in portrait mode.

You'll now notice that the Navigation Bot has now collapsed into a button here,

which when you click will reveal the options from your Navigation Bash.

And let's look at the same thing in our iPhone 6S

in landscape mode, note how the screen adopts itself.

Similarly for an iPhone 6S in landscape mode and

go down to an iPhone SE, and you see how the website

has change the way it is being rendered.

So hopefully, this example has illustrated to you how and

why we need responsive web design.

The second related concept that you will hear is mobile first.

The mobile first approach instead looks at designing a website for

a mobile device first.

So consider how you would satisfy the screen constraints of your mobile device.

And then as your screen size expands, you would automatically

start an app to your website to the larger and larger screen sizes.

Perhaps, you're willing more and more of the content.

So as to take advantage of the increasing screen real estate.

So the same website when seeing on a mobile device might have only

parts of the information being revealed to the user.

But then when rendered on a full fledge desktop it

might show a lot more detail version of the website.

Now this has to be automatically adapted based upon the information

that you get from the device from which your website is being viewed.

So how do we get this information?

Fortunately, doing responsive web design is supported by

many of the modern front end web UI frameworks including Bootstrap.

So when we look at Bootstrap's definition on it's webpage it says,

responsive mobile first approach.

Yeah, how do we go by doing responsive web design?

So there are several concepts that are built in to your frame time

web UI frameworks that come to the aid when you need to do responsive web design.

First and foremost is what is called is a Grid system?

We're going to look at the Bootstrap's Grid system in more detail in the next

lecture.

So that we'll understand exactly how we can leverage that to be able to do

responsive web design.

The second aspect is fluid images, so that your images that you include in your

website will automatically adapt itself to the screen size.

And the third part is what is called a CSS media queries from your CSS code.

You can query the size of the media and then appropriately adjust your CSS classes

to fit the size of the device's screen.

Now how do media queries work?

Let's look at that next.

Media queries are supported in CSS like this.

So the technology allows you to do a media query to specify the minimum width

of the screen under which this particular set of CSS classes will be active.

So this would be specified in your CSS file as @media, and

then within bracket, you specify for example, min-width.

There are a lot more options to the media queries than what I'm showing here.

This is just one example of how you would build a media query in your CSS code.

Taking a look at Bootstrap's CSS code itself,

let's go in and see how media queries are being used by Bootstrap.

So here you see an example of a media query where it says, @media and

min-width 576 pixels.

And then it specifies that those particular CSS class call container,

which we will learn more about in the next lecture,

and also in the exercise that follows.

We will see that the container's width is set based upon the width of the screen.

Similarly, for a higher width screen, the container width is automatically adjusted.

So this is what enables your web UI framework to

support responsive web design.

So doing media queries, your web UI framework is able to

establish what kind of device you're rendering your website on.

And correspondingly adjust the CSS classes to

fit that particular devices screen size.

So then obviously, the next question that is going to come in your mind is how do we

do this in practice?

Fortunately, if you start with a well designed

front end web UI framework like Bootstrap, things become very straightforward.

We will learn more about this in the next lecture and the exercise that follows.

[MUSIC]

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2019 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play