Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Introduction to Bootstrap forms
0:02 Any web app worth interacting with must have
0:06 not just HTML forms for user input, but beautiful and engaging ones.
0:11 Too often they look more like this,
0:15 here is a registration page that has a few icons and so that's kind of cool,
0:19 but other than the few icons, it really looks terrible,
0:23 it has not much of a style, these are more or less the default styles
0:26 that come with your web browser.
0:29 However, with just a little bit of work, we can make this look much better.
0:34 The one on the right is enticing and you know on the other side of that
0:38 "create an account" page is some kind of really cool and engaging application.
0:43 The one on the left, this is probably more like something put up on your intranet
0:48 that you have to deal with that you dread every time you have to go to it,
0:51 and half the time it doesn't even work.
0:53 Having these forms that look nice and are engaging is really important
0:57 and you'll see the Bootstrap has a couple of options for this,
1:01 Bootstrap has a couple of classes that we can use,
1:04 that make the basics of having really nice input forms easy.
1:08 Now it just so happens that this registration page here on the right
1:12 comes from this place called codepen
1:14 and someone there was nice enough to actually create this in a form that we can play with.
1:19 So if you go over here, you'll see that you can actually play with the CSS and the HTML
1:23 and you can come over here and change it however you want.
1:28 Now it says "registration dialogue".
1:29 So if you like this form and you want to play with it,
1:32 hey, here is something to start with;
1:34 we are going to go back and focus on the simpler form
1:37 just building out the ability to create a blog post
1:41 and make this form that starts out looking really bad look...
1:45 you now, not amazing but pretty decent, just a few key Bootstrap classes.