Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Newsletter section
0:01 It's time to start focusing on the horizontal slices,
0:03 let's look at where we're going again.
0:05 So over here you can see the next thing we want to do is...
0:08 anyone who comes who is interested in our site or in our product or a band,
0:12 we want to encourage them to sign up.
0:15 From a business perspective, getting somebody to sign up
0:18 on your emailing list is so important,
0:21 having a person sign up on your mailing list, even if you mail them infrequently
0:24 to tell them about the stuff that you have to sell
0:27 and in this case maybe this is upcoming events and albums but,
0:31 in my case, that might be training classes or podcast episodes.
0:34 Having somebody sign up on your mailing list is something like 20 times,
0:38 10 to 20 times better than having them sign up on Facebook,
0:41 having them follow you on Twitter and so on,
0:43 so we are going to put this right here.
0:45 So this is a really simple form here,
0:48 if we look at that at "inspect element",
0:51 you'll see it's just a form that posts a newsletter/add_subscriber,
0:54 we'll talk more about how to implement that later,
0:57 and input with a type and a placeholder and a button, OK.
1:00 So let's go add that to our working copy here.
1:04 I am going to put it right about there.
1:07 So you can see each part has one of these sort of name sections
1:12 so you hyperlink to it,
1:14 but it goes content a, content b, content a, content b, and so on,
1:17 so I am just going to duplicate this,
1:19 we are going to do better than the way they are doing their content a, b stuff in a moment
1:23 and up here, we have a container and a row
1:25 this is Bootstrap grid stuff, so let's go in here, we are just going to take up the whole row,
1:29 and I am going to paste the HTML from there
1:32 because there is really no value in you guys watching me type that like I said,
1:35 we are going to have a form, it's going to have an input,
1:37 it is going to be a form control, that's Bootstrap,
1:40 and it's going to have a button to say "get notified".
1:43 Let's see what we've done.
1:46 OK, that looks well, not quite like what you expected I suspect,
1:50 so remember, the Bootstrap forms are ultra focused on mobile,
1:55 and this might look decent on a screen that looks like this.
1:59 It doesn't look decent on a screen like this, so let's apply some styles real quick.
2:05 So, over here I am just going to take some styles that I already put together,
2:08 so you don't have to watch but let's just talk to it,
2:11 we have a form, the form is over here, it has an id,
2:15 where have you gone, form? There you are, you have an id called "newsletter",
2:19 so form#newsletter targets exactly that one, we want to set its overall width,
2:23 we are going to display the forms as inline blocks rather than blocks,
2:27 we'll set the max-width on a various pieces, and then it should look better, let's try.
2:31 There we go, that looks pretty nice, right, this is close,
2:36 to what we were hoping to build I think.