DEV Community

Cover image for 1 project I did to master HTML and CSS as a beginner!
Harinivas
Harinivas

Posted on

1 project I did to master HTML and CSS as a beginner!

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>
Enter fullscreen mode Exit fullscreen mode

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;
    }
  }
Enter fullscreen mode Exit fullscreen mode

The Result will look like this:
(I couldn't take the full pic. The edges will look curved in the actual result.)
image
image

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)

Collapse
 
abhilearnstocode profile image
Abhii

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!!

Collapse
 
harinivas profile image
Harinivas

Thanks a lot bro :)