All right, this is the completed version of the class project... so in case you got stuck, and you weren't sure how to do it... you can watch this, I'll show you how to do the... things stuck in the top right corner real quick, that's pretty easy... and then I'll go on and actually just, I don't know, do the rest of it... like how I would do it to a professional level...

like make sure it's a component, I'm going to turn this thing into an auto layout... because-- I'm going to pretend I did it on purpose, really... I did it, and I discovered how awesome it was later on... but we'll do that, make sure it reflows, sticks to the corner... I'll show you how to push it out so that it's, I don't know, 16 x 16... there's a few little tips and tricks in here...

but you don't have to watch the video... because you can see, it's a little bit long... but for those of you who want to ride along, it might be interesting... at least to compare to how you did it, to how I did it... it's always good to see sometimes, all right, let's jump in. I'm start on this one here, click on the frame name...

we're going to use Shift 1, actually, 'Shift 2' to zoom in... if you're like me, at the beginning, you weren't sure... was it Command 1, or Command 2, or Shift 1... you're like, "Ah, I always get it wrong"  the way I remember it is, like Shift 1, 2, 3, is, I'm shifting my view... whereas Command, I'm commanding you to change tabs, 1, 2... does that help, anyway.

Let's do it just real quick, the basics, so that you know where you've got it... then I'll go through and design my whole little card thing you saw at the beginning  and you can watch if you want... if you need the experience, or you want to see how I did it... or maybe you got stuck somewhere... so let's do the basics. Let's go 'F' key, because it's better than a rectangle, more options for a frame...

I'm going to draw out a size... I'm going to give it a color so you can see what I'm doing... pick any color, what is it, green, greenish... aqua, to you, there you go... and inside of it is going to be another frame... so I'm going to hit the 'F' key again, and with it selected...

kind of drawing over the top of it, ends up going inside... you can see, Frame 1, which is not a good name for it... let's call this one "Card-Event"... and then this one's going to be my... "Date"... I'm going to give this one a Fill of white just so you can see it...

and all I want to do is, say Date, my little frame guy... is constrained to the left, no, to the right... to the top, yes... so when I select this now it jiggles around, comes for the ride, awesome. All right, dismissed, unless you want to see it all, there's some tips and tricks... but as you can see from the time, I'll kind of work my way through...

I'd hang around if I was you, but you don't have to... let's get into bit more detail, this needs to be component because... I'm going to use it loads of times... so remember that sweet shortcut, you remember? 'Command Option K', that's right, on a Mac, 'Ctrl Alt K' on a PC... he is now our main component...

the main components should hang out over there... we should have instances here, let's just have a couple because it's interesting... but we need to do most of our editing in the main component... because we want to flow through. A couple of things, is we want to have--  I'm going to click, hold, and drag the little icon there, to the right... hold 'Shift' and it jumps up in 8s...

how much do we want? 16, 24, 24, let's use 24... make sure it's a squircle... I'm going to hit the little options here, hit the little dots... because squircles look better than just rounded corners... iOS do this thing, where they smooth the corner, it's called Corner Smoothing...

I'm going to zoom in, we're going to use my scroll wheel... so I'm going to hold 'Command' down, or 'Ctrl' on a PC, and zoom in and out... the wrong way first, there you go, and look... can you see the edges there, changing... do you like it, do you even care, there you go, I care... let's kind of do the same for this, so let's go, you...

8's going to be good with the corner smoothing. Text that are inside it, so I'm going to grab my 'Type tool'... and if you kind of click inside stuff, often, it'll go inside... can you see, it went inside that date frame, kind of works... so I'm going to say, '17', size wise, let's use that little shortcut... where you click on it and use up or down...

what do you want mine about, 10... 10's pretty small for an app, but this is like more of a suggestion... and not a full, like the accessibility... kind of, date will be in the actual listing... this is like a little card trying to cram in too much information... I'm going to have two bits of text...

this one's going to say, mar, no, capital "MAR"... I'm going to select it all, hit 'Command B' to make it go bold... 'Ctrl B' on a PC, just instantly goes bold, which is cool... I'm going to hit 'Esc' to get out of it... hold 'Shift', click both of them... I'm going to hold down the 'Option' key on my Mac, 'Alt' key on a PC...

and I'm going to hit 'H' to line them up horizontally... so that same key plus 'V' will align them vertically... we'll just click those. I don't remember what those shortcuts are... because that don't make sense, but this one makes sense, look... 'Option', or 'Alt' on a PC, 'H' for horizontal alignment.

So I'm going to do these, and what I'd like to do is... mine ended up inside my frame, which is good... you can drag it out if you need to, and drag it over this way... I would like mine inside, so drag yours inside this date frame... because what I want to do is, I want this frame... at the moment I got it fixed, where is it, you are...

a fixed width and a height, 32 x 32... great size, but I want it to expand if there are longer... you know, some of the digits aren't going to fit perfectly in here... so I want to turn this into an auto layout,  remember, 'Shift A'... so that it's perfectly in the middle... can you see there, it's defaulted to hug contents, if it hasn't, like fixed width...

you can say, actually, just make it hug everything on the inside... so that when later on somebody goes, I don't know, it's a short one... it's probably just as long. I want it to expand and contract... and it allows me a bit of control here to select it... so actually, I can play with the spacing if I want to...

the padding. I'm going to make mine '4'... it's a bit more responsive, so let's go 'Shift 1'... see it all, it's all appearing there nicely... I want mine spaced out a bit better from the edge, so '+', '+', '+'... I'll hit 'Del' on the way...

I want mine to kind of go in this top corner here... but I want it to be... I want it to be minus, how much? Let's use our little grid system... I'm kind of seeing both of them, I'm like... spacing wise, what do we think?

12, 16, let's do 16, 16 feels like a good gap from the edges... so I'm going to say, you are going to be '-16' to go across... and '+16' down, and I know it's perfect, look at us being perfect... and hopefully it's still responsive, it is? Yep... picking the right side, the constraints are set perfectly...

remember, the constraints aren't done with the parent... it's done with the child on the inside, that's inside of a frame, yes... but work on this guy, look, you, have constraints, a top and right, make sense? Now the nice thing, 'Shift 1' is, I can have these, like on a smaller device... kind of full width, but on these larger ones my plan is to have like... two of them kind of stacked up on a really big wide phone...

and have grids like this... 'T'... and this is going to work for our desktop view as well... but one of the problems here now, is kind of consistency with spacing ... we can go through and kind of go, you... like, it's kind of a pain, you're like, you, I want it to be what?

+8, no, +16... you can do that for everything... but a grid system is going to help us make this a whole lot faster... and allow us to be a bit more consistent across lots of things... rather than just dragging it, and try not to forget to use 16 instead of 17... so that is the segue to the next video...

and while we're in the section called Grids. Now you might have done it differently, that's okay... doesn't matter, as long as it's kind of sticking in that corner... and you might design it a bit different in terms of looks... you might not use an auto layout... was that necessary?

Probably not.. I felt like we kind of needed it, anyway... why could it be good? Actually, this could be good... later on we might use it on a desktop version, and we might use it this way... look at this, I can't change the auto layout direction in an instance of it...

I've got to do it up here, you, in the Main, I could say, you can go this way... look at that, oh, that is a-- I should have lived with that... that is a very good use case for auto layout... there you go, let's pretend I did that on purpose. All right, that is the end of the video, long one... I hope you picked up some tips, or confirmed some of your knowledge...

or you figured out how to do it a better way... let me know in the comments if you did it a different way... and if you're watching this video, have a look at the comments... it might be a genius way that Dan didn't think of... all right, that is it, I'll stop talking about myself in the third person... let's get on to the next video.