All language subtitles for 078 Solution to Bootstrap Challenge 1.en_US

All right.

So how did you manage on that mini challenge?

Well, if you haven't given it a go, then this is a good time to pause the video and just give it a try

before I go through the solution with you. It’s really really important that you try and do this yourself,

because I can't be here with you every single time you try to make a web site,

so it's really really important that you pick up on these skills by yourself.

And remember, I'm watching you, but not in a creepy way, just like, I haven't hacked your web cam or anything,

I'm just, you know, saying like metaphorically, you know.

Anyways, moving on.

So, I presume that you've already given it a go and you've struggled, and maybe you failed, maybe you succeeded.

So we're going to run through the solution now.

So essentially what we're trying to achieve is this outcome.

We've got three features which each have a Font Awesome icon above them, and they are responsive,

so when we're in the iPad and the iPhone sizes, there's only one feature per row and they take up 100

percent of the width.

Plus there's also the fonts and the colors,

and also when you roll over these icons they change color.

So, we've learned how to do all of this before,

and it's a matter of remembering it, giving it a go, and searching Google

if we get stuck.

So let's get started.

So I'm going to keep the final piece over here just to compare,

but the site as we have it up to now looks much less interesting and a bit more like this.

So, the first thing I'm going to do is, I want to give each of these features their own div, because as

you can see, at the moment, if we scroll down to the right section, I've got these three sets of features

and they each have an h3 title, and a paragraph just explaining the feature.

And, in order to get the responsiveness and to style each feature individually, I'm going to need to

give them some form of identification, and that, in HTML and CSS, is going to end up being a div.

So I'm going to create three new divs, and I'm going to give each div a custom class name.

So I'm going to call them feature-box, which seems to make sense to me.

It doesn’t really matter what you call them, as long as they are the same,

because we're going to apply the same style to each feature-box.

So let's create another div, feature-box.

And I'm just going to copy this and paste it and we can now transplant these lines over to here.

All right.

Great.

So now we have our feature boxes and each set of features belongs in its own div which we can style

separately or apply the same style to each three.

So now the next thing I'm going to do is I'm going to make each div take up a third of the width of

the screen on a large desktop or a laptop sized screen,

but when it's on an iPad or when it's on an iPhone, I want it to take up 100 percent of the width. So

I can do that by applying some Bootstrap classes.

So, we remember that we have to use the column class, and then we specify the size that we want it to be

responsive to.

So we're going to say column large,

so that means laptop size and above, is going to take up a third of the row.

And remember each row is split up into 12 units.

So a third of 12 is 4 units.

So col-lg-4.

And let's just go ahead and paste this in the other three places. And if you load up your web site right

now, you'll see that nothing has changed, and that is because the Bootstrap grid requires that you nest it

inside a class that has the name row.

So we can specify which ones should go into the same row essentially, so that your responsiveness can

happen across different rows,

for example. So something like col-lg-4 in three separate rows will be very different from

all of them in the same row.

So let's hit save and let's check it out and see if it worked.

Ok cool.

So they are now laid across the same row and they're taking up a third of the screen each.

And if I go into iPad size, you can see they're now taking up 100 percent of the width, as does anything

smaller than that, so mobile size still taking up 100 percent of the width.

So we have succeeded. Kerching! I was planning on getting our sound designer to create these nice sounds

for the video but he is sick,

so you will just have to live with my terrible sound effects.

So it's like Angela SFX from now on.

I've recently been trying to challenge my friends on what is the most realistic lightsaber activation

sound you can produce without any instruments other than yourself, your own body.

And I have found that many people are very bad at sound effects, myself included.

Anyways, let's move on.

I think I've had too much coffee today.

I really apologize.

All right.

Let's get back to work.

The next thing I need to do is that you can see that at the moment our features are right up to the

edge of both edges and they're taking up a bit too much space. In order to get it looking a bit more

like this,

we need to add some padding.

So the first bit of padding I'm going to add is to this feature section.

So that's this big box here.

And you can see the three parts highlighted.

So we can go into our CSS and we can select the Features section.

So we are now down to title-image and let's add Features Section, and let's just comment that out so

we can now target our features.

And remember it's an id,

so we have to use the hashtag or the pound sign.

And I'm going to add a padding around all four sides and it's going to be 7 percent top and bottom and

15 percent left and right.

So basically almost double the amount of space on the left and right as there is on the top and bottom.

So now let's hit refresh and you can see this is looking pretty nice, right?

So each of our feature boxes are now centered in the middle of our feature div and you can see that

with that little bit more white space it's much easier to read, a lot more organized, and it's getting

close to what we want as our final outcome.

So the amount of padding that you might have added might differ from mine but as long as you got a similar

end outcome then that's absolutely fine.

There's many many ways of skinning a cat.

It's probably not very vegan friendly.

There's many ways to peel a carrot.

Maybe let me think on that.

Boy this video is going to need a lot of editing.

All right. So the next thing we're going to do is, you can see that over here our text is nicely centered

inside each feature box, making them feel quite together,

but here they look a bit weird, especially when you're using icons like this,

you tend to want to have your text centered around the middle of the icon,

otherwise, if it's all left aligned, it looks a little bit strange.

So let's go ahead and do that.

So, remember that previously we added this feature-box class which goes around each and every feature.

So now we can target that feature-box class, and we can say something like all the text inside each feature

box should be aligned to the center.

So let's check it out.

Yep looking pretty good.

Now each line is still a little bit too long so we can add a bit of padding inside each feature box

so that we push it closer together so that the width goes down a little bit and we put all the text

onto two lines but it's very easy to glance and read rather than having these long lines.

So I'm going to go ahead and add maybe around 5 percent of padding.

And now our text is looking a lot shorter and a lot easier to read.

Now the next thing we're going to do is we're going to change the fonts of these h3s that we've

got over here.

So you can see that each of the titles for the features are these h3s, which we can target quite easily

up here, so we can say, let’s change the font-family to,

I think we can change it to Montserrat-Bold,

and this is to establish the visual hierarchy, so that when a user looks at this web site, the first thing

the eye is drawn to is usually the blackest, the boldest, the biggest thing,

and we want that to be the title first and then the subheading. As a web designer,

very often it's kind of like you're a visual tour guide, and you're guiding people through your web site,

so you want them to read, for example, the big title first, then maybe your brand, then maybe what all these

buttons are about, and you can do that quite easily using the font weights and also the font size.

So this is something that you can be aware of the next time you come across a well-designed web site,

see how they're establishing visual hierarchy and guiding you through the web site.

So I've already made the title very attractive

to the eye. I’m going to tone down the subtitle, the feature text, by changing its color to a grey color, so

that we make it even lower on the visual hierarchy scale.

So the feature text is contained inside some paragraph elements.

So I'm going to go ahead and select the paragraph elements and I'm going to change the color to this

greyish color which is 8f8f8f. Let's hit save and refresh, and you can see now the visual hierarchy

is now unmistakable.

There is no way that somebody’s eye is going to be drawn to this line before it is drawn to this one.

All right.

So that's looking pretty good.

Now the next thing is that we need to add some icons,

right?

And as I told you we're going to get that from Font Awesome.

So let's head over and let's search for those images.

So I've got the heart one and the target and also the checkmark which is in a circle.

So we've got these three icons and we're just going to copy them in there.

So it was check, target, heart.

So let's just rearrange this a little bit.

So the first one is the check circle.

So I'm going to copy that and place it inside our HTML inside our feature-box div, so that everything

inside each feature is all grouped together. So that one was circle,

the next one was bullseye.

So that's going to go here.

And the last one was the heart, which is going to go here.

All right.

So now you'll see that we have our tiny icons here.

But that's a little bit too small to see,

and we need to make it a little bit larger.

So, rather helpfully, the Font Awesome icons all come in different sizes.

And in order to get a different size, for example, the 3x size, all you have to do is just add the class

3x or 5x or 7x into your Font

Awesome icon.

So in our case I'm going to go for maybe the 4x. So we can go ahead and add,

so this is our Font

Awesome symbol, Font

Awesome check circle and Font Awesome 4x.

Now if you refresh you can see that is now a much larger size and it's a lot easier to see and actually

looks like a feature icon rather than just something very small.

So let's go ahead and add that to all three other classes.

Hit save.

And now we have our icons sized and looking pretty good.

All right. So now we need to style these icons.

We need to give them a color.

So, in order to style the icon separately from the title and the feature text, then of course we need to

give it a custom class.

Now of course you can use any of the classes that has already been applied to it.

But, for example, if you pick this class, fa-check-circle, then you'll have to add more styles to these other

two.

Now, if you pick something that's common between all three, say fas, that means if you use any Font

Awesome symbol, then you're going to be applying the same style to that future icon as well.

So it’s always always a good idea to apply custom classes when you're trying to style it

inside the CSS, unless you're just trying to customize some feature of Font Awesome or Bootstrap.

So in this case I'm just going to give it a class of icon and I'm going to paste it in all three places

and that allows us to now go into our CSS and style our icon. So our icon is going to be colored in this

orangey color, and when we hover over it,

it’s going to be the same color as this background.

So I've already provided those hex values to you.

So the normal color is going to be ef8172. Let’s hit save.

And check it out.

Looking nice.

Right?

So it’d be nice if there was a little bit of space between this icon and this title, because at the moment

they're a bit too squished together. It’s kind of sitting right on top of that feature and it doesn't

look very good, a bit too mushed together.

So let's add a margin-bottom to the icon of, maybe, say, just 1rem, and you can see with just that little

bit of space it looks a lot nicer.

Very often small touches can produce really dramatic effects.

So the final final thing that we want to do for our challenge is make it change color when we hover

over the icons. And the color is going to be this same red color in our color palette.

So do your remember how to change hover states?

Well we have to use a pseudo class called hover.

So we select the icon, we use a colon and we select one of these pseudo states. And the one that we want

is called, I’m never going to get to it, I’m just going to type it in, it’s called hover.

And we've seen this previously when we looked at classes and pseudo classes and selectors in CSS,

but we're going to put it into action in this case.

And when our icon is inside the hover state, I'm going to change the color to ff4c68, which is

that pinkish color that we've got at the top.

So now, dun dun dun, it's changing color every time we hover over it.

And that wasn't even very hard, was it?

All right. Looking nice.

So how did you get on with this challenge?

If there was something that you couldn't implement or something you just found out about then don't

worry, go back, change

your CSS code, change your HTML code, in order to make it work. If you got it all right and it's all looking

pretty good,

other than maybe you got slightly different values for the margin or the padding, that doesn't matter,

you're guessing by eye, right,

so that's not a big deal. But it's all about knowing how to use those Bootstrap classes in order to make

our features responsive and also things like, you know, the hover states that we learned before, and knowing

how to change the font weight, what to select to change the font color, etc.,

all of that good stuff.

All right.

So, in the next lesson, we're going to be looking at another Bootstrap component, which is the carousel.

And this is like a slide show that we're going to implement so that we end up with a really really cool

testimonial section which allows us to go between all of the different testimonials.

So you have all of that to look forward to and more.

So I will see you on the next lesson.