DEV Community

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

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

Harinivas
Learning web development and doing fun projects.
・3 min read

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:)

Discussion (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 Author

Thanks a lot bro :)