All right, welcome back.
So in this video, we're going to design and build out and layout the homepage.
So the first thing I want you to do is I want you to go to the five mobile design folder that we have.
And right.
Click on the home page here.
Open with Photoshop.
Twenty.
So this is going to set up the framework for.
The mobile design.
So you can see right here.
When I copied this, I don't know why I did this, to be honest with you, but when I did a print screen,
for some reason, it grabbed this and brought it down here.
So what I want to do.
Is.
I'm going to leave this the way it is right now.
We're going to minimize this for second and we're going to right click on the podcast page and openness
and Photoshop 20/20, OK?
And now what I want to do.
Is I want to grab the top part here, so I'm going to grab the NAV in the top bar guy right here.
Someone to use the market tool of the MCE and then control seed copy and then I'm going to paste it
into here so we have the menu.
OK, so we have a top bar up here and then we have a menu here, OK?
And then the rest of the content.
You can see here and we're gonna fix this part right here, so let's select again with the marquee to
let's select all this content here.
Hit delete once we're on the right file.
There we go.
And then what we're gonna do is we're gonna go back over to the podcast PMG file.
I'm going to zoom out real quick and I'm going to grab the footer with the marquee to also hit em and
then drag them down, hit control, C control, D, D, select and then control.
V to paste that on our homed up G file.
OK.
And there you go.
All right.
So let me go down here and just make sure that this is where it needs to be.
OK?
Very good.
I like that.
So now what I'm to do is I'm in here control shift ass and we're going to save on a computer.
And we're going to call this home and we're gonna save it as a BSD file case, I'll save that.
OK.
And now let me do one more thing here.
We're going to bump the.
Flutter up to there and then we're gonna crap out the bottom.
So just hit the shortcut.
Keyboard shortcut of C to grab the crop tool and then V to get back.
And then if you hold spacebar, then you can use the hand tool.
I know I'm kind of moving fast.
And what I'll do is in the next video I'll have the keyboard shortcuts ons.
You can see exactly what I'm doing.
OK.
So what I'm going to talk about now is the layout and how and why it's laid out this way.
So if you remember.
The design of the desktop version of the site.
We had the top bar here and then we had the navigation here.
And then we had the content for the home page and then content from my blog posts as well.
And then we had the Futter, OK.
And that's how it is.
Both on the mobile version of the site.
In fact, when we open it up so you can see it.
So if you go to learn, talk plus Starcom, we can look at the two different versions.
You can look at the desktop version, which shows the menu here and then our version here.
In fact, when I shrink it down, then it shows the hamburger menu here, which is a mobile menu.
And it's kind of like a menu icon.
Basically.
And the reason why they use that is because there's no way to the how to create an icon that would.
A call the actions that, OK.
This is a menu, OK, because you can't fit all these links on a small screen like this, so to optimize
it for that experience.
But the reason why it looks like this is because that's what it was used in.
And the other instant.
OK, so.
That's why we set it up that way, because basically what it's doing is when we go to the mobile design,
this is collapsing.
So I'll show showing again.
So if we go from the desktop view.
OK, with these images showing and then we go to the break point here.
Then it breaks there.
OK.
All right.
So that's the homepage.
So we got the home page done on the next video.
We're going to design the podcast page.
So thanks for watching.
I'll see in the next video.