Styling Portfolio Projects Section

[00:00:00]
>> Let's go ahead and start styling this then. The place I'm gonna start is styling the blue background. And we kind of have already seen this pattern in effect. If you think back to that contact section that we did, where we have our plum background color for the section, okay?

[00:00:22]
We could do the same thing here for the background color for the project's portion of the screen, this should be blue, okay? So let's set that up here, sure, fork this, there we go. So the way to do that, of course here in our CSS, we'll scroll on down here to all around line 64 or so.

[00:00:49]
And we can add our section-blue class or dark blue I guess is what I called it DK blue. And we're going to have a background color of that dark blue, that's the name from the variable. Okay, and then we need to, of course, apply it to the work here, so let's put in that div.

[00:01:21]
And that div is gonna go where? It's gonna go around the whole section because the section may have a limited width to it, but the blue background color is gonna go all the way across the page. So we'll add that here, div with class of section-dkblue. And we'll close that div down here at the bottom, okay?

[00:01:55]
So now we have a nice blue background to work with. And of course, that's gonna be limited to our particular projects. And then we're ready to style up the rest of this. As you take a look at the project section here you can see that we've got our text and our images are smashing into the edges of our window here.

[00:02:11]
So the first thing to do is to make sure we give this a little bit of breathing room. If you take a look back at the CSS that we've written so far, we've got 4 rems of space pretty consistently at the top and the bottom of things like the footer, and the introduction, and so forth.

[00:02:26]
We've actually got a little more space at the bottom of the introduction, so we should probably continue with that pattern. And so what we'll do here and I'm just scroll down to just before the media queries, we go, right on in here. And so what I'm gonna do was put in a comment projects section.

[00:02:51]
And so for the projects section overall, we can give that a padding of 4rem 1rem, right, that should get it off the edges of the page very nice. And then for projects, h2, let's address that, so this has got a default font size here. What we'd like to do is change that a little bit, I think I have it a little bit bigger and give it some different space here on the bottom, so my font size will be 2.5rem.

[00:03:35]
And my margin on the bottom, What I have here is the following, I really would like it to be if my font size is 2.5rem. I would like to be consistent with my line height, so in other words, I'd like to have 1.5 times 2.5rem. And I could work that math if I wanted to or I could use something like calc.

[00:04:02]
So calc is this little function that will do math for you how awesome is that, and so we could just simply say 2.5rem times 1.5. So this is sort of a very brief introduction to calc that's as simple as calc gets. We can multiply two numbers, we can add them, we can subtract them, and so forth.

[00:04:25]
Calc is of course compatible with things like variables. So if I had a number stored in a variable we've used variables in this project, their colors and their fonts, we can't add and subtract those. But if we had numbers somewhere inside of those variables, we could do math with those particular variables if we wanted to.

[00:04:46]
And again, there's other courses on the front end masters library. They'll go into calc in more detail, including my advanced layouts course, but for right now that's what's going on. We're gonna take our font size, which was 2.5rem, and we're gonna multiply it by 1.5 to give us a little bit more space.

[00:05:01]
Make that text a little bigger and give us space between that and our next project. For projects, H3, we know from our drawing, we wanted that to be aqua and color, so let's set that up color bar aqua. So that should make the words wall of wonder are aqua color.

[00:05:30]
The h4 the latest project and the technologies used including we're gonna have to do some changes to that, so for our projects h4. We wanna have a font size of something like one rim, it's much smaller than the rest of the text that's here. And we're also going to want to set our font family.

[00:05:57]
To var mono, so it has that typewriter font look to it, okay? And then we have that issue of in our website here, latest project, and wall of wonder are very close together, there's actually very little space in between those. Whereas in our CodePen, we have a lot of space right now.

[00:06:21]
So that space is coming from the headings by default have some margin associated with them. And we did zero out our margin way up here in the beginning of the document. We zeroed out the margin for our h1, h2, and h3 up here back up more online for h3 or so.

[00:06:41]
So now that space is coming strictly from the h4 and we can get rid of that just by saying margin 0 and that will remove that particular space. Okay, the space that's here now between the paragraph and technologies used include which is an h4 and the space between that technologies used to include and the list.

[00:07:11]
So that top space is coming from the paragraph which has a margin on the bottom by default from your browser. And the space here between the technologies and the actual technologies that we're using that comes from the list. So that's why those spaces are still there. All right, now back to our HTML here, so again in my diagram here I've got my two headings all styled up.

[00:07:40]
But this big paragraph here we're gonna need to turn that into a black box aren't we? We need to have a nice dark background on it, we need around some corners probably put some padding on it, so let's make that happen. I'm actually gonna start by putting a class on that paragraph and I'm gonna call it black box because that's what we're gonna do to it, we're gonna make it a black box.

[00:08:10]
And then, we can write our style down here. Class of black box, will look as follows, it's gonna have a bit of a background color, bar black. So there you go now you can see that, okay, if you can't see it you can't style it. So by putting things like background colors and borders on your CSS first helps to point you in direction as to what you should do next, so if you're just thinking, well, I just need a black background.

[00:08:47]
There it is, well, we're not quite there yet, so let's keep adding to that. One of the things that we should probably do is give it some padding, like 1rem, give it a little bit of breathing room, right? We don't want it smashed into the edges of the box, then we can round the corners.

[00:09:06]
Border radius maybe something like 10 pixels. So there we go there's the nice rounded corners that we were looking for we can set the text color to white. Okay, so there's the white for the website, you can also change our font size. 1rem because it is a little bit smaller than what we have here by default and we can set our line height to 1.5.

[00:09:49]
Remember once again 1.5 just a ratio, not an absolute unit of measure, and then that'll give you a little bit of breathing room there in that black box. Looking better already, isn't it? Yeah, okay, so let's see here, so we've got the headings, those are looking good. We've got our paragraph that's looking good, let's take a look at this next one here then our technologies.

[00:10:20]
We have our three technologies here, so that's all looking the way it should. But these three technologies are still set up as a bulleted list and we wanna have them going horizontally across the page. So hopefully some of this you can get that by now cuz we've only done this like three or four times at this point.

[00:10:41]
So projects, Ul, we're gonna have that be our list, style type of none. Turn off the bullets, turn off the extra padding associated with this or our padding zero and our margin is zero, turn off all of that, so there we go for that. Then we're gonna want this to go in a horizontal line, so we can do that with Flexbox.

[00:11:16]
Display Flex. Right, flex flow row wrap. And then we want to have this left aligned then we're gonna have our justify content set to flex start in other words set up to this the start of the row. The reason I'm declaring this here that is the default value for Flexbox, but I'm gonna just declare it anyway because I'm gonna change it later than a couple of other scenarios.

[00:11:51]
Obviously the words all run into each other that's not good, so let's put in a gap, 1rem, there we go. And it's a little bit big, so let's reduce our font size to 1rem. Right, not so bad, okay, so the last part of this, is this image. So right now we have our image crashed into our technologies and the way that we want it to look we need a little bit more breathing room.

[00:12:26]
And then we have this weird effect going on here. This is that line that kind of goes around on two sides and it isn't quite touching the image, so let's think about an approach for this. We have our image here in place, maybe what we need to do is put in a border, we wanna put a border on two sides of this image, we wanna put it on the top, and we want to put it on the left.

[00:12:52]
But if you just put on the border, it's going to touch the image itself. So how do we get space between the border and the image? We use padding, should you put in a little bit of padding, that's gonna get the border off the edge of the image, and then round the corners.

[00:13:08]
And that'll give you the cool round corner here. And it just so happens to be, this is how CSS treats the edges of the border here. It actually is kind of a cool effect, it sort of curves just a little bit right there on the edges, so that's where that comes from.

[00:13:23]
So now all we have to do is just write the code for that no big deal. So this will be then the project's image. And what we'll do, first of all, let's get it away from the text and give it all some breathing room, so margin 2rem 0 4rem 0.

[00:13:50]
So give me a little bit of space here between my technologies in the picture and it'll give me a lot of space down here on the bottom. Then we can say border, left, one pixel solid var aqua, so that's something new that we haven't actually looked at before.

[00:14:15]
You might have guessed that with these CSS variables, you can put them in anywhere. So far we've done things like a font color or a background color, that kind of thing. But here you can actually substitute in that variable right for your border color. So instead of one pixel solid red, it's one pixel solid var aqua, okay, so that's the border left.

[00:14:40]
And then we just change the next one to border top, there we go, top, okay? And then we can give this a border radius, Let's say 25 pixels, okay, so that's gonna round things up a little bit. So if your eyes are really good, you can see that we now have an aqua line going across the top of the image and down the side.

[00:15:12]
But it's a just like I said the border is right on top of the image. To give it a little bit of space as you know, from the box model, the distance between the content in the border is the padding, right? No different here, even though it's an image instead of text that distance is still called padding, so let's add that padding 1rem.

[00:15:40]
And that will move your image away from that border, cool effect. So you've actually seen that many places on the web sometimes you'll see a thumbnail effect, with or without those rounded corners. If you see that sort of border that goes around the office a little square picture or something.

[00:16:02]
And it's got sort of looks like a frame on the picture it's on all four sides that's that same idea here, all we've done is just put it on two sides instead of putting on all four sides. And there you go, that wasn't so scary. We have now coded your first project for the mobile dimension, not bad.