Here called show demo and if i click on that we have this pop-up displayed over here so this is the onboarding screen and this is basically a way for the user to.
Understand how the website works so here we can see we have some content displayed over here we have the heading and we have some text over here and we also have this image over here and.
Then we have this next button over here and if i click on that we go to the next step and here on the top we can see that we have the progress bar so this is the.
Second step and we have one more step to go so if i click on the next button we go to the next step and when we are in the last step we have this text change to finish and if i click on finish it.
Goes away and that is the onboarding screen of your website and we also have a skip button so if i click on this show demo button and if i go to the next screen now here we are on the second.
That provides a service or if you have an online tool like loan calculator or color generator or things like that you can use this onboarding screen to help the user.
Understand how your website works so let's get started now this is the first part of this design so in this video we will add the.
Html of this onboarding screen right so here i have opened up this folder called onboarding screen and i just opened it with vs code and then here we have this folder called images and in that we have.
These three images which we're going to use in our design so let's start by creating the necessary files so let's click on new file and we'll create an html file i'll just name it index.html.
Let's also create a css file i'll just name it style.css and we'll also create a javascript file let's name it main.js let's start with the index.html file so.
Here in vs code you have the shortcut Wesdigital
Where you can just press exclamation and press tab and you'll have this basic html5 code right here in the head tag i'll just.Link our css file so i'll just type link and press tab and in the edit values type style.css and in the body i'll just link the javascript file so i'll just type script.
Colon src and press tab and here in the src i'll just type main.js right now let's start with the markup of our design first of all let's create.
This button over here so for the button i'll just create a button and we'll give it a class of onboarding button and here i'll just tap show demo.
All right let's open this in the browser and let's see how it looks so i have this extension called live server installed in vs code so 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 we have the button displayed over here right now let's create the overlay so here we can see in.
Our original design if i click on this show demo button we have this dark overlay over this webpage and on top of that we have this onboarding screen and if i click on.
Skip we can see that the overlay is hidden so let's create a division for that i'll just create a division with the class of onboarding overlay.
Right now let's start with the actual content of the onboarding screen so let's create a division with the class of onboarding container and here i'll just create a division.
With a class of content for all the
Content and the first thing we will have is the skip button so let's create an anchor tag and here i'll just type.Skip and i'll also give it a class so let's give it a class of skip btn right now the next thing we will do is we'll create these dots over here.
So for that let's create a division with the class of dots and in that we'll create divisions with a class of dot for each of the dot.
So i'll just duplicate this two more times and for the first dot we will add a class called active so that it is highlighted over here.
Right now let's create a division of the class of steps and in that we will have all the steps so this is the first step so for each of the step we will have a.
Division of the class of step so let's create a division of the class of step and the first thing we need to have over here is this image so let's create a division of the class.
Of image and here i'll just add the image so if you go back to our file browser here in the images folder we have these three svg images so let's click on the.
First image and i'll just copy all of this code and let's paste it over here inside the image division and i'll just fold this svg.
Right after the image we need to have the heading so let's create an s3 for that and here let's tap step 1 you can add your own text over here and.
Then we need to have a paragraph so let's create a paragraph tag and i'll just copy this text and let's paste it over here all right that's it with the first step.
So let's copy this step division from here and let's paste it two more times over here and we'll just change the heading and.
The images so i'll just delete this svg from here and let's go back to our images folder and let's select the second svg and i'll just copy this code.
And let's paste it over here and then for the heading we will just type step two and let's delete the third svg and let's go back to our images folder.
Let's select the third svg from here and let's copy this code and let's paste it over here now the last thing we need to do over here in this html is to add the next.
Button so we will add that outside the steps division so this is the step division and before that we have the steps division so let's go outside.
To this and here let's create the next button so let's create a button and let's give the class of next ptn and here i'll just tap next.
Right now let's go to our design and we can see that all the elements are displayed over here we have the show demo button we have the skip button we have the images the heading the text.
And we also have the next button so that's basically it with the html of the onboarding screen now in the next video we will add the css and make it look like this and then in the next video we.
Will add some javascript and add all the functionality for this onboarding screen alright so that's it for this video if you have any doubts you can ask in the comments below and if you like this.
Video please click on the like button and subscribe to the channel to get the latest video updates thanks a lot for watching have a nice day .