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