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.


Talk Python's Mastodon Michael Kennedy's Mastodon