Up next in 10
Build a Tiktok Short Video UI Clone in Browser Using HTML5 CSS3 & Javascript
608 views
Mar 12, 2025
Buy the full source code of application here: https://procodestore.com/index.php/product/build-a-tiktok-short-video-ui-clone-in-browser-using-html5-css3-javascript/ Visit my Online Free Media Tool Website https://freemediatools.com/ Buy Premium Scripts and Apps Here: https://procodestore.com/ Welcome Folks My name is Gautam and Welcome to Coding Shiksha a Place for All Programmers. You can learn Web Development and Programming Tutorials. Donate to Our Youtube Channel at : https://www.instamojo.com/@geekygautam1997 Subscribe for more Videos: https://www.youtube.com/channel/UCR6d0EiC3G4WA8-Rqji6a8g?sub_confirmation=1
View Video Transcript
0:00
[Applause]
0:01
[Music]
0:05
uh hello friends today in this tutorial
0:07
we will be building a tick tock short
0:09
video ui kind of an application inside
0:11
the browser so basically you can see
0:13
here this is the ui that you see inside
0:16
short videos so basically you have
0:18
installed various apps such as tick tock
0:20
or you have used it in the past
0:23
so
0:24
basically this is a ui that all these
0:26
apps uses instagram short video as well
0:29
facebook short video as well
0:31
so you can see a vertical video
0:33
like structure is there so this is a
0:35
vertical video which is playing here
0:37
basically it is called as shorts or
0:40
short video
0:42
so
0:42
we will try to replicate this structure
0:44
here
0:46
you can now see here this is the
0:48
menu that you see
0:49
the vertical menu that you see this is
0:51
the home section discover section
0:54
this is the
0:56
plus icon that you see in box me
0:58
then there is this social icons which
1:00
are you seeing here you can like this
1:02
you can see if i like this the value
1:04
changes and it changes to heart here if
1:06
you want to see the comments which are
1:08
made on this vertical video you can
1:10
click it and now inside this pop-up
1:12
model window all the comments are
1:14
displayed here 15 comments you can see
1:17
the profile picture of the username name
1:19
of the picture
1:20
post it the time here one minute oh and
1:22
actual comment
1:24
you can scroll down as you can see here
1:26
so you can have as many comments
1:28
displaying here so obviously in the back
1:30
end you will display all the comments
1:32
from the database you will obviously
1:34
connect this application to a database
1:37
but this is just a ui user interface it
1:39
is not a whole application we are just
1:41
statically showing this vertical video
1:43
from a url you can see
1:45
if i show the copy image address this is
1:47
a
1:49
you can see it is having
1:51
we are just displaying this from a url
1:54
so basically it's a design that i wanted
1:56
to show you how to make this design
1:58
inside html css and somewhat javascript
2:01
for displaying this video and handling
2:03
this
2:04
if you also see this is the progress
2:06
part you can handle the video here
2:08
it's a seven second video we are just
2:10
controlling it using this
2:13
progress bar you can see here
2:15
you can even share this comment as you
2:17
can now see
2:18
all these interactions we are doing this
2:20
using the javascript so we will try to
2:23
replicate this user design of tick tock
2:25
short video or shorts you may say inside
2:28
the browser using html css and
2:30
javascript if you are watching it for
2:32
the very first time guys please hit the
2:34
like button subscribe the channel
2:36
i have given all the source code in the
2:37
live chat in the pinned comment you can
2:39
get all the source code i have written a
2:41
complete blog post on my tutorial
2:43
website codingsection.com so this is the
2:45
source code so only a single index.html
2:48
file is required for this application so
2:50
simply you can go it and copy paste all
2:53
the source code so let me just now start
2:55
it
2:56
by building this tick tock from scratch
3:00
so here inside my visual studio code
3:02
text editor guys here we will
3:06
show a
3:07
short little preview here you can now
3:09
see
3:11
so it is displaying it right here inside
3:13
the
3:14
visual studio code itself
3:17
first of all we will make this interface
3:19
step by step guys so we will make
3:21
basically make a file which is
3:23
ticktock.html
3:25
so
3:26
you can now see
3:31
so basically here guys what we will say
3:34
is that
3:35
we also need to show the preview
3:38
so we can resize the windows accordingly
3:47
let me close this
3:49
so
3:50
here we will be giving a title to it of
3:53
tick tock
3:54
ui flow
3:57
and basically here guys now we will
3:59
start writing the code so we will style
4:01
this section step by step so first of
4:03
all we will write the html
4:06
so for the html it is very much simple
4:08
we will have a container base class
4:11
inside this we will have a overlay
4:14
section inside this you will have it how
4:17
to class
4:19
and again inside this we will have a
4:21
explain class
4:24
just rename this to div
4:28
so inside this explain
4:31
class guys you will have a ul
4:33
element unordered list
4:35
which will have a class of explained
4:38
list
4:40
and inside this we will have a life
4:41
which will have explained details
4:46
and here we will have a h2 tag
4:49
so here this will have the text likes
4:52
and here you will be giving a class to
4:54
it of explain
4:56
details
4:58
likes
5:04
so basically guys this is the whole
5:06
section here
5:13
if i
5:14
write all the html guys
5:16
html is not a problem here you can look
5:19
at the css line by line so let me just
5:21
copy paste the html here
5:26
simply copy this and try to paste it
5:29
this is just a static html and there
5:31
will be a video here
5:33
simply a video will be playing here
5:35
so you can see this is a video which is
5:37
playing here
5:38
so
5:39
this is static html we are you can see
5:42
we have this video tag and inside this
5:44
we have the source parameter which is
5:47
it is auto playing so you can even
5:48
disable this the video will not dis auto
5:51
play
5:52
so these are the attributes which we
5:54
have auto play so now the video will
5:56
auto play
5:59
it will loop through we also have the
6:01
loop option and it is muted by default
6:07
if i remove this
6:13
so there is no sound inside the video
6:15
that's why we muted this so this is a
6:17
section
6:19
and now basically we will style it using
6:21
css so we can simply say style.css so we
6:25
need to include the
6:27
style.css files just bring it
6:30
and basically now we will write the css
6:32
for this application so
6:34
at the very top of the application we
6:36
will basically write the base styles
6:39
which is using the root selector
6:42
so we will use the primary color
6:45
primary background color which will be
6:47
black color which tick-tock uses
6:51
which is black and also the range color
6:53
guys which will be equal to this color
6:56
f
6:58
5 9
7:01
this is a color and the bar color which
7:03
will be equal to
7:05
a linear gradient
7:09
so this would be the linear gradient it
7:11
uses
7:14
for the bar color
7:16
we paste it
7:18
so these are just the variables that we
7:20
are declaring guys which we can use it
7:21
inside the css primary color will once
7:24
again be white
7:27
and
7:29
the third color which we will use in
7:31
this image
7:32
9 f9
7:35
9 f9 f9
7:42
and we will use this font guys which is
7:45
poppins which will be
7:48
poppins
7:49
sans serif
7:54
so now we will go to the styling guys we
7:56
will first of all target the
7:59
html tag here
8:02
so we will increase the height to 100
8:08
so then guys what we will do is that we
8:11
will target the body element
8:13
basically here we will change the
8:15
background color to black
8:18
you can see the background is changed
8:21
we will say display is flex align items
8:24
to be
8:24
centered justify content to be center
8:29
height to be again 100
8:33
so if you now see
8:38
if you now open this inside your browser
8:43
so all the elements are being
8:45
horizontally aligned here you will now
8:46
see
8:47
so height is 100
8:52
so now you can see
8:57
so after this guys what we need to do is
8:59
that
9:00
we also need to remove the margin to
9:03
zero
9:05
and phone family we will change it to
9:09
the variable which is poppins
9:17
so you will see that all the margin is
9:19
removed here
9:25
so basically now we will target the base
9:28
class which is container inside the body
9:30
so inside this we will change the
9:33
background color to this color which
9:34
tick-tock uses which is
9:37
0
9:38
d0
9:39
d0d this is the black color which uses
9:43
height we will give as 570 pixel
9:46
width of 300 pixels so you can just
9:49
customize it
9:50
accordingly so now you can see this is
9:52
the color we have given here
10:00
so also we need to give a minimum width
10:02
to it also of
10:05
300 pixel
10:08
we will make the border radius to be
10:09
somewhat
10:11
18 pixel
10:13
overflow we will say hidden
10:17
position we will say is relative
10:22
so now you can see that
10:28
so after this guys you will now target
10:30
this video elements basically here we
10:32
need to say the height to be 100
10:38
the width to be also
10:40
100
10:41
an object fit to be
10:43
filled
10:47
so if you see
10:48
so now the video is resized here so it
10:51
is only showing
10:56
so right here
10:57
you can see here
11:00
so the video is resized so after this
11:02
what we need to say we need to target
11:04
the
11:06
top class which
11:07
we will say z index to 2
11:11
position to be absolute
11:16
and top we will say 20 pixel
11:19
and left we will say is 50
11:24
and
11:25
we will translate
11:27
x inside the minus 50 percent
11:35
so you can now see
11:40
so now basically we will target
11:43
the label we will change the font size
11:45
to 0.8
11:48
em
11:50
color
11:52
of the label we will change it to
11:54
this primary color which is black color
12:03
so again these classes which you see
12:06
if the label is active in this case we
12:08
also need to change its font weight
12:10
to 600
12:17
so then we need to
12:19
style this bottom section guys you can
12:21
see this is bottom section so for this
12:24
we will write this position to absolute
12:26
bottom zero
12:27
with you can now see this will appear in
12:29
the bottom position
12:37
so basically now we will target the
12:38
progress duration so progress duration
12:41
is the time that you see right here
12:44
this is a progress duration that you see
12:50
so if you do this
12:55
this is a progress duration and the
12:58
progress range we need to also style it
13:00
so basically this is the range that you
13:03
see here this is a range
13:07
so for this
13:09
the height will be three pixel
13:12
background color will be this one
13:15
cursor pointer
13:28
so this is the styling for the progress
13:30
part guys which is very much easy
13:50
so if you're watching it for the very
13:52
first time then please hit the like
13:54
button subscribe the channel as well
13:56
only six likes are there so first of all
13:58
hit the like button subscribe the
14:00
channel as well
14:02
so if you see here closely look at the
14:04
classes here so basically this is the
14:07
progress card class here
14:10
which is just bottom class so it has
14:12
these attributes here
14:14
then we have this progress range which
14:16
is this class
14:20
so and then we have these icon class
14:23
here which is this one
14:26
so each
14:27
in this we have a child element so each
14:30
this is having this icon
14:33
label
14:36
and an icon class
14:38
so this is a structure that you can see
14:44
each of these icons is having this icons
14:46
item plus
14:48
so here we are changing the display
14:49
property to flex here
14:52
and flex direction is column if you
14:54
change it to row
14:56
so it would look something like this
15:00
this needs to be called
15:16
so you can see that
15:18
so then we have
15:20
that song
15:21
so if you closely look this is the base
15:23
container class this comprises of all of
15:26
this
15:27
if i open this then we have the first
15:29
class which is this overlay class
15:35
so here you can change the background
15:36
color and
15:38
color of your choice
15:43
so here the styling is displayed to none
15:46
if i change this to block here
15:50
so basically what will happen now you
15:52
can now see
15:54
so it is having its own background color
15:56
if i say
15:59
change it to any color
16:03
so you can even change its background
16:05
color too
16:07
you can see here
16:08
basically it's a div element and it is
16:10
having a fixed height and a fixed
16:14
and a width 100 100
16:16
and z index is 99 so that the video will
16:20
be showing on top of it
16:23
so if you make it display to block so
16:26
this will also show
16:27
you can also change its background for
16:29
you so that's why
16:34
so if you're watching it for the very
16:36
first time guys please hit the like
16:37
button subscribe the channel as well so
16:39
this is a tick tock ui clone that we are
16:42
building here
16:43
so basically you will see that
16:50
so
16:51
the properties are listed here you can
16:53
now see the css property that we are
16:55
starting with position is absolute
16:57
z index if i change it to 0
17:00
so what will happen
17:03
if i change it to
17:06
auto sorry one
17:08
if i change it to inherit
17:12
if i change it to revert
17:15
and set
17:20
9.99
17:21
so height you can see it's 100 if i make
17:23
it 50 percent
17:34
50 percent i make it
17:36
so now you can see only it is
17:42
let me show it
17:44
you change this value to block
17:54
so if you change its background color
18:02
so this is a based base element guys
18:04
which is holding all the stuff
18:06
so that's why we are providing 100
18:08
percent height 100 width
18:12
z index is 9.99 because the video is
18:14
showing on top of this overlay element
18:16
that's why reside index is 9.99 magician
18:20
is absolute
18:21
and here the background color is
18:23
you can choose any color of your choice
18:25
but it will not matter because it is not
18:28
shown
18:29
so inside this base element we have this
18:31
class which is called as
18:33
how to
18:37
if you see the how to class
18:44
so this class is also not showing inside
18:47
this we have this class
18:49
which is explained
18:57
inside this ul element we have this li
19:00
tag
19:01
explain details
19:03
and inside this we have this
19:13
so if you see the color
19:22
color is red here
19:29
then we have a span tag here
19:37
if you refresh it
19:41
so this is the overlay section guys you
19:43
can now see
19:45
that i'm talking about so basically
19:47
whenever you load this page the very
19:49
first thing that you see this is the
19:51
things that you see explain details
19:53
this is explained section so whenever
19:55
this
19:56
video opens it for the very first time
19:58
this will not play so you need to click
20:00
this got it button first of all
20:02
so that's why it is showing here
20:08
so click the
20:09
and then this is icon span icon to set a
20:13
like on the video
20:16
then we have the second details which is
20:18
comments so explain details description
20:22
click the
20:24
icon to view comments
20:26
then we have the actual video
20:29
so explain details head explain video
20:37
so then we have lastly this button which
20:40
has got it so when the user click this
20:42
button got it then this section closes
20:46
so if you see here
20:49
so now this is not no longer displaying
20:52
it so
20:52
now we need to come to the
20:56
this section which is
21:01
this section here
21:06
so basically this is a comment section
21:08
which is having 15 comments so if you
21:10
hit this
21:11
we are having this section here
21:14
basically it's a pop-up window which
21:15
appears here whenever you click that
21:18
so we have attaching two call classes to
21:20
it comments container and comments
21:21
active
21:23
inside this head portion you are seeing
21:25
this label which is 15 comments
21:27
and there is the icon which is cross
21:29
icon so if you click this icon the
21:31
window closes like this
21:35
and inside this
21:36
div tag we are showing the actual
21:38
comments
21:39
so each comment is having this class
21:41
which is called as comments item if you
21:44
see we have given padding to it
21:46
so if here is
21:48
let's suppose
21:51
go to 0 you can say 40 here
21:58
this is forty
22:00
zero
22:11
so you can see the padding is
22:13
10 pixel
22:16
you can change it to 20 pixel
22:20
30 pixels you can now see it is having
22:23
so much space out there
22:25
10 pixels like this
22:32
so totally you can customize this layout
22:34
guys 30 pixel
22:36
so
22:38
10 pixel it's looking great
22:40
so this is zero
22:43
the second one
22:59
so this is the padding from the left and
23:01
the right position so if you want to
23:02
give zero so there will be no padding
23:06
so if you give here let's suppose so 100
23:08
pixel
23:09
there will be a lot of padding you can
23:11
now see
23:13
30 pixel like this
23:15
26 pixel
23:18
so that's why we are giving 0 here so we
23:20
don't need any sort of padding from the
23:22
left and the right position
23:29
so this is the padding from the top
23:32
position if you clearly see here
23:37
if you say one pixel
23:41
5 pixel so you need to clearly
23:43
understand the concept of css guys while
23:46
designing any layout so you need to
23:48
fully understand the concept of padding
23:50
and margin before you proceed
23:53
i also confused at one time what is
23:55
padding what is margin padding is
23:57
usually the space in between the
24:01
the padding is the space between the
24:03
border and the actual element
24:05
so
24:06
if you see
24:08
if we increase to 10 pixel
24:11
zero
24:14
is a 10 pixel
24:16
this is the top padding
24:19
again say 10 pixel again
24:28
i see here 100 pixel
24:30
this is padding from the
24:33
left position i think
24:36
if i put here 0
24:38
if i put 100 here so this is padding
24:41
from the
24:43
top position i think
24:45
if i also make it 0
24:48
if i put 100 here
24:55
500
24:56
seconds
25:02
so this is the actual
25:03
concept guys
25:06
this is the padding
25:08
each having this comments item plus
25:12
and inside this we have this common top
25:16
which is
25:20
i think you're understanding this so
25:22
first of all hit the like button
25:23
subscribe the channel as well if you're
25:25
watching it for the very first time
25:31
so
25:34
all the source code guys i have given in
25:36
the description or in the live chat
25:39
you can click this link and
25:41
go to it
25:46
so basically if you clearly see here
25:55
so this is a common top class and inside
25:58
this we have a span tag
26:00
which is having this class which is
26:02
common top logo
26:05
so this is the profile picture of the
26:07
user avatar image then we have the
26:09
actual comment
26:11
the username the user time
26:15
and the user comment
26:19
so same goes with all the things out
26:21
there
26:40
you
#Clip Art & Animated GIFs
#Flash-Based Entertainment
#Online Media
#Photo & Video Sharing
#Programming
#Social Network Apps & Add-Ons
#Video Sharing