All righty, welcome back.
So the goal of this video is going to be to add our image assets that we have and figure into our own
project.
There is a principle of layout and design when it comes to print for newspapers and magazines, and
that is that you always want the image to be larger than what it will be on the page in order to make
sure that it remains sharp.
If you've ever had a really small image that has been made bigger, you can see that it pixilate and
loses quality.
We want the opposite to happen in this case, to have a bigger image become smaller on the page.
So we need to export the elements.
We can do this in different formats.
So let's say that we click on one of the layers here.
So if we were to click down on the arrow, we can see that it's made up of an icon as well as the text
here.
If you wanted to, you could actually explore each of these letters individually and apply the styling
individually.
But for me, that's a little too in-depth.
I want to just actually export the entire layer.
So the logo plus the branding itself.
Once I have this layer selected, we're going to start with the branding and go over to the export option
here.
I'm going to click on it and you can see that there's multiple formats that you could export in for
me.
I'm going to stick with PMG because it allows us to maintain quality by exporting at a bigger size,
as well as maintaining transparency, which is especially important for these images that have box shadow
with them as well.
So we're going to switch this to two times, you can see if you want to preview it, you can see that
the checkered background is showing that the background is transparent, which is also going to be super
important because we are going to be changing the background colour later on in the project.
So we just click on this button export and you can see we have our PMG here.
We're going to do the same thing for our main image.
But once we click on this, we can see that there's actually a whole other image here.
So we have the iPhone that's made up of the swipe indicator, the screen, the device and the frame.
You can see that as I hover over it, the blue changes to show which one is selected.
In this case, we're going to just take the iPhone itself, which has everything together, including
the box shadow.
So we'll now click and export that.
You can see we have a preview here.
We have the box shadow and the rest of it is transparent.
And again, I'm going to export it at two times.
Export that.
And we can minimize that I'm going to do the same thing for the rest of these, so each of these images.
So we have exported each of our image assets here.
Now we're going to jump into where we've downloaded them, so we're going to show them in our folder
here and we're going to copy all of these into our splash page project inside a folder we're going to
create called IMG.
And I'll put this here, open it up, and we're going to drag all of these inside, so there should
be two, four, six, eight, nine imagist total going to drag them and we're going to clean these up,
OK?
Let's just view them like this and we'll switch that.
OK, so I am going to change all the file names to be more simplified in order to remove the spaces
and just be easier within our project.
So again, I will kind of fast forward through this.
OK, so for all the one word filenames, I just made them lowercase just to match everything, the iPhone
15 image I renamed to be Main Dasch image, I added the dashes to habitual branning, made it lowercase,
and then I simplified these two to be app dash store dash button and Google Dash played button.
All right.
So we have all of our images sorted out there now in our project.
It's time to actually add them to our code into our index HTML.
And we're going to start with the branding, which is actually going to go above our title and text
as it is on the page.
So first we're going to comment a title for our brand logo, and I'm just going to add this as a straight
up image so you just can type IMG and press enter and the source I'm going to do dot slash and then
it'll automatically come up with image.
I'm going to enter and now you can see that it automatically shows all the possible options here.
And I actually want habitual branding.
So I'm going to highlight that and press enter and I'm going to give it an alt description as well,
habitual logo.
And I'm also going to give it a class of brand IMG.
All right.
Next, within our text container, we want to add our app icons below this.
OK, I'm going to create a parent div just with period app dash store, dash BTN and press enter and
you see it creates the div for me inside of this I'm going to have an anchor element so I'll just type
A and enter.
This would link to the App Store for the splash page that we have.
But because we don't really have an app to link to, I'm just going to put in A.
S colon slash slash and then apple dot com.
And we're also going to give this a target attribute of underscore blank so that it opens in a new page.
And then we're going to press enter here again.
And then inside of this anchor is going to be our image.
So you can have my image here.
And the source I'm going to do dot slash again into our image folder and then I want the App Store button.
PMG and then the AWALT, I'm just going to have Appstore and I can actually copy this now.
And we'll piece it again.
And this time I'm going to change this class of the parent here to be Google Dash Play Dash BTN and
the link is going to go to play Dot, Google Dotcom instead.
And we still on our target blank.
We need to change the source.
So this time it's going to be our Google Play button that PMG and I'm to change the alt attribute as
well to be Google Play.
OK, so we can save that and check that out so far.
OK, so we have our branding here and we have our App Store icon and if we click on it can see that
we go to the Apple website.
And if we click on this, we see that we go to Google Play.
All right.
So that's working how we want it to work.
So far, you can see that they're also way too big, especially compared to the text.
But we will get to that in the next video when we focus on our styling.
Let's keep adding our assets, though, for now.
So next, we have our main image.
So we want this to be below our text container.
So we'll go below that and we're going to comment on a title for Main Image.
And we're going to use a parent div for this as well.
So we'll just do dot main dash image, dash container and then press enter to create our div.
And then inside of this we're going to have our image and then IMG press enter to create our image and
our source dot slash and then enter for our image.
And we want our main image.
PMG and the ALZ will be our landing page mockup.
OK.
And then below that will comment on another title, and this is just going to be four images and then
we're going to just add in the rest of the images.
I'm going to fast forward through this part.
You can see that each of these will also have their own unique class.
So this first one is profile dash image.
It'll follow that same format for the rest of them.
I can actually copy these.
So five in total and now fast forward through renaming them.
OK, so we're done here, we have a class corresponding to each we have the correct images in here and
we have an all description for all of our images.
Let's save that now and check it out.
OK, so we have our main image here, it's definitely too big and we have all of our other images here,
they are also definitely bigger than they need to be.
OK, so in the next video, we will get to actually styling everything to make everything fit and positioned
the way that it should be.
I'll see in that one by four now.