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