#100DaysOfWeb in Python Transcripts
Chapter: Days 13-16: CSS Layout and Design
Lecture: Areas to research further
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Well, that's about it for what we're going to cover in this chapter. But I do want to highlight some things that I think
0:06
if you really want to get into web design further that you should go research and explore. So, grid layout: Grid layout is so important.
0:14
Websites are intended to be mobile-friendly if not mobile first. At least, they should work on a phone.
0:21
And so, these responsive grid layouts are really important. They're kind of like, table-like feels and you say, and it has three columns
0:29
except for if it gets too small, it's going to actually flip, and just put them one after another. So they work really well on small screens.
0:35
You'll find this in things like Bootstrap but also many other places as well. Flexbox: Flexbox is so cool.
0:43
Imagine you want to have a little part of the page at the top, just stays there. A little part of the page at the bottom that stays there
0:49
and in the middle, you want something to just take up the space. This is a new-ish, somewhat new CSS property
0:55
that allows you to do that docking style of layout. It's really, really cool. Typography and fonts; having the right fonts on your page
1:04
actually makes it look much, much better. But it goes beyond just selecting the font face. There's things like, how much space between each line?
1:14
Probably shouldn't be 1.0, maybe it's 1.2 or something like that. How much space between the actual characters?
1:20
There's a lot of these settings that get set behind the scenes without you really realizing it when you use things like Bootstrap, and whatnot.
1:27
But, knowing about them will help you make your page look much, much better. Table styles; you shouldn't use tables for design
1:34
but if you have tabular data you absolutely should put it into a table that's what it's for, and there's some really cool stuff
1:40
you can do to style the tables. Themes; these are Bootstrap themes and other UI framework themes, you go out there.
1:48
Search for StartBootstrap, WrapBootstrap, stuff like that. So if you're using something like Bootstrap
1:53
grabbing one of these themes and dropping it in there is a really nice way to make it look much, much better. Start from some design and just tweak it
2:00
with your actual data. We talked about CSS, but we haven't talked about higher-level languages that let you write better CSS like Less and Sass.
2:10
I'm a fan of Less, and what it lets you do is define variables, and also, write in hierarchy. So you could define, say, a top div section
2:19
and you want to style it. If you put another style inside of there that applies to things that are hierarchically contained within that top div.
2:27
So, there's some really nice features. Also, lets you include a bunch of smaller, individual Less files, and compile into one giant CSS in the end.
2:36
So, that's a nice way to write more maintainable and understandable CSS. I don't know you necessarily need it
2:43
but it's not bad to know about and work with. Finally, definitely, definitely look at Bootstrap
2:48
or some of the other Front-end Frameworks, like Semantic UI. They allow you to use a bunch of pre-built styles
2:53
and the themes I mentioned before are not to be discounted. The ability to go and find oh, here's a really cool admin theme
3:01
with graphs and charts and layout that I already want, I just need to put my data in there. That will super-speed up your projects.
3:08
So, check out Bootstrap and the associate themes or if you want, other UI Frameworks as well. Finally, there's more to CSS itself.
3:17
I really like this book, "CSS: The Missing Manual." I felt like, once I learned the stuff I'm talking about
3:23
in this chapter, and some of the other items covered in this CSS book, the web was no longer a scary place that I felt like I had to bumble around in.
3:32
Like, well, I'm not a web designer, but here's a webpage it has some stuff, there's a box here, you can work with it.
3:37
But no, I can really build professional, beautiful websites even if I'm not an artist, or super creative or have any ability to work with Photoshop.
3:46
You can build really nice stuff if you understand CSS. So again if you want to dig in further, check out this book. There's probably a newer edition
3:53
but I really like this one, and I found it to cover the right stuff without being too deep and too much, you know, getting buried in all the details
4:01
that you're never going to use.