Mission Practice

[00:00:00]
>> Our next challenge is to include a mission statement on the website. This is gonna be placed just above the collections portion of the webpage that you just wrote. And there I have two alternatives here for you. If you are new to Flexbox, Layout, CSS, that type of thing, I have this alternative version here, which I'll lead with that I'd like you to give this a try.

[00:00:25]
So notice here in the desktop screenshot that we have a logo over here on the left hand side, it lines up very nicely with the pictures underneath. And then over here on the other side, we have some text which lines up with these two images here underneath. As we go to the tablet version, you see some of that continues to hold true.

[00:00:49]
And then finally, in the mobile version, we'll have the text on top and we'll have the logo underneath. So that is the kind of thing that I'm looking for if you are New to CSS. If you're not new to CSS, or you wanna try a little bit more of a challenge, what I'd like for you to do is to try this type of layout.

[00:01:11]
And this is there's the text is sloping very nicely right alongside of the logo here. This is something called CSS shapes and it allows you to float your logo and then your CSS shapes to dictate how that text is going to swoop down the side of the logo.

[00:01:34]
So rather than you probably using Flexbox where you're putting the logo in one box and the text in the other, here you're gonna have to have the text with a logo floated and then you CSS shapes to drive that a little bit of a curve here. Then we're going to go to our tablet, which will maintain that type of layout and then finally our mobile layout.

[00:01:57]
You can just stick the the logo up on top. So how did you do on the mission? It was a little bit challenging. Let me go through the version of this with the CSS shapes. I've given you the final state of both of these Inside of the GitHub files, this is chapter 4, this is 4B the mission.

[00:02:28]
And you'll find an end state folder and an end alt folder. The end alt folder is got the Flexbox answer in it and then I'm showing you here the one with the shapes. Okay, so the HTML for this is pretty straightforward. Once again, I'm using the section tag, I'm using an ID, could easily have used a class as well, but I used the ID cuz this is kinda of the ID for my whole section.

[00:02:56]
That's the name of the section. It's the mission section. And then I have my h2, our mission. And then after that, I have a with a class of mission text. Inside of that I have a paragraph and I have an image here with a class of mission image and the text all after that.

[00:03:15]
So that image is inside of the paragraph with the rest of the text. And that's pretty much all there is to know about this particular HTML and the more interesting part is over here in the CSS. So let's scroll on down. So here are the mission styles. And we start here inside of our mobile layout.

[00:03:45]
We have the, right, given the section a little bit of margin on the bottom, we have the mission text itself set to display block with a line height of 1.7 just to give a little bit of breathing room in between the text. And then the image I set a max height on it of 100 pixels and I set it to display block.

[00:04:04]
By setting the mission image to display block and setting the mission text to display block, that ensures they will stack on top of each other at mobile dimensions, that's exactly what we want. So then we get to our tablet dimension here, we have my current favorite tip ever.

[00:04:26]
So clearing floats has always been a problem. Anytime you float something on the page, you pull it out of the normal flow and you tell it to go somewhere else on the page and the remaining elements text whatever there is flows around the float, that's the way it's supposed to work.

[00:04:44]
The problem is you probably seen before in your own code sometimes weird layout things happen and you don't understand what's going on and the whole thing blew up and all you did was say float left. It's very annoying. Anytime that happens it's because you haven't cleared your float.

[00:05:01]
So that's the clear property or there's a lot of other techniques that will also clear afloat. But this is the coolest thing ever. It's a brand new thing. You can use this property, display, flow, hyphen, route. That will automatically clear all of the floats that are contained within that particular part of your web page.

[00:05:21]
So that's all I did. I set up a display a flow route to clear that and and the max width of 900 pixels just to keep the text shorter on the page. This next part I'm gonna have to demonstrate for you. This is the actual shape outside portion of this.

[00:05:41]
And I'll walk you through exactly how to put this in place because this is a very cool little bit of code. And we can do this through browser tools inside of Firefox to set this up. So I'll show you that in just a second. I also gave my mission image a max height of 211 pixels.

[00:05:57]
All right, so let's go through that then. So when I open this up in my browser window here and I'm going to put on my developer tools, now the important part here is that you do this in Firefox not in Chrome. Because Firefox has got the developer tools for working with shape outside and Chrome does not.

[00:06:23]
So in your developer tools here, we can go into our mission. And we can go into the mission text, see it how that's marked as flow route. And then over here under our paragraph, we click on the image here. And then inside of your CSS rules, see here where it says shape outside.

[00:06:46]
And it's got a funny little diagram right next to it. When you click that, it will show it right here in your browser window. So you can grab these points and you can pull them around on the page. So if you wanted to do something weird and crazy like that, you could absolutely do that.

[00:07:08]
You could change the surround however you want. And notice that Firefox is very helpfully updating all of that code for you. So as I said in the notes for this particular exercise, what I recommend that you do is start with a line of code. You can just go to MDN and copy the existing line of code that they give you by default so you have something to start with here.

[00:07:31]
Drop it into CSS so just paste it in your missing images of shape outside and then you can just drag these little points around and so forth. The interesting part about working with shape outside is that it is very much based on the size of the image itself.

[00:07:51]
So you noticed I gave you two logos. One logo went with the alt version of it, it was very tightly cropped. This version I had a lot of space to the right of this and that is so that I have some room to play around with these shape outside properties here.

[00:08:09]
If I didn't have all of this extra room, I couldn't be pulling this point out so far, there we go right there. So see how that clipped off right there as I pulled that point way across the page and then the text sort of looks a little bit odd now.

[00:08:24]
That's because I exceeded the width of that image and text is now wrapping around that particular point. So you might need to play around with your images to give you whatever width you're going to need to make shape outside work for you. Once you've generated that, then you just come to your browser tools, copy whatever it is that Firefox tells you and paste that into your CSS.

[00:08:49]
So that's the best way to set this up.