Flexbox Exercises Setup

[00:00:00]
>> So what I'd like for you to work on next is this four part or sorry, three part series of items. There's a collections piece, a mission piece, and a footer. And so the goal here is to do a whole bunch of layouts with Flexbox. And I've thrown in a couple of other little tidbits for some of you who may be a little bit more advanced in CSS.

[00:00:22]
Or who wanna and read up on some additional CSS properties. So let's take a look at what these look like. And we're gonna switch to VS code to do this. So inside these are files that are from GitHub, you can download them and put them into VS code.

[00:00:40]
And so I'm in folder 4A. So under folder four Flexbox exercises folder 4A collections. You'll see here I've given you a bunch of screenshots. We'll start with the first screenshot. This is the collections piece. So all of these assets are here and available to you inside of the begin folder.

[00:01:03]
So if you look inside of begin, I've given you a starting stylesheet. I've given you all of the images in the dimensions that you need. And I've given you a starting HTML webpage here. It's all marked up for you and what I'd like for you to do is, to build this out so that your collections page looks like this at a desktop dimension.

[00:01:23]
And I think I've put in the media queries for you too. So you don't have to worry about that. At a tablet dimension we're going to go to two images across instead of three. And then in a mobile dimension, we're gonna go to one image stacked all the way down the page.

[00:01:38]
So that we'll be challenge number one is to go through and lay out this collections piece. Then in challenge number two 4b, this is the mission. I have sort of two alternatives. So if you are more of a Flexbox beginner, this is one way of approaching this. So this is the mission section of the page that you go on top of the collections piece that you're gonna build.

[00:02:07]
And, ops, sorry looks like this. This is how it should look if you are more of a Flexbox beginner. So you have the logo and you have the text next to it. Notice how it all lines up really nicely here on the desktop, right. So that logo is as big as the column underneath of it.

[00:02:23]
The text here lines up with what the other images that are over here underneath. Then we're going to go to our tablet dimension continues to look like that. And then we can go to our mobile dimension where we have the text on top and the logo underneath. Now if you are a more advanced CSS coder, then you might wanna read up a little bit on CSS shapes.

[00:02:48]
And you can code this a little bit differently. These are just the the one here called desktop that PNG. Notice here how I've made the text go down the slant of that logo. Isn't that not a cool effect? So, this is something that you can take a look at and how to approach here.

[00:03:05]
So that would be the desktop version of that and then the Tablet version looks like that. And then finally the mobile version. Put the logo on the top and put the text underneath. So a hint here. If you decide to take this route, this would not be a Flexbox based layout.

[00:03:26]
We're going to be doing something with a float. So you need to float the image. And use CSS shapes to make that cool slant along the edge of the logo. And then the last one is a footer layout. So underneath the collections down here at the bottom we are gonna set up a layout.

[00:03:47]
Where we've got the stay connected. We've got links to Facebook and Instagram. And we have our address for the wall of wonder. And then we're going to go to our tablet layout, which looks like this. And then our mobile layout. So if you're feeling a little overwhelmed by all of those things.

[00:04:06]
Here's what I would recommend for those of you who are beginners. The collections is probably the best one to spend your time on, if you're limited in the amount of time you have time to spend on this. That'll get you a lot of learning going from three images across the two images across to one image on mobile.

[00:04:24]
That would be the first thing that I would work on. If you're a beginner and you just wanna code up the mission element really quick, you can probably get that done really fast. Based on the code that you write for collections, the mission should go together really fast.

[00:04:40]
And then work on the footer last. If you are not sure about that whole CSS shapes thing, you might just go from the collections down to the footer. And then come back to the shapes there at the end.