Three different text displayed one after the other now i'll split this video into two parts where in the first part we will just set everything up and we'll also design all of this using html and.
Css and then in the next video i'll show you how to add different text over here and for that we'll also use some javascript and you can go ahead and add more than three text over here so i'll.
Also show you what to change in the code for that so let's get started all right here i have created this folder called typewritingeffect and i.
Opened it with vs code now the first thing you have to make sure is that you are using a mono space font and a mono space font is basically a font that has all the characters with.
The same amount of width and if you don't have a mono space font then the animation will not look good because we can see that this cursor is moving in a set amount of width so if the phone.
Fonts.google.com right here i'm in phones.google.com and you can go over here to categories and select just the mono space category so i'll just uncheck all of this.
And now we can see that only the mono space phones are displayed over here so let's scroll down and let's find the font that looks good i think i have used this font for our.
Design so let's select this and let's go ahead and select this style and here we can see we have the selected family if you don't see this you can just click on this button right here.
Called view your selected families and then you can go ahead and copy this link so i'll just copy this from here and let's go back to our vs code and let's create our necessary files so.
First of all let's create an html file so let's click on new file and i'll just name it index.html and we also need to have a css file so let's create a new file i'll just name.
It style.css Wesdigital
And we also need to have a javascript file i'll just name it main.js right now let's go to our index.html file and in vsco you have the shortcut.Where you can just press exclamation and press tab and you will have this basic html5 code now let's go ahead and link our css file so i'll just type link and press tab and.
In the editor i'll just type style.css and here on the body i'll just link our javascript file so just type script colon src and press tab and in the src i'll start main.js.
And here in the head section we will paste the link of the phone so we have already copied this link from here and let's paste it over here right now let's start with the markup of.
Our design so if we go back to our design here we can see we have this text over here at the top and then we have this text over here so i'll just create a division of the.
Class of typewriter effect container and in that we will have an h2 for the heading here i'll just type hi i am.
And then we need to have all the text that we need to animate so for that we'll create a span and we'll give it a class of typing effect or typewriter effect.
And in that we will have three paragraphs for three text so i'll just create a paragraph and we will have a class of text one for the first text.
And here let's type designer and i'll just duplicate this two more times and for the next one we will have web developer.
And i'll just change the class to text
To and then we have text three and here i'll just type app designer you can go ahead and add whatever you.Want over here now let's open this in a browser so i have this extension called live server installed in vs code so you can just search for live server over here and install it and once you do that.
You can just right click over here in the html and click on open with live server and here we can see our design is opened in the browser all right now let's go to.
Our style.css file and let's start styling this the first thing we will do is we'll just remove the margin from the body so i'll just type body.
And margin of zero and now let's target the container division which is called typewriter effect container so let's type type.
Writer effect container and we'll set the width to 100 percent and the height to 100 report height and let's add a background color and see whether it is being applied.
So here we can see we have this width and height now we can see this margin over here at the top because of the heading so i'll just type typewriter effect.
Container h2 and i'll just set the margin to zero right now we don't have any margin at the top right now let's bring it to the center.
So i'll just type display of flex and align items to the center and we also need to have these elements one below the other so i'll just have flex direction and set it to column.
And now we also need to set justify content to the center and we need to remove this align items because we have changed the direction right now it is in the center vertically.
Right now let's add a padding of 32 pixels and now we can see that the padding is also added to the heading and the width so for that we can just type box sizing.
And set it to border box and now we can see everything looks all right right now let's remove this background color from here and let's set the font size of the.
Heading to 40 pixels and we will set the phone family to the font that we just.
Linked over here in the html so it is called sharetech mono so i'll just add the font family over here in the container so i'll just have font family and here we'll type share.
Tech mono and as a backup phone we'll just type mono space right now for the color of the text i'll just type.
Ff2323 or that's it with the heading now let's go ahead and start styling these three text over here so let's type typewriter effect.
Because that's the class that we have given for this span over here and we need to select all the paragraphs inside the span so let's type typewriter effect p.
And let's set the font size to 50 pixels the font is not being added so let's see what's the problem we have this typo.
Over here typewriter we need to add an e right now we can see that the style is applied over here right now let's set the font weight to 900.
Right now the next thing we need to do is we need to set the same position for all this text over here so for that we need to select the container division which is.
Typewriter effect and we need to set the position of this to relative so that we can position this paragraph relative to this typewriter effect so.
Here in the paragraph you need to type position absolute and we'll set the left hand the top position to zero so that we will have the same position for all this text.
Now we can see that all the three texts are displayed over here at the same time so i'll just type opacity and set it to zero and we will add a class called active to.
This paragraph and whenever we have the active class we will display the text so i'll just type typewriter effect p dot active.
And let's set the opacity to one now let's go back to our html and for one of this paragraph i'll just add a class of active and now we can see that the first text.
Is displayed over here now if you remove this active class from here and if we add it to the next text we can see that the next paragraph is displayed over here in the same way we.
Have for the last paragraph and i think we have a lot of margin between these two elements so let's go back to the style.css and here.
I'll just set the margin to zero i think it's a bit too less so i'll just have margin top of let's say 20 pixels and that looks all right all right.
That's it with the design of our page now in the next video we will add the typewriting effect and also switch the text using javascript so that's it for this video if you have any doubts you.