All language subtitles for 3. Adding CSS

All right.

Hopefully you had some success on the first series of steps.

So let's go over a solution right now.

So the first thing we need to do is generate a new angular project called typing.

But to do so I'm going to go back over to my terminal.

I can make sure that I close out the old angular project we were working on.

No you can stop that process by hitting control C under keyboard.

Well then change back to a workspace directory of sorts.

And then to generate a new project I will run energy new and in the name of our project which is typing.

You'll go ahead and run that command.

I'll ask you one or two questions and then you will just enter to use the defaults and then you'll see

angular generate a ton of different files and then install a couple dependencies this to save a little

bit of time.

I already went ahead and ran that command.

Now inside of my workspace directory I will see a new folder inside there called typing.

That's where all my code is going to sit.

I'm now go into it change into that folder.

I'm going to start up my code editor inside their and then I'm going to move on to step two which is

to make sure that we can start the project up and access it inside our browser so inside the typing

directory I will start up my project by running NPM start that's going to take just a moment to warm

up after it does some initial build steps will then see a message saying that we can access our application

at local host forty two hundred.

Yep there we go right there.

They'll open up a new browser tab and navigate to a local host forty two hundred.

And here is my angular welcome screen OK.

So far so good.

Now next up we'll move on to Step number three.

We're going to go back over to our terminal and make sure that we install boom as we assess using NPM.

They'll change back to my terminal.

I'm going to open up once again a second terminal window and make sure that it's still inside of my

typing project directory yet still inside there and then to install Boma I will run npm install Wilma

like so once again this is a very small little package.

So it should take just a moment or two to install and once I get that all good.

I remember just installing it.

Not quite enough.

We have to actually make sure that we wire up all night to our project to do so.

I will go to my editor which I just opened a moment ago.

I'm going to find my S.R. C directory and inside there is our styles Nazi SS file remember these styles

Nazi SS file is where we either add global styles that's going to affect all the different elements

of our project or where we can also imports other style files as well.

That's what we want to do in this case.

So inside of here we will write out at import then Bouma the USS Wal-Mart that's USS and as a quick

reminder that path right there is relative to our node modules directory.

So we open up node modules and find that bomber folder somewhere inside of here.

There it is right there.

Inside there is the CSX folder and inside there is the Bowman dots.

Yes as file that we want to include inside of our project.

All right.

That looks good.

Now we will just go back over to our browser.

Make sure that it looks like we kind of loaded up this file.

If I flip back over I'll see that.

Now some styling inside of here is just a little bit messed up which is pretty much a sign that yes

we did just include Bona okay.

So that was your first four steps.

Now let me give you some guidance on the next thing that we're going to work on the next thing we're

going to work on is we're going to replace some of the content that gets displayed to the user.

So in other words we don't want to show this typical landing screen right here.

Instead I want to replace all this default content.

Now I want to show some of the basic elements that we need to display for our application though in

particular I want to see the title some location to put the randomly generated sentence that we're going

to display text input and a success message.

So essentially this stuff right here you don't have to apply any styling or see assets to this.

We're gonna do all that stuff together but just make sure that we see the title at the top.

Some randomly generated sentence and again you don't have to randomly generate it just puts some element

inside to make sure that we can show some form of some stuff in the text input and the message.

Right now we're not worrying about any functionality.

Just make sure the h t mail is there and that we can see it on the screen inside of our browser.

So once again go ahead and give it a shot if you want to do this together.

No problem.

Just skip over to the next video.

All right.

So go ahead and give it a shot and I'll see you in just a minute.