Python for Entrepreneurs Transcripts
Chapter: Web design foundations
Lecture: Design intro
Login or
purchase this course
to watch this video and the rest of the course contents.
0:02
It's time to talk about web design. Design is critically important these days,
0:09
it used to be we could create ugly sites and as long as they are functional, people would use them.
0:14
Seriously, go back and look at the early days of Yahoo and it's just unimaginable what that thing looks like.
0:19
But today, things like fancy mobile apps, sites like AirBnB and so on, people expect a nicer user experience,
0:27
and of course, we want to deliver it for them. Now, before we get too far into this entire chapter,
0:32
let me ask you: Could you design this site today, could you design AirBnB, the way it is on the screen here today, without much effort?
0:40
If you could, you could probably skip this section, we are going to be talking about foundational stuff, some of the core concepts in CSS,
0:48
and some techniques we can use to make our life easier when working with CSS.
0:52
If you could literally design this site today, then feel free to skip to the next chapter. All right, are you still here?
1:01
Great, then I am assuming that you are probably thinking "but I'm not a designer",
1:05
and if I presented this page to you, this is a pure HTML unstyled page and if I presented that to you and I said make that look like AirBnB,
1:16
make that look beautiful like something, someone comes across on the web
1:20
and says "wow, this is an amazing app, I must have this", you are probably thinking oh my Gosh there is no way, I don't even know how to begin.
1:28
I just want to put this out here, we are not starting from here, we are starting from a much better place.
1:34
Now, before we get into all the details of where we are starting and the tools we are using,
1:37
let's talk about some of the goals for this chapter, this next series of videos. So, my primary goal is to make you not fear web design,
1:46
if your design is something you haven't been doing for a long time, and like I said,
1:51
you identified with that guy with the axe or the hammer in the previous screen there, you shouldn't fear web design, I'll give you all the techniques,
1:59
there is a handful of techniques that will make this so much better and so much easier and we'll start from there
2:05
and so I want to make design your advantage, help you push through any barriers that you might have or challenges you might have
2:11
so that you can build maybe not perfect AirBnB-looking apps, but good enough so that either it could be a prototype or you can evolve it
2:21
or maybe bring on a graphic designer at the very end. So the goal of this chapter is to learn the CSS basics.
2:28
Now, we could go on and on and on and have an entire course on CSS, but that's not the theme of this course;
2:35
the theme of this course is teach you enough for each step so that you can get about building your business and do something awesome,
2:41
so keeping on that theme, we are going to talk about just a handful of items starting with CSS selectors.
2:46
You must know CSS selectors to be effective with CSS. Also, the CSS box model and related to that how the box model
2:55
plays with the layout and display modes. We are also going to talk about floating items, you know,
3:00
making this thing stick to the right side of the screen, while stuff floats around it and stuff like that.
3:04
When things don't go perfect, you'll want to use the browser developer tools,
3:08
so we'll talk briefly about the browser developer tools with how they relate to CSS.
3:13
Think of this whole chapter as a precursor to the front-end frameworks,
3:17
so that when we get there, you'll be comfortable and confident with working with them. OK, so I want to tell you you can learn enough web design.
3:25
Even if thing on the right here totally scares you, we are not starting from here,
3:28
that's what it looked like in 1996, but thankfully, it's not 1996, it's 2016, at least at the recording of this video, so today we have things like
3:38
front-end frameworks, Bootstrap UI Kit, we have font sets including all the typography and settings that come with the front-end frameworks
3:45
but also things like Font Awesome, which is basically that you bring in hundreds of different types of little graphics
3:51
that you can use and style into your site perfectly. There is theme aggregators that take the various front-end themes
3:58
and then create a whole bunch of different styles on those and then you can go pick one, download it and stick into your site;
4:04
and we have graphic arts on demand. So, for really cheap things you can drop in on Fiverr for example
4:12
and spend five, ten bucks and get some decent logo or picture for more nuance things maybe somewhere like 99designs;
4:19
we'll talk more about these options way way later in the class. The final thought that I want to leave you with is: You can learn enough web design
4:27
to make decent products and decent websites. If you take the tools I am going to show you in this class
4:33
and you put a little effort into learning the CSS basics and a little bit of practice, you'll be totally fine.
4:38
I feel like, personally the sites I build these days, they might not be AirBnB quality but they are definitely decent,
4:44
and I used to fear working on the web I totally was just a rich client sort of guy and could totally get that stuff right, but web CSS, I had no idea.
4:54
So, some of the things I'll show you kind of helped me on my journey and I think they'll help you as well.