Platforms so for example on instagram you can see these types of stories and here we can see we have all these stories over here and if i scroll to the right we can see there are more stories.
And if i click on any of these stories we can see that it is displayed over here in full screen mode and after some time it goes on to the next story and we can also click on the next and.
The previous buttons to go to the next and the previous stories and we also have the title of the story displayed over here and you can also add additional information over here like.
This link over here so i'll show you how to do that as well and if i click on this close button it goes back to this view right here so if i click on any of these stories that.
Story will be displayed and we can go to the next and the previous stories so this is what we're going to design in this tutorial series using html css and javascript.
We have width of 100 for this title and we have some changes in the design so let's get started .
All right here i have this folder called stories and i just opened it with vs code and i also have this folder called images and in that we have all these images.
So we have a thumbnail image and a png of the image so this is the full screen image and we have eight images with thumbnail and the full images right now let's.
Start by creating an html file so let's click on new file and we'll just name it index.html and we also need to have a css file so let's create a new file.
And i'll just name it style.css and we'll also create a javascript file i'll just name it main.js let's start with the index.html file and in vs code you have the shortcut where you can just.
Press exclamation and press tab and Wesdigital
You'll have this basic html5 code and here i'll just link the css file so i'll just type link and press tab and in the hr file just type style.css and in the.Body i'll just link the javascript file so just type script and in the src i'll just type main.js right now for all these stories uh we will create a container division so.
Let's create a division with the class of stories container and in that for each of these stories we'll just create a division of the class of content.
And in the content we will have the image so i'll just create an img tag and in the src i'll just type images forward slash and i will just type one hyphen thumb.
Dot png right now let's open this in our browser and let's see how it looks so i have this extension called live server installed in vs code so once you install that you can just right click over here.
In the html and click on open with live server and here we can see that our image is displayed over here in the browser now in the same way we need to have a lot.
More images so here we can see we have eight images over here so i'll just go back to our html and i'll just copy this and paste it seven more times.
And i'll just change the image urls so for the second one i'll just type two hyphen thumb dot png and then we have three and then we have four and five six.
Seven and eight now we are directly adding these images over here for now but later on we will add this using javascript so the number of the content divisions will depend on.
How many images we have in the
Javascript array but for now we'll just keep it like this so that we can style it in the css and.This is with the storage container division now let's write the html for the full screen so here we can see in full screen we have the image the left and the right.
Arrows and then we have this title and then we have this close button so let's go back and let's create a division with a class of story full.
And in this will create a division of the class of content and in that the first thing we need to have is the close button so let's create a.
Division of the class of closed btn and let's add the image of close icon over here so for that we'll just use hero icons so you can just go to heroicons.com and.
Just search for the icon over here so let's type close and now let's click on copy svg and let's go back and let's paste the svg over here.
Now we need to change the color of this svg to white so let's change the stroke color and let's change it to white and now the next thing we need to have is the left arrow so let's create a.
Division with the class of left arrow and let's go back and let's type left over here and let's copy the svg of chevron left and let's paste it over here.
And here also i'll just change the color to white and the next thing we need to have is the image so let's tap img and here i'll just type images forward.
Slash one dot png so this is the full image and then we will have the right arrow so let's create a division with the class of right arrow.
And let's go back and here i'll just type right and let's copy this chevron right now let's paste it over here and we'll also change the color to white.
Now the last thing we need to have is the title so let's create a division of the class of title and here i'll just type test title right now let's go back to our website.
And here you can see all the images are displayed over here and we also have the full screen image over here we also have the title displayed over here and we also have the.
Next and the previous arrows but since they are white in color we cannot see it over here so that's basically it with the html of our story's design and that's it for.
This video in the next video we will continue styling this and we'll add some css and make it look better so 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 this channel to get the latest video updates thanks a lot for watching have a nice day .