Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Adding our copy and content
0:01 Now that we have the site kind of fitting with our old site and the new site
0:04 like our navigation works more or less like we'd want and so on,
0:08 it's time to start adding our copy and our content,
0:11 let's begin with this huge image right here,
0:14 like this image is pretty decent but we can do better.
0:17 So, we are going to take this image here, many of the images
0:20 you are going to see me use here are images I've gotten from Flickr,
0:24 under creative commons commercially allowed uses,
0:29 so I'll be sure to link to those somewhere in the site or something to give credit,
0:32 that's the requirement for using them, but I am going to put them here.
0:35 Another great place to go is Death To The Stock Photos
0:38 if you want free images or you know, for a real site, like for my sites,
0:42 I paid a couple of dollars, like ten dollars for my images,
0:45 and it makes all the difference to have a great image.
0:48 So we want to take this and move it into our site, over here,
0:51 we already have our hero, great, so the next thing to do is go to the landing page
0:55 and find this section and change this, I don't think it's that one,
1:01 change this one, to hero.jpg and notice down here
1:09 there is another mistake, so let's actually put this on there as well.
1:15 I think one image we weren't seeing, we'll see in the moment,
1:18 OK, let's go refresh again, oh we've lost our image,
1:22 of course, because it's not on the theme, it's right there.
1:26 Alright, beautiful. Check this out, isn't that cool?
1:29 Here we have our hero, our guys rocking on on stage
1:32 like I already want to listen to the music that they are playing,
1:35 and of course, we are going to need to change this, this, change this links,
1:39 that's all easy to do, let's go to the bottom really quick,
1:41 oh yeah, this little plant image was messed up in the CSS, so it didn't show up.
1:46 OK, great, now, let's flip back over to what we were looking for,
1:50 here we have this and if you look, notice, this is a little shorter,
1:54 than over there, so we can look at that really quick.
1:59 Here you can see that we've set the height to be slightly different and so on,
2:03 so let me go ahead and just take this,
2:06 and we'll move this over, to our home, remember,
2:09 we can start using our home now, this is only going to appear on the homepage
2:13 so let's see if that works, I want to double check that that's actually a jumbotron
2:19 alright, let's see how well I did, there we go.
2:21 Now you can't quite see if I scroll just a little bit though,
2:24 ooh this is not quite the thing, hold on,
2:28 that I think was supposed to be the jumbotron, here we go,
2:31 so you can see it's not quite as huge, we need to move the stuff up
2:34 and of course we will be doing that as we go, right, it doesn't have to be perfect,
2:37 you get the idea of how to do it, that's the main takeaway here.
2:40 So next, let's focus on these bits here,
2:44 so I am going to be copying some of this stuff
2:47 out of our existing or sort of final target site,
2:50 there is no sense in you guys watching me write this copy, right,
2:54 so for example, this top thing up here like this, we can just use that.
3:04 OK, so I've copied this bit over and I changed the layout
3:07 just slightly for what we have going on here,
3:12 so let me just give you the quick summary because like I said,
3:15 it's not worth you watching me create all the copy for the entire site here.
3:19 There is a lot of stuff that was going on in the theme
3:22 and I just simplified this down to this jumbotron
3:25 and then this message that is contained within it,
3:27 but it uses exactly the same settings for like the cover image and so on.
3:31 So, here we have an H1 and then I put a paragraph that has the two buttons
3:35 and these are just Bootstrap buttons - button, primary, large,
3:39 one goes for out albums and one is going to go
3:42 when we have them to our upcoming events.
3:45 Then after that we had our little subtitle
3:47 "For those about to rock, we invoke you"
3:49 and of course those need colors as well.
3:52 So here you can see we are setting the yellow color for the subtitle.
3:57 Alright, so I think this top part is in good shape, even our little navigation works,
4:02 how about that, so I feel like we've come a long way already,
4:05 now let's scroll down, now we're getting two pieces
4:08 that maybe this main content that we need to work with.
4:12 So our hero image and our main H1, H2 section
4:16 with our call to action buttons is done,
4:19 now it's time to focus on the rest of this homepage.