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