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