So let's go ahead and create new projects so I'm going to say inside of our tax code is a file new.
I'm going to say I want to project you could have said command so you project here.
I want this to
so new project here.
Someone needs to be single view IOW Of course.
And this is going to be because I want to call this Biz Card
XY eleven.
This is just for me internally so I know this is X Code eleven.
Okay.
You don't have to add these codes there.
I can just say BS card and I'm going to change this to B's card like this swift Swifty y.
That's good.
And I say next.
And of course you're going to take me to where I create all of my projects.
That is exactly what I want this to be say create.
It's going to go ahead and create our new project their business card.
I'm going to delete all of that stuff from the top to have a clean slate.
Very good.
And I usually like to go ahead and run real quick there so we make sure that things are actually working
perfectly.
And there we go.
It is showing up.
The next thing we need to do is to add a few assets that we need for our business card.
So I'm gonna go and grab those assets.
You should have at this point is just gonna be one image.
So I'm going to grab it in AD instead of our assets folder here.
Right.
Let's do that
grab and drop it there and voila you can see there's this there this very good looking gentleman there.
Their goal is a picture of me.
There we go.
That's very simplistic.
And there we go.
We have a simplistic picture of me there and like I said before I can see you now the moment we add
something.
It's all contextual.
I right here pane and we have a few things pertaining to this image so there's name of the image which
is Paolo's dash nice dash photo brand their eyes default and all sort of things that we don't really
need to worry too much about at this point.
Very good.
So we should have this asset or you can create your own.
But in the beginning it would prefer that you just download the assets.
This image here so we can follow along in later can change to something that you to a picture view of
your dog or family whoever you want to add.
OK.
Right.
So we have that let's go back to our content viewer.
So here is of course where we're going to be start coding.
Let's close a few things down there.
All right.
So let's continue here.
OK.
So there is our hello world there.
Not much really going to get rid of that's the first thing we gotta do is we're going to organize everything
so that we can have a better.
First thing want to do is let's go ahead and put an H first.
So what.
Let's go ahead and put a stack here.
You notice the moment we get rid of something inside of our body we have complaints.
These complaints are valid because it's saying every time we are invoking the body here which inherits
all conforms to the some view it expects to return something.
That's why we can never not have anything better.
But one other thing also if I say text and add some gibberish something like this and I save and run
of course you will expect it to run again.
Right.
It's making a lot of things we should see here would be Hello.
Perfect.
It works.
What about if I want to add another hello so I say text like there's something like that save and run.
You notice we gonna have a problem here because you're gonna say well these function here returns only
one thing you can return two things at once.
That just doesn't make any sense.
That's why we always want to add things inside of an enclosed entity enclosed view so we can actually
add as many views as we want.
In this case here are just a v stack as such and
and I'm gonna go ahead and say the first thing I want to add is a text field.
I will have to say something like Paolo this shown yours truly and I'm gonna add a few.
Let's go ahead and make the font to be something title and is to be nice and I'm going to say the foreground.
Remember now we can't just say colors or foreground.
I wanted to be white.
Okay very good.
Notice also the moment we are actually typing it first of all all of this goes in dense to the left.
But once we finish our once we finish our code hit enter and it just pushes all to the right.
So organize the code for us.
That's very nice.
Very good.
So I'm going to save this and give a runner real quick here to see where we at.
OK.
You may see the problem here the problem is that I said that our foreground is white.
So the text is actually showing but because the background is white and that text is also white obviously
nothing's showing.
For now let's go ahead and changes to Gray.
We can always change it later once we have our user interface complete disappointed we should see Polish
on there looking very good and the next thing I want is also to add another text right below it.
Right.
So when it's a text such let's say text and this gonna be something like build apps with Paolo dot com.
OK.
Just a text and do the same thing here.
I'm one the font to be subheading because I want it to be smaller than the head and the color also is
going to be I'm gonna.
Well let's go to grey at this point because we can add white we'll change all of that later and run
once again just to see how things are looking.
And you can see there go.
There's my name and the buildups and Polycom.
Very good.
So it's looking real good.
But next thing we want to do
next we're going to do is to add next thing we're going to do is we want to add the Twitter account
at the bottom here.
Now remember the other thing not one thing to consider here is that the Twitter account will have just
a text right.
It says add buildups with me whatever.
Now the Twitter account here will consist of a text but we also want to add to the left of that text
an image that will be some sort of an image for instance an image that will have a T of some sort.
OK.
So what do we need to do here we have to think a little bit about it.
What you need to do here.
We can.
What are we going to do here.
We actually going to create another
stack here.
This is going to be horizontal stack.
So I'm going to say each stack and such horizontal because everything inside of it is going to be horizontally
stacked.
All right.
And in this case here what I'm going to do so now I'm going to put.
So what I'm gonna do I'm going to add a text.
This text is going to say something like this text is going to be the at build apps with me like that.
Shameful plug.
And when I say I want add a font and I want us to be sub headline as well.
And for one color I want this to be I want it to be white.
But for now I'm going to say green.
Notice the other thing I haven't told you here is that we can also invoke the color class if we want
to more if we want initialize our own color or if we want to continue to go and get the closer we have
access to.
So it's your option really.
But in this case I'm just gonna go ahead and use grey again.
Okay.
The difference here is that I'm using the color class and invoke de Grey but same thing as we did here.
Very good.
Let's save this and run.
We should see something below our bailouts.
There we go.
Looks real good.
Okay.
So now we need to add something leading.
Now we need to add an icon leading this whole Twitter account.
Well because we are in H stack horizontal stack everything is going to be stack horizontally.
We can do so.
Why how we do it so we can do so by invoking the image right there is the image view we can use.
And this image here we can parse images that we have in our assets or we can pass a system name image
huh.
The beauty here if I pass say system name as such it requires a string which is going to be the actual
name of our image.
Now we will see later how to go and get or how to know the.
Now later I'm going to show you how to actually know all of the images names and so forth that we can
get from the system for now all we have to do just say T dot square dot feel just like that.
So I'm saying I want a square that is filled that contains a letter T.
All right.
And I can also that add a few other things in this case and it's going to add a foreground color just
the color in this case I want this to be let's say dot pink Well it changes colors later but that's
totally fine for now save and run and we should be able to see a little icon showing.
Look at that.
Very nice.
There's T for two Twitter and ad build apps with me.
Now this may be a little bit small for you but now this may be a little bit small for you perhaps it
can make this a little bit bigger.
Now this may be a little bit small for you.
Let me make this a little bit bigger so you can see now you're not going to see the entire
simulator anymore.
That's fine.
As you can see there we go.
OK very good.
So this is making sense and we're making really good progress.
But the next thing we really want to do is we want to be able to
now let's go and differentiate our Twitter account here from anything else so I can go.
Come down here and add more modifiers.
I want this to be bold
like that and I want also for it to be italic like this looks like the invitation is that invitation
looks like the indent is not working.
That's fine we can do ourselves a swine.
This real quick
and well I like to differentiate things a little bit.
Looks much much nicer.
Very good.
Now the next thing we want to do is if we want to be able to add a nice card around it how do we do
that.
Well the best way to do this is to understand well the best way to think about this is to understand
how to stack things the best way to think about this is that not just that we have this V stack at the
top here which is enclosing this H stack which is exactly what we added here.
All right.
So in order for us
so what are we gonna do is we are also adding another stack.
This case is going to be an H stack horizontal stack that will include everything.
Something like this.
This will become more apparent later so I need to close that.
Let's see.
I have this one so I'm going to come below that.
That's the latest one that was enclosing everything.
OK.
The other thing I like to do is another thing to organize the whole code.
I like to I like to.
Another thing we can do.
Also I like to say command a to select everything and go to Ed and I like to go to structure and I go
to structure like this and I say right indent and invents everything for me.
OK.
That's a that's a good way to indent everything and put everything and make everything look good.
So we have our H stack at the top here.
If we save and run we shouldn't see really any differences here but we're going to see this will become
more apparent in a bit
but this will become more apparent in the next video.