After a week of memorizing HTML and CSS tags, I decided to apply what I learnt. So I've built a TikTok Clone using HTML, CSS and a bit of Javascript. If you're a beginner in HTML and CSS, this is the perfect blog for you!
HTML:
<body>
<div class="app__videos">
<!-- video starts -->
<div class="video">
<video class="video__player" src="video1.mp4"></video>
<!-- sidebar -->
<div class="videoSidebar">
<div class="videoSidebar__button">
<span class="material-icons"> favorite_border </span>
<p>12</p>
</div>
<div class="videoSidebar__button">
<span class="material-icons"> message </span>
<p>23</p>
</div>
<div class="videoSidebar__button">
<span class="material-icons"> share </span>
<p>75</p>
</div>
</div>
<!-- footer -->
<div class="videoFooter">
<div class="videoFooter__text">
<h3>Harinivas P</h3>
<p class="videoFooter__description">Best Video Ever</p>
<div class="videoFooter__ticker">
<span class="material-icons videoFooter__icon"> music_note </span>
<marquee>Song name</marquee>
</div>
</div>
<img
src="https://static.thenounproject.com/png/934821-200.png"
alt=""
class="videoFooter__record"
/>
</div>
</div>
<!-- video ends -->
<!-- video starts -->
<div class="video">
<video class="video__player" src="video2.mp4"></video>
<!-- sidebar -->
<div class="videoSidebar">
<div class="videoSidebar__button">
<span class="material-icons"> favorite_border </span>
<p>12</p>
</div>
<div class="videoSidebar__button">
<span class="material-icons"> message </span>
<p>23</p>
</div>
<div class="videoSidebar__button">
<span class="material-icons"> share </span>
<p>75</p>
</div>
</div>
<!-- footer -->
<div class="videoFooter">
<div class="videoFooter__text">
<h3>Harinivas P</h3>
<p class="videoFooter__description">Best Video Ever</p>
<div class="videoFooter__ticker">
<span class="material-icons videoFooter__icon"> music_note </span>
<marquee>Song name</marquee>
</div>
</div>
<img
src="https://static.thenounproject.com/png/934821-200.png"
alt=""
class="videoFooter__record"
/>
</div>
</div>
<!-- video ends -->
</div>
<script>
const videos = document.querySelectorAll('video');
for (const video of videos) {
video.addEventListener('click', function () {
console.log('clicked');
if (video.paused) {
video.play();
} else {
video.pause();
}
});
}
</script>
</body>
CSS:
* {
margin: 0;
box-sizing: border-box;
}
html {
scroll-snap-type: y mandatory;
}
body {
color: white;
background-color: black;
height: 100vh;
display: grid;
place-items: center;
}
.app__videos {
position: relative;
height: 750px;
background-color: white;
overflow: scroll;
width: 100%;
max-width: 400px;
scroll-snap-type: y mandatory;
border-radius: 20px;
}
.app__videos::-webkit-scrollbar {
display: none;
}
.app__videos {
-ms-overflow-style: none;
scrollbar-width: none;
}
.video {
position: relative;
height: 100%;
width: 100%;
background-color: white;
scroll-snap-align: start;
}
.video__player {
object-fit: cover;
width: 100%;
height: 100%;
}
.videoSidebar {
position: absolute;
top: 48%;
right: 10px;
}
.videoSidebar .material-icons {
font-size: 28px;
cursor: pointer;
}
.videoSidebar__button {
padding: 20px;
text-align: center;
}
.videoFooter {
position: relative;
bottom: 150px;
margin-left: 20px;
color: white;
display: flex;
}
@keyframes spinTheRecord {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.videoFooter__record {
animation: spinTheRecord infinite 5s linear;
height: 50px;
filter: invert(1);
position: absolute;
bottom: 0;
right: 20px;
}
.videoFooter__text {
flex: 1;
}
.videoFooter__text h3 {
padding-bottom: 20px;
}
.videoFooter__icon {
position: absolute;
}
.videoFooter__ticker {
width: 400px;
display: flex;
align-items: center;
}
.videoFooter__ticker marquee {
height: fit-content;
margin-left: 30px;
width: 60%;
}
.videoFooter__description {
padding-bottom: 20px;
}
@media (max-width: 425px) {
.app__videos {
width: 100%;
height: 100%;
max-width: 100%;
border-radius: 0;
}
}
The Result will look like this:
(I couldn't take the full pic. The edges will look curved in the actual result.)
Full code: Github
The code might look difficult. But go through it with patience and you will surely understand it. More fun projects to come:)
Top comments (2)
Hello Harinivas,
You can actually host the website on github using GitHub pages to showoff your project or you can also use codepen
And the project looks great buddy!!
Thanks a lot bro :)