In this video, we looked at the basics  of our rectangle tool to create the kind  of structured boxes for our website. What we're gonna do now is do a bit of a session where I go  through and add all the boxes. You can watch this at double speed  or skip it if you want to. What I'm gonna do is I got my first box here. What I'm gonna do is just duplicate this box over  and over again for the different areas. So I'm gonna use my trick to select it here, a graphic.

I'm gonna hold down alt and drag it down. I'm gonna hold a shift at the same time  and it kind of snaps it all the way underneath. Okay? And with this graphic here, I'm gonna call this one. Um, I'm gonna open up this tool here. My properties panel.

I'm gonna pick this one. This is this kind  of pinky color, peachy color. And this one, instead of, that's gonna be called the box  who we are, add box at the front, just  to make it clear from a distance, uh, what I'm looking at,  the kind of structured boxes. Do the same thing with this one. I'm gonna drag him underneath  and he is using properties panel. Here's the dark purple.

Okay? And here's box. Here's the services box. And hold him down, drag him down,  and he is going to be the box  for our portfolio. We've kind of run outta the edge of our pages. Let's change the color with him first.

Actually, he's that color. Now we've run outta the edge. What we can do remember is grab our art board tool,  make sure we select on the desktop version,  and I'm gonna drag it down. Now how far to drag it down, I've zoomed out a little bit. Who knows? At the beginning, okay.

It's not until you get all your content on there,  you know how big it's gonna be. So I'm gonna oversize it, okay? For the moment, make it nice and big. And then I'm gonna go back into my move tool. I'm gonna click on him. Okay, so a box portfolio,  and I'm gonna hold down the alt key drag underneath.

And actually this chunk in here  is going to be a big white area. It's gonna have my um, people or team area. This last bit here is gonna be the green,  and this one here is gonna be called  my contact form. And then just underneath it, drag it down. I'm gonna have this last one is  one of the non-official colors. Okay?

Just one of the, like a dark gray for my footer. Now it's a little big. So what I'm gonna use is my transform tool. So Command T, remember Command T,  and I'll make it a little smaller. That's gonna be my footer. Now I kind of have a rough idea of the page height.

I'm gonna suck it back up using the outboard tool. Click on this top one here,  and it should snap to the bottom there. Back to the move tool when you're finished. Okay, now that I've got the desktop done,  I could move everything across to my mobile version  and start laying that one up. What I find it's a lot easier to work on one,  and then once you've completed one and finished  and worked all the bugs outta one of the views is  to then start on, say the next one,  and then work onto mobile. Now, a lot of people start with mobile first.

Okay? If that's the priority for their website,  it's definitely the way to go. There's definitely a lot more challenges getting everything  ready for mobile for me,  primarily my site's being used as desktop. So I start with desktop.