Building data-driven web apps with Flask and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Responsive browser tools
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Last example, you saw me come over here
0:02
and start resizing Firefox
0:03
saying, oh when I resize it like this
0:06
it's probably like a phone.
0:07
If I resize it like this, it's probably
0:09
you know, something else.
0:10
However, we can be way more precise about that.
0:14
If we come down here to Tools, Web Developer
0:17
and switch into Responsive Design Mode
0:20
or hit Alt + Command + M, whatever you want.
0:23
It'll actually pull up a little, simulated phone type thing.
0:27
So here, we're in iPhone 6, 7, 8.
0:31
Notice it's basically how it looks on iPhone 6, 7, 8.
0:35
We navigate around, we route our courses
0:38
things like that.
0:39
We could also switch to, what do you want to do?
0:41
Kindle Fire, something else, right?
0:43
So we could go to an iPad, here's an iPad
0:46
let's switch back to the phone real quick.
0:48
How's it look when you hold it sideways, for example.
0:51
You can see, well, this is how it looks
0:52
when you hold it sideways.
0:53
Kind of, maybe those pictures are a little bit big.
0:56
But you get that idea, this tools are really, really nice.
0:58
You can even say, I would like to simulate a good 3G
1:02
or regular 3G connection as you interact with it.
1:05
Okay, so, when you're thinking about
1:06
playing with these grids and other responsive elements
1:09
leverage the design tools inside your browser.
