Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Grid layout benefits
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
It's all these shiny features of Bootstrap that catch your eye when you first get started. The typography, the images, the buttons and so on,
0:11
but the grid, the grid plays a super important role in helping design websites, especially from our responsive perspective.
0:19
But also from an SEO perspective. So here is the training website, the Talk Python Training website,
0:25
at least what it looks like at the time of this recording, and notice, we've got our big hero image, we've got a get notified section,
0:32
and then we have three courses that are featured, and those courses of course are going to change over time but these are the three featured courses.
0:41
What happens if this window shrinks, if it gets smaller than the width of those three images?
0:46
Well, a lot of sites is just going to create like a scroll bar, and then that will actually force the design of the rest of the page
0:52
to fit that virtual size that that scroll bar would have, but luckily, I use the grid layout in Bootstrap to design this, so that doesn't happen.
1:00
Here is what does happen. When you shrink this down to sort of phone size, it doesn't look quite as good like the Talk Python Training
1:08
overlaps on some of the little images in the background, that kind of stuff is really hard to deal with, but look at the apps,
1:15
see that Python Jumpstart By Building Ten Apps, it's now on top of the Write Pythonic Code, which is on top of the Python for Entrepreneurs part.
1:23
That's because I designed that into a grid and said I want you to be kind of like a table,
1:28
as long as the screen is desktop size, but once it gets too small to fit those images, switch into a vertical layout, basically turn the table pieces
1:38
or the table columns I guess you call them, into what would be line breaks and separate rows.
1:44
This is the kind of layout that's very easy to achieve with the grid, we don't have to worry about trying to use sort of invisible tables,
1:52
that's not great for SEO unless you actually have tabular data then tables are fine,
1:57
but a lot of time people traditionally had used tables for layout, which is not a good deal. You could try it with divs and floats and so on.
2:05
but that is also really hard to get it just right and especially as the site changes,
2:10
you'll see Bootstrap has a solid and understandable and predictable solution for this.