Horizontal Scrollable Timeline Plugin - jTimeline

In this article, we will understand about the Horizontal Scrollable Timeline Plugin - jTimeline in detail with the help of an example. jTimeline plugin is a tiny, responsive, jQuery timeline plugin that generates a horizontal scrollable timeline from an HTML unordered list.
Following are the various examples of Horizontal Scrollable Timeline Plugin - jTimeline.
Example 1:

<! DOCTYPE html>
<html>
            <head>
                        <meta http-equiv = "Content-Type"
                                    content = "text/html; charset=UTF-8" />
                        <title> Example of Horizontal Scrollable Timeline Plugin - jTimeline </title>
                        <meta name = "description"
                                    content = "jQuery tooltip plugin" />
                        <meta content = "width=800, initial-scale=1"
                        name = "viewport" />
<script src = "https://code.jquery.com/jquery-3.5.1.min.js">
                        </script>                     
                        <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
•  {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h1 {
  position: relative;
  font-family: "Raleway", sans-serif;
  font-weight: 1300;
  font-size: 40px;
  color: white;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  text-align: center;
}
h2 {
   text-align: center;
  font-family: "Raleway", sans-serif;
  font-weight: 1300;
  font-size: 40px;
  color: white;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
button {
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
}
body {
  font: normal 16px/1.5 "Helvetica Neue", sans-serif;
  background: #666;
  color: #fff;
}
.circle:hover {
  position: relative;
  -webkit-transition: height .25s ease, width .25s ease;
  transition: height .25s ease, width .25s ease;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.circle {
  height: 60px;
  width: 60px;
}
.circle:hover:before
 {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
bottom: 0;
  left: 0;
  border-radius: 50%;
  border: 1px solid red;
}
.circle:hover:after {
content: ' ';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
bottom: 0;
  left: 0;
  border-radius: 50%;
  border: 1px solid red;
}
.circle:hover:before {
  -webkit-animation: ripple 1s linear infinite;
  animation: ripple 1s linear infinite;
}
.circle:hover:after {
  -webkit-animation: ripple 1s linear 0.5s infinite;
  animation: ripple 1s linear 0.5s infinite;
}
.circle:before {
  -webkit-animation: none;
  animation: none;
}
.circle:after {
  -webkit-animation: none;
  animation: none;
}
@-webkit-keyframes ripple {
  0% {-webkit-transform:scale(1); }
  75% {-webkit-transform:scale(2.75); opacity: 1; }
  100% {-webkit-transform:scale(4); opacity: 0; }
}
@keyframes ripple {
  0% {transform:scale(1); }
  75% {transform:scale(2.75); opacity: 1; }
  100% {transform:scale(4); opacity: 0;}
}
.timeline {
  white-space: nowrap;
  overflow-x: hidden;
}
.timeline > ol {
  font-size: 0;
  width: 100vw;
  padding: 190px 0;
  transition: all 1s;
}
.timeline > ol > li {
  position: relative;
  display: inline-block;
  list-style-type: none;
  width: 160px;
  height: 3px;
  background: #fff;
}
.timeline > ol > li:last-child {
  width: 250px;
}
.timeline > ol > li:not(:first-child) {
  margin-left: 14px;
}
.timeline > ol > li:not(:last-child) span.show-info {
  content: ' ';
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  bottom: 0;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #F45B69;
}
.timeline > ol > li:not(:last-child) .just-date {
  position: absolute;
  height: auto;
  opacity: 1;
  right: -35px;
  top: -35px;
  z-index: -1;
}
.timeline > ol > li:nth-child(odd) .just-date {
  top: 14px;
}
.timeline > ol > li:nth-child(even) .just-date {
  top: -30px;
}
.timeline > ol > li:not(:last-child) .just-date p {
  font-size:.8rem;
  font-weight: normal;
}
.timeline > ol > li div.info-container {
  position: absolute;
  left: calc(100% + 7px);
  width: 550px;
  padding: 15px;
  font-size: 1rem;
  white-space: normal;
  color: black;
  background: white;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.timeline > ol > li div.info-container::before {
  content: ' ';
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
}
.timeline > ol > li:nth-child(odd) div.info-container {
  top: -16px;
  transform: translateY(-100%);
  border-radius: 20px 0;
}
.timeline > ol > li:nth-child(odd) div.info-container::before {
  top: 100%;
  border-width: 8px 8px 0 0;
  border-color: white transparent transparent transparent;
}
.timeline > ol > li:nth-child(even) div.info-container {
  top: calc(100% + 16px);
  border-radius: 0 20px;
}
.timeline > ol > li:nth-child(even) div.info-container::before {
  top: -8px;
  border-width: 8px 0 0 8px;
  border-color: transparent transparent transparent white;
}
.timeline time:not(.date) {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 8px;
}
.timeline .arrows {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.timeline .arrows .arrow__prev {
  margin-right: 20px;
}
.timeline .disabled {
  opacity: .5;
}
.timeline .arrows img {
  width: 45px;
  height: 45px;
}
nav.archive-links {
  background-color: #fff;
  box-sizing: content-box;
  padding: 0;
}
nav.archive-links ol.ol-events {
  counter-reset: li;
  overflow: hidden;
  border: 1px solid #d9d9d9;
  margin: 0;
  padding: 0px;
}
nav.archive-links ol.ol-events li {
  float: left;
  clear: left;
  width: 100%;
  margin: 0;
  list-style: none;
}
nav.archive-links ol.ol-events {
  display: block;
}
nav.archive-links ol.ol-events li {
  display: block;
}
 
nav.archive-links ol.ol-events li a {
  display: block;
}
 
nav.archive-links ol.ol-events li a {
  font-size: 11px;
  height: 29px;
  position: relative;
  text-decoration: none;
}
nav.archive-links ol.ol-events li .main-image:after {
  color: #b7b7b7;
  content: counter(li, decimal-leading-zero);
  counter-increment: li;
  font-size: 14px;
  line-height: 29px;
  height: 29px;
  width: 30px;
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
  font-weight: 100;
  letter-spacing: 1px;
}
nav.archive-links ol.ol-events li .no-main-image:after {
  color: #b7b7b7;
  content: counter(li, decimal-leading-zero);
  counter-increment: li;
  font-size: 14px;
  line-height: 29px;
  height: 29px;
  width: 30px;
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
  font-weight: 100;
  letter-spacing: 1px;
}
nav.archive-links ol.ol-events li .no-main-image:after {
  color: #b7b7b7;
  content: counter(li, decimal-leading-zero);
  counter-increment: li;
  font-size: 14px;
  line-height: 29px;
  height: 29px;
  width: 30px;
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
  font-weight: 100;
  letter-spacing: 1px;
}
nav.archive-links li .main-image,
nav.archive-links li .no-main-image {
  float: left;
  margin-right: 0.5em;
  width: 30px;
  height: 30px;
  background: #e6e6e6;
}
nv.archive-links li .main-image.event-one {
  background: yellow;
}
nav.archive-links li .no-main-image.event-one {
  background: yellow;
}
nav.archive-links li .main-image.event-two {
  background: orange;
}
nav.archive-links li .no-main-image.event-two {
  background: orange;
}
nav.archive-links li .main-image {
  background-size: cover;
  background-position: center center;
}
nav.archive-links a:link,
nav.archive-links a:visited,
nav.archive-links a:hover,
nav.archive-links a:active {
  color: #000000;
}
nav.archive-links ol.ol-events li a:hover .main-image:after {
  color: #2690d8;
}
nav.archive-links ol.ol-events li a:hover .no-main-image:after {
  color: #2690d8;
}
nav.archive-links ol.ol-events li a:active .main-image:after {
  color: #777;
}
nav.archive-links ol.ol-events li a:active .no-main-image:after {
  color: #777;
}
nav.archive-links ol.ol-events li.active a .main-image:after {
  color: #777;
}
nav.archive-links ol.ol-events li.active a .no-main-image:after {
  color: #777;
}
nav.archive-links li + li {
  border-top: 1px solid #d9d9d9;
}
nav.archive-links li span {
  display: block;
  line-height: 1em;
}
nav.archive-links span.link-title {
  letter-spacing: 1px;
  text-transform: uppercase;
  padding-top: 0.3em;
  font-size: 1em;
}
nav.archive-links span.link-excerpt {
  color: #c3c3c3;
}
 @media screen and (max-width: 599px) {
  .timeline ol,
  .timeline ol li {
    width: auto;
  }
  .timeline ol {
    padding: 0;
    transform: none !important;
  }
 
  .timeline ol li {
    display: block;
    height: auto;
    background: transparent;
  }
  .timeline ol li:first-child {
    margin-top: 25px;
  }
  .timeline ol li:not(:first-child) {
    margin-left: auto;
  }
  .timeline ol li div {
    width: 94%;
    height: auto !important;
    margin: 0 auto 25px;
  }
  .timeline ol li div {
    position: static;
  }
  .timeline ol li:nth-child(odd) div {
    transform: none;
  }
  .timeline ol li:nth-child(odd) div::before {
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: none;
    border-left: 1px solid white;
    height: 25px;
  }
  .timeline ol li:nth-child(even) div::before {
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: none;
    border-left: 1px solid white;
    height: 25px;
  }
  .timeline ol li:last-child,
  .timeline ol li:nth-last-child(2) div::before,
  .timeline ol li:not(:last-child)::after,
  .timeline .arrows {
    display: none;
  }
}
</style>
<h1> Example </h1>
<h2> Horizontal Scrollable Timeline Plugin - jTimeline </h2>
<section class="timeline">
  <ol>
    <li>
      <div class="just-date">
        <p>Ago 2 2018</p>
      </div>
      <span class="show-info circle"></span>
      <div class="info-container">
        <time>Ago 2</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
              <li>
                <a href="#">
                  <div class="main-image"></div>
                  <span class="link-title">Event </span>
                  <span class="link-excerpt"><time class="date" datetime="November 05 2012">Nov 05, 2017</time> / No Comments</span>
                </a>
              </li>
    <li>
      <div class="just-date">
        <p>Ago 5 2018</p>
      </div>
      <span class="show-info circle"></span>
      <div class="info-container">
        <time>Ago 5</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
            </ol>
          </nav>
        </div>
      </div>
    </li>
    <li>
      <div class="just-date">
        <p>Ago 8 2018</p>
      </div>
      <span class="show-info circle"></span>
      <div class="info-container">
        <time>Ago 8</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
              <li>
                <a href="#">
                  <div class="main-image"></div>
                  <span class="link-title">Event </span>
                  <span class="link-excerpt"><time class="date" datetime="November 05 2012">Nov 05, 2017</time> / No Comments</span>
                </a>
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </li>
    <li class="today-mark">
      <div class="just-date">
        <p>Today</p>
      </div>
      <span class="show-info show-today"></span>
      <div class="info-container">
        <time>Today date</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
              <li>
                <a href="#">
                  <div class="main-image"></div>
                  <span class="link-title">Event any</span>
                  <span class="link-excerpt"><time class="date" datetime="November 12 2012">Nov 12, 2017</time> / No Comments</span>
                </a>
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </li>
    <li>
      <div class="just-date">
        <p>Ago 10 2018</p>
      </div>
      <span class="show-info circle"></span>
      <div class="info-container">
        <time>Ago 10</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
            
    <li>
      <div class="just-date">
        <p>Ago 12 2018</p>
      </div>
      <span class="show-info circle"></span>
      <div class="info-container">
        <time>Ago 12</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
              <li>
                <a href="#">
                  <div class="main-image event-two"></div>
                  <span class="link-title">Event any</span>
                  <span class="link-excerpt"><time class="date" datetime="November 12 2012">Nov 12, 2017</time> / No Comments</span>
                </a>
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </li>
    <li>
      <div class="just-date">
        <p>Ago 17 2018</p>
      </div>
      <span class="show-info circle"></span>
      <div class="info-container">
        <time>Ago 17</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
              <li>
                <a href="#">
                  <div class="main-image event-two"></div>
                  <span class="link-title">Event any</span>
                  <span class="link-excerpt"><time class="date" datetime="November 12 2012">Nov 12, 2017</time> / No Comments</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="main-image event-one"></div>
                  <span class="link-title">Event </span>
                  <span class="link-excerpt"><time class="date" datetime="November 05 2012">Nov 05, 2017</time> / No Comments</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="main-image"></div>
                  <span class="link-title">Other event</span>
                  <span class="link-excerpt"><time class="date" datetime="November 01 2012">Nov 01, 2017</time> / No Comments</span>
                </a>
              </li>
 
            </ol>
          </nav>
        </div>
      </div>
    </li>
    <li>
      <div class="just-date">
        <p>Ago 21 2018</p>
      </div>
      <span class="show-info circle"></span>
      <div class="info-container">
        <time>Ago 21</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
              <li>
                <a href="#">
                  <div class="main-image event-two"></div>
                  <span class="link-title">Event any</span>
                  <span class="link-excerpt"><time class="date" datetime="November 12 2012">Nov 12, 2017</time> / No Comments</span>
                </a>
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </li>
    <li>
      <div class="just-date">
        <p>Ago 24 2018</p>
      </div>
      <span class="show-info circle"></span>
      <div class="info-container">
        <time>Ago 24</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
              <li>
                <a href="#">
                  <div class="main-image event-two"></div>
                  <span class="link-title">Event any</span>
                  <span class="link-excerpt"><time class="date" datetime="November 12 2012">Nov 12, 2017</time> / No Comments</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="main-image event-one"></div>
                  <span class="link-title">Event </span>
                  <span class="link-excerpt"><time class="date" datetime="November 05 2012">Nov 05, 2017</time> / No Comments</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="main-image"></div>
                  <span class="link-title">Other event</span>
                  <span class="link-excerpt"><time class="date" datetime="November 01 2012">Nov 01, 2017</time> / No Comments</span>
                </a>
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </li>
    <li>
      <div class="just-date">
        <p>Ago 26 2018</p>
      </div>
      <span class="show-info circle"></span>
      <div class="info-container">
        <time>Ago 26</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
            </ol>
          </nav>
        </div>
      </div>
    </li>
    <li>
      <div class="just-date">
        <p>Ago 29 2018</p>
      </div>
      <span class="show-info circle"></span>
      <div class="info-container">
        <time>Ago 29</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
              <li>
                <a href="#">
                  <div class="main-image event-two"></div>
                  <span class="link-title">Event any</span>
                  <span class="link-excerpt"><time class="date" datetime="November 12 2012">Nov 12, 2017</time> / No Comments</span>
                </a>
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </li>
    <li>
      <div class="just-date">
        <p>Ago 30 2018</p>
      </div>
      <span class="show-info circle"></span>
      <div class="info-container">
        <time>Ago 30</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
              <li>
                <a href="#">
                  <div class="main-image event-two"></div>
                  <span class="link-title">Event any</span>
                  <span class="link-excerpt"><time class="date" datetime="November 12 2012">Nov 12, 2017</time> / No Comments</span>
                </a>
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </li>
    <li>
      <div class="just-date">
        <p>Ago 31 2018</p>
      </div>
      <span class="show-info circle"></span>
      <div class="info-container">
        <time>Ago 31</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
              <li>
                <a href="#">
                  <div class="main-image event-two"></div>
                  <span class="link-title">Event any</span>
                  <span class="link-excerpt"><time class="date" datetime="November 12 2012">Nov 12, 2017</time> / No Comments</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="main-image event-one"></div>
                  <span class="link-title">Event </span>
                  <span class="link-excerpt"><time class="date" datetime="November 05 2012">Nov 05, 2017</time> / No Comments</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="main-image"></div>
                  <span class="link-title">Other event</span>
                  <span class="link-excerpt"><time class="date" datetime="November 01 2012">Nov 01, 2017</time> / No Comments</span>
                </a>
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </li>
</li>
  </ol>
</section>
<script>
 (function() {
  const timeline = document.querySelector(".timeline ol"),
    elH = document.querySelectorAll(".timeline li > div"),
        spanTriggers = document.querySelectorAll(".show-info"),
    arrows = document.querySelectorAll(".timeline .arrows .arrow"),
    arrowPrev = document.querySelector(".timeline .arrows .arrow__prev"),
    arrowNext = document.querySelector(".timeline .arrows .arrow__next"),
    firstItem = document.querySelector(".timeline > ol > li:first-child"),
    lastItem = document.querySelector(".timeline > ol > li:last-child"),
    xScrolling = 280,
    disabledClass = "disabled";
  window.addEventListener("load", init);
  function init() {
    setEqualHeights(elH);
    animateTl(xScrolling, arrows, timeline);
    setSwipeFn(timeline, arrowPrev, arrowNext);
    setKeyboardFn(arrowPrev, arrowNext);
    setShowDetail (spanTriggers);
  }
    function setShowDetail(el) {
    for (let i = 0; i < el.length; i++) {
      el[i].addEventListener('mouseover', function (e) {
        e.target.nextElementSibling.style.opacity = 1;
      });
      el[i].addEventListener('mouseout', function (e) {
        e.target.nextElementSibling.style.opacity = 0;
      });
    }
  }
  function setEqualHeights(el) {
    let counter = 0;
    for (let i = 0; i < el.length; i++) {
      const singleHeight = el[i].offsetHeight;
      if (counter < singleHeight) {
        counter = singleHeight;
      }
    }
    for (let i = 0; i < el.length; i++) {
      el[i].style.height = `${counter}px`;
    }
  }
  function isElementInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }
  function setBtnState(el, flag = true) {
    if (flag) {
      el.classList.add(disabledClass);
    } else {
      if (el.classList.contains(disabledClass)) {
        el.classList.remove(disabledClass);
      }
      el.disabled = false;
    }
  }
   function animateTl(scrolling, el, tl) {
    let counter = 0;
    for (let i = 0; i < el.length; i++) {
      el[i].addEventListener("click", function() {
        if (!arrowPrev.disabled) {
          arrowPrev.disabled = true;
        }
        if (!arrowNext.disabled) {
          arrowNext.disabled = true;
        }
        console.log(this);
        const sign = (this.classList.contains("arrow__prev")) ? "" : "-";
        if (counter === 0) {
          tl.style.transform = `translateX(-${scrolling}px)`;
        } else {
          const tlStyle = getComputedStyle(tl);
          const tlTransform = tlStyle.getPropertyValue("-webkit-transform") || tlStyle.getPropertyValue("transform");
          const values = parseInt(tlTransform.split(",")[4]) + parseInt(`${sign}${scrolling}`);
          tl.style.transform = `translateX(${values}px)`;
        }
        setTimeout(() => {
          isElementInViewport(firstItem) ? setBtnState(arrowPrev) : setBtnState(arrowPrev, false);
          isElementInViewport(lastItem) ? setBtnState(arrowNext) : setBtnState(arrowNext, false);
        }, 1100);
        counter++;
      });
    }
  }
  function setSwipeFn(tl, prev, next) {
    const hammer = new Hammer(tl);
    hammer.on("swipeleft", () => next.click());
    hammer.on("swiperight", () => prev.click());
  }
  function setKeyboardFn(prev, next) {
    document.addEventListener("keydown", (e) => {
      if ((e.which === 37) || (e.which === 39)) {
        const timelineOfTop = timeline.offsetTop;
        const y = window.pageYOffset;
        if (timelineOfTop !== y) {
          window.scrollTo(0, timelineOfTop);
        }
        if (e.which === 37) {
          prev.click();
        } else if (e.which === 39) {
          next.click();
        }
      }
    });
  }
})();
</script>
</body>
</html>
Explanation:
In the above example, we have created a horizontal scrollable timeline plugin. In this, we can scroll through the events by clicking next/previous arrows in the timeline just like a list scroller.
Output:
Following is the output of this example.
Horizontal Scrollable Timeline Plugin - jTimeline
Next TopicSkype Chat jQuery Plugin
← prev next →
For Videos Join Our Youtube Channel: Join Now
Feedback

Send your Feedback to [email protected]
Help Others, Please Share

Learn Latest Tutorials

Splunk
SPSS
Swagger
Transact-SQL
Tumblr
ReactJS
Regex
Reinforcement Learning
R Programming
RxJS
React Native
Python Design Patterns
Python Pillow
Python Turtle
Keras
Preparation

Aptitude
Reasoning
Verbal Ability
Interview Questions
Company Questions
Trending Technologies

Artificial Intelligence
AWS
Selenium
Cloud Computing
Hadoop
ReactJS
Data Science
Angular 7
Blockchain
Git
Machine Learning
DevOps
B.Tech / MCA

DBMS
Data Structures
DAA
Operating System
Computer Network
Compiler Design
Computer Organization
Discrete Mathematics
Ethical Hacking
Computer Graphics
Software Engineering
Web Technology
Cyber Security
Automata
C Programming
C++
Java
.Net
Python
Programs
Control System
Data Mining
Data Warehouse
Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.
Website Designing
Website Development
Java Development
PHP Development
WordPress
Graphic Designing
Logo
Digital Marketing
On Page and Off Page SEO
PPC
Content Development
Corporate Training
Classroom and Online Training
Data Entry
Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
Duration: 1 week to 2 week
^{Like/Subscribe us for latest updates or newsletter}