All language subtitles for 086 Bootstrap Challenge 2 Solution.en_US

All right.

So how did you get on with that challenge?

Well, if you managed to style your web site to look more or less like what we've got here, then you win.

Ding ding ding ding ding.

But if you struggled, or if there was anything that was unclear, then I'm going to walk you through the

solution, so that you can do it along with me.

Now you can see that to turn this into this there's still a little bit of work that we have to do in

terms of styling, and the first thing is to change the call to action section to a different background

color.

So let's go ahead and do that now. So, you can see that we've got this call to action or CTA section, and

this is the id that we can use to target that section.

So if we scroll all the way down,

but just before the media queries, we can add in a new section called the CTA section and we're going

to comment it out and this is our new section.

Now I'm going to target the cta id, and I'm going to change the background color to that pinkish red

color that we had before, which is ff4c68.

So let's hit save and check it out.

All right.

Looks good.

Now we mentioned previously that whenever a background is colored we want the text to be white and not

black because it doesn't look contrasty enough.

So let's go ahead and add some text color and we're going to make it fff.

And now we have white text instead of black text.

Now currently our content of this section is pretty much stuck to the left and the top and the bottom

and it's all too squished together.

So let's give this section some padding like what we've done for all the previous sections. So we're

going to use the same amount of padding as we had in, say, the carousel, or in the features section, which

is 7 percent top and bottom and 15 percent left and right.

So now we’ve got a little bit of padding. Looking nice,

right?

So the next thing that you might want to address is the heading.

It's far too small for a call to action.

I mean as a call to action you want to grab people's attention, right,

not be like an afterthought.

So let's go ahead and change the style of that heading. So we've got an h3 here.

But you can see we've already styled the h3 for the feature titles up here, so we can't really override

this.

So what do we do?

Let's give it a custom class.

Now the class I'm going to give it is cta-heading, and I'm just going to copy that over to here so that

I can target it down here,

cta-heading, and remember this is a class whereas this is an id. So I know I'm getting repetitive but

it's really important you don't mess this up.

All right so now we've got our cta-heading and we want to change our font-family to probably the

heaviest Montserrat that we can find which is Montserrat-Black.

And this is the same font as the one that we've got up here as our heading,

so Montserrat-Black. And also we're going to change the font-size to maybe 3.5rem

and the line-height to 1.5.

So let's hit save, let's refresh.

Massive call to action.

Looks pretty good.

So you'll notice that this looks very awkward being left aligned.

So let's go ahead and fix that and go into the parent section and change text-align inside the parent

container to be center.

And now we have centered items and centered text. Next.

What's the next thing that looks weird?

Well the download buttons look pretty weird.

So let's apply some Bootstrap styles.

So let's add a class and let's give it the btn style and then btn-lg, then bth-dark, and then we

will just simply copy and paste this icon from up here which is the Apple icon and we're going to put

it here.

And then again I'm going to copy the Google Play icon.

Now of course you can go on to Font Awesome and get all of this fresh,

but it's exactly the same so why not just reuse the code that we've already got?

So now let's hit save and let's add a class to the second button.

And this again is going to be btn, btn-lg, btn-light.

So hit save and refresh.

Nice.

We've got some nice buttons now.

They're a little bit too close to each other and too close to the heading.

So we need to give it some custom CSS styles.

Now you would notice that we've already applied some styles up at the top to give it a nice amount of

separation and a bit of margin away from anything else.

So, what if we just borrowed the class that we used up here which was download-button, and we simply

straight up just applied it over here as is? Now let’s hit save, refresh, and that looks pretty good.

So now we're pretty much done with the CTA section.

All we have is the footer that's left.

So the footer of course again needs a whole load of padding and we're going to use the same amount of

padding as we had before to give the content the same amount of separation from the edges.

So let's go ahead and check that we've got the footer with an id called footer so we can target it down

here.

And I'm just going to add the footer section comment and then I'm going to target the footer id and

I'm going to give it a padding of, you got it, 7 percent and 15 percent.

All right. So we now actually have a footer, which is pretty sweet.

Again content needs to be centered.

So let's add text-align center, centering our text.

And finally we need to add some social icons from Font

Awesome.

So let's head over to Font

Awesome

/ Icons,

and we're going to grab Facebook, Twitter,

Instagram and envelope.

All right.

Nice.

So let's copy Facebook and put it in here into the footer. Then next one is Twitter.

All right.

Next one is Instagram.

And finally our mailing option.

All right. Cool.

So now let's refresh our web site, and we now have icons.

Pretty cool.

Now the icons are a little bit too close to each other at the moment so we need a little bit of margin

around each of them just to give it a bit of separation and not look so bunched up,

and it’ll be difficult to click on individual ones at the moment.

So let's give each of these icons another class. So I’m holding down the option button to engage the Sublime

like selection,

and I'm going to call this social-icon.

All right.

So now I can go into my styles.css and I can target the social-icon and give it a margin of, say,

20 pixels top and bottom, 10 pixels left and right.

All right.

Now let's hit refresh and sweet.

We have a footer.

Now, if you look through your web site, this is a beauty of a startup web site.

You could probably launch TinDog right now and start using this beautiful web site.

It does not look out of place compared to any of the other startup web sites

that you see these days.

So I think we did a pretty good job.

Now just to finish off the last thing I want to enable is to make these navigation buttons work and

I want to show you why it is that we gave each section an id.

So one of the things that you can do is you can use a href that's not a URL and it's not a page but

it's an id.

So because ids are unique, then what you can do here in the href for that button,

so all the way at the top here in the button for Contact, you see that we left the href for the anchor

tag blank.

But what I'm going to put here now is I'm going to put in the id. So, remember, ids have to start with

the pound sign.

So you can see that for our footer section we've got an id that's unique, called footer.

So if I head back to that anchor tag where I've got the href, if I want to target that section all

I have to do is just to put in the pound sign to say that this is an id for an href and then put

in the name of the id which is footer.

And now if you hit save and refresh then, if I click on Contact, it will scroll all the way down to the

footer section where the user can contact me.

So let's go ahead and put in the other ones for pricing.

So pricing was called pricing.

Okay that's easy.

So we're going to put in hash tag or pound sign pricing, and then download is of course going to be

the cta section, Call To Action.

So let's hit save and refresh.

Now if we click on Pricing, it goes to pricing, Download, it goes to download, and it's pretty cool.

So this is one of the reasons why you would want to use ids sparingly, because they can be really useful

when you're trying to set up the navigation of your web site.

And if you take a look at GitHub, and if you scroll through the documentation, you can see that each

of the headings have a id.

So if I right click on this and I hit Inspect, you can see that this one has an id of product-features.

So you can see that this is the URL of the web page,

and if you put in that pound sign, which stands for, of course, go to this particular id, and then you

put in the name on the heading, that it navigates you straight there.

So this works in the URL level as well as in the href.

So that's yet another reason for why sometimes you see people use ids across their web pages.

So in the next lesson we're going to be tidying up this mess that we've made around here in our CSS

file.

You might have noticed along the way that there's been a lot of code duplication,

and, remember that, as a programmer, we're always trying to stay dry,

right?

Do not repeat yourself.

So in the next lesson we're going to look at why we need to refactor our code on a regular basis,

and what is the best way of doing that

in our case. So for all of that and more, I'll see you on the next lesson.