#100DaysOfWeb in Python Transcripts
Chapter: Days 13-16: CSS Layout and Design
Lecture: Goals of this chapter
0:00 Let's start this chapter by asking a question
0:02 about a beautiful website, airbnb.com.
0:05 Could you design the site if somebody threw
0:08 a pile of images at you and said
0:10 here's the type of content and copy we want on our site
0:13 and the kind of behaviors?
0:14 Could you build this just without references
0:17 and, you know, type it up?
0:19 If you can, feel free to skip this chapter
0:21 and go on to the next one.
0:22 You probably are some kind of expert
0:24 'cause that is a pretty seriously cool page right there
0:27 but if you'd like to learn how to build sites like this
0:30 and you're like thinking
0:31 Well, I'm not a designer.
0:33 When I see something that looks like this
0:35 completely unstyled I don't know what to do with it.
0:39 It's just like ahhh, it's horrifying.
0:41 Right, maybe if you had a beautiful site you could adapt it.
0:45 Right, but if you start from truly from scratch
0:48 and you want to turn that into something that looks like
0:50 that Airbnb site you feel like there's no way.
0:53 Don't worry. This is not a problem.
0:55 You can definitely learn enough design.
0:58 So what are some of the goals?
0:59 Well, first of all my goal is to help you
1:02 not fear web design. As I said in the opening
1:05 a lot of people I believe consider themselves
1:07 not to be designers and they're bad, quote bad
1:10 at web design
1:11 and they hold themselves back from building
1:14 really cool things on the internet
1:15 because they feel like it's going to look like crap
1:17 and they can't deal with it.
1:18 So I want to teach you just enough to make web design
1:22 your advantage. If something like this is hard
1:24 it's probably hard for many people
1:26 and if you can master it
1:28 well then that gives you an edge on most folks.
1:30 That's great. So how are we going to do that?
1:32 Well, we're going to learn the CSS basics
1:35 because once you learn the basics
1:36 you can go learn another technique.
1:38 Oh, how do they get that huge image in there
1:40 to scale like that for the banner?
1:42 Well if you know all the CSS basics
1:43 you know you're pretty close to understanding that as well.
1:46 So that means we're going to study the CSS selector model.
1:49 We're going to study the box model.
1:52 This is how the size around elements can change
1:55 padding, margin, borders, things like that.
1:59 Layout, or what in CSS is called a display mode.
2:02 This is really important for understanding
2:04 how the elements fit together and flow together on the page.
2:08 Speaking of flow
2:09 how do we get items to flow around other items?
2:13 So we'll talk about floating items
2:14 and getting them to stick, like, to the corner of the page
2:17 stuff like that.
2:18 And finally, your web browser comes with an insane
2:20 amount of tooling to help you understand websites.
2:24 Not just the view page source
2:26 but as you interact with them
2:31 and multiple CSS files and things like that.
2:33 Now all of this is really a precursor to what are called
2:37 frontend frameworks.
2:38 You've probably heard of Bootstrap
2:40 but there's other ones like Symantic UI and whatnot.
2:43 So there's a ton of these front end frameworks
2:45 and understanding CSS basics is of course
2:48 an important part of working with them.
2:51 To build real sites I would absolutely recommend
2:53 choosing one of the front end frameworks.
2:55 We'll talk a little bit about that
2:56 at the end of the chapter.
2:58 So I just want to leave you with the idea
3:00 that you can learn enough web design.
3:02 If you had to start with this thing on the right
3:05 that would be tricky.
3:06 But thankfully, it's 2019 or later.
3:09 It's 1996, so we have all sorts of assets.
3:13 Today we have front end frameworks, we have font sets
3:16 like things like Font Awesome for really cool graphics
3:19 as well as a bunch of on demand nice fonts we can use.
3:24 Theme aggregators, graphic arts on demand
3:27 you know, Fiver, 99 Designs, that kind of stuff.
3:30 So we have a ton to work with
3:31 and I think you'll find
3:33 you learn a little bit of CSS basics
3:34 you'll be able to do some really cool stuff.