All righty, so in this video, we're going to be talking about figure what it is and how we are going
to be using it and we're going to just set up the basics of our project.
So first, what is Sigma?
So this is a tool for web designers that allows them to create mockups and prototypes of websites,
including all image and icon assets, as well as colors and layout positioning.
As someone with years of graphic design experience, specifically working with layout and design.
I can appreciate the connection between design and development that figure allows for.
So I'm going to start by sharing a resource that in the course, I'm not going to go hugely in depth
on this, but feel free to read about it at your leisure.
The fundamental things that you need to know is that it works similar to Photoshop in that you have
layers and each of these layers can have their own styling.
In this case, it actually allows you as a designer to set the CSFs values for how it should be positioned
on the page.
And that's something we're going to look at as well.
And the other main thing that is important is that it allows us to have shared styles so we can get
the color styles from Sigma as well.
And also the important thing is exporting image assets.
So we'll get to this part later on in the next video.
All right.
Let's get started with our specific figure, a project.
I will also provide this link.
To the project, it is called landing page, it looks like this, and when you go to this link, you'll
be greeted with this.
If you've never gone to move before, the first thing you're going to need to do is log in in order
to complete the handoff between the designer and the developer.
So first, we're going to log in.
I've already created my account.
You can log in with Google.
And once you do that, we can actually close this one for now.
Once you do that, you can see that we have our landing page here.
And as I hover over it, you can see that we have different layers, different assets happening here.
I'm actually just going to zoom in to make this a little bit easier to see.
One hundred and fifty percent.
And then I want to make this fit within the page so I can actually use a keyboard shortcut in Sigma.
So I'm just going to press shift and one.
And now you can see that it's zoomed to fit.
All right, awesome.
So once you've logged in, this is all the work that the designer has done and essentially all we're
trying to do is recreate this in our code.
So the first thing you might notice on the left side here, we have a landing page when I click on it,
this is our landing page layer, which is everything.
You can see that we have some success over here, including a background linear gradient.
If I collapse this, we can actually see that it's made up of a bunch of different layers.
So you can see we have our main image, we have our branding, we have all of our other images here
at the bottom, and we have our Appstore badges here.
And then we have our text here as well.
All right.
So that's generally how everything's going to be laid out.
As you click on them, you'll be able to export individual layers.
But again, we'll get to that in the next video.
So we're going to go back to clicking on the landing page.
And this is the first styling we're going to apply within our project.
But first, we're going to need to actually set up our project in visual studio code.
So if we go back to our desktop here, we're going to start with the standard empty template.
So I'm going to just use this, duplicate it, and then I'm going to rename it Splash Dash Page, and
then I'm going to open this up in Visual Studio Code.
OK, so we have our files open here, perfect.
All right, let's start with the usual.
We're going to change our title here to be Splash Page, and we can save that and then run our project.
All right.
So it's working.
That's great.
Now we can go back to our HTML, and the first thing we're going to do is we're actually going to create
a wrapper div for everything.
This is because we want the wrapper to be the 14 40 pixels and we want that to be able to be centered
in the body because some screens will actually be wider than 14, 40 pixels.
So if you have a 10 ADP monitor that with is actually 19, 20 instead of 14, 40.
So to create a div with the class wrapper in visual studio code, we can actually just type period and
then rapper.
So that's the class.
And then press enter and you see we have a div with the class of rapper.
Very cool.
OK, so we can save that.
And if we jump back to figure here, we can see that we have some styling suggestions here.
So the first thing we're going to do is we're actually going to copy the background first and we're
going to put that in our body itself, actually.
And we can get rid of this Midnite because we're going to deal with that later.
And then we also want to style for our rapper.
Itself and we'll jump back.
To the browser and we're going to copy the physician relative and the width, but we're not going to
copy the height because we want the height to be a little bit more dynamic than that.
So we're going to paste that in there.
So our position relative and we have our width of 14, 40 pixels, and instead of our solid height,
we're going to have a more dynamic height.
So we're going to give it a height of one hundred viewport height.
So this is taking up one hundred percent of the screen real estate that's visible.
If you increase the number more than that, it means you'll actually scroll down the page, which we
will actually need to do later.
And next, we're going to give this a margin of auto.
So this is going to center our wrapper within our page if our page happens to be wider than 14, 40
pixels.
And I'm just going to give it a background of Dodger Blue now so you can see what I'm talking about.
So we can save that now and jump back.
OK, so we can see definitely a lot of blue happening here, but if we actually zoom out, we can see
that we have our gradient background.
It's very subtle, but there's a little bit of pink down here.
And this is showing that our wrapper will remain centered even if the page is bigger than our 14 40
pixels.
So that's why we're using a wrapper here.
All right.
So I can set that zoom back to one hundred percent.
All right.
Now we're ready to start with the text for our project.
So back in figure, we can see that we have a title here and we have some body text down here, so the
first thing we're going to do is if we click on the title, we can see that we have a font family of
future up t.
So I personally know that this is a paid font and we want to stick with free fonts for our project.
So I'm going to be changing this to Lato instead.
So I'm going to jump over to Google fonts.
In order to do that, you can choose a different font if you like.
To me, this is a similar very popular font, so I'm just going to search Lato Lacto and I'm going to
click on it and I'm going to scroll down and I'm going to select the regular font, going to go over
to embed and I want to copy the import statement, so I'm going to highlight that copy that jump back
and I'm going to pace that at the top.
Quseir And then I'm also going to in the body, assign the font family to be lato comma sans serif as
a backup just in case that doesn't load.
Now we're going to need to build out the HTML with the font from our figure project.
So first we will build out the text here.
So we want our title and text comment title there and then we're going to create a parent container
because we're also going to put in the App Store badges in here as well.
So we're just going to use dot text dash container to create our div.
And then inside of this, we're going to create an H1 dot title to specify this is our title class and
then we're going to create a paragraph element.
So P text to give that a class of text.
And then we're going to jump back to the browser and close our Google fonts for now and go back to Sigma.
And we want to actually copy the text so we can just copy this right here.
And then jump back and we're going to put that in the title there.
And then we're going to highlight this and we're going to copy the text here.
And we can jump back, piece that in.
OK, I'm going to use alt Z to word wrap so that we can actually see everything that reminds me, we
can actually get rid of font.
Awesome.
We don't need that for this project, OK?
And so we have our HTML done here.
Let's save that and check it out.
OK, so we have our fondant here and we have our Google font, so that's good.
We can see that we now have a horizontal scroll bar, though, and that's definitely something that
I don't want to have.
I think that's usually a bad thing to have so we can fix that by switching our overflow X on the body
to be hidden.
So we'll go back to our success here and below our margin.
We're in type overflow Desh X.
This is only four left right.
And we want that to be hidden.
OK, we can save that in check.
All right, perfect.
We got rid of our horizontal scroll bar at the bottom here.
So we still have margin above our each one, as you can see, there's a bit of white here, but let's
copy the styling from the first to see what changes.
So back in figure, I'm going to go over to our title again.
And I'm going to copy all of this, but I am going to get rid of that specific font family, I'm going
to copy the color, but I'm going to copy that separately because I'm going to put that in the body
instead of having to have it in both of them.
So we're going to go right below here and we're going to have a class for our title.
And at a pace that in I'm going to highlight all of these press tabs so that it's indented properly.
And I'm going to get rid of this font family here and I'm going to go back to figure to copy the color
here.
And we're going to paste that right here above our background color.
Then I'm going to go back and copy these CSFs for our body text here so you can see that we have a position
of absolute so that is setting exactly where would they want it on the page.
So that's why having our wrapper be 14, 40 pixels is so important, because all of this is relative
to that 14, 40 pixel width.
OK, and we'll jump back and below this, we're going to use our text class here and we're going to
paste this same thing.
We're just going to highlight this, tab it over, and then remove our font family.
And we can save that now and check it out.
OK, so that's definitely looking a lot better.
It is exactly where it should be on the page.
So you can see if we go back that we have a gap here and we have a gap here on the top, which we are
maintaining perfect.
So our positioning is working out and copying over our success is going pretty smoothly so far.
I can actually get rid of the.
Background Dodger Blue, that was just to show how the rapper will remain centered on the page.
OK, cool.
In the next video, now that we have our position where we want it to be, we're going to be starting
to tackle the image assets.
So I'll see in that one by four now.