Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Responsive browser tools
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.