All language subtitles for 076 Styling Our Website Challenges and Solutions.en_US

All right.

So in order to get to where we are right now we've learned about a number of Bootstrap components,

for example the navigation bar, the Bootstrap buttons, Bootstrap containers, grids, and the responsiveness

that we get using Bootstrap for layout purposes.

Now, before we carry on, I want to add some more CSS code, so normal bog old standard CSS, so that

we can customize all of our Bootstrap components and make our title page look a little bit more like

our design on Balsamiq.

So let's get started.

Now, the first thing that you may or may not have noticed, there are some different fonts going on here.

The nav bar uses the Bootstrap default font, as does the nav bar brand, as does the text in our buttons,

and also of course the rest of our unstyled web page.

Now, instead of going into the button, and going into the nav bar, and adding CSS to each of them, changing

the font, I want you to think if you can figure out a way of changing all of the text to the Montserrat

font that we got from Google fonts.

So pause the video and see if you can complete this mini challenge.

All righ. So, this shouldn't be too hard because we've done it before.

Now, what is the one thing that encompasses all of our content for our web site?

Well, it's the body element, because all the content is embedded inside it. And we can simply define a

global font for the body in order to apply it to all the text on screen.

So, I'm going to target the body element, and I'm going to change the font-family to Montserrat, and

I'm going to close it off with a semi-colon.

So let's hit save and let's go back and refresh.

You can see that all the text now has changed to our chosen font, which makes it look a little bit more

unified, and gets us closer to our final design.

So, the next thing I want to change is, I want this title text to have a white color, so that it matches

with the color palette that we've got going on here, which is this kind of red and white kind of scheme

for our imaginary TinDog product.

So, one way of doing this is going into the h1 that we've already selected here, and adding a color property

and setting it to white.

Now, the other way of doing this is adding it to the title section, which, if you remember, the h1 is residing

inside.

So, this line is inside our title section, and, by changing the color of all text in the title section,

if later on I decide to add a subtitle or, you know, a little bit of explainer text, or whatever it may

be,

it will still keep to our current color scheme.

So it's a little bit more encompassing, and that's what I'm going to do here.

I'm going to add our color property and I'm going to set it to white.

So, as a shorthand remember that the color hex codes for #fff is always going to be white,

and #000 is always going to be black, and you can see our Pigments add on showing you that.

So I want white.

Let's hit save and let's refresh.

You can see we've now got our white big title, which looks brilliant.

Now, don't worry, if you added your color to the h1, it's perfectly valid, and we can always refactor code

later on if we see we’are duplicating any part or, you know, if we want to make our code more succinct.

So that's completely acceptable and it's not wrong at all.

So, now that we've styled the text on our page, the next thing I want to look at is this nav bar, because

you can see that the text is a little bit too small and this brand should really be a little bit more

prominent.

And also I want to make it look a little bit more like the Tinder logo, because we are making a copycat

product here after all.

And the closest logo that I found on Google Fonts was the Ubuntu font, which we already incorporated when

we embedded our Google Fonts into our web site.

So let's go ahead and do that. Now, before I do that,

I want to add a new section, and I'm going to say Navigation Bar, and I'm going to use that good old trick

of highlighting it and command forward slash to style it.

I find this much easier than typing a bunch of asterisks and forward slashes.

Now here we're going to first target our nav brand,

so navbar-brand, and and I want to change the font-family to Ubuntu, so font-family, and that's

going to be Ubuntu.

Now let's hit save and refresh and you can see that that t looks a lot like the t for Tinder now, but

it's still too small, so let's increase the font size as well to 2.5rem,

and maybe while we're here we can make the font-weight to

bold as well.

Let’s save and refresh, and you can see that now we've got this big navbar-brand, which looks a lot better and it

makes us seem like we're more proud of what we're called, rather than as if we're trying to hide it with

our tiny text.

Now, with the bigger font size for the navbar-brand, you start to notice that it’s a little bit awkward

having it so close to our title text and image,

so ideally I would like to push down any content, and have a bit of padding at the bottom of our nav bar,

because it would make it look a lot nicer.

So, I don't really want to add any padding to the top or the left and right.

So, can you think of a way in which we can set the bottom padding to 4.5rem, without touching the padding

on any other side of the nav bar?

So, again, mini challenge, pause the video if you want to complete it.

All right.

So, I'm going to put this just above our navbar-brand, because it's more broad, and it targets the nav

bar instead of any component inside the nav bar,

so it's a higher level div, so I tend to add my selectors in that kind of order, going from less specific

to more specific as you scroll down,

and also I try to keep the CSS styling

roughly in the order that you see on the page.

So, the title section will go first, then the next section, then the next section.

It just makes it a little bit easier to change and to fix later on.

Now, in the nav bar we want to change the padding, and we only want to touch the padding bottom, and we want

to set it to 2.5, and we want to set it to 4.5rem, hit save and refresh.

And now we've got a little bit more space in between that nav bar and the title text and images, and

it makes the whole web site look a lot less bunched up and a lot more designed, if you will.

Now the next thing we should address in the nav bar are these nav items.

They need a bit more space between each other.

So I'm again going to add some padding.

I'll keep this as a fixed size just because we've got that responsiveness,

so I don't really need it as a percentage or as a rem.

So, I'm going to put in probably 18 pixels of padding left and right of each of these nav items.

So, we're going to go below the navbar-brand. We’re going to target nav-item, and we're going to say

padding 0 top and bottom, and then about 18 pixels left and right, hit save, refresh, bit more spaced

out, looks a lot nicer,

we won't accidentally press on the wrong button, but they still need to be a little bit larger.

So I'm going to dig even deeper inside the nav-item.

I'm going to target the actual nav-link to style it.

So we're going to target the nav-link.

So, in this case I'm going to change the font size, the font-family, as well as the colors, so that we get

a little bit more like this.

So a little bit larger,

and I'm also going to change the font-weight to the Montserrat-Light font

so it's not so prominent on the page.

So let's go ahead and do that.

Let's change the nav link’s font size, we can change it to maybe about 1.2rem.

You can’t see it's just a little bit bigger, but it's a little bit too heavy in terms of weight at the moment.

So let's change the font-family to Montserrat-Light, and this will thin those letters down and make

it less prominent and blend in a bit better.

Now let's take a look at how our nav bar looks by activating Pesticide.

And you can see that this is the entire section,

this blue section. And you can see that we've still got a bit of padding,

it seems, leftover from the top, the left and the right of our nav bar,

which is why that text is not aligning on the left with our title text here.

So that is just a little bit off.

And I suspect the reason is, if we inspect on this, is that the nav bar actually has some padding, in addition

to the padding bottom that we added.

So let's try and get rid of this padding which came from, probably, the Bootstrap element, and we can do

that by, instead of using padding bottom to add padding and then add zero to the top, zero to the left

and right and 4.5 rpm to the bottom only.

So now if we refresh.

You can see that our navbar-brand now aligns perfectly with our title text and our buttons.

And when you're designing web sites or apps or whatever it may be, try to minimize the number of lines

that you can align things to, because it will usually make your designs look more together.

So now I'm pretty happy with my nav bar.

So the next thing I'm going to deal with are these buttons. They’re far too close to this title text

and they need a little bit of a margin to push it away from that text.

So let's go into our CSS and add another section. Let’s call it Buttons, maybe more specifically the

Download Buttons. Let’s comment that out so that we have our new section. Now, in order to target the button,

I have a choice of either using the Bootstrap btn class, and customize the Bootstrap style, or I can

add in my custom class.

Now, in this situation, if you start getting lazy and using the existing classes from Bootstrap, you often

find yourself in a situation later on when you want to use this button, but you don't want it to have

the same amount of margin as you do in the title section.

So, usually, it's much better to just add in a custom class, which is what I'm going to do right now.

So I'm going to call this our download-button, and I'm going to apply that class to our Google Play button

as well.

So let's hit save, and now we can target it over here, and our download button needs a margin that is,

I've sort of been tweaking around with it,

and the one that I find to work the best is about 5 percent on the top, 3 percent on the right, 5 percent

on the left, and 0 on the bottom.

So let's hit save and refresh, and you can see that that provides a large enough distance between the

two buttons to make it take up roughly the amount of space that we've got

for our title,

and it makes our button aligned perfectly with the navbar-brand as well as the title text.

So that's what I quite liked when I was messing around with these numbers,

but of course feel free to play around with it yourself.

So it's usually easiest if you just inspect on it, and then just go into the box model and try changing

some of these numbers and see what it ends up being for the design that you want.

All right. So the very last thing I want to change is this image. That’s all that we have left in our

title section.

And, firstly, I want to make its width a little bit smaller, because at the moment it's kind of taking up

as much width as it can.

It's like full size right now, and I want to be maybe 60 percent of its parent.

So this is its parent, which is the containing div, which is our col-lg-6 on desktop and

12 and a full width on iPad or mobile.

But I want it to take up only maybe 60 percent of this width, to make it a little bit narrower.

So let's go and do that.

So again I'm going to add a new section. This is called Title Image.

Let's add a comment there and let's find out what class we need to use to target that image.

And you can see at the moment our image is devoid of all classes.

So let's go ahead and add that, and I'm going to call the class maybe title-image, and we can hit save.

Now here I can use that class called title-image, and we can make its width only 60 percent of what it

used to be, hit save, refresh.

You can see it's now a little bit smaller and less sort of assuming and less in your face, which makes

a much better design, I think.

Right.

So the last and final thing that you might have been struggling to figure out is, how do we get it to

be rotated to the right.

And this is the part where I said to you might need to search for it on Google.

So, as I've been saying, a lot of times getting good at development or programming is very often getting

good at Google and knowing the right things to search for in order to get your answer.

So in our case we want to rotate an image using CSS. And let's see what we get with this search query.

So we are getting some results from W3 Schools as well as MDN,

and they seem to point towards something about transform, something about rotation.

So I tend to prefer the MDN docs, so let's just take a look at what they talk about.

And you can see that there is a CSS function called rotation.

Now we haven't really spoken much about functions, but we will do in the next section when we cover Javascript.

But for now let's just see what we can do using this rotate function.

So they've got a very simple bit of CSS code here, where they’re changing a transform property by using

the rotate function,

and then you specify the degree, the amount, that you want to rotate your element by, and you can see, in this

case, the pink one, which is what this targets, is rotated 45 degrees to the right.

So let's just open this in Code Pen and have a mess around with it to fully understand what is happening.

So let's take a look at the CSS section.

So we've got this div which is normal, which nothing really changed about it.

And then we've got this div called rotated, with the class of rotated, which is what we are editing here.

And what we've changed is the transform property using the rotate function and we're specifying 45 degrees.

So when it's positive it rotates by 45 degrees to the right.

If it's negative it rotates by 45 degrees to the left or rather anti-clockwise.

And, as you expect, 90 degrees is 90 degrees right rotation, 180 degrees is 180 degrees clockwise rotation.

So this seems pretty simple and we can probably figure out how we can use this to achieve what we want

which is something like this.

So let's go into our CSS, and we're again targeting the title image in this case.

We're going to use what we just learned which is changing the transform property to use the rotate function

and we're going to specify how much we are going to rotate by. Now, with repeat sort of experimentation,

changing this number a few times,

I found that 25 degrees tends to work quite well.

So, if you add 25 degrees in the positive and you refresh, you can see that we've now got that

lovely right sided rotation.

So we are almost done here.

The last thing that I want to do is just do a final sort of sense check,

looking at this layout and seeing if we're happy with how it looks, and the one last thing that's a little

bit niggling for me is that this title is kind of competing with this navbar-brand.

And whenever you're designing web sites you want to think about what is the first thing that you want

the user to look at.

You want to establish some sort of visual hierarchy and you can do that using size or you can do that

using weight,

so font weight, or you can do that using highlighting or outlining, a whole bunch of things, basically.

And, in this case, even though this one has a much higher font weight than the navbar-brand, it’s kind of competing

with it because it's about the same size.

So let's just increase the title text size just by a smidge, and I'll show you the difference.

So let's go ahead and change that font size from 3rem to maybe, say, 3.5rem, and let me show you what

happens when I refresh.

You can see now, on this web site, it's pretty obvious that the biggest boldest thing is this heading

here, and it's pretty much guaranteed that if you get a user to load up this web site, the first thing

that their eyes will be drawn to is this biggest boldest title and that's exactly what we want.

We want them to immediately know what our product is about.

And then the second most important thing should be maybe the download button which are highlighted and

outlined for them to start taking action. And then maybe the third most important thing is for them to

know what our company is and what other things they can explore over here.

So now that we have more or less finished styling our title section of our page, in the next lesson we’re

going to move further down and continue with the other sections.

So, for all of that and more, I’ll see you on the next lesson.